body, html { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 10px; font-family: 'Roboto', sans-serif; color: #fff; font-weight: 300; line-height: 1.9em; }

/** Positionierungen **/
.fl { float: left; }
.fr { float: right; }
.pf { position: fixed; }
.pr { position: relative; }
.pa { position: absolute; }
.pt0 { top: 0; }
.pb0 { bottom: 0; }
.pl0 { left: 0; }
.pr0 { right: 0; }
.full { width: 100%; }

/** z-index: **/	
#r1, #r4 { z-index: 100; }
#resRightLeft { z-index: 80; }
#figureNav  { z-index: 50; }
#pageID_0 > div.show, .scrollTop { z-index: 10; }

/** Schriften Groeßen **/
h1 { font-size: 6em; font-weight: 500; margin-bottom: .5em; }
.teaserSet .Box > a h2, .teaserSet .Box > div h2 { font-size: 3.5em; }
nav { font-size: 3em; }
h2 { font-size: 2.5em; font-weight: 300;}
h3, input, textarea, button, #r3 li strong, .buttonSet a, .teaserSet .Box > a span, .teaserSet .Box > div span { font-size: 2em; }
p, .Button, ul { font-size: 1.7em; }
#KontaktForm, .loesungen ul { font-size: 1.7em; }

/** Line Height **/
a.Button { line-height: 3em; }
.startseite .Box > a h1 span, #r3 li strong { line-height: 1em; }
h1, h2, h3, label, ul { line-height: 1.2em; }
.Box > a h2 { line-height: 1em; }


/** Font Family **/
h1, nav, .teaserSet .Box > a h2, .teaserSet .Box > div h2 { font-family: 'Roboto', sans-serif; }
h2 { font-family: 'Roboto', sans-serif; }

h1 { margin: 0 0 0 0; padding: 0; }
h2 { margin: 0 0 .5em 0; padding: 0; }
h3 { padding: 0; margin: 0 0 1em 0; }
p, .Button, ul { letter-spacing: .02em; }
h1 img { height: .7em; margin: 0 .04em; }
h2 img { height: .7em; margin-right: .04em; }

.spacer50 { height: 5em; }
a { outline: 0 none; border: none; color: #ffc905;}
strong { font-weight: normal; font-family: 'Roboto', sans-serif, Times; letter-spacing: .03em; }

/** background **/
.backgroundBlack { 
		background-image: -webkit-linear-gradient(left,#000 0%, #2E2E30 40%, #2E2E30 60%, #000 100% );
		background-image: -moz-linear-gradient(left,#000 0%, #2E2E30 40%, #2E2E30 60%, #000 100% );
		background-image: -ms-linear-gradient(left,#000 0%, #2E2E30 40%, #2E2E30 60%, #000 100% );
		background-image: -o-linear-gradient(left,#000 0%, #2E2E30 40%, #2E2E30 60%, #000 100% );
		background-image: linear-gradient(left,#000 0%, #2E2E30 40%, #2E2E30 60%, #000 100% );; color: #fff; }
.backgroundFullBlack, nav > div:nth-of-type(1) > .Box:nth-of-type(1), #figureNav li > div { background: #000; color: #fff; }
.backgroundBlue { 
		background-image: -webkit-linear-gradient(left,#530e11 10%, #6d1216 46%, #90181c 68%, #ce2329 100% );
		background-image: -moz-linear-gradient(left,#530e11 10%, #6d1216 46%, #90181c 68%, #ce2329 100% );
		background-image: -ms-linear-gradient(left,#530e11 10%, #6d1216 46%, #90181c 68%, #ce2329 100% );
		background-image: -o-linear-gradient(left,#530e11 10%, #6d1216 46%, #90181c 68%, #ce2329 100% );
		background-image: linear-gradient(left,#530e11 10%, #6d1216 46%, #90181c 68%, #ce2329 100% );; color: #fff; }
.backgroundFullBlue, nav > div:nth-of-type(1) > .Box:nth-of-type(2), #figureNav li:hover > div, #figureNav li.aktiv > div { background: #ffc905; color: #fff; }
.backgroundGrau { background: #fafafa; }
body, html, .backgroundWhite { background: #fff; color: #000; }
.teaserSet .Box, figure > div, #teaser .Box, .intro .Box:nth-of-type(1) { 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		behavior: url(/res/js/backgroundsize.min.htc); 
		-ms-behavior: url(/res/js/backgroundsize.min.htc);	
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0); 
		-o-transform: translateZ(0); 
		transform: translateZ(0);; background-repeat: no-repeat; }

.column2 { -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2; -webkit-column-gap: 4em; -moz-column-gap: 4em; -o-column-gap: 4em; column-gap: 4em; }

a.Button { display: block; width: 40%; text-decoration: none; display: block; color: #fff; margin: 1em auto 0 auto; text-align: center; }
a.Button.blank { width: calc(50% - 6px); border: 3px solid #000; color: #000; }
a.Button.left { float: left; }
a.Button.right { float: right; }

/** Responsive Menü Button **/
#resButton { margin: 2em 2.5% 0 0; float: right; }
#resButton div { position: relative; width: 28px; height: 3px; background: #0099da; margin: 5px auto; }

.respVita { display: none; background-color: #000; color: #fff; padding: 3em 0; } 
.respVita article { padding: 0; }
.respVita article > div { display: none; }

#r1 .logo { width: 200px; margin: 2em 0 2em 2.5%; }
.logo20container { position: absolute; z-index:101; top: 73px; left: 2.5%;}
	
#r1 .navBackground { background: #ffc905; height: 100%; position: absolute; top: -100%; width: 100%; z-index: -1;    box-shadow: 5px -9px 40px #000; }
#r1 .navBackground.show { top: 0; }
#r2 { height: 90%; }
#r2.fullHeight { height: 100%; }
#r2 figure { width: 100%; height: 100%; }

.teaserSet .Box { position: relative; width: 37%; height: 100%; float: left; background-position: center;}
.teaserSet .Box.unternehmen { width: 26%; }
.teaserSet .Box > a, .teaserSet .Box > div { width: 95%; height: 7em; padding: 2em 0 2em 5%; display: block; text-decoration: none; }
.teaserSet .Box > div { width: 100%;padding-left: 0; }
.teaserSet .Box > div > * { padding-left: 5%; width: 95%; }
.teaserSet .Box.unternehmen > a { height: 5em; padding: 4em 0 2em 5%;  }
.teaserSet .Box.unternehmen > a.grey { padding: 1.2em 0 0 5%; }
.teaserSet .Box.unternehmen > a.grey span { bottom: .8em; }
.teaserSet .Box > a h2, .teaserSet .Box > div h2 { margin: 0; }
.teaserSet .Box > a span, .teaserSet .Box > div span { position: absolute; right: 0; bottom: 2em; display: block; /*border: 1px solid #fff*/;   padding: .2em 0 .2em 1.5em; margin: -.2em 2.5% 0 0; font-weight: bold;  }
.teaserSet .Box > a h2:hover, .teaserSet .Box > div h2:hover { font-size: 3.6em; -webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out; position: relative; margin: -.025em 0 0 -.05em; }

.scrollTop { position: absolute; top: 2em; left: 50%; margin-left: -5px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; }
.scrollTop.black {  border-top: 10px solid #000; }
.scrollTop:hover { cursor: pointer; }

figure > div { width: 100%; height: 100%; position: absolute; top: 0; opacity: 0; background-position: left top; }
figure > div .Box { width: 33%; height: 100%; margin-left: 55%; color: #000; }
figure > div .Box > div { margin-top: 50%; }
figure > div.show { opacity: 1; }
figure.topCenter > div { background-position: center top; }

#figureNav { position: absolute; bottom: 2%; width: 100%; text-align: center }
#figureNav li { display: inline-block; padding: 20px 5px; }
#figureNav li > div { width: 50px; height: 5px; }
#figureNav li:hover { cursor: pointer; }

.intro { padding-bottom: 3em; padding-top: 3em; }
.intro .Box { width: 35%; padding: 0 0; 
    margin-bottom: 1em; margin-left: 5%; }
.intro.news .Box {width:50%;margin-left: 25%;}
.intro .Box .Text { padding: 0 0;  width: 90%; }
.intro .Box { position: relative; }
.intro .Box.backPos1 {     background-size: 90%;
    background-position: center;}
.intro .Box.backPos2 { background-size: 80%; background-position: center; }
.intro .Box.backPos3 { background-position: center center; }

/** Tritt nur in Kraft, wenn backgroundsize.min.htc eingreift **/
// .intro .Box.backPos1 img { position: absolute; left: 40%; width: 50% !important; bottom: 0px; }
// .intro .Box.backPos3 img { position: absolute; left: 0 !important; width: 80% !important; bottom: 0px; }

.angebot, .loesungen { padding-top: 5em; }

.angebot .Box:nth-of-type(1) { width: 28%; float: left; padding: 0 18.5% 0 0; }
.angebot .Box:nth-of-type(2),
.loesungen .Box:nth-of-type(2) { width: 50%; float: left; }

.angebot ul { ;list-style-type: decimal; padding-left: 2em; float: left; }
.angebot li { padding-bottom: 1em; }
.angebot li.hide { height: 0px; overflow: hidden; padding: 0;}

.loesungen .Box:nth-of-type(1) { width: 38%; float: left; padding: 0 10% 0 0; }
.loesungen li { padding-bottom: .4em; }

#teaser { width: 70%; margin: 0 auto; padding: 5em 0; }
.centerContent { width: 80%; max-width: 1000px; margin: 0 auto; }
.kontakt { width: 80%; margin: 0 auto; padding-top: 10em; }navck

.kontakt > div { float: left; }
#KontaktForm { width: 70%; float: right; }
#KontaktForm fieldset { border: none; padding: 0; margin: 0 0 2em 0; }
#KontaktForm label { display: block; margin: 0 0 .5em 0; }
#KontaktForm button {font-size: 1em; }
#KontaktForm input, #KontaktForm textarea { border: 1px solid #000; background: none; width: 96%; padding: .5em 2%; font-size: 1em; }
#KontaktForm textarea { height: 10em; resize: vertical }
#KontaktForm button { border: 1px solid #ffc905; margin-top: 0; background: #ffc905; color: #fff; padding: .4em 5%; }


.angebot {width:50%;}

.leistungen { padding-top: 6em;}
.leistungen li { padding: 1em 0; }
.leistungen li > span:nth-of-type(1) { display: inline-block;  float: left; background-repeat: no-repeat; background-size: 100px 1000px;  }
.leistungen li > span:nth-of-type(2) { float: right; width: 85%; }
.leistungen li:nth-of-type(1) > span:nth-of-type(1) { background-position-y: 0px; }
.leistungen li:nth-of-type(2) > span:nth-of-type(1) { background-position-y: -100px; }
.leistungen li:nth-of-type(3) > span:nth-of-type(1) { background-position-y: -200px; }
.leistungen li:nth-of-type(4) > span:nth-of-type(1) { background-position-y: -300px; }
.leistungen li:nth-of-type(5) > span:nth-of-type(1) { background-position-y: -400px; }
.leistungen.blue li:nth-of-type(1) > span:nth-of-type(1) { background-position-y: -500px; }
.leistungen.blue li:nth-of-type(2) > span:nth-of-type(1) { background-position-y: -600px; }
.leistungen.blue li:nth-of-type(3) > span:nth-of-type(1) { background-position-y: -700px; }
.leistungen.blue li:nth-of-type(4) > span:nth-of-type(1) { background-position-y: -800px; }
.leistungen.blue li:nth-of-type(5) > span:nth-of-type(1) { background-position-y: -900px; }



article { padding-bottom: 5em; }
.FormResponse { padding-top: 10em; }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.respImage { width:100%; }

.extra {
	padding-top: 9em;
}

.smallBox:nth-of-type(3), .smallBox:nth-of-type(5) {
	margin-left: 25%;
}
.smallBox:nth-of-type(4), .smallBox:nth-of-type(6) {
	margin-left: 1%;
}
.smallBox {
	width: 24.5%;
	margin-bottom: 1%;
}

.extraMargin {     padding: 8em 0;
    margin-left: 125%;
    width: 90%; 
}

#backButton {
	padding: .2em .5em;
    margin: 1.6em 1.5% 0 0;
    float: right;
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
    border: 2px solid #0099da;
}

#cebit {
	position: absolute;
    top: 200px;
    left: 2.1%;
}
#cebit img {
	width: 100px;
}

@media screen and (max-width: 1600px) {
.angebot {width:60%;}
	.intro.news .Box {width:60%;margin-left: 20%;}
	.smallBox:nth-of-type(3), .smallBox:nth-of-type(5) {
		margin-left: 20%;
	}
	.smallBox {
		width: 29.5%;
	}
	img.center { width: 52em; margin: -40em 0 0 -26em; }
}
@media screen and (max-width: 1500px) {
.angebot {width:70%;}
	.intro.news .Box {width:70%;margin-left: 15%;}
	.smallBox:nth-of-type(3), .smallBox:nth-of-type(5) {
		margin-left: 15%;
	}
	.smallBox {
		width: 34.5%;
	}
	body { font-size: 9px; }
    .intro .Box.backPos1 { background-size: 60%; }
}
@media screen and (max-width: 1300px) {
.angebot {width:80%;}
	body { font-size: 8px; }
    img.center { width: 78em; margin: -63em 0 0 -39em; }
}
@media screen and (max-width: 1250px) {
	.intro.news .Box {width:80%;margin-left: 10%;}
	.smallBox:nth-of-type(3), .smallBox:nth-of-type(5) {
		margin-left: 10%;
	}
	.smallBox {
		width: 39.5%;
	}
	.intro .column2 { -webkit-column-count: 1; -moz-column-count: 1; -o-column-count: 1; column-count: 1; }	
    .intro .Box .Text { padding: 0 0; }
    .angebot ul { float: none; width: 90%; }
}
@media screen and (max-width: 1100px) {
    #pageID_0 > div { width: 90%; padding: 0 5%; }
    img.center { width: 90em; margin: -70em 0 0 -45em; }
    #r2 { height: 60%; }
    figure .alignContainer { height: auto !important; padding-top: 12em; }
}
@media screen and (max-width: 1000px) {
.angebot {width:90%;}
	.intro.news .Box {width:90%;margin-left: 5%;}
	.smallBox:nth-of-type(3), .smallBox:nth-of-type(5) {
		margin-left: 5%;
	}
	.smallBox {
		width: 44.5%;
	}
	.column2 { -webkit-column-count: 1; -moz-column-count: 1; -o-column-count: 1; column-count: 1; }
}
@media screen and (max-width: 900px) {
	#cebit { top: 70px; left: 0; }
	.extra { padding-top: 4em; }
	.logo20.open {display:none;}
	.logo20container { top: 0;left: 50%;margin-left:-40px;}
	#r1 .logo { width: 46%; }	
    .teaserSet .Box { width: 100%; height: 35%; }
    .teaserSet .Box.extrasmall { height: 15%; color:#000; }
    .teaserSet .Box.extrasmall.grey { background-color: #ededed; }
    .teaserSet .Box > a { height: 6em; }
    .teaserSet .Box > a h2 { font-size: 3em; }
    .teaserSet .Box > a span { font-size: 2.5em; margin-top: 0; bottom: 1.3em; font-weight:bold; }
	.teaserSet .Box > a h2:hover { font-size: 3em; margin-left: 0; }
    img.center { top: 0%; margin-top: 0; width: 58em; margin: -5em 0 0 -29em; }      
    figure > div .Box { width: 40%; }        
    a.Button { width: 100%; }
    .kontakt > div { float: none; }
	#KontaktForm { width: 100%; float: none; padding-top: 5em; }
	@media (min-height: 500px) {
		.teaserSet .Box.small { width: 100%; }
	}
	@media (max-height: 500px) and (min-width: 530px) {
		.teaserSet .Box.small { width: 50%; float:left; height: 82%; }
		.teaserSet .Box.extrasmall { height: 18%; }
		.teaserSet .Box.extrasmall a { padding-bottom: 0; }
	}
	@media (max-height: 400px) {
		// .teaserSet .Box.extrasmall a { padding-bottom: 0; }
	}
}

@media screen and (max-width: 800px) {
	// .respImage { width: 90%; margin-left: 5%; }
	body { font-size: 8px; }    
    .intro .Box, .centerContent { width: 90%; }
    figure > div .Box, .respVita > div  { display: none; }
    .respVita, .respVita article > div.show { display: block; }
    .intro .Box { width: 100%; }
    .intro .Box { background: none !important; margin-left: 0; }
.intro .Box { padding: 0 0;
    margin-bottom: 1em;  }
    // .intro .Box img { display: none; }
    .intro .Box .Text.extraMargin { margin-left: 0; width: 90%; margin: 0 auto; }
    .angebot .Box:nth-of-type(1) { width: 45%; padding: 0 5% 0 0; }
	#backButton {
		margin: 1.6em 3.5% 0 0;
	}
}
@media screen and (max-width: 750px) {
	#r1 .logo { width: 46%; }
}    
@media screen and (max-width: 600px) {
	figure { margin-top: 4em;}
    figure > div .Box { width: 70%; margin-left: 15%; position: absolute; bottom: 10%; height: auto; }
    #figureNav { bottom: 0; }
    #figureNav li { display: inline-block; padding: 10px 5px; }
    #r2.fullHeight { height: calc(100% - 4em); margin-top: 4em; }
    .buttonSet a.float { float: none; width: 100%; }
    .buttonSet a.center { width: calc(100% - 8px); }
 
    
    .angebot .Box:nth-of-type(1), .angebot .Box:nth-of-type(2),
    .loesungen .Box:nth-of-type(1), .loesungen .Box:nth-of-type(2) { width: 100%; padding: 0 0; }
    .angebot ul { padding-left: 1.3em; }
    .angebot .Box:nth-of-type(1),
    .loesungen .Box:nth-of-type(1) { margin-bottom: 2em; }
    
@media screen and (max-width: 500px) {
	.extra { padding-top: 0; }
	h1 { font-size: 4em; }
    h2 { font-size: 3em; }
	#r1 .logo { margin: 1em 0 1em 2.5%; }
    #r2 { height: 40%; }	
    // .intro .Box .Text { padding: 5em 0 3em 0; }  
    .teaserSet .Box > a { width: 95%; height: 5em; padding: 1em 0 1em 5%; display: block; text-decoration: none; }
    .teaserSet .Box > a h2 { font-size: 2.5em; }
    .teaserSet .Box > a h2:hover { font-size: 2.5em; margin-left: 0; }
    .teaserSet .Box > a span { font-size: 2.5em; bottom: 1em; font-weight:bold; }  
	#backButton {
		margin: 1.2em 6.5% 0 0;
	}
}