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

* {
	font-family:Arial, Helvetica, sans-serif;
}

/* Main Content */
.main-content {
	width:100%;
	margin:0;
	overflow:hidden;
	position:relative;
	float:left;
	background-color:#ffffff;
}

.main-image {
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	background-color:#ffffff; 
	width:100%; height:300px; 
	display:block; 
	float:left; 
	position:relative;
	/* for scaling responsive images */
	image-rendering:optimize-contrast;
	image-rendering:-webkit-optimize-contrast;
	image-rendering:-moz-optimize-contrast;
	image-rendering:-ms-optimize-contrast;
}

#start-image {
	background-image:url(../images/main-image-mobile.jpg);
	height:400px; 
}

#bestnoten-image {
	background-image:url(../images/main-image-bestnoten-mobile.jpg);
}

#vertrauensbonus-image {
	background-image:url(../images/main-image-vertrauensbonus-mobile.jpg);
}

#branchenloesungen-image {
	background-image:url(../images/main-image-branchenloesungen-mobile.jpg);
}

#beratung-image {
	background-image:url(../images/main-image-beratung-mobile.jpg);
}

.main-text {
	width:100%;
	height:auto;
	overflow:auto;
	position:relative;
	float:left;
	margin:0;
	padding:5%;
	box-sizing:border-box;
	background-color:#ffffff;
	text-align:center;	
}

.main-text > * {
	text-align:center;
}

.title-container {
	width:80%; height:280px; 
	position:absolute; 
	left:10%; top:10px; 
	display:block; 
}

.stoerer {
	width:100px; 
	height:100px; 
	position:absolute; 
	right:5%;
	top:auto;
	bottom:20px; 
	z-index:200;	
}

/* Second Content */
.second-content {
	width:100%;
	overflow:auto;
	position:relative;
	background-color:#ffffff;
	padding:5% 5% 5% 5%;
	box-sizing:border-box;
}

.second-content .box {
	width:100%;
	float:left;
	/*padding:5%;*/
	margin:0 0 5% 0;
	box-sizing:border-box;
	overflow:hidden;
	background-color:#f4f4f6;
	display:block;
	position:relative;
}

.second-content a.box {
	transition: all 0.5s ease-out;
}

.second-content a.box:hover {
	background-color:#eaeaed;
	transition: all 0.5s ease-out;
}

.second-content .box img {
	width:100%;
	height:auto;
	display:block;
	/* for scaling responsive images */
	/*
	image-rendering:optimize-contrast;
	image-rendering:-webkit-optimize-contrast;
	image-rendering:-moz-optimize-contrast;
	image-rendering:-ms-optimize-contrast;
	*/
}

.second-content .box .geraet {
	margin-top:90px;
}

.second-content .box .over-text {
	position:absolute;
	padding:5% 5% 5% 0;
	top:10px; 
	left:45%;
	width:50%;	
}

.second-content .box .over-text > * {
	text-align:left;
}

.second-content .box .over-text img {
	width:90%;
	height:auto;	
}

.second-content .box .center-text {
	position:absolute;
	padding:5% 5% 5% 5%;
	top:0; left:0;
	width:90%;	
}

.second-content .box .center-text > * {
	text-align:center;
}

.second-content .box .center-text img {
	width:60%;
	margin-left:20%;
	height:auto;	
}

.second-content .box .left-text {
	position:absolute;
	padding:5% 5% 5% 5%;
	top:0; left:0;
	width:90%;	
}

.second-content .box .left-text > * {
	/*text-align:center;*/
}

.second-content .box .left-text img {
	width:60%;
	margin-left:20%;
	height:auto;	
}

.second-content .box .bottom-text {
	position:relative;
	float:left;
	padding:5% 5% 5% 5%;
	width:100%; height:auto;
	box-sizing:border-box;
	overflow:auto;
}

.second-content .box .bottom-text p {
	font-size:1.2em;
	line-height:1.6em;
}

.second-content .box .bottom-text .link-common {
	font-size:1.2em;
}

.second-content .table-box {
	width:100%; 
	overflow:auto; 
	float:left;	
	margin:0;
}


@media screen and ( min-width:480px ) {
	.second-content .box {
		width:49%;
		margin:0 1% 5% 0;
	}
	
	.second-content .box .over-text {
		top:0; 
	}
	
	.second-content .box .geraet {
		margin-top:60px;
	}
}

