@charset "utf-8";

/*
* CSS-Design
* Modulaufgabe 10
*/



/* Webfonts-Einbindung Schrifte runter geladen!!! */



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

/* BASISINFORMATIONEN */

body {

	font: 400 1.125rem/1.55 'Fira Sans', 'Open Sans', sans-serif;
	color: #8d8888;
	/* INFO Langform:
	font-size: 18px;
	font-size: 1.125rem;
	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
	line-hight: 1.55;
	font-weight: 400;
	*/
}

img{
	max-width: 100%;
	height: auto;
}


.logo {
	max-height: 245px;
	width: 300px;
	
	margin: 15px 15px 10px;
}

/* Clearfix */

.row:before,
.row:after {
	content: " ";
	display: table;
}

.row::after {
	clear: both;
}

/* ---------------------- */



/* HAUPT-LAYOUT */

.wrapper {
	max-width: 1250px;
	padding: 0 25px;
	margin: 0 auto;
}

.column {
	float: left;
	margin: 25px 0 25px 5%;
}

.column:first-child {
	margin-left: 0;
}

section {
	padding: 35px 0;
}

/* Typo */

h1 {
	font-size: 3.025rem;
	margin-bottom: 15px;
	font-weight: 600;
}

h2 {
	font-size: 1.8rem;
	font-weight: 600;
	/* letter spacing: 0.05em; */
}

h3 {
	font-size: 1.75rem;
	/* 28px */
}

p {
	font-size: 1.4rem;
	margin: 0 0 15px;
	color: #1b1a1a;
}

.button{
	background: #fff;
	border: 2px solid #f04e37;
	border-radius: 30px;
	padding: 10px 20px 8px;
	text-decoration: none;
	letter-spacing: 0px;
	color: #3450ee;
	margin: 20px 25px 20px 0px;
	display: inline-block;
	transition: all 0.15s ease-out 0s;
}

.button:hover{
	background: #ecf4f6;
	color:#f57906;
	text-decoration: none;
}

a {
	color: #3450ee;
	text-decoration: none;
}

a:hover{
	text-decoration: underline; /* ??? wozu underline??? ok bei Text Link!!! in Orange */
	color:#f57906;

}

.ueberschrift_oben{  /* Überschrift Unterseiten  */
	color: #f88f05;
}
/* Ende Typo--------------------------------------- */


/* Spalten */

.col_1 {
	width: 100%;
}
.col_1_2 {
	width: 47.5%;
}
.col_1_3 {
	width: 30%;
}
.col_2_3 {
	width: 65%;
}
.col_1_4 {
	width: 21.25%;
}
.col_3_4 {
	width: 73.75%;
}

.no-gutter .column {
	margin: 0;
	padding: 60px;
}
.no-gutter .col_1_2 {
	width: 50%;
}
.no-gutter .col_1_3 {
	width: 33.33%;
}
.no-gutter .col_2_3 {
	width: 66.66%;
}
.no-gutter .col_1_4 {
	width: 25%;
}
.no-gutter .col_3_4 {
	width: 75%;
}

/* ----------------------------------------------- */
/* ----------------------------------------------- */


/* HEADER */

header {
	background-color: #87bef1fd;
	border-bottom-right-radius: 40%;
	border-color: #063cd1; /* warum geht das nicht??? */
}


/* Navigation -- im Header */

#navigation {
	float: right;
	margin-top: 43px;
	letter-spacing: 2px;
	padding: 0px 0px;
	
}

#navigation li {
	display: inline;
	list-style: none;
	margin-left: 30px;
}

#navigation li a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	padding: 15px 0;
}

#navigation li a:hover {
	color: #3450ee;
}

/* Drop-Down-Menü Nav. -- im Header */

#navigation ul{
	position: absolute;
	top: 35px;
	left: -3px;
	background: #3450ee;
	width: 205px;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
	display: none;  /* ??? Warum */
	z-index: 9999;
}

#navigation li{
	position: relative;
}

