/*
Helles Beige (Backgrounds): #f4f1ef
Dunkles Beige (Headlines): #c8bbaf
Dunkles Grau (Headlines): #575656
Fließtext: #000
*/

@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');

body { font-family: 'Lato', sans-serif; font-size: 16px; margin: 0; line-height: 1.4rem; color: #000; margin: 3rem; }

.sectionOuter { position: relative; margin: auto; }
	.sectionInner { position: relative; max-width: 1300px; margin: auto; max-width: 1300px; padding: 3rem 2rem; }

.sectionOuter.centered { text-align: center; }
	.sectionOuter.centered .sectionInner { text-align: center; }

.sectionOuter.imageBG .sectionInner { padding: 4rem 2rem; }

.flexContainer { display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

.clearFloat { clear: both; }

@media screen and (max-width: 700px) {
	body { font-size: 15px; margin: 1.5rem; }
	.sectionInner { padding: 1.5rem 1rem; }
	.sectionOuter.imageBG .sectionInner { padding: 2rem 1rem; }
}

/*Typo*/
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-weight: 700; margin: 0.3em 0; line-height: 1.3em; }

h1 { font-size: 2.8rem; }
h2 { font-size: 2.625rem; }
h3 { font-size: 2.25rem; }
h4, h5, h6 { font-size: 1.75rem; }

@media screen and (max-width: 800px) {
	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.6rem; }
	h3, h4, h5, h6 { font-size: 1.4rem; }
}

hr { margin: 2rem 0; border: 0px none; height: 1px; border-top: 1px solid #c8bbaf; }

.textLight { font-weight: 300 !important; }
.textNormal { font-weight: 400 !important; }
.textBold { font-weight: 700 !important; }

.textUpper { text-transform: uppercase; }
.textLower { text-transform: lowercase; }
.textNormalCase { text-transform: none; }

.textWhite { color: #FFF; }
.textGray { color: #575656; }
.textBeige { color: #c8bbaf; }

a { color: #c8bbaf; font-weight: 700; }
a:hover { text-decoration: none; }

/*Editmode*/
.boxEditmode { padding: 1.5rem; background-color: #E9E9E9; margin-bottom: 2rem; }

/*Content-Abschnitte*/

#sectionMoodSlider {}
	#sectionMoodSlider > .logo { position: absolute; top: 1rem; left: 2rem; z-index: 10000; width: 20%; height: auto; }
	#sectionMoodSlider ul.slides { position: relative; clear: both; }
	#sectionMoodSlider ul.slides img { display: block; position: relative; clear: both; width: 100%; height: auto; }

	.moodText { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 100px; box-sizing: border-box; text-align: center; z-index: 10000; display: flex; align-items: center; justify-content: center; }
		.moodText .moodTextInner { } 
		.moodText h2 { text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);}
		.moodText h3 { text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); }

	img.flexnav { position: absolute; z-index: 100000; top: 50%; margin-top: -91px; cursor: pointer; }
		img.flex-prev { left: 1rem; }
		img.flex-next { right: 1rem; }

	@media screen and (max-width: 600px) {
		img.flexnav { height: 90px; width: auto; margin-top: -45px; }
	}

	@media screen and (max-width: 500px) {
		#sectionMoodSlider > .logo { left: 32%; width: 35%; }
		.moodText { display: none; }
	}

#sectionStatement {}

#sectionUte { background-color: #f4f1ef; background-image: url(/assets/images/ute_schibrath.jpg); background-repeat: no-repeat; background-position: right; background-size: auto 100%; }
	#sectionUte .sectionText { padding-right: 45%; }

@media screen and (max-width: 900px) {
	#sectionUte { background-position: center; }
}

@media screen and (max-width: 900px) {
	#sectionUte .sectionText { padding-right: 30%; }
}

@media screen and (max-width: 500px) {
	#sectionUte .sectionText { padding-right: 0; }
}

#sectionZeiten {}
	#sectionZeiten h3 { margin-bottom: 2rem; }
	.boxZeiten { width: 23%; background-color: #f4f1ef; box-sizing: border-box; padding: 2rem; margin: 1rem 0; color: #575656; }
	.boxZeiten h3 { color: #c8bbaf; } 

@media screen and (max-width: 1000px) {
	.boxZeiten { width: 31%; }
}

@media screen and (max-width: 800px) {
	.boxZeiten { width: 47.5%; }
}

@media screen and (max-width: 500px) {
	#sectionZeiten .sectionInner  { padding-left: 0; padding-right: 0; }
	.boxZeiten { padding: 1rem; width: 100%; }
}

#sectionPreise { background-image: url(/assets/images/preise_bg.jpg); background-repeat: no-repeat; background-position: right; background-size: 100% cover; }
	.boxPreise { width: 48.5%; padding: 2rem; margin: 1rem 0; box-sizing: border-box; background-color: rgba(255,255,255,0.7); color: #575656; text-align: center; }

@media screen and (max-width: 700px) {
	#sectionPreise { background-size: cover; }
		.boxPreise { width: 100%; padding: 1rem; margin: .5rem 0;}
}

#sectionKontakt { color: #575656; }
	#sectionKontakt .buttonFacebook { width: 35px; height: auto; }
	#sectionKontakt .button { display: inline-block; color: #FFF; text-decoration: none; text-transform: uppercase; padding: 0.75rem 1.5rem; background-color: #c8bbaf; margin-top: 1rem;
														-webkit-box-shadow: 3px 3px 0px 0px rgba(149,148,146,1);
														-moz-box-shadow: 3px 3px 0px 0px rgba(149,148,146,1);
														box-shadow: 3px 3px 0px 0px rgba(149,148,146,1);
	}
	#sectionKontakt .button:hover { text-decoration: underline; }

@media screen and (max-width: 700px) {
	#sectionKontakt img.logo { width: 55%; height: auto; } 
}

#sectionZitat { background-color: #f4f1ef; background-image: url(/assets/images/footer_bg.jpg); background-repeat: no-repeat; background-position: right; background-size: auto 100%; }
	#sectionZitat .sectionInner { padding: 10rem 2rem; }
	#sectionZitat .sectionInner .sectionText { width: 45%; text-align: left; }

@media screen and (max-width: 900px) {
	#sectionZitat { background-position: center; }
	#sectionZitat .sectionInner { padding: 8rem 1rem; }
	#sectionZitat .sectionInner .sectionText { width: 100%; } 
}