@charset "utf-8";
* {
margin: 0;	padding: 0;
border: 0 none; 
vertical-align: baseline;
}

html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; 
}

body {
min-height: 100%;
font-size: 100.01%;
overflow-y: scroll; 
}

/* Mixins , behebt BUGs in den Browsern
=================================================== */
/*clearfix bewirkt bei floatenden Elementen in einer Box, dass diese korrekt in der Box stehen*/
.clearfix {*zoom: 1; }/*100%Darstellung f�r IE*/
.clearfix:before {display: table; content: ""; }
.clearfix:after {display: table; content: ""; clear: both; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto; width: auto; margin: 0;
  overflow: visible; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  }
  *:first-child + html .clearfix {zoom: 1; }
  *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

/* IE7 */
/* #Basic Styles
================================================== */
/* apply a natural box layout model to all elements */
html {
  background:#EFF7E6;
  margin: 0; padding: 0;
  height: 100%;
  font-size: 100.01%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f3f5f6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  background-color: transparent;
  margin: 0; padding: 0;
  font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 100.01%; color: #786D61;  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/ 
  -webkit-text-size-adjust: 100%; 
   }
   
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight:bold; line-height:1.5em; text-rendering: optimizelegibility;/*optimiert die Lesbarkeit, wird aber nur von Gecko-Engines und Web-Kit Browsern unterstützt*/ }

/*ÜBERSCHRIFTEN-------------------------------------------------------------*/
h1{font-size: 18px; font-weight:normal; padding:0 0 20px 0; color:#CC3300;}
h1.im-text{padding:30px 0 10px 0;}
h2{font-size: 16px; font-weight:bold; padding:15px 0 10px 0; color:#786D61;}

h3{font-size: 13px; font-weight:bold; padding:15px 0 10px 0; color:#786D61;}/*Kontaktseite*/
h4{font-size: 13px; font-weight:bold; padding:15px 0 10px 0;color: #CC6600;}
h5{font-size: 13px; font-weight:bold; padding:50px 0 10px 0;color: #CC6600;}



ul, ol {margin:0; padding:0; list-style:none;}

ul li{font-size:13px; list-style:none;  line-height:20px;}

p{font-size:13px; line-height:20px; padding-bottom:10px;}

b, strong { font-weight: bold; }
em {font-style: italic; }

br{margin:0; padding:0;}


/*Klassen------------------------------------------------*/
.small {font-size: smaller; font-weight:normal; }
.normal{font-weight:normal;}  
.space{letter-spacing:20px;}
.pfeil{padding-left:15px; background-image:url(picts/pfeil.png); background-position:left; background-repeat:no-repeat;}

.antifloat{clear:both;}
.bordernone{border:none;}
.nobr{white-space: nowrap;}/*kein Umbruch, indexseite*/
.headline-small{font-size:12px; font-weight:normal; color:#FF9900; letter-spacing:1px; margin-top:4px;}
.underline{text-decoration:underline;}

/*Telefonnummer: kein Umbruch*/
span.fon {white-space: nowrap;}

/*für die E-Mail Adressen um @ zu verstecken*/
noscript span {display:none}



/*Grafiken----------------------------------*/
img {
 display:block;
 max-width: 100%; /*auf kleineren Displays wird das Bild, wenn es zu gro� ist, verkleinert*/
 height: auto;
 border: 0;
 -ms-interpolation-mode: bicubic;/*Art der Berechnung beim Skalieren f�r IE7*/ 
}


/*NAVIGATION allgemein----------------------------------------------------------------------*/
a {display:block; color:#786D61; text-decoration: none; }/*grau*/
a:hover, a:focus, a:active {text-decoration:none; color:#CC3300;}/*rot*/

a.email{display:inline; text-decoration:underline; color:#CC3300;}
a.email:hover{color:#786D61;}

/*Telefonnummern Smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; color:#786D61; text-decoration: none; cursor:text;
}


/*--------------------------------------------------------------------------------------*/


/*Html5 für IE7 + 8*/
header, nav, section, aside, footer, figure, figcaption{
  display: block;
} 

#wrapper, #wrapper-index, #wrapper-fehler{
	margin: 0 auto; padding: 0;
	margin-top:40px;
	max-width:950px; min-height:570px; height:100%;
	border:1px dashed #999;
	background-image:url(picts/bg_projekte.jpg); background-position:0 0; background-repeat:no-repeat;
	background-color:#FFFFEB;
}

#wrapper-index{ height:552px; background-image:url(picts/bg_startseite.jpg); background-color:transparent; border-bottom:none; border-bottom: 1px dashed #A69D8F;}
#wrapper-fehler{ height:523px; background-image:url(picts/bg_fehlerseite.jpg); background-color:transparent;}
/*#wrapper .projekte, #wrapper .sow, #wrapper .kontakt{background-image:url(picts/bg_projekte.jpg); padding-bottom:150px;}*/



header[role="banner"] {position: relative; width: 100%; height:auto;}

#logo{position:relative; float:left; top:0; left:0; }
#logo-index{display:none;}
.logo-pc{display:block; position:relative; margin:0; padding:0;}
.logo-mobil{display:none;}

.menu-btn{display:none;}/*Menübutton bei kleinem Display*/
  
  
/*Horizontale Navigation*/
#nav{
	float:left;
	/*position:relative;*/
	margin-top:0; left:0;
	width:950px;
}

#nav ul.oben li, #nav ul.unten li{
	/*position:relative;*/
	float:left;
	/*width:auto;*/
	color:#CC3300; font-weight:normal; letter-spacing:1px;
	background-color:transparent;
	background-image:url(picts/haken.gif); background-repeat:no-repeat;
}
#nav ul.oben {margin-left:90px;}
#nav ul.oben li{
	padding:0 70px 10px 23px;
	background-position:0 10px;
}
#nav ul.unten {margin-left:20px;}
#nav ul.unten li{
	margin:25px 15px 0 20px;
	padding:10px 10px 10px 23px;
	background-image:url(picts/haken_unten.gif); background-position:0 -2px;
	
}
#nav a{
	text-decoration:none;
	color:#77726A;
	background-color:transparent;
}
#nav a:hover{color:#CC3300;}



.container{float:left; margin-top:0px; width:100%;  background-color:#FFFFEB;}
.container-index{position:relative; float:left; top:0px; width:100%; min-height:380px;  background-color:transparent; z-index:5; padding-bottom:10px;}


#content{float:left; margin-top:0px;  width:100%; padding:20px 0 0 50px; background-color:#FFFFEB;}

.breadcrumb{margin-bottom:20px; font-style:italic; font-size:12px;}
.breadcrumb a{display:inline; color:#999; text-decoration:underline;}
.breadcrumb a:hover{color:#666;}


.txt{padding-right:100px;}
.txt-index{margin-top:30px; padding:50px 40px 40px 40px; border:1px dashed #999; background-color:#FFFFEB;}
.txt-index h1.pc{display:block;}
.txt-index h1.mobil{display:none;}

#content ul{margin-left:10px;}

#content .fehler{margin-top:150px; padding:0 0 0 50px; background-color:transparent;}



#content .kontakt ul{margin-left:0;}
#content .geschaeftsadresse  li{float:left; margin-left:0; padding:0 60px 0 0;}

.pict-projekt{float:right;	padding:30px 70px 0 0;}

.pict-projekt img{display:block; border:1px solid #ccc;}


.projekttext{float:left; max-width:400px; margin-top:50px;}


.projekttext a{
	text-decoration:none;
	color:#77726A;
	background-color:transparent;
}
.projekttext a:hover{color:#CC3300;}

.projekttext li{
	float:left;
	margin:0 0 15px 0;
	clear:left;
}


.antifloat{ clear:both; font-size:0.9em; padding:0 0 10px 0; margin-right:50px; border-bottom: 1px dashed #A69D8F;}/*hebt beide floats von der Box .projekt auf, damit die nächste Box wieder im Fluss ist. In diesem DIV liegt auch der nach-oben-Button*/
.antifloat img{display:inline;}
.antifloat .email{ text-decoration:none;}


#flash-small{
	position:relative;
	margin-top:40px;
	margin-left:730px;
	width:40px; height:75px;
}

#flash-start{
	position:relative;
	margin-top:45px;
	margin-left:0;
	width:660px; height:225px;
	
}

#freiraum{
	position:relative; padding:0;
	margin:0 auto; width:100%; height:30px;
	background-color:#EFF7E6;
	background-image:url(picts/pict_flirr.png); background-position:center -5px; background-repeat:no-repeat; 
	
}

.flash-event-cd{
	margin-left:-30px;/*#content hat padding-left:50px, das flash wird aber 20px nach links geschoben*/
	padding:30px 0 30px 0;
	width:760px; height:380px;
	background-image:url(picts/bg_flash_event_cd.jpg); background-position:0 30px; background-repeat:no-repeat;
}
.flash-sow{
	margin:30px 0 0 -30px;/*#content hat padding-left:50px, das flash wird aber 20px nach links geschoben*/
	padding:0 0 0 0;
	width:760px; height:380px;
	background-image:url(picts/bg_flash_sow.jpg); background-position:0 30px; background-repeat:no-repeat;
	border:1px solid #666666;
}


#copyright{
 margin:30px 0 20px 0; padding-top:10px; letter-spacing:1px; text-align:center; color:#A6A778;}


/*Link auf www-Links*/
a.link-copy {display:inline; color: #A6A778;}
a.link-copy:hover {color:#CC6600;}

.copy-mobil{display:none;}

.copyindex{
position:relative;
padding-top:10px;
 
text-align:center; color:#A6A778; letter-spacing:1px; font-size:13px;
/*background:#EFF7E6;  z-index:1;*/
}
.copyindex a{
color: #A6A778; text-decoration: none;
}
/*Telefonnummern Smartphone*/
.copyindex a[href^="tel"]:link,
.copyindex a[href^="tel"]:visited,
.copyindex a[href^="tel"]:focus,
.copyindex a[href^="tel"]:hover  {
	display:inline; color:#A6A778; text-decoration: none; cursor:text;
}

/*Horizontale Navigation unten*/
.footer{padding:0 0 0 50px;}

.footer li{
	float:left; margin:20px 50px 0px 0; padding:10px 0 13px 25px; letter-spacing:1px;
	background-image:url(picts/haken.gif); background-position:0 20px; background-repeat:no-repeat;
}
	
.footer a:link, .footer a:visited, .footer a:active{
	text-decoration:none;
	/*color:#786D61;
	color:#857A6D;
	color:#A69D8F;*/
	color:#77726A;
	background-color:transparent;
}
.footer a:hover{color:#CC3300;}


/* #Media Queries
================================================== */

/* @media screen and (min-width:320px) and (max-width: 760px)- Smartphones*/
@media screen and (min-width: 20.0em) and (max-width: 47.5em){
	
/*Telefonnummern Smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; text-decoration: underline; 
}
h2{font-weight:normal; color:#C30;}
p, li{ line-height:26px;}

#wrapper, #wrapper-index{margin-top:0; background-image:url(picts/bg_smartphone.jpg); background-color:#FFFFEB;border:none;}

#logo-index{display:block;}
.logo-pc{display:none;}
.logo-mobil{display:block;}



.container-index{display:none;}

/*Die Menüs sind mit diesem Button ein- und ausblendbar*/
.menu-btn {display:block; position:absolute; float:right; top:91px; width:100%;  padding:0 6px 0 5px; color:#77726A; text-align:right ; font-size:13px; font-weight:normal;/*  background-color:#C30; background-color:#FFFFEB; border-top:1px dashed #A6A778; border-bottom:1px dashed #A6A778;*/}
.menu-btn a{padding-right:40px; color:#77726A; line-height:21px; background-image:url(picts/pict_menue.png); background-position:top right; background-repeat:no-repeat;/* background-color:#C30; background-color:#FFFFEB;*/}
.menu-btn a:focus{/* background-color:#C30; background-color:#FFFFEB;*/}


/*Horizontale Navigation*/
#nav{display:none; position:absolute; top:95px; width:60%;  margin-right:5px; z-index:5;}
/*#index #nav, #fehler #nav{top:41px;}*/

#nav ul.oben, #nav ul.unten {float:left; margin-left:0; margin-top:0; width:100%; }
	
#nav ul.oben li, #nav ul.unten li{float:left; display:block; color:#FFF; width:100%; margin:0 0 5px 5px; padding:8px 0 8px 20px;  background-image:none; background-color:#C30;}


#nav ul.oben li a, #nav ul.unten li a{color:#FFF;}

#nav ul.oben li:hover, #nav ul.unten li:hover{background-color:#C63;}



#menu-open:target .nav-hori{display:block;}

.menu-btn a.open{display:block;}
.menu-btn a.close{display:none;}

#menu-open:target .menu-btn a.open{display:none;  }
#menu-open:target .menu-btn a.close{display:block; background-image:url(picts/menu_open_pfeil.png); background-position:top right; background-repeat:no-repeat;}


/*CONTENT*/

.container{float:left; margin-top:0; width:100%;}



#content{position:relative; float:left; width:100%; padding:20px 10px 30px 10px;}
#content ul{margin-left:0;}
#content .geschaeftsadresse  li{clear:left; padding:0px 0 10px 0;}


.txt, .txt-index{padding:10px; background-color:#FFFFEB; border:none;}
.txt-index{margin:30px 10px 10px 10px;}
.txt-index h1.pc{display:none;}
.txt-index h1.mobil{display:block;}

.projekttext{float:left; width:100%;}



.projekttext li{
	float:left;
	margin:0 10px 15px 10px;
	clear:left;
}
.pict-projekt{float:left; width:100%; 	padding:30px 70px 0 10px;}

.antifloat{margin-right:10px;}


.footer{display:none;}

/*#copyright{display:none;}*/
#copyright{text-align:left; margin-top:0; padding:0 10px 0 10px;}

.copy-pc{display:none;}

.copy-mobil{
	display:block;}
	
.copyindex{	
position:relative;
color:#77726A;
margin:0px 0 0 25px;
text-align:left; line-height:26px;
}
.copyindex a{
text-decoration: underline; color:#C30;
}
.copyindex a:hover{
text-decoration: underline; color:#C60;
}
/*Telefonnummern Smartphone*/
.copyindex a[href^="tel"]:link,
.copyindex a[href^="tel"]:visited,
.copyindex a[href^="tel"]:focus,
.copyindex a[href^="tel"]:hover  {
	display:inline; color:#C30; text-decoration: underline; cursor:text;
}
}