@media screen and ( min-width:600px ) {
	/* Main Content */
	.main-content {
		overflow:auto;
	}
	
	.main-image {
		height:480px;
	}
	
	#start-image {
		background-image:url(../images/main-image.jpg);
		height:480px;
	}
	
	#bestnoten-image {
		background-image:url(../images/main-image-bestnoten.jpg);
	}
	
	#vertrauensbonus-image {
		background-image:url(../images/main-image-vertrauensbonus.jpg);
	}
	
	#branchenloesungen-image {
		background-image:url(../images/main-image-branchenloesungen.jpg);
	}
	
	#beratung-image {
		background-image:url(../images/main-image-beratung.jpg);
	}
	
	.main-text {
		width:40%;
		position:absolute;
		margin:40px 0 0 8%;	
		padding:0%;
		background-color:transparent;
		text-align:left;
	}
	
	.main-text > * {
		text-align:left;
	}
	
	.title-container {
		width:45%; height:78%;  
		left:48%; top:80px; 
	}
	
	.stoerer {
		width:180px; 
		height:180px; 
		right:8%; bottom:0; top:auto;	
	}	
	
	/* Second Content */
	.second-content {
		padding:0% 5% 5% 5%;
	}
	
	.second-content h3 {
		margin:0;
		font-size:1.6em;	
	}
	
	.second-content .box {
		width:32.8%;
		/*padding:4%;*/
		margin:0 0.5% 0.5% 0;
	}
	
	.second-content .box .geraet {
		margin-top:70px;
	}
	
	.second-content .box .center-text {
		padding:5% 6% 5% 6%;	
		width:88%;
	}
	
	.second-content .box .center-text img {
		
	}
	
	.second-content .box .left-text {
		padding:5% 6% 5% 6%;	
		width:88%;
	}
	
	.second-content .box .left-text img {
		margin-left:0;	
	}
	
	.second-content .box .bottom-text p {
		font-size:1.1em;
		line-height:1.4em;
	}
	
	.second-content .box .bottom-text .link-common {
		/*font-size:1.0em;*/
	}
	
	.second-content .table-box {
		margin:40px 0 0 0;
	}

}


@media screen and ( min-width:900px ) {
	.main-content {
		margin:100px 0 0 0;
		height:65%; min-height:65%;		
	}
	
	.stand-alone {
		height:80%; min-height:80%;		
	}
	
	/* Hintergrundbilder */
	.main-image {
		 height:100%;
		 position:absolute;
	}
	
	#start-image {
		height:100%;	
	}
	
	.main-text {
		width:40%;
		margin:80px 0 0 8%
	}
	
	.stoerer {
		right:8%; bottom:0; top:auto;	
	}
	
	.second-content {
		padding:0% 5% 5% 5%;
		min-height:30%;	
	}
	
	.second-content .box {
		width:24.5%;
		/*padding:3%;*/
	}
	
	.second-content .box .geraet {
		margin-top:80px;
	}
	
	.second-content.five-boxes .box {
		width:32.8%;
	}
	
	.second-content.six-boxes .box {
		width:32.8%;
	}
}

@media screen and ( min-width:1200px ) {
	.main-text {
		margin:160px 0 0 12%;
		width:35%;	
	}
	
	.stoerer {
		width:180px; height:180px;
	}
	
	.second-content {
		padding:0% 8% 8% 8%;	
	}
	
	.second-content .box {
		width:19.5%;
		/*padding:2%;*/
	}
	
	.second-content.five-boxes .box {
		width:19.5%;
	}
	
	.second-content.six-boxes .box {
		width:24.5%;
	}
}

@media screen and ( min-width:1600px ) {
	.main-content {
		margin:80px 0 0 0;
	}
	
	.main-text {
		width:34%;	
	}
	
	.main-image {
		background-size:auto 180%;	
	}
	
	.stand-alone .main-image {
		background-size:cover;
	}
	
	.second-content {
		padding:0% 8% 8% 8%;	
	}
	
	.second-content .box {
		width:19.5%;
	}
	
	.second-content.six-boxes .box {
		width:16.16%;
	}
	
}


@media screen and ( min-width:1800px ) {
	.main-image {
		background-size:auto 160%;	
	}
	
	.second-content .box {
		width:16.16%;
	}
	
	.second-content.five-boxes .box {
		width:19.5%;
	}
}

@media screen and ( min-width:2000px ) {
	.main-image {
		background-size:auto 140%;	
	}
}

/* landscape */
@media screen 
  and (max-width: 760px)
   and (max-height: 500px) 
   and (orientation: landscape) {
	.stoerer {
		width:100px; 
		height:100px; 
		position:absolute; 
		right:5%;
		top:180px;
		bottom:auto; 
	}
	
	/* Main Content */
	.main-content {
		min-height:100%; height:auto;
		margin:0;
		overflow:hidden;
		position:relative;
		background-color:#ffffff;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}
	
	.main-image {
		position:relative;
		background-size:cover;
		background-position:center center; 
		width:100%; height:300px; 
		display:block; 
		float:left; 
	}
	
	#start-image {
		background-image:url(../images/main-image-mobile.jpg);
		background-position:center top;
		height:640px; 
	}
}