/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


@charset "utf-8";
html, body {
	margin:0;
	padding:0;
	text-align:center;
	color: #000000;
	font-family: 'Open Sans', sans-serif;
	height: 101%;
	font-size: 15px; line-height:180%;
}


div, img, area, textarea, input {
	outline: none;
}
H1, H2 { line-height:140%; margin: 0; padding: 0; color: #275D31}
H1 {font-size: 27px; margin: 10px 0;}
H2 {font-size: 18px ;margin-bottom: 10px;}
A {	color: #245D31; text-decoration: none;}
UL, LI {margin: 0; padding: 0}
LI {margin-left: 20px;}

.gruen {color: #245D31; }
.kastengrau {background: #CDCDCD; color: #FFFFFF; font-style:italic;}


a.button {  display: inline-block;  padding: 14px 28px;  background-color: #245D31;  color: #ffffff;  font-size: 16px;  font-weight: 600;  text-decoration: none;  border-radius: 4px;  border: 2px solid #245D31;  transition:     background-color 0.2s ease,    color 0.2s ease,    transform 0.1s ease,    box-shadow 0.2s ease;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);  cursor: pointer;}
a.button:hover {background-color: #ffffff; color: #245D31; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);}


.pagewidth {width:  100%; text-align:left; margin-left:auto; margin-right:auto; display: block;}

IMG {max-width: 100%; height:auto;}
IMG.fullsize {width: 100%; height: auto; display: block;}

#but_menue {width: 40px; padding: 10px;margin-left: auto; margin-right: auto; cursor: pointer;}
#but_menue IMG {width: 100%; height: auto;}

NAV { width: 100%; text-align: center; display: none;}
NAV UL, NAV LI {	
	margin-left: 0; 
	padding-left: 0; 
	list-style-type: none;
}
NAV A {}
NAV LI { width: 60%; margin-left: auto; margin-right: auto; padding-top: 5px;}
NAV LI A { display: block; font-size: 20px; text-transform: uppercase; border-bottom: 3px solid #FFFFFF; }
NAV LI A:hover, NAV LI A.aktiv {border-bottom: 3px solid #275D31;}
NAV LI UL {display:none;}

NAV li li a {font-size: 15px;}
NAV li li a.aktiv{ color: #00548E }	
	
HEADER {margin-top: 10px;}
#telefon, #email {margin-left: 23%; font-size: 18px;}
#telefon A, #email A {color: #000000;}


#unternehmen {margin-top: 5px;}
#unternehmen1 {width: 96%; margin-left: auto; margin-right: auto;}
#unternehmen1 .kastengrau {margin-left: -2%; width: 100%; padding: 5px 2%; margin-top: 4px; font-size: 16px;}
#unternehmen1 .author {text-align: right; font-style:italic; margin-top: 4px;}

#leistungen {clear: both; padding-top: 25px; width: 96%; margin-left: auto; margin-right: auto;}
#leistungsdreispalter {margin-top: 15px;}
#ergonomie, #buerodesign, #objektdesign {width: 96%; margin-left: auto; margin-right: auto; padding-bottom: 15px;}

#impressum,#datenschutz {width: 96%; margin-left: auto; margin-right: auto;}

.leistungsinhalt {position: relative;}
.leistungstext {clear: both; width: 96%; margin-left: auto; margin-right: auto;}
.referenzeninhalt {position: relative;}
.referenzentext {clear: both; width: 96%; margin-left: auto; margin-right: auto;}
.referenzentext2 {background: url(images/gruen70.png); clear: both; width: 96%; padding: 10px 2%; color: #FFFFFF; font-style:italic; font-size: 14px; line-height: 170%;}

#referenzen {clear: both; padding-top: 25px; width: 96%; margin-left: auto; margin-right: auto;}

FOOTER {clear: both; background: #275D31; margin-top: 15px; color: #FFFFFF;  text-align: left;}
FOOTER H1 {color:#FFFFFF}
FOOTER A {color: #FFFFFF}
#footer1, #footer2, #footer3 {width: 96%; margin-left: auto; margin-right: auto;}


INPUT, textarea {width: 98%; padding: 5px 1%; margin-bottom: 8px; border: none; background: #DfDFD6;}
textarea {height: 75px;}
INPUT[type='submit'] {font-size: 20px; background: #FFFFFF; color: #275d31; border: none; cursor: pointer; width: 80%;}
INPUT[type='submit']:hover {background: #CCFFCC; color: #275d31 } 
INPUT[type='checkbox'], INPUT[type='radio'] {width: 25px; } 


.clearfix {
	display: block;
	clear: both;
}




/* Tabletts */
@media only screen and (min-width: 760px) {

	.pagewidth { max-width: 760px; }
	#logo { width: 33%; float: left;}
	#menue {width: 67%; float: left;}
	
	#telefon, #email {display: inline-block; width: 50%; margin-left: 0; float: left;font-size: 14px; text-align: right; margin-top: 15px;}
    

	#but_menue {display: none;}
	
	NAV {width: 100%; display: block; clear: both;}
	nav ul{ list-style-type:none; margin:0; padding:0; width: 100%;}
	nav li { float:left; padding:0; margin:0; font-size: 12px; line-height: 14px; width: 20%;}
	nav li a { display:block; text-align:center;  font-size: 12px;padding-top:5px;}
	
	#unternehmen1 {width: 62.7%; margin-left: 2%; margin-right: 2%; float: left}
	#unternehmen2 {width: 33.3%; float: left}
	#unternehmen1 .kastengrau {margin-left: -3%; width: 99%; padding: 5px 3%; margin-top: 4px; font-size: 22px;}
	
	
	FOOTER { font-size: 11px; line-height: 150%;}
	#footer1 {width: 47%;  margin-left: 2%; margin-right: 1%; float: left;}
	#footer2 {width: 47%;  margin-left: 1%; margin-right: 2%; float: left;}
	#footer1 IMG {width: 50px;;}
}

/* Mittlere Gr��e */
@media only screen and (min-width: 960px)  {

	.pagewidth { max-width: 960px; }

	#telefon {width: 60%; margin-top: 20px;}
	#email {width: 40%; margin-top: 20px;}
	Header {display: inline-block;}
	
	NAV UL {width: 100%; text-align: right;  }
	NAV UL LI {width: auto; padding-left: 18px;}
	NAV LI IMG {width: 25px; height:auto; padding: 5px}	
	NAV LI A { display:block; text-align:center;  font-size: 12px;padding-top:15px; padding-bottom: 3px;}		

	
	#ergonomie {width: 27.5%; margin-left: 2.5%; margin-right: 3%; float: left;}
	#buerodesign {width: 27%; padding-left: 3%; padding-right: 3%; float: left; border-left: 1px solid #275D31; border-right: 1px solid #275D31}
	#objektdesign {width: 27.5%; margin-left: 3%; margin-right: 2.5%; float: left;}

	.leistungstext {position: absolute; top: 0; padding: 0 2%; width: 96%; background: url(images/white70.png); line-height: 145%}
	.referenzentext {width: 46%; padding: 0 2%; float: left;}
	.referenzentext2 {width: 46%; padding: 10px 2%;float: left; clear:none; margin-bottom: 10px;}
	
	FOOTER { font-size: 14px;}
	#footer1 IMG {width: 40px;;}
		
}

/* Gro�e Monitore */
@media only screen and (min-width: 1280px)  {

	.pagewidth { max-width: 1280px; }
	.leistungstext {line-height: 160%}
	/*.referenzentext {position: absolute; top: 0; padding: 0 2%; width: 62%; background: url(images/white70.png);}
	.referenzentext2 {position: absolute; top: 1px; padding: 10px 2%; right: 10px;; width: 28%; }*/
	.referenzentext {padding: 0; padding-right: 5%; width: 62%;}
	.referenzentext2 {padding: 25px; padding-right: 2.5%; padding-left: 2.5%; width: 28%; }
	#telefon {width: 67%; margin-top: 30px;}
	#email {width: 33%; margin-top: 30px;}
	NAV UL LI {width: auto; padding-left: 35px;}
	NAV LI A { display:block; text-align:center;  font-size: 14px;padding-top:25px; padding-bottom: 3px;}		
	
}