#navigation ul li a{
	display: block;
	font-size: 1.025rem;
	font-weight: 200;
	text-transform: none;
	padding: 10px 35px 10px 15px;
	border-bottom: 1px solid rgba(70,151,168,0.4);
}

#navigation ul li{
	margin-left: 0;
}

#navigation ul li a:hover{
	background: rgba(70,151,168,1);
	color: #fff;
}

#navigation li:hover ul{
	display: block;
}

/* Responsive Navigation s. auch unten in Media Queries - 
kleines Medium = erscheint Hamburger */

.nav-toggle {
	display: none;
}

.nav-toggle {
	background: #b1dfe9;
	padding: 10px 15px;
	;
	color: rgb(31, 35, 236);
}

.nav-toggle:hover {
	background: #3a4550;
	text-decoration: none;
}

/* --------------------------------------------------------  */

/* LAUFBAND  */

/*.laufband {
	
	
	padding: 0;
	margin: 0px, 0px, 5px, 0px;
	border-top-right-radius: 30%;
	
	
}


.laufband h3{
	font-size: 22px;
	color:#120feb;
}  */

/* HERO TEASER 1 */

.hero h1{
	font-size: 44px;
	color:#3450ee;
	padding-top: 10px ;
	padding-bottom: 10px;
		
}

.hero h2{
	font-size: 30px;
	color:#f85a2a;
	padding-bottom: 30px;
}

.hero p{
	/*font-size: 24px;*/
	font-weight: 600;
	color:#3450ee;
}

.hero {
	background: url("../images/bild_hintergrund_05.png");
	/*background-attachment: fixed;*/
	box-shadow: 5px 5px 5px;
	margin: 0px 0 0 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 75vh;
	border-top-left-radius: 15%;
	border-top-right-radius: 15%;
	/*border-bottom-left-radius: 20%;*/
}

/* N E U   HERO TEASER  Leistungen */

.leistungen_01 {
margin: 35px;
text-align: center;

}

.beschreibung_leist {
margin: 35px;

}


.beschreibung_leist h2 {
color:#3450ee;
font-size: 30px;
font-weight: 600;
}

.beschreibung_leist p {
color: #f57906;
font-size: 20px;
font-weight: 600;
}

.icon_leist{ /* Bilder im Teaser 2*/
	transition: all 0.4s;
	border: 1px solid #f85a2a;
	border-radius: 50px;
	display: block;
	margin: auto;

	box-shadow: 0px 7px 7px rgba(103, 117, 116, 0.7);
}

.icon_leist:hover{  /* Bilder im Teaser */
	transform: scale(1.1);
}

.wer_ziele_01 {
	/*border: 1px solid #f88f05;
	box-shadow: 0px 7px 7px rgba(103, 117, 116, 0.9);*/
	padding: 25px;
	background: #f3f6f7;
}



.wer_ziele_01 h2{
	color:#0b0fe9;
	padding: 1px;
	font-size: 24px;
	font-weight: 600;
	text-transform: none;
	text-align: left;
}

.wer_ziele_01 p{
	color: #0e0d0d;
	font-size: 20px;
	/*font-weight: 600;*/
	text-transform: none;	
	/*hyphens: auto;*/
	text-align: left;
}



.slogan_01 {
	text-align: center;
	color: #f85a2a;
	margin: 0 0 0 0;
}

/* ---------------------------------------------------- */

/* HERO TEASER  Leistungen */

/*.leistungen {
	margin: 55px;
	
	border-top-right-radius: 15%;
	border-top-left-radius: 15%;
	border: 10px solid #d8d6d3;
	background: #ECF4F6;
	background: linear-gradient(87deg, rgba(236, 244, 246, 1) 9%, rgba(135, 190, 241, 1) 73%, rgba(108, 119, 245, 1) 100%);
	
}

.leistungen h4{
	color:#3450ee;
	padding: 10px;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	text-transform: none;
}

.leistungen p{
	color: #636060;
	font-size: 20px;
	text-align: center;
	text-transform: none;
	
}  */

