/* ***** (1) CSS-RESET ***** */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ***** Ende ........ CSS-RESET ***** */

html { height: 100%;}

* { margin: 0; padding: 0;}

header, nav, section, footer {
    display: block;
}

body			{  
				background-color: #ffffff;
				height:100%;
				}
				
#wrapper 		{ 	
				background-color: #ffffff;
				width: 100%;
				position: relative;
   				min-height: 100%;
   				margin: 0 auto;	
   				margin-top: 0px;
   				} 	  				

p, table 			{	
				font-family: 'PT Sans', sans-serif;
				letter-spacing: 0px;
				font-weight: 400;
				text-align: left;
				color: #504745;
				line-height: 150%;
				}	
				
li				{
				font-family: 'PT Sans', sans-serif;
				letter-spacing: 0px;
				font-weight: 400;
				text-align: left;
				color: #504745;
				line-height: 120%;
				list-style-position: outside;
 				list-style-type: square;
 				margin-left: 18px;
 				}

a 				{	
				text-decoration:none;
				font-family: 'PT Sans', sans-serif;
				font-weight: 400;
				color: #ebebeb;
				font-size: 100%;
				letter-spacing: 2px;
				text-align: center;
				vertical-align: middle;
				}
			
a:link 			{ text-decoration:none; color:#ebebeb; }
a:hover			{ text-decoration:none; color:#666666; }
a:focus 		{ text-decoration:none; color:#666666; }	



h1, h2, h3		{
				text-decoration:none;
				font-family: 'PT Sans Narrow', sans-serif;
				font-weight: 400;
				padding: 0px;
				text-align: left;
				letter-spacing: 1px;
				color: #ddd;
				}					
				
h4, h5 			{
				text-decoration:none;
				font-family: 'PT Sans', sans-serif;
				font-weight: 400;
				padding: 0px;
				font-size:140%;
				text-align: left;
				line-height: 150%;
				float:left;
				letter-spacing: 0px;
				color: #ff6633;
				}	
				
h6				{
				text-decoration:none;
				font-family: 'PT Sans', sans-serif;
				font-weight: 400;
				padding: 0px;
				font-size:110%;
				text-align: left;
				line-height: 150%;
				loat:left;
				letter-spacing: 0px;
				color: #ff6633;
				}	

nav				{
				background-color: #666;
				}				
				
.navigation		{
				height:100%;
				width:100%; 
				}
				
.navtext a 		{
				display:block;
				}
				
footer a 		{
				font-size: 90%;
				}
				
footer a:hover		{
				color: #ff6633;
				}				
				
.navtext a:hover {
				background:#ddd;
				}	

.navtext		{
				float: left;
				text-align: center;
  				height: 100%;
				}							

.special		{
				color: #ff6633;
				}


#inhalt			{
				width: 100%;
				height: 100%;
				padding-bottom: 50px;  /* footer abziehen */
				} 
								
header 			{
				background-image: url(grafik/fliesenbild2.jpg); 
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				width: 100%;
				min-height:100px;
				}			
				
.logo			{
				display:block;
				background-image: url(grafik/logo.jpg); 
				background-repeat: no-repeat;
				background-position: left top;
				width: auto;
  				float:left;
  				margin-left: 10%;
				}							
				
.telenr			{
				background-image: url(grafik/telefon.png); 
				background-repeat: no-repeat;
				background-position: left;
				height:36px;
  				width:205px;
  				margin-right: 10%;
  				margin-bottom:3%;
				}							
				
#seiteninhalt	{
				padding-top: 5%;
				padding-bottom: 5%;
				height: 100%;
				width: 100%;
				}					
				
.sidebar		{
				float:left;
				margin-left: 10%;
				margin-right:5%;
				margin-bottom:40px;
				width:20%;
				min-height:400px;
				}
				
.kontakt		{
				min-height: 250px;	
				float:left;
				width:100%;
				padding-right:10%;
				padding-left:10%;
				padding-top: 50px;	
				padding-bottom: 50px;
				height: auto;
				border-width: 1px;
				border-color: #999999;
				border-style: solid;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				margin-bottom:40px;
				}	
				
.kontakt	p	{
				line-height: 140%;;	
				color: #666666;
				letter-spacing: 0px;
				padding-top: 10px;
				}			
				
.kontakt h4		{		
				font-size:130%;
				color: #ff6633;
				}										
				
section 		{		
				float:right;		
				background-image: url(grafik/fliesenhell.jpg); 
				background-repeat: no-repeat;
				background-position: right bottom;
				background-size: 800px auto;
				border-top-width: 1px;
				border-bottom-width: 0px;
				border-left-width: 0px;
				border-right-width: 0px;
				border-color: #999999;
				border-style: solid;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				}			


article			{
				float:left;
				margin-bottom: 80px;
				}
				
footer			{
				position: absolute;
				bottom: 0;
				text-align: center;
				width:100%;
				background-color: #666666;	
				padding-top: 25px;
				height:45px;
				}				
				
.clearfix:after {
				content: ".";
				display:block;
				clear: both; 
				height: 0;
				visibility: hidden;
				}					
				
.dfliesen		{			
				background-image: url(grafik/siegel_badsanierung.png); 
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				width:100%;
				height: 250px;
				float: left;
				}					

.dfliesentext	{
  				color: rgba(25,125,65,0.5);	
  				width:100%;
  				height: 250px;
  				float: left;
				}
					
				
.imga, .imgb, .imgc, .imgd, .imge, .imgf, .imgg, .imgh, .imgi, .imgj, .imgk, .imgl, .imgm, .imgn, .imgo, .imgp, .imgq	
				{
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				width:100%;
				height: 100%;
				}	
				
.imga p, .imgb p, .imgc p, .imgd p, .imge p, .imgf p, .imgg p, .imgh p, .imgi p, .imgj p, .imgk p, .imgl p, .imgm p, .imgn p, .imgo p, .imgp p, .imgq p			
				{
				text-decoration:none;
				font-family: 'PT Sans', sans-serif;
				font-weight: 400;
				font-size:90%;
				letter-spacing: 0px;
				color: #666;
				display: inline;
				background: white;
				padding-top: 8px;
				padding-bottom: 5px;
				padding-left: 30px;
				padding-right: 20px;
				border-radius: 0px 0px 0px 0px;
				-moz-border-radius: 0px 0px 0px 0px;
				-webkit-border-radius: 0px 0px 0px 0px;
				border-width: 1px;
				border-color: #ebebeb;
				border-style: solid;
				position: absolute;
				bottom: 0;
				right: 0;
				}					
											
.imga			{
				background-image: url(grafik/niesche.jpg); 
				}					
				
.imgb			{
				background-image: url(grafik/wanne.jpg); 
				}	
				
.imgc			{
				background-image: url(grafik/grossefliesen.jpg); 
				}					
				
.imgd			{
				background-image: url(grafik/holzfliesen.jpg); 
				}	
				
.imge			{
				background-image: url(grafik/steintreppe.jpg); 
				}					
				
.imgf			{
				background-image: url(grafik/mauerabdeckung.jpg); 
				}	
				
.imgg			{
				background-image: url(grafik/ledsauna.jpg); 
				}	
				
.imgh			{
				background-image: url(grafik/glaswanddusche.jpg); 
				}					
				
.imgi			{
				background-image: url(grafik/wannefreistehend.jpg); 
				}	
				
.imgj			{
				background-image: url(grafik/glasduschkabine.jpg); 
				}					
				
.imgk			{
				background-image: url(grafik/toilettenwand.jpg); 
				}	
				
.imgl			{
				background-image: url(grafik/mosaikniesche.jpg); 
				}		

.imgm			{
				background-image: url(grafik/klinkerplatte.jpg); 
				}					
				
.imgn			{
				background-image: url(grafik/klinkerhaus_03.jpg); 
				}	
				
.imgo			{
				background-image: url(grafik/klinkerhaus_01.jpg); 
				}	
				
.imgp			{
				background-image: url(grafik/klinkerhaus_02.jpg); 
				}					
				
.imgq			{
				background-image: url(grafik/klinker.jpg); 
				}	
				
		
				
	
				
td				{
				width: 33%;
				border-width: 1px;
				border-color: #ff6633;
				border-bottom-style: solid;
				padding-left: 2%;
				padding-right: 1%;
				padding-top: 3%;
				padding-bottom: 3%;
				}
				
td	h4			{
				color: #504745;
				}				
																							
				
@media screen and (min-width: 1px)  	/* ********** ab 240px ********** */
{
				
p, li, table				{
				font-size: 85%;
				}				

h1				{
				font-size:140%;
				margin-bottom: 14px;
				margin-top:5px;
				margin-left: 20px;
				padding-left: 25px;
				}	
				
h2				{
				font-size:100%;
				margin-left: 0px;
				ackground-color: purple;
				float:left;
				padding-left: 0px;
				}	

h3				{
				font-size:110%;
				margin-left: 25px;
				padding-top:6px;
				ackground-color: purple;
				}

.telenr			{
				background-size: 20px 20px;
				border-top-width: 1px;
				border-color: #bbb;
				border-style: solid;
				float: left;
				width: 80%;
				margin-left:10%;				
				margin-top:0%;
				margin-bottom:35px;
				padding-top: 6px;
  				padding-bottom: 10px;
  				height: auto;
  				ackground-color: yellow;
				}

.logo			{
				background-size: 30px 30px;
				min-height:80px;
  				margin-top:50px;
  				margin-bottom:10px;
				padding-left: 0px;
  				ackground-color: purple;
  				margin-right: 10%;
  				}
  				
.navtext a		{
				font-size:80%;
				}
  				
nav				{
				width:100%;
				in-height: 200px;	
				padding-right: 0%;
				padding-left: 0%;
				margin-bottom: 30px;
				border-top-width: 2px;
				border-color: #999999;
				border-style: solid;
				}   
				
.navtext		{
				width: 100%;
				border-bottom-width: 2px;
				border-color: #999999;
				border-style: solid;
				} 
				
.navtext a 		{
				height: auto;	
				padding: 10px;
				}	
				
section 		{		
				padding-left:3%;
				padding-right:3%;
				padding-top: 50px;	
				padding-bottom: 50px;	
				margin-right:10%;
				margin-left: 10%;
				margin-bottom: 50px;
				min-height:	auto;
				width:80%;
				}	
				
.sidebar		{
				margin-left: 10%;
				margin-right:10%;
				width:80%;
				}		
				
.imagebox		{
				height: 300px;
				width: 90%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				padding: 5%;
				
				}
	
.imageboxlong		{
				height: 1500px;
				width: 90%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				padding: 5%;
				
				}
				
article			{
				width:90%;
				padding-left: 30px;
				float:left;
				border-left-width: 1px;
				border-color: #ff6633;
				border-style: dashed;
				}	
				
table			{
				width:100%;
				margin-left: 0%;
				margin-right: 0%;
				text-align: left;
				}												

}


@media screen and (min-width: 480px)  	/* ********** ab 480px ********** */
{		


h1				{
				font-size:210%;
				margin-bottom: 20px;
				margin-top:10px;
				margin-left: 50px;
				}

h2				{
				font-size:115%;
				}
				
h3				{
				padding-bottom: 10px;
				padding-top: 0;			
				font-size:120%;
				}				
						
.logo			{
				background-size: 50px 50px;
				min-height:80px;
  				margin-top:50px;
  				margin-bottom:30px;
				padding-left: 0px;
  				ackground-color: purple;
  				}	
  				
 .telenr		{
				padding-top: 15px;
  				height: auto;
				} 		
				
.navtext a 		{
				font-size:90%;
				}

.imagebox		{
				min-height: 400px;
				width: 100%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				padding: 0;
				}
	
.imageboxlong		{
				height: 1600px;
				width: 90%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				padding: 5%;
				
				}
					
}
			
@media screen and (min-width: 720px) /* ********** ab 720px ********** */ 
{		

				
p, li, table			{
				font-size: 95%;
				}				

h1				{
				font-size:220%;
				}	
				
h2				{
				font-size:140%;
				}	
				
h3				{
				padding-bottom: 10px;
				padding-top: 0;			
				font-size:140%;
				}	
				
.logo			{
  				margin-top:6%;
  				}
				
.navtext		{
				width: 20%;
				border-bottom-width: 0;
				border-style: none;
				} 
				
.navtext a 		{
				height:42px;	
				padding-top: 28px;
				padding-bottom: 0;
				padding-right: 0;
				padding-left: 0;
				font-size:100%;
				}	

nav				{
				height: 70px;
				border-bottom-width: 0;
				border-style: none;
				}
				
.first			{
				margin-right: 0%;
				margin-left: 0%
				}		
				
.dfliesen		{
				margin-top: 30px;
				width:50%;
				
				}
				
.kontakt		{
				width:50%;
				}	
				
.imagebox		{
				min-height: 400px;
				width: 100%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 80px;
				}
	
.imageboxlong		{
				height: 2000px;
				width: 90%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				padding: 5%;
				
				}
				
table			{
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
				}												
					
				
}		
	
@media screen and (min-width: 960px)  	/* ********** ab 960px ********** */ 
{	
				
h1				{
				margin-left: 0px;
				padding-bottom: 15px;
				margin-bottom: 0px;
				margin-top:4px;
				padding-left: 105px;
				}
				
h2				{
				font-size:125%;
				margin-left: 0px;
				padding-left: 105px;
				}				
				
h3				{
				font-size:140%;
				margin-left: 35px;
				padding-top:8px;
				letter-spacing: 0px;
				}	
				
p, li				{
				font-size: 100%;
				}	
				
.telenr			{
 				background-size: 30px 30px;
				float: right;
				margin-left:0%;
				margin-top:6%;
				width: auto;
				border-top-width: 1px;
				border-style: none;
				padding-top: 22px;
  				padding-bottom: 22px;
  				margin-left:0%;
				}	
				
.logo			{
				background-size: 80px 80px;
				height:80px;
  				margin-top:6%;
  				margin-bottom:5%;
  				padding-left: 0px;
  				margin-right: 0%;
  				}	
 
 .navtext a		{
				font-size:100%;
				} 
 
nav				{
				width:55%;	
				padding-right: 10%;
				padding-left: 35%;
				} 
				
section 		{		
				padding-left:0%;
				padding-right:0%;
				padding-top: 50px;	
				padding-bottom: 50px;
				margin-bottom: 0px;
				margin-right:10%;
				margin-left: 0%;
				min-height:	600px;
				width:55%;
				
				}	
				
.sidebar		{
				margin-left: 10%;
				margin-right:5%;
				width:20%;
				}	
				
.dfliesen		{
				width:100%;
				}
				
.kontakt		{
				width:100%;
				}				
				
article			{
				width:28%;
				padding-left: 30px;
				float:left;
				border-left-width: 1px;
				border-color: #ff6633;
				border-style: dashed;
				}	
				
.first			{
				margin-right: 20%;
				margin-left: 3%
				}	

.imagebox		{
				min-height: 400px;
				width: 100%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 80px;
				}
	
.imageboxlong		{
				height: 2000px;
				width: 90%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				padding: 5%;
				
				}
												
				
}

@media screen and (min-width: 1280px)  	/* ********** ab 1280px ********** */ 
{

 .navtext a		{
				font-size:110%;
				} 
				
.imagebox		{
				height: 600px;
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
				margin-bottom: 80px;
				}	
	
.imageboxlong		{
				height: 2000px;
				width: 90%;
				margin-left: 0%;
				margin-right: 0%;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				padding: 5%;
				
				}
}