@charset "utf-8";
/* CSS Document */

body, html, p, h1, h2, h3, h4, h5, ul, li, a {
	padding: 0;
	margin: 0;
}


a {
	text-decoration:none;
}

body {
	font-family: 'Roboto', sans-serif;
    font-size:16px;
	font-weight: 400;
    line-height:1.5; 
}

html {
	width: 100%;
	height: 100%;
}


header {
	width: 100%;
	float: left;
}


.adresse {
	display:block;
	text-align: center;
	color: #fff;
	font-size: 14px;
	width: 100%;
	height: 38px;
	line-height: 38px;
	background-color:#FF9600;
}

.adresse {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c2680+0,209bd7+50,2c2680+100,2c2680+100 */
background: #209bd7; /* Old browsers */
background: -moz-linear-gradient(left, #2c2680 0%, #209bd7 50%, #2c2680 100%, #2c2680 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2c2680 0%,#209bd7 50%,#2c2680 100%,#2c2680 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2c2680 0%,#209bd7 50%,#2c2680 100%,#2c2680 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2680', endColorstr='#2c2680',GradientType=1 ); /* IE6-9 */
}

.adresse a{
	color: #fff;
}

.adresse a:hover{
	color: #222;
}

#nav-menue {
	position: fixed;
	top: 0;
	z-index: 10000;
	background-color:rgba(255,255,255,1.00);
	width: 100%;
}

#logo {	
	display: block;
	float: left;	
	margin: 0 0 0 5%;
	}

#logo {	
	width: auto;
}

#steuerung {   
	float: right; 
	margin: 50px 5% 0 0;
}


#steuerung li {
    list-style-type:none;
	float:left;
    margin:0;
	padding: 15px;
}

#steuerung a, #steuerung a:link, #steuerung a:visited{
	display: block;
	color:rgb(50,50,50);
    font-weight:500;
	color: #003f7d;
	padding-bottom: 5px;
}

#steuerung a:hover {
	display: block;
	color: #209bd7;
}

.menue-button {
	display: none;
}	


#main {
	margin-top: 194px;
}


/* Sections */

#start {
	
}

#wrap, #wrap1, #wrap2, #wrap3, #wrap4 {
	width: 100%;
	background-color: #e1e3eb;
	padding: 0;
	margin:0;
}

#inhalt, #inhalt1, #inhalt2, #inhalt3, #inhalt4 {
	width: 900px;
	padding: 150px 0 50px 0;
	margin: 0 auto;
	
}
	
.box {
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	background: #fff no-repeat fixed;
	background-position: center;
	
}

.box {
	background-size:auto;
	height:650px;
}
	
#kreis, #kreis1, #kreis2, #kreis3, #kreis4, kreis5{
	position:relative;
	width: 200px;
    height: 200px;
    text-align: center;
    border-radius: 104px;
	transform: rotate(-6deg);
	margin: -105px auto;
}

.blue-grad {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#209bd7+0,2c2680+100,2c2680+100 */
background: #209bd7; /* Old browsers */
background: -moz-linear-gradient(left, #209bd7 0%, #2c2680 100%, #2c2680 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #209bd7 0%,#2c2680 100%,#2c2680 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #209bd7 0%,#2c2680 100%,#2c2680 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209bd7', endColorstr='#2c2680',GradientType=1 ); /* IE6-9 */
}

.blue-grad {
	display: table;
	border: 5px solid #fff;
	-webkit-box-shadow: 7px 7px 6px -2px rgba(0,0,0,0.33);
	-moz-box-shadow: 7px 7px 6px -2px rgba(0,0,0,0.33);
	box-shadow: 7px 7px 6px -2px rgba(0,0,0,0.33);
}

.red-grad {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff070f+0,83070f+100 */
background: #ff070f; /* Old browsers */
background: -moz-linear-gradient(left, #ff070f 0%, #83070f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff070f 0%,#83070f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ff070f 0%,#83070f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff070f', endColorstr='#83070f',GradientType=1 ); /* IE6-9 */
}

.red-grad {
	display: table;
	border: 5px solid #fff;
	-webkit-box-shadow: 7px 7px 6px -2px rgba(0,0,0,0.33);
	-moz-box-shadow: 7px 7px 6px -2px rgba(0,0,0,0.33);
	box-shadow: 7px 7px 6px -2px rgba(0,0,0,0.33);
}


h1 {
	font-size: 24px;
	display: table-cell;
    vertical-align: middle;	
	color: #fff;
	padding: 20px;
}

.img-left {
	width: 370px;
	padding: 0 60px 60px 0;
	float: left;
}

.content-right {
	overflow: hidden;
}

.img-right {
	width: 370px;
	float: right;
	padding: 0 0 60px 60px;
}

.red{
	font-weight: 600;
	color:rgb(50,50,50);
	color: #003f7d;
	font-size: 18px;
	list-style-image:url(../images/reddot.png);
	margin: 0 0 0 36px;
	line-height: 1.5em;
} 

.red li {
	padding: 0 0 20px 20px ;
	
}
.content-left {
	overflow: hidden;
}

.text {
	margin-bottom: 30px;
	line-height: 1.8em;
	color: #2c2680;
}

.big {
	font-size: 18px;
	margin-bottom: 30px;
	line-height: 1.8em;
	color: #2c2680;
}

.icon {
	padding: 0 30px 0 0;
}

#leistungen-img {
	width: 100%;
	height: 400px;
	background: url(../images/wide_01.jpg) no-repeat;
	background-position: center;
	padding: 0;
	margin: 0;
}

#verleih-img {
	width: 100%;
	height: 400px;
	background: url(../images/wide_02.jpg) no-repeat;
	background-position: center;
	padding: 0;
	margin: 0;
}

#checkliste-img {
	width: 100%;
	height: 400px;
	background: url(../images/wide_03.jpg) no-repeat;
	background-position: center;
	padding: 0;
	margin: 0;
}


#kontakt-img {
	width: 100%;
	height: 400px;
	background: url(../images/wide_04.jpg) no-repeat;
	background-position: center;
	padding: 0;
	margin: 0;
}





#clearfix {
	clear: both;
}

#kontakt-stoerer {
	position: fixed;
	right: 0;
	top: 35%;
	width: 63px;
	height: 190px;
	background:url(../images/kontakt-bg.png) no-repeat;
}

.red-small{
	font-weight: 600;
	color:rgb(50,50,50);
	color: #003f7d;
	font-size: 14px;
	list-style-image:url(../images/reddot-small.png);
	margin: 0 0 0 36px;
	line-height: 1.5em;
} 

.red-small li {
	padding: 0 0 10px 10px;
	
}

td {
	color:#2c2680;
	}

	
 .form {
	font-family: 'Roboto', sans-serif;	
	font-size: 1em;
	width: 600px;
	padding: 8px 12px;
	border: solid 1px #2c2680;
	color:#009ee3;
	
}
	

.button, .button-reset {
	font-family: 'Roboto', sans-serif;	
	cursor: pointer;
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	padding: 12px 22px;
}

.button {
	border: 1px solid #009ee3;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#209bd7+0,2c2680+100,2c2680+100 */
background: #209bd7; /* Old browsers */
background: -moz-linear-gradient(left, #209bd7 0%, #2c2680 100%, #2c2680 100%);
background: -webkit-linear-gradient(left, #209bd7 0%, #2c2680 100%, #2c2680 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#209bd7), color-stop(1, #2c2680), to(#2c2680));
background: -o-linear-gradient(left, #209bd7 0%, #2c2680 100%, #2c2680 100%);
background: linear-gradient(left, #209bd7 0%, #2c2680 100%, #2c2680 100%); /* FF3.6-15 */
 /* Chrome10-25,Safari5.1-6 */
 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209bd7', endColorstr='#2c2680',GradientType=1 ); /* IE6-9 */
}

.button-reset {
	margin-right: 6px;
	border: 1px solid red;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff070f+0,83070f+100 */
background: #ff070f; /* Old browsers */
background: -moz-linear-gradient(left, #ff070f 0%, #83070f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff070f 0%,#83070f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ff070f 0%,#83070f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff070f', endColorstr='#83070f',GradientType=1 ); /* IE6-9 */
}


#kontakt-col, #kontakt-col1, #kontakt-col2 {
	float: left;
	width: 270px;
	background: #fff;
	min-height: 300px;
	text-align: center;
	}

.col1 {
	margin-right: 45px;
}


.kontakt-icon {
	padding: 30px;
}

.kontakt-inhalt {
	overflow: hidden;
}


.footer {
	display:block;
	text-align: center;
	color: #fff;
	font-size: 14px;
	width: 100%;
	height: 75px;
	line-height: 75px;
	background-color:#FF9600;
}

.footer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c2680+0,209bd7+50,2c2680+100,2c2680+100 */
background: #209bd7; /* Old browsers */
background: -moz-linear-gradient(left, #2c2680 0%, #209bd7 50%, #2c2680 100%, #2c2680 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2c2680 0%,#209bd7 50%,#2c2680 100%,#2c2680 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2c2680 0%,#209bd7 50%,#2c2680 100%,#2c2680 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2680', endColorstr='#2c2680',GradientType=1 ); /* IE6-9 */
}


.active{
	color: red;	
	border-bottom: thick solid #209bd7;
}

.stoerer {
	padding: 8px 0 0 7px;
}

.formular {
	margin-bottom: 40px;
}

@media only screen and (max-width:1150px) {
	.box {
		height: 450px;
		background-size: 150%;
	}
}

@media only screen and (max-width:1400px) {
	.box {
		height: 500px;
		background-size: 130%;
	}
}

@media only screen and (max-width:900px) {
	.box {
	background-size: 150% auto;
	height: 350px;
}

	.menue-button {
		display: block;
	}
	.menue-button {
		display: block;
		position: absolute;
		right: 5%;
		top: 97px;
		padding: 0.5em 0.6em;
		cursor: pointer;
		text-decoration: none;
	}	
	
	.menue-button {
		color: #209bd7;
		background: #fff;
		border: 1px solid #209bd7;
		font-weight: 500;
	}
	
	.menue-button:hover {
		color: #fff;
		background: #209bd7;
		
			}
	
	
	#bereichlogo {
		width: 100%;
	}
	#steuerung {
		float:left;
		width: 100%;
		display: none;
	}	
	#steuerung li {
		text-align: center;
		width: 100%;
		border-bottom: 2px solid #209bd7;
	}	
	
	.active{
		color: #209bd7;
		border: none;
}


	
}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	