/*.icon_leist{ Bilder im Teaser 2 */
	/*transition: all 0.4s;
	border: 1px solid #f85a2a;
	border-radius: 50px;
	display: block;
	margin: auto;
	
	box-shadow: 0px 7px 7px rgba(103, 117, 116, 0.7);
}

.icon_leist:hover{   Bilder im Teaser 
	transform: scale(1.1);
}  */

/*  SLIDER auf index.html */

.slider img {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 200px;
	border: 3px solid #ecf4f6;
	opacity:0;
}

.slider{
	position: relative;
	width: 320px;
	height: 255px;
	margin: -20px 0 0 100px;
}	

	@keyframes fade{
		0% {opacity:0;}
		3.33% {opacity:1;}
		10% {opacity:1}
		13.33% {opacity:0;}
		100% {opacity:0;}
	}

	#slide1 {
		animation: fade 30s infinite;
		}
		#slide2{
			animation: fade 30s 3s infinite;
			}
			#slide3{
			animation: fade 30s 6s infinite;
			}
			#slide4{
				animation: fade 30s 9s infinite;
				}
				#slide5{
					animation: fade 30s 12s infinite;
					}
					#slide6{
						animation: fade 30s 15s infinite;
						}
						#slide7{
							animation: fade 30s 18s infinite;
							}
							#slide8{
								animation: fade 30s 21s infinite;
								}
								#slide9{
									animation: fade 30s 24s infinite;
									}
									#slide10{
										animation: fade 30s 27s infinite;
										}


		/* Slider Kasten über dem Slider 
		#slider-kasten{
			background: rgb(175, 223, 235, 0.7);
			color: rgb(52, 80, 238);
			padding: 28px;
			max-width: 550px;
			max-height: 150px; 
			float: left;
			margin-top: -88px;
			border-radius: 30px;
			border: 1px solid #f88f05;
			box-shadow: 0px 7px 7px rgba(103, 117, 116, 0.9);
			position: relative; 
			animation: slider-kasten-animation 10s ease 7s infinite normal forwards ;  */
			/*animation: slider-kasten-animation 4s linear 3s infinite normal forwards;*/
			/*animation-timeline: view();*/
	/*	}  */
/*@keyframes slider-kasten-animation {
	0% {
		transform: scale(0.6);
		transform-origin: 50% 100%;
	}

	100% {
		transform: scale(1);
		transform-origin: 50% 100%;
	}
}*/

	
		


/* 3 CONTAINER - WER WER WIR SIND...ZIELE...*/

/*.wer_ziele .column{
	background: #ecf4f6;
	position: relative;
	min-height: 470px;
	padding: 20px;
	margin: 250px 0 0 20px;
	border: 3px solid #f88f05;
	box-shadow: 0px 7px 7px rgba(103, 117, 116, 0.9);
}

.wer_ziele h4{
	color:#f88f05;
	padding: 1px;
	font-size: 24px;
	font-weight: 600;
	text-transform: none;
}

.wer_ziele p{
	color: #636060;
	font-size: 20px;
	text-transform: none;	
}  */

.zentrieren {
	text-align: center;
}

/* KUNDENSTIMMEN */

blockquote {
	font-family: "Fira Sans", sans-serif;
	font-style: italic;
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 15px;
	color: #1b1a1a;
} 

.Kundenstimme_index p{
	font-size: 14px;

}
.kd_foto {
	border-radius: 0px;
}

.name {
	padding: 0px 15px; 
}

/* FOOTER */

footer {
	background-color: #87bef1fd;
	margin: 20px 0 0 0;
	padding: 5px 0;
	color: #333;
}

.copyright {
	font-style: italic;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
}

.fuss p{
	font-size: 17px;
	font-weight: 400;
	color: #333;
}

#totop {
	position: fixed;
	right: 30px;
	bottom: 30px;

	background: #4697a8;
	color: #fff;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 15px;
	font-size: 28px;
	line-height: 1;
	display: none;
	}
	
#totop:hover { text-decoration: none; background: #f04e37; }

/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/

/* U N T E R S E I T E N */

.unter_text_oben{ /* Text ganz oben links auf "Leistungs"-Unterseiten */	
	padding: 40px 10px 10px;
	text-align: left;
}

.foto_unter{ /* Layout Foto Unterseiten - jeweils drei Fotos - */	
	border-radius: 35px; 
	max-height: 220px;
	padding: 0px 0px 0px 0px;
}


/* Hintergrundbild BÜRO "scrollen" Unterseiten */

.hinterbild_buero{
	background: url('../images/buero_5.25_hint_02.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
	
}

.hinterbild_buero h1 {
	color: #3450ee;
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild WOHNUNG "scrollen" Unterseiten */

.hinterbild_wohnung{
	background: url('../images/wohnung_5.25_hint_01.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_wohnung h1 {
	color: #000;
	
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild GRUNDREINIGUNG Geschäftk. "scrollen" Unterseiten */

.hinterbild_wohnung_leer{
	background: url('../images/grund_5.25_hint_01.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_wohnung_leer h1 {
	color: #3450ee;
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild TREPPENHAUS Geschäftk. "scrollen" Unterseiten */

.hinterbild_treppenhaus_01 {
	background: url('../images/treppe_5.25_hint_01.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_treppenhaus_01 h1 {
	color: #3450ee;
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild LEHRRÄUME Geschäftk. "scrollen" Unterseiten */

.hinterbild_schulung_01 {
	background: url('../images/schulung_5.25_hint_01.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_schulung_01 h1 {
	color: #3450ee;
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild GRUNDREINIGUNG Privatkunden "scrollen" Unterseiten */

.hinterbild_grundreinigung_priv {
	background: url('../images/grund_5.25_hint_01.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_grundreinigung_priv h1 {
	color: #3450ee;
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild HOTEL Geschäftsk. "scrollen" Unterseiten */

.hinterbild_hotel_04 {
	background: url('../images/hotel_5.25_hint_01.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_hotel_04 h1 {
	color: #000;
	text-align: center;
	padding: 180px 0 0;
}

/* Hintergrundbild GESCHÄFT Geschäftsk. "scrollen" Unterseiten */

.hinterbild_geschaeft {
	background: url('../images/geschaeft_5.25_hint_02.jpg') center center no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	min-height: 450px;
}

.hinterbild_geschaeft h1 {
	color: #3450ee;
	text-align: center;
	padding: 180px 0 0;
}

/* ------------------------------------------------ */

/* LISTE LEISTUNGEN ALLE SEITEN */

/* Aufzählung Homepage oben rechts */
/*.liste_index {
	background-color: #55a6f1fd;
	color: #fff;
	padding: 40px ;
	border: 3px solid #3450ee;
	border-radius: 30px;
}  */

/* Aufzählung Leistungen oben rechts - auf fast allen Unterseiten + Homepage */

.linien_liste {
	font-size: 18px;	
	margin: 5px 0;
	padding: 0px;
	border-top: 4px solid #ccc;
	max-width: 250px;;
}

.linien_liste li {
	list-style: none;
	padding: 5px 0;
	border-bottom: 1px solid #ccc;
	max-width: 250px;
}

/* ------------------------------------------------ */

/* ÜBER UNS - UNTERSEITE - */
.ueber_uns_Kd_stimmen {
	padding: 0px 0px 0 0 ;
}

.headline_h1 {    /* auch für die Seite Bewerber, Impressum, Datenschutzerkl.   */
color: #3450ee;

}


.headline_01 {   /* auch für die Seite Bewerber    */
color: #3450ee;
}

.border_kd_stimmen {
	border-bottom: 4px solid #ccc;

}

/* KONTAKT - UNTERSEITE - */
.kontakt {
	padding: 50px 0 535px 0;
}

/*  Foto Layout auf Kontaktseite */
.kontakt_foto {
	border-radius: 18px;
	border: 2px solid #3450ee;
}

/* ------------------------------------------------ */

/* DRUCKFORMATIERUNG */
 
@media print {
 
header, footer {
	display: none;
}
 
p, blockquote{ 
    font-family: Arial, sans-serif;
	font-size: 10pt;
}
 
h1, h2, h3, h4, h5, h6 { 
	font-family: Arial, sans-serif; 
	font-size: 18pt; 
	color: #000;
	font-style: normal;
}
 
section{
	padding: 0;
}
 
}

/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* ------------------------------------------------ */


/* MEDIA QUERIES */

@media only screen and (max-width: 750px) {
	.slider {
		width: 80%;
		height: 0;
		padding-bottom: 40%;
		/*
		padding-bottom: 100%;
		background: red;
		*/
	}
	
	/*.hinterbild_buero{
		background-size: contain;
	}*/

	.hinterbild_buero{
		display: none;
	}


	.hinterbild_wohnung{
		display: none;
	}

	.hinterbild_wohnung_leer{
		display: none;
	}
	
	.hinterbild_treppenhaus_01{
		display: none;
	}
	
	.hinterbild_schulung_01{
		display: none;
	}
	
	.hinterbild_grundreinigung_priv{
		display: none;
	}
	
	.hinterbild_hotel_04{
		display: none;
	}

	.hinterbild_geschaeft{
		display: none;
	}



	
	.hero h1 {
		font-size: 25px;
	}
	.hero h2 {
		font-size: 21px;
	}


	.wer_ziele_01 p{
		font-size: 2vw;
	}	

}

@media only screen and (max-width: 950px) {
	
/*#slider-kasten{
		width: 100%;
		height: 0px;
		background: rgba(255, 255, 255, 0.7)
}

	.slider-kasten-text{
		font-size: 2.1vw;
		position: relative;
		color: #3450ee;
		text-align: center;
	}    */


	.col_1_2,
	.col_1_3,
	.col_2_3,
	.col_1_4,
	.col_3_4,
	.no-gutter .col_1_2,
	.no-gutter .col_1_3,
	.no-gutter .col_2_3,
	.no-gutter .col_1_4,
	.no-gutter .col_3_4	{
		width: 100%;
	}
	.column {
		margin-left: 0;
	}

	section {
		padding: 40px 0;
	}

	.wer_ziele_01 .column, 
	.wrapper .column {
		max-width: 360px;
		margin: 25px auto 50px;
		float: none;
	}

h1 {
	font-size: 26px;
}  

h2 {
	font-size: 24px;
}

h3 {
	font-size: 6vw;
}
p {
	font-size: 18px;
}

/*.wer_ziele_01 h2 {
	font-size: 6vw;
} 

.wer_ziele_01 p {
	font-size: 18px;
}   */


.leistungen_01 h4 {
	font-size: 30px;
}

.leistungen_01 p {
	font-size: 21px;
}    

li {
	font-size: 16px;
}   

.slogan_01 h2{
	font-size: 18px;
	text-align: center;
	
}


.slider-kasten {
		max-width: 100%;
		margin-top: 0;
}

/*  ----- RESPONSIVE NAVIGATION - enthalten in MEDIA Queries---------*/
nav {
	height: 0;
	transition:height .2s ease-in-out;
	overflow: hidden;
	}

.nav-toggle {
	 display:block;
	 }

#nav-open:target .nav-closed {
	display: block;
}

.nav-closed,
#nav-closed:target .nav-closed,
#nav-open:target .nav-open {
	display: none;
}

#nav-open:target nav {
	height: 750px;     /* hier wird die Länge für das Hamburger Menü eingestellt */
}

#navigation {
	margin-top: 15px;
	float: none;
	border-bottom: 1px solid #ccc;
}

#navigation li {
	display: block;
	margin-left: 0;
	text-align: left;
	border-top: 1px solid #ccc;
}

#navigation li a {
	margin-left: 0;
	display: block;
	padding: 15px 30px;
}

#navigation ul {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	width: 100%;
	margin-bottom: 0;
}

#navigation ul li a {
	border-bottom: 0;
	padding: 15px 15px 15px 60px;
}

header .col_3_4 {
	margin-top: 0;
}

}