body {
        font-family: arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        color: #222;
        background-color: #f7f7f7;
}

h1, h2, h3, h4 {
		font-family: Georgia, "Times New Roman", times, serif; 
		font-style: italic;
		color:#036403;
		}
h1 {		
        font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-style:italic;
		color: #633;
        font-size: 2.5em;
		line-height: 1.8em;
                }
h2 {
        font-size: 1.8em;
        line-height: 2.2em;
        font-weight: 600;
		margin: -5px 0 0 20px;
        }
h3 {
        font-size: 1.4em;
        line-height: 1.8em;
        font-weight: 500;
		margin: 0 0 0 10px;
        } 
h4 {     font-size: 1.2em;
        line-height: 1.6em;
        font-weight: 600;
        margin: 0px 0 0 15px;
		padding-top: 5px;
		
        }
h5 {		font-size: 1.0em;
        line-height: 1.6em;
        font-weight: 600;
        margin: 10px 0 0 22px;
}

#header {
	height: 120px;
	padding: 20px 0 30px 0;
	background-color: #66cc66;
	margin-top: 10px;
	
}

p  {color: #222; line-height: 1.7em; margin: 0 0 10px 5px; padding-bottom: 5px;}

#p-footer {margin: 0px 0 0 20px;
		padding: 20px;}
