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



@font-face {
    font-family: 'aller';
    src: url('aller/aller_lt-webfont.woff2') format('woff2'),
         url('aller/aller_lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'allerit';
    src: url('aller/aller_ltit-webfont.woff2') format('woff2'),
         url('aller/aller_ltit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'allerbold';
    src: url('aller/aller_bd-webfont.woff2') format('woff2'),
         url('aller/aller_bd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'allerboldit';
    src: url('aller/aller_bdit-webfont.woff2') format('woff2'),
         url('aller/aller_bdit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}






body {
 background-color: white;
 font-family: aller;
 font-size: 20px;
 line-height: 26px;
 margin: 0;
}

a {
	color: #e51e1e;
	text-decoration: none;
}


b, strong {
font-family: allerbold;
font-weight: normal;
}

.gross {
	font-size: 130%;
}



.sc-content p {
	margin: 0;
}



.head {
	width: 100%;
	height: 70px;
	position: fixed;
	background-color: white;
	box-shadow: 0px 0px 17px rgba(223, 70, 36, 0.5);
	z-index: 9000;
}

.headbanner {
	width: 100%;
	height: 70px;
	position: relative;
}

.logo-top {
	position: absolute;
	font-family: allerboldit;
	font-size: 30px;
	position: absolute;
	left: 20px;
	top: 0px;
}


.headbanner-abstand {
	height: 70px;
	width: 100%;
}



.topcenter {
	text-align: center;
	background-image: url(bilder/top-hintergrund.jpg);
	background-size: auto 100%;
	background-position:center bottom;
	padding-top: 90px;
}

.topimage {
	display: inline-block;
	width: 500px;
	vertical-align: middle;
}

.logo-desktop {
	display: inline-block;
	width: 550px;
	margin: 0 auto;
	padding: 0 5%;
	vertical-align: middle;
	padding-top: 0px;
	margin-left: -260px;
}

.logo-mobile {
	display: none;
}



menu {
	text-align: right;
	padding-right: 40px;
}

#menu-toggle {
	display: none;
}

#mainmenu {
	display: inline-block;
}

#mainmenu ul {
	margin: 0;
	display: inline-block;
}
#mainmenu li {
	display: inline-block;
	text-decoration: none;
	font-size: 24px;
	 font-family: allerit;
	 padding-left: 24px;
	 height: 50px;
}





.division {
	 position: absolute;
	 top: -30px;
	 right: 160px;
	 display: inline-block;
	 width: 2.5px;
	 height: 80px;
	 background-color: #e51e1e;
	 	vertical-align: middle;
}


#sprach-toggle {
 display: inline-block;
 font-size: 24px;
	 font-family: allerit;
	 margin-left: 40px;
}

#sprache {
	text-align: left;
	display: inline-block;
	position: absolute;
	width: 160px;
	right: 0px;
	top: 30px;
	z-index: 99999;
	display: none;
}

#sprache a {
	padding: 16px;
	display: block;
	width: 140px;
	background-color: white;
	box-shadow: 0px 0px 10px rgba(223, 70, 36, 0.2)
}

#sprache a:hover {
	background-color: #ffbcbc
}

#sprache ul {
	padding-left: 0;
}

#sprache ul li {
	list-style: none;
}




.seitennavigation {
	position: fixed;
	right: 0px;
	bottom: 200px;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 0 20px;
}

.seitennavigation ul {
	padding: 0;
}

.seitennavigation li {
	padding-bottom: 20px;
	list-style: none;
}

.seitennavigation a {
	color: white
}

.seitennavigation a:hover {
	text-shadow: 0px 0px 5px white
}





.supertitel {
	font-family: allerboldit;
	font-size: 70px;
	margin: 120px 0px;
	text-align: center;
}


.title {
	font-family: allerboldit;
	font-size: 35px;
	margin-bottom: 20px;
	color: #e51e1e;
}


.textblock {
	max-width: 720px;
	padding: 40px;
	margin: 0 auto;
}

.textblock li {
	padding-bottom: 15px;
}

.popupbutton {
	display: inline-block;
	font-family: aller;
	font-size: 18px;
	line-height: 18px;
	padding: 7px;
	background-color: #ba8d8d;
	margin-top: 10px;
	color: black;
}

.popupbutton:hover {
	background-color: #e51e1e;
}




.box-rot {
	background-color: #f1c1b7;
}

.box-rot .textblock .title {
	color: #bb2020
}





iframe.mithelfen {
	width: 100%;
	
}






.abstand {
	width: 100%;
	height: 70px;
}





.testimonial {
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.muster {
	background-image: url(bilder/musterfoto.jpg)
}

.ensaf {
	background-image: url(bilder/testimonial-Ensaf-Haidar.jpg)
}

.mkhait {
	background-image: url(bilder/testimonial-mkhait.jpg)
}

.azam {
	background-image: url(bilder/testimonial-azam.jpg)
}

.tes-text {
	width: 500px;
	padding: 20px 20px 40px 20px;
	background-color:rgba(58, 58, 58, 0.7);
	color: white;
	font-family: allerit;
	position: absolute;
	right: 50px;
	bottom: 50px;
}

.tes-text b {
	font-family: allerboldit;
	display: block;
	font-size: 30px;
	padding-bottom: 10px;
	color: #c0c0c0;
	font-weight: normal;
}

.tes-text i {
	font-family: allerit;
	display: block;
	font-size: 20px;
	padding-bottom: 10px;
	color: #c0c0c0;
	font-style: normal;
}

.popup {
	display: none;
	padding: 20px;
	font-family: allerit;
}

.popup b {
	font-family: allerboldit;
	display: block;
	font-size: 30px;
	padding-top: 20px;
	padding-bottom: 10px;
	color: #c0c0c0;
	font-weight: normal;
}

.popup i {
	font-family: allerit;
	display: block;
	font-size: 20px;
	padding-bottom: 10px;
	color: #c0c0c0;
	font-style: normal;
}

.tes-text a {
	display: block;
	position: absolute;
	font-family: aller;
	font-size: 18px;
	line-height: 18px;
	bottom: 0px;
	right: 0px;
	padding: 5px;
	background-color: #e51e1e;
	color: black;
}

.tes-text a:hover {
	background-color: white;
}





.schnittbild {
	display: block;
	width: 100%;
	margin: 0px auto -40px auto;
	max-width: 1000px;
}




.footer {
	font-family: allerit;
	background-color: #d62828;
	margin-top: 60px;
	padding: 40px;
	color: white;
	text-align: center;
	background-image: url(bilder/brush.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
}

.footer a {
	color: white
}

.footer .block {
	text-align: left;
	display: inline-block;
	padding: 40px;
	vertical-align: top;
}

.footer b {
	font-family: allerboldit
}

a.zugergrafik {
	display: inline-block;
	color: #ff5454;
	position: absolute;
	left: 10px;
	font-size: 10px;
	text-transform: uppercase;
}