@charset "UTF-8";
/* CSS Document */


body {
	background-color: #FFF;
	font: 75%/135% "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 3% 0 0 0;
}

body, h2, .absenden, input, textarea {
	color: #FFF;
}

#wrapper {
	width: 75%;
	margin: 0 auto 2% auto;
	background: rgb(77,77,77);
	webkit-box-shadow: 3px 4px 6px 2px rgba(3, 3, 3, 0.5);
	box-shadow: 3px 4px 6px 2px rgba(3, 3, 3, 0.5);
}

header, footer, .navimg, #content, aside img, #menue, #nachricht tr, #nachricht textarea  {
	width: 100%;
}

h1, h2, h3, .menuelink {
	font-family: 'Roboto', sans-serif;
}

header {
	height: auto;
	text-align: center;
	margin-top: 2%;
}

nav {
	width: 102%;
	margin: 0 0 0 -0.9%;
}

#content, footer {
	clear: both;
}

aside, #zweispalter {
	width: 35%;
}
	
aside {
	float: right;
	padding: 0 2.5% 0 0;
	text-align: right;
}

#zweispalter {
	float: right;
	text-align: left;
	padding: 4.1% 2.5% 0 0;
}

#zweispalterwir {
	width: 45%;
	float: right;
	padding: 0 2.5% 0 0;
	margin: 0 0 0 5%;
	text-align: left;
}


article {
	width: 59%;
	padding: 0 0 2% 2.5%;
	margin: 0 0 5% 0;
}

#fliesstext {
	width: 95%;
	padding: 0 0 2% 2.5%;
	margin: 0 0 5% 0;
}

#articlewir {
	width: 45%;
}

#articlewir, #zweispalterwir {
	margin: 0 0 5% 0;
}

footer {
	height: 15%;
	background: rgb(247, 247, 247);
	padding: 1% 0;
	font-size: 90%;
	text-align: center;
}

a {
	text-decoration: none;
	color: #CCC;
}

a:hover {
	color: rgb(201, 228, 197);
}

footer, footer a {
	color: #555;
}

footer a:hover {
	color: #333;
}

/* Navigation */

#menue {
	position: absolute;
	top: 1.8%;
	left: 5%;
	list-style: none;
	margin: 0 auto 0 auto;
	text-align: center;
	width: 100%;
}

#menue img {
	width: 18%;
	display: inline;
}

#menue ul{
	margin: 4% 0 10% 0;
	width: 100%;
}

#menue li{
	display: inline;
	list-style-type: none;
	width: auto;
	margin: 0 1% 0 1%;

}

.menuelink, .menuelink:link, menuelink:visited {
	font-size: 150%;
	color: #000;
	font-weight: 300;
}

.menuelink:hover {
	color: #777;
}

#logo {
	position: absolute;
	top: 1%;
	left: 15%;
	margin: 3.5% 0 0 0;
}

#logo img {
	width: 50%;
}


/* bilder */

.headerimg {
	width: 95%;
	height: auto;
	margin: -2% 0 3% 0;
	-webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.6);
}

aside img {
	height: 100%;
	border-radius: 5%;
	margin-top: 13%;
}

.moodimg {
	border-radius: 5%;
	margin: 0 5% 5% 5%;
	
}

.bildmarke {
	float: left;
	margin: 0 2% 0 0;
}

.hinschauen {
	color: #e6d511;
	margin: 0;
	line-height: 180%;
}

.potentiale {
	font-size: 120%;
}

/* content */

h2, h3 {
	font-size: 120%;
	font-weight: 300;
}
	
h1 {
	font-size: 150%;
	font-weight: 400;
}

h2 {
	margin: 5% 0 1% 0;
}

h3 {
	margin: 5% 0 1% 0;
}

/* Farben fuer h1 */

.start {
	color: #e6d511;
}

.leistungen {
	color: /*#F36*/ #C52F26;
	
}

.impress {
	/*color: #35559d;*/
	color: #6791ef;
}

.kontakt {
	color: #56ac40;
}

.agg {
	color: #C6F;
}

/* Farben fuer h2 */

.starth {
	color: #e6e09e;
}

.leistungenh {
	color: #F66;
}

/*.leistungenh {
	color: #FFF;
	border-bottom: 1px solid #F66;
	line-height: 130%;
	width: 30%;
}

.impressh {
	color: #FFF;
	border-bottom: 1px solid #C9F;
	line-height: 130%;
	width: 30%;
}*/


.impressh {
	color: #6c7b9d;
}

.kontakth {
	color: #85ac7b;
}

.aggh {
	color: #C9F;
}

ol {
	
	padding-left: 2.5%;
}