.p-kontakt {color: #f7f7f7; }

a:link a:visited {
	font-size: 1.0em;
	line-height: 1.4em;
	padding-bottom: 10px;
}
.wrap {max-width: 960px; margin: 0 auto;}


#skill {clear: both; margin: 0 0 5px 20px; padding: 5px;}
#skill li {color: #fff; background: #036403; margin-bottom: 15px; padding:5px 0 5px 5px; font-Style: italic;}
#Skill1 {width: 80%;}
#Skill2 {width: 60%;}
#Skill3 {width: 45%;}
#Skill4 {width: 90%;}
#Skill5 {width: 70%;}
#Skill6 {width: 90%;}

.kopf_rechts {								/*  Adressfeld oben rechts        */
		color: #224;
		background: #f7f7f7;
		border-radius: 10px;
		font-size: 0.9em;
		font-weight: 500;
		height: 80px;
		margin: 0px 0 0 0 ;
		padding: 0 0 0 5px;
		float: right;
}

.titelblock {								/*  Logo und Name        */
		color: #224;
		font-size: 3.0em;
		font-weight: 700;
		margin-left: 30px;
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-style:italic;
		color: #622;		
}
.titel {position: relative; margin: 30px 0 0 130px;}
.logo {position: absolute; margin: -20px 0 0 30px;}

.kopf_links {								/*  Über mich Feld oben links        */
		color: #224;
		background: #f7f7f7;
		border-radius: 10px;
		font-size: 0.9em;
		font-weight: 500;
		width: 100%;
		height: 45px;
		float: left;
}

.left{	
		//background: #999;
		background: #dcf8dd;
		border-radius: 10px;
        width: 59%;
        padding: 5px;        
		margin: 15px 0;
		float: left;
		
        }

.right { 
		// background: #999;
		background: #dcf8dd;
		border-radius: 10px;
        width: 37%;
		margin: 15px 0;
        padding: 5px;
		float: right;
		
         }
        
.artikel {
		background: #f7f7f7;
		border-radius: 10px;
		margin: 5px 0 10px 0;
		}
		
.adress {
		width: 70%;
		margin-left: 10%;
}
		
ul.aufzaehl {
		font-size: 1em;
        letter-spacing: 0.5px; 
        background-color: #f7f7f7;
        color: #55f;
        width: 85%;
		                }
ul.aufzaehl li{
		color: #224;
		line-height: 1.5em;		
		list-style-type: square; 
		padding-left: 10px;
		padding: 3px;
		
		}
ul.aufzaehl li:last-child{padding-bottom: 15px; }


.verlauf {
		background: #dcf8dd; /* Old browsers */
		background: -moz-linear-gradient(top,  #dcf8dd 1%, #f7f7f7 18%, #f7f7f7 81%, #b8ff72 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#dcf8dd), color-stop(18%,#f7f7f7), color-stop(81%,#f7f7f7), color-stop(100%,#b8ff72)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #dcf8dd 1%,#f7f7f7 18%,#f7f7f7 81%,#b8ff72 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #dcf8dd 1%,#f7f7f7 18%,#f7f7f7 81%,#b8ff72 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #dcf8dd 1%,#f7f7f7 18%,#f7f7f7 81%,#b8ff72 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #dcf8dd 1%,#f7f7f7 18%,#f7f7f7 81%,#b8ff72 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcf8dd', endColorstr='#b8ff72',GradientType=0 ); /* IE6-9 */
}

.referenz {clear: both; background: #ddd;  padding: 40px; margin: 20px 0;  }
.referenz  img{margin-right: 12px; padding: 4px; border: 7px solid #ccc; background:white;}
.referenz img.last {margin-left: 0px; }

.webreferenz {clear: both; background: #ddd;  padding: 40px; margin-top: 60px; }
.webreferenz  img{ width: 22%; margin-right: 4px; padding: 5px; border: 5px solid #ccc; background:white;}
.showtext {
	background: #222;
	opacity:0.7;
	width: 180px;
	margin: -300px 0 0 30px;
}
.showtext p {
	font-size: 1.0em;
	font-weight: 700;
	color: #fff;
	width: 90%;
	opacity: 1;
}
.karte {clear: both; padding: 5px 5px 10px 5px; border: 5px solid #ccc; background: white; margin-bottom: 15px;}

#footer{
        clear: both;
		height: 80px;
        max-width: 100%;
		margin: 15px 0;
		border-radius: 10px;
		background: #66cc66; /* Old browsers */		
          }
		  
.footernav  {
	margin: -40px 0 0 70%;
	
}
	
.footernav  a, .anfrage a{
	color: #112;
	background: #44af70;
	padding: 5px 20px;
	font-size: .8em;
	font-weight: 400;
	letter-spacing: 1px;	
}

.footernav  a:hover, .anfrage a:hover {
	color: #fff;
	background: #006f40;
	padding: 5px 20px;
	font-weight: 600;
	letter-spacing: 0px;
	}
		  
.float_l {float:left;}
.float_r {float:right;}
.clear_b {clear: both;}


.toolliste {
line-height: 1.5em;
margin-left: 35px;
margin-bottom: 10px;
}

.toolliste li{
line-height: 1.3em;
margin-left: 35px;
margin-bottom: 10px;
}
.toolliste li:last-child{padding-bottom: 10px; }

.referenzenhoehe {height: 270px;}

.proglist { padding-left: 25px;}
.proglist li{ list-style-type: square;}
.abstand {height: 130px; width: 100%; background: #f7f7f7;}
.accordion {
		margin: 30px 10%;
        font-size: 0.9em;
		width: 48%;
        min-width: 400px;
        padding: 10px;
		background-color: #66cc66;
		
        }
.accordion h3 {
        font-family: Arial, "Verdana",sans-serif;
        font-size: 1.1em;
        font-weight: 600;}
.accordion img {
	width: 93%;
	height:53%;
	margin-bottom:20px;
	padding-top: 5px;
		
}

/* #################################################################################### */

@media screen and (max-width: 840px)  {

body {font-size: 1.2em;}
.wrap { margin: 0 10px 0 10px;}
 h3, h4  {
		font-family: Georgia, "Times New Roman", times, serif; 
		font-Style: italic;
		font-weight: 600;
		margin: 5px 0 5px 0; 
		line-height: 1.0em;		/* schrift geht untereinander bei min-with <300px */
		}
h1 {
        font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-style:italic;
		color: #444;
        font-size:1.0em;
        margin: 0 auto;
		line-height: 2.0em;
		float: left;
                }

h2 {
         font-size: 1.5em;
        line-height: 2.2em;
        font-weight: 600;
		margin: -15px 0 0 20px;
        }				

h4 {line-height: 1.8em;}		
h5 {line-height: 1.4em;}

ul li {margin-left: 15px;} 

#header {
	height: 100px;
	padding: 30px;
	background-color: #66cc66;
	margin-top: 10px;
	}

.titelblock {								/*  Logo und Name        */
		color: #224;
		font-size: 2.2em;
		font-weight: 700;
		margin-left: 30px;
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-style:italic;
		color: #631;		
}
.titel {position: relative; margin: 10px 0 0 60px;}
.logo {position: absolute; margin: 0px 0 0 -40px;}


.left{	
		border-radius: 10px;
        background: #dcf8dd;
        width: 95%;
        padding: 5px;        
		margin-bottom: 5px;
		float: left;
		}
	
.right { 
		background: #dcf8dd;
		border-radius: 10px;
        width: 95%;
        padding: 5px;
		float: left;
		         }
.artikel {
		background: #f7f7f7;
		border-radius: 10px;
		margin: 5px 0 ;
		padding-left: 10px;
		}


.adress {
		width: 85%;
		margin: 0 0 0 5px;
}

.accordion {
		margin-left: 0px;
        font-size: 1.em;
		width: 80%;
        min-width: 320px;
        background-color: #66cc66;
        border: solid 2px #222;
        }

.accordion img {
		width: 90%;
		height:30%;
		margin-bottom:20px;
		padding-top: 5px;}

.webreferenz img{ width: 80%; margin-right: 4px; padding: 5px; border: 5px solid #ccc; background:white;}
.karte {clear: both; 
		padding: 5px; 
		border: 10px solid #ccc; 
		background: white; 
		margin-bottom: 90px;
		width: 90%;}

.showtext {visibility: hidden;}
.showtext p {visibility: hidden;}

		
#p-footer {font-size: 0.7em; margin-left: 1%; }


.footernav a {
	display: block;
	color: #112;	
	padding: 5px 10px 5px 10px;
	font-size: 0.6em;
	font-weight: 700;
	}
.footernav a:hover {
	color: #fff;
	background: #338f60;
	padding: 5px 10px 5px 10px;
	
	
	}	
	
#footer{
        clear: both;
		height: 140px;
        max-width: 95%;
		padding: 5px;
        color: #fff;
		
		border-radius: 10px;
		background: #dcf8dd; /* Old browsers */
			
		}
}	/* Ende media query */