.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clearfix:before,
.clearfix:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

body {min-width: 300px;}

.box {margin-left: auto; margin-right: auto;}

.grid1,
.grid2,
.grid3,
.grid4
{display:inline; float: left; position: relative;}

.box .Spalte1,
.box .Spalte2,
.box .Spalte3 {display:inline; float: left; position: relative; padding:0; margin:0;}

.box.fluid {width:96%; padding-left:1%; padding-right:1%; }
.box.fluid .grid1 { width:23%; margin-left:1%; margin-right:1%;}
.box.fluid .grid2 { width:70%; margin-left:1%; margin-right:1%;}
.box.fluid .grid3 { width:73%; margin-left:1%; margin-right:1%;}
.box.fluid .grid4 { width:98%; margin-left:1%; margin-right:1%;}

.box.fluid .Spalte1.fluid {width:25%;}
.box.fluid .Spalte1.fluid .grid1,
.box.fluid .Spalte1.fluid .grid2,
.box.fluid .Spalte1.fluid .grid3,
.box.fluid .Spalte1.fluid .grid4 { width:92%; margin-left:4%; margin-right:4%;}

.box.fluid .Spalte2.fluid {width:50%;}
.box.fluid .Spalte2.fluid .grid1 { width:46%; margin-left:2%; margin-right:2%;}
.box.fluid .Spalte2.fluid .grid2,
.box.fluid .Spalte2.fluid .grid3,
.box.fluid .Spalte2.fluid .grid4 { width:96%; margin-left:2%; margin-right:2%;}

.box.fluid .Spalte3.fluid {width:75%;}
.box.fluid .Spalte3.fluid .grid1 { width:30.67%; margin-left:1.33%; margin-right:1.33%;}
.box.fluid .Spalte3.fluid .grid2 { width:64%; margin-left:1.33%; margin-right:1.33%;}
.box.fluid .Spalte3.fluid .grid3,
.box.fluid .Spalte3.fluid .grid4 { width:97.34%; margin-left:1.33%; margin-right:1.33%;}

.box.fluid .sl1 { margin-left:10%;}
.box.fluid .sl2 { margin-left:30%;}
.box.fluid .sl3 { margin-left:74%;}

.box.fluid .sr1 { margin-right:10%;}
.box.fluid .sr2 { margin-right:30%;}
.box.fluid .sr3 { margin-right:74%;}


@media only screen and (min-width: 300px) and (max-width: 459px) {
	body {
		background: url(../img/Logo_Maler-Uhlig_600x587.png) no-repeat;
		background-position: right -160px top 500px;
		background-size: 300px;
		background-color: #000;
	  color: #FFF;
	}
}

@media only screen and (min-width: 460px) and (max-width: 759px) {
	body {
		background: url(../img/Logo_Maler-Uhlig_600x587.png) no-repeat;
		background-position: right -120px top 440px;
		background-size: 400px;
		background-color: #000;
	  color: #FFF;
	}
	.box.fluid .grid2 { width:70%; margin-left:1%; margin-right:1%;}
	h1 { font-style: normal; font-weight: 100; font-size: 26px; }
	h2 { font-style: normal; font-weight: 100; font-size: 22px; }
	p { font-style: normal; font-weight: 100; font-size: 14px; }
	.gmbh { font-style: normal; font-weight: 100; font-size: 20px; }
	footer p { font-style: normal; font-weight: 300; font-size: 14px; }
}


@media only screen and (min-width: 760px) and (max-width: 899px), @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation: portrait) {
	body {
		background: url(../img/Logo_Maler-Uhlig_600x587.png) no-repeat ;
		background-position: right -50px top 380px;
		background-size: 500px;
		background-color: #000;
	  color: #FFF;
	}
	.box.fluid .grid2 { width:70%; margin-left:1%; margin-right:1%;}
	h1 { font-style: normal; font-weight: 100; font-size: 28px; }
	h2 { font-style: normal; font-weight: 100; font-size: 24px; }
	p { font-style: normal; font-weight: 100; font-size: 16px; }
	.gmbh { font-style: normal; font-weight: 100; font-size: 22px; }
	footer p { font-style: normal; font-weight: 300; font-size: 16px; }
}

@media only screen and (min-width: 900px) and (max-width: 1199px), @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation: landscape) {
	body {
		background: url(../img/Logo_Maler-Uhlig_600x587.png) no-repeat;
		background-position: right 50px top 20px;
		background-size: 400px;
		background-color: #000;
	  color: #FFF;
	}
	.box.fluid .grid2 { width:50%; margin-left:1%; margin-right:1%;}
	h1 { font-style: normal; font-weight: 100; font-size: 32px; }
	h2 { font-style: normal; font-weight: 100; font-size: 28px; }
	p { font-style: normal; font-weight: 100; font-size: 20px; }
	.gmbh { font-style: normal; font-weight: 100; font-size: 26px; }
	footer p { font-style: normal; font-weight: 300; font-size: 16px; }
}

@media only screen and (min-width: 1200px){
	body {
		background: url(../img/Logo_Maler-Uhlig_600x587.png) no-repeat;
		background-position: right 200px top 50px;
		background-size: 30%;
		background-color: #000;
	  color: #FFF;
	}
	.box.fluid .grid2 { width:50%; margin-left:1%; margin-right:1%;}
	h1 { font-style: normal; font-weight: 100; font-size: 36px; }
	h2 { font-style: normal; font-weight: 100; font-size: 32px; }
	p { font-style: normal; font-weight: 100; font-size: 24px; }
	.gmbh { font-style: normal; font-weight: 100; font-size: 30px; }
	footer p { font-style: normal; font-weight: 300; font-size: 18px; }
}

body.impressum{
	background-image: none;
}