ol ol {
	padding-left: 5%;
}

ul li {
	list-style-image: url(../bilder/aufzaehlung.png);
}

.listeleistungen li {
	list-style-image: url(../bilder/aufzaehlung-leistungen.png);
}

.listeindex li {
	list-style-image: url(../bilder/aufzaehlung-index.png);
}
	


.gimmig {
	font-family: "Awesome Font";
	font-size: 150%;
	margin: 0;
}

.diagramm {
	width: 120%;
}

/* Kontaktoformular */

		  
td {
	vertical-align: top;
	text-align : left;
}

#contact td {
	width: 50%;
}

#contact input {
	width: 100%;
}

#nachricht {
	width: 70%;
}

#nachricht textarea {
	height: 60%;
}

.absenden {
	width: 20%;
	color: #444;
	margin: -5% 0 0 0;
}

input, textarea {
	border: 1px solid #FFF;
	border-radius: 5px;
	color: #444;
	background-color: #FFF;
}

aside .icon-envelope {
	font-size: 80%;
}

#mobilecontact {
	display: none;
}

/* Toggle AGG */

.icon-chevron-sign-down {
	font-size: 120%;
	vertical-align: middle;
}

.icon-chevron-sign-down:hover {
	color: #6c7b9d;
}

#agg1, #agg2, #agg3, #agg4, #agg5, #agg6, #agg7, #agg8, #agg9, #agg10, #agg11, #agg12, #agg13, #agg14, #agg15, #agg16, #agg17, #agg18, #agg19, #agg20, #agg21, #agg22, #agg23, #agg24, #agg25, #agg26, #agg27, #agg28, #agg29, #agg30, #agg31, #agg32, #agg33 {
	display: none;
	margin-left: 2%;
}

#morek, #moreh {
	display: none;
}

/* Bis zu einer Vieportgroesse von 320 */

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


#zweispalterwir, #articlewir {
	display: block;
	width: 90%;
	padding: 0 5%; 
}

}


/* Ab einer Viewportgroesse von 320 */

@media only screen and (min-width : 320px) {
	
#wrapper {
	width: 95%;
}

#menue img {
	width: 22%;
}

h1 {
	line-height: 120%;
}

#menue {
	top: 0.5%;
	left: 1%;
}

.menuelink, .menuelink:link, menuelink:visited {
	font-size: 90%;
}

#logo {
	top: 0.5%;
	left: 3%;

}

#logo img {
	width: 85px;

}


} 

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


aside {
	display: none;
}

#mobilecontact {
	display: block;
}


}

/* Ab einer Viewportgroesse von 760 */

@media only screen and (min-width: 760px) {
	
#wrapper {
	width: 95%;
}
#menue img {
	width: 22%;
}

#menue {
	top: 1.3%;
	left: 1%;
}

.menuelink, .menuelink:link, menuelink:visited  {
	font-size: 150%;
}

#logo {
	top: 0.5%;
	left: 4%;

}

#logo img {
	width: 190px;

}

}


/* Ab einer Viewportgroesse von 750 */

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

#contact input {
	width: 80%;
}


}


/* Ab einer Viewportgroesse von 980 */

@media only screen and (min-width : 980px) {
#wrapper {
	width: 70%;
}
#menue img {
	width: 15%;
}

#menue {
	top: 1.1%;
	left: 7%;
}

.menuelink {
	font-size: 155%;
}


#logo {
	left: 17%;
	top: 0.2%
}

#logo img {
	width: 190px;
}

}

/* Ab einer Viewportgroesse von 1200 */

@media only screen and (min-width: 1200px) {
	
#menue {
	top: 3.4%;
}

#menue img {
	width: 15%;
}

.menuelink, .menuelink:link, menuelink:visited  {
	font-size: 175%;
}

#menue ul {
	margin: 2.5% 0 0 0;
}


#logo {
	top: 1%;
	left: 20%;
}

#logo img {
	width: 200px;
}

}
	
	
/* Ab einer Viewportgroesse von 1400 */

@media only screen and (min-width: 1400px) {
#wrapper {
	width: 65%;
}

#menue {
	top: 3%;
}

#menue img {
	width: 15%;
}

.menuelink, .menuelink:link, menuelink:visited  {
	font-size: 200%;
	
}

#logo {
	left: 20%;
}

#logo img {
	width: 210px;
}
}

/* Ab einer Viewportgroesse von 1700 */

@media only screen and (min-width: 1700px) {
#wrapper {
	width: 55%;
}

#menue img {
	width: 12%;
}

#logo {
	top: 1.6%;
	left: 25%;
}

#logo img {
	width: 250px;
}
}