@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;
	background-attachment:fixed;
	z-index:-1;
}

/*================================================   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================================================*/
@media(max-width:899px){
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:left;
	width:85%;
	max-width:750px;
	margin:auto;
}

.Hervorheben{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:30px;
	font-weight:700;
}

	.EyeCatch{
		height:100vh;
		background-image:url(1_BILDER/Hintergrund_Mobil2_dunkel.jpg);
		background-repeat:none;
		background-size:cover;
		background-position:0 0;
		vertical-align:middle;
	}

	.UeberUnsCatch,.StellenangeboteCatch{
		font-family: itc-avant-garde-gothic-pro, sans-serif;
		font-weight: 700;
		font-style: normal;
		padding-left:40px;
		padding-top:200px;
		color:#6F0D0D;
		font-size:45px;
	}

.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;
	margin-bottom:100px;
}

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;
}

#Team {
	display: flex;
	flex-direction: column; /* Stellt die Kinder untereinander dar */
	align-items: center; /* Zentriert die Kinder horizontal */
	margin:auto;
	gap: 20px; /* Abstand zwischen den Teammitgliedern */
	width: 90%;
}	

.TeammitgliederJohannes,.TeammitgliederMelissa,.TeammitgliederAmy{
		width:100%;
		height:auto;
		margin:auto;
		max-width:800px;
		display:flex;
		flex-direction:column;
		margin-top:25px;
		padding-bottom:25px;
}

.Johannes, .Melissa,.Amy{
		width:85%;
		max-width:400px;
		overflow:hidden;
		margin:auto;
		margin-top:25px;
		border:1px solid #AFAFAF;
		border-radius:9px;
		height:auto;
		background:rgba(255,255,255,.5);

	}

.BildJohannes, .BildMelissa,.BildAmy{
	height:400px;
	overflow:hidden;
	display:flex;
	margin:auto;
	margin-left:14%;
	padding-top:5px;
	text-align:center;
	justify-content:center;
	align-items:center;
}	
	
.Johannes h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:40px;
	margin-top:0px;
	padding-top:5px;
	color:antiquewhite;
	/*border-radius:5px;*/
	letter-spacing:2px;
}

.Melissa h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:40px;
	margin-top:0px;
	padding-top:5px;
	color:antiquewhite;
	/*border-radius:5px;*/
	letter-spacing:2px;	
	}	
	
.Amy h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:40px;
	margin-top:0px;
	padding-top:5px;
	color:antiquewhite;
	/*border-radius:5px;*/
	letter-spacing:2px;	
	}	
	
.Aufgaben{
	font-family: 'Bebas Neue', cursive;	
	height:40px;
	font-size:30px;
	padding-top:5px;
	margin-left:5%;
	margin-top:0px;
	margin-bottom:-20px;
	text-decoration:underline;
	}
	
.EinleitungStellenangebote{
		background-repeat:none;
		background-size:cover;
		background-position:0 0;
		vertical-align:middle;	
	}

#Stellenangebote {
	display: flex;
	flex-direction: column;
	align-items: center; /* Zentriert die Kinder horizontal */
	gap: 20px; /* Abstand zwischen den Teammitgliedern */
	width: 100%;
}	

.StellenangeboteAktuell{
	width:80%;
	display:flex;
	flex-direction:column;
	padding-left:0px;
	padding-right:0px;
	margin-top:25px;
	margin-bottom:150px;
	margin:auto;
	height:auto;
	border:1px solid #AFAFAF;
	border-radius:9px;
}	
	
.BildBusfahrer, .BildReinigungskraft{
	height:400px;
	width:300px;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	margin:auto;
	/*margin-left:14%;*/
	padding-top:5px;
}	

.Busfahrer h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:auto;
	margin-top:5px;
	padding-top:5px;
	color:antiquewhite;
	border-radius:5px;
	letter-spacing:2px;
}
	
.Reinigungskraft h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:auto;
	margin-top:5px;
	padding-top:5px;
	color:antiquewhite;
	border-radius:5px;
	letter-spacing:2px;		
}
	
	.Busfahrer,.Reinigungskraft{
		margin-bottom:40px;
		padding-bottom:25px;
	}
	
	.Busfahrer{
		border-bottom:1px;
	}
}

/*================================================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:900px){

/*=====================   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 ================================================*/	
	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:left;
	width:85%;
	max-width:750px;
	margin:auto;
}

.Hervorheben{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:30px;
	font-weight:700;
}



	.UeberUnsCatch{
		font-family: itc-avant-garde-gothic-pro, sans-serif;
		font-weight: 700;
		font-style: normal;
		padding-left:40px;
		padding-top:200px;
		color:#6F0D0D;
		font-size:45px;
	}

	
	.EyeCatch{
		margin-top:-150px;
		height:100vh;
		background-image:url("../1_BILDER/Hintergrund_Desktop.jpg");
		background-repeat:none;
		background-size:cover;
		background-position:0 0;
		vertical-align:middle;
	}
	
	.UeberUnsCatch,.StellenangeboteCatch{
		font-family: itc-avant-garde-gothic-pro, sans-serif;
		font-weight: 700;
		font-style: normal;
		padding-left:40px;
		padding-top:200px;
		color:#6F0D0D;
		font-size:60px;
	}
	
	.EinleitungStellenangebote{
		background-repeat:none;
		background-size:cover;
		background-position:0 0;
		vertical-align:middle;	
	}
	
	.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:400px;
		margin-left:20px;
		height:80px;
		font-family: 'Bebas Neue', cursive;
		font-size:40px;
		border: 1px solid #6F0D0D;
		border-radius:5px;
		transition: .5s;
	}
	
#Team {
	display: flex;
	flex-direction: column; /* Stellt die Kinder untereinander dar */
	align-items: center; /* Zentriert die Kinder horizontal */
	gap: 20px; /* Abstand zwischen den Teammitgliedern */
	width: 100%;
	margin-top:100px;
}
	
.TeammitgliederJohannes,.TeammitgliederMelissa,.TeammitgliederAmy{
	width:80%;
	max-width:80%;
	display:flex;
	padding-left:0px;
	padding-right:0px;
	margin:auto;
	height:550px;
	/*background-color:yellow;*/
	margin-bottom:25px;
	border-radius:9px;
	border:1px solid #AFAFAF;
}

.Johannes{
	width:80%;
	height:100%;
	margin:auto;
	/*border:1px solid #AFAFAF;*/
	/*border-radius:9px;*/
	display:flex;
	justify-content:center;
	align-items:center;
	/*background-color:orange;*/
	background:rgba(255,255,255,.5);
}

.BildJohannes{
	width:35%;
	height:95%;
	overflow:hidden;
	margin:auto;
	padding-top:5px;
	/*background-color:green;*/
	text-align:center;
}

.TextJohannes{
	height:95%;
	width:65%;
	text-align:left;
	/*background-color:aquamarine;*/
}
	
.Aufgaben{
	font-family: 'Bebas Neue', cursive;	
	height:40px;
	font-size:30px;
	padding-top:5px;
	margin-left:5%;
	margin-top:0px;
	margin-bottom:-20px;
	text-decoration:underline;
	}
	
.Johannes h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:40px;
	margin-top:0px;
	padding-top:5px;
	color:antiquewhite;
	/*border-radius:5px;*/
	letter-spacing:2px;
}

.Melissa h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:40px;
	margin-top:0px;
	padding-top:5px;
	color:antiquewhite;
	/*border-radius:5px;*/
	letter-spacing:2px;	
	}	

.Melissa {
	width: 80%;
	height: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.5);
}

.BildMelissa {
	width: 35%;
	height: 95%;
	overflow: hidden;
	margin: auto;
	padding-top: 5px;
	text-align: center;
}

.TextMelissa {
	height: 95%;
	width: 65%;
	text-align: left;
}	

.Amy {
	width: 80%;
	height: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.5);
}	

.BildAmy {
	width: 35%;
	height: 95%;
	overflow: hidden;
	margin: auto;
	padding-top: 5px;
	text-align: center;
}	

.TextAmy {
	height: 95%;
	width: 65%;
	text-align: left;
}	
	
.Amy h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:40px;
	margin-top:0px;
	padding-top:5px;
	color:antiquewhite;
	/*border-radius:5px;*/
	letter-spacing:2px;	
	}	
	
	
	
	
#Stellenangebote {
	display: flex;
	flex-direction: row;
	align-items: center; /* Zentriert die Kinder horizontal */
	gap: 20px; /* Abstand zwischen den Teammitgliedern */
	width: 100%;
	margin-bottom:100px;
}	

.StellenangeboteAktuell{
	width:80%;
	display:flex;
	flex-direction:row;
	padding-left:0px;
	padding-right:0px;
	margin-top:25px;
	margin-bottom:150px;
	margin:auto;
	height:auto;
	border:1px solid #AFAFAF;
	border-radius:9px;
}
	
.Busfahrer, .Reinigungskraft{
	width:50%;
	overflow:hidden;
	margin:auto;
	margin-left:10px;
	margin-top:25px;
	background:rgba(255,255,255,.5);
	height:100%;
}

.BildBusfahrer, .BildReinigungskraft{
	height:400px;
	width:300px;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	margin:auto;
	margin-left:14%;
	padding-top:5px;
}	
	
.Busfahrer h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:auto;
	margin-top:5px;
	padding-top:5px;
	color:antiquewhite;
	border-radius:5px;
	letter-spacing:2px;
}
	
.Reinigungskraft h2{
	text-align:center;
	background:#bc2121;
	font-family: 'Bebas Neue', cursive;
	font-size:30px;
	height:auto;
	margin-top:5px;
	padding-top:5px;
	color:antiquewhite;
	border-radius:5px;
	letter-spacing:2px;		
}
	
img.back{
	padding-top:30px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:80px;
}
}