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

.orange {color: #f39100;}
.blau {color: #003e79;}
.gruen {color: #006d78;}
.mittelgruen {color: #88ccc8;}
.hellgruen {color: #e1f1f0;}

* {margin: 0; padding: 0; text-decoration: none;}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;}

body {
	margin: 0; 
	padding: 0;
	font: 16px/24px 'source_sans_proregular', Arial, Helvetica, sans-serif; 
	color: #666;
	background: #e1f1f0 url(images/keyvisual_ideaco.png) center -50px no-repeat;}
	
h1 {font-size: 20px; margin-bottom: 24px; color: #003e79; font-weight: bold;}
h2 {font-size: 16px; margin-bottom: 16px; margin-top: 36px; color: #003e79; font-weight: bold;}
p {margin-bottom: 16px;}
ul {margin-bottom: 16px;}
a {color: #006d78;}
	
#container {
	width: 1000px;
	margin: 0 auto 50px auto;}	

.kranich {width: 48px; height: 31px;}
.kranichaktiv {width: 48px; height: 50px;}

.togglebox, label.toggle {display: none;}
#navigation {list-style-type: none; margin: 0; padding-top: 110px; text-align: justify;}
#navigation li {display: inline-block; position: relative;}
#navigation li a {display: block; padding-top: 90px; color: #006d78; font-size: 20px; text-transform: uppercase; }
#navigation li.aktiv .kranichaktiv {position: absolute; left: -54px; top: 82px;}
#navigation li span { }
#navigation li span:hover, #navigation li.aktiv span {display: block; padding-bottom: 3px; border-bottom: #f39100 solid 3px;}
#navigation li.navi1 span:hover, #navigation li.navi1.aktiv span {padding-bottom: 8px;}
#navigation li.navi1 {text-align: left; margin-left: 0px;}
#navigation li.navi1 a {padding-top: 84px;}
#navigation li.navi2 {background: url(images/ideaco_leistungen.png) center top no-repeat;}
#navigation li.navi3 {background: url(images/ideaco_profil.png) center top no-repeat;}
#navigation li.navi4 {background: url(images/ideaco_referenzen.png) center top no-repeat;}
#navigation li.navi5 {background: url(images/ideaco_kontakt.png) center top no-repeat;}
#navigation li.navi6 {padding-left: 100%;}

#subnavigation, #ankernavigation {
	display: none;
	list-style-type: none; 
	position: absolute;
	margin-top: 20px;
	background-color: #f39100;}
#subnavigation.aktiv, #ankernavigation.aktiv {
	display: block;}
#subnavigation li, #ankernavigation li {
	margin-left: 0;
	border-bottom: #fff 2px solid;
	width: 100%;}
#subnavigation li a, #ankernavigation li a {
	padding: 5px 5px;
	color: #fff;
	font-size: 13px;
	line-height: 16px;
	text-transform: capitalize;
	white-space: nowrap;}
#subnavigation li.aktiv {
	font-weight: bold;}

#inhalt {
	clear: both;
	background-color: #fff;
	min-height: 300px;
	margin-top: 20px;
	padding: 80px 200px 30px 120px;}
#inhalt a:hover {text-decoration: underline;}
#inhalt.profil {background: #fff url(images/susanne_roeder.jpg) top center no-repeat; background-size: 100%;}
#inhalt.profil ul {padding-right: 220px;}
.zitat {padding-right: 200px; color: #006d78;}
.socialmedia {position: absolute; margin-left: -100px; margin-top: 3px;}
.referenzen {text-transform: uppercase;}

.box1 {
	position: relative;
	max-width: 550px;
	background: #88ccc8;
	margin-top: 50px;
	padding: 20px 30px;
	color: #fff;}
.box1 h2 {font-size: 18px; margin-bottom: 16px; margin-top: 0px; color: #fff; font-weight: bold;}
.box1 a {color: #fff; font-weight: bold;}
.box1 .kranich {position: absolute; left: -60px; top: 0px;}

#oben {text-align: center; margin-top: 50px;}
#oben a {background: url(images/icon_top.png) top center no-repeat; padding-top: 25px; font-size: 13px;}

#copyright {
	margin-top: 24px;
	text-align: right;
	color: #006d78;
	font-size: 13px;}
#copyright a {text-transform: uppercase;}

#navigation.interim {margin-bottom: 25px;}

#inhalt.kontakt {font-size: 13px; line-height: 20px; padding-right: 20px;}
#inhalt.kontakt img {margin-top: 30px;}
.kontaktadresse {float: left; padding-right: 40px;}
#inhalt h1 {clear: left;}
form p {margin-bottom: 0;}
form h3 {margin-bottom: 10px;}
input, textarea {background-color: #e1f1f0; border: 0; padding: 8px 10px;}
input[type=text] {height: 20px; width: 320px;}
textarea {height: 244px; width: 340px; margin-top: 1px;}
input[type=submit] {
	-webkit-appearance: none;
	color: #fff;
	background-color: #f39100;
	width: 120px;
	height: 19px;
	border: none;
	cursor: pointer;
	height: 30px;
	font-size: 18px;
	padding: 0;}
.fehler {clear: left; color: #f39100; font-size: 16px;}
div .links {float: left; padding-right: 40px;}
input[type=checkbox] {
	position: relative;
	top: 3px;
	float: left;
	margin-right: 5px;}
.kranichkontakt {
	margin-left: 20px;
	vertical-align:: bottom;
	width: 48px; height: 31px;}

@media (max-width: 1120px) {
	body {background: #e1f1f0 url(images/keyvisual_ideaco_800.png) center -50px no-repeat;}
	#container {width: 800px;}
	#navigation li.aktiv .kranichaktiv {position: absolute; left: -52px; top: 82px;}
	.zitat {padding-right: 140px;}
	#inhalt.profil ul {padding-right: 180px;}
	#inhalt.profil ul li {margin-bottom: 12px;}
	input[type=text] {width: 280px;}
	textarea {width: 280px;}
}

@media (max-width: 900px) {
	body {background: #e1f1f0 url(images/keyvisual_ideaco_600.png) center -50px no-repeat;}
	#container {width: 600px;}
	#navigation li.aktiv .kranichaktiv {visibility: hidden;}
	#inhalt {padding: 80px 100px 30px 120px;}
	#inhalt.profil ul {padding-right: 0px; margin-top: 150px;}
	#inhalt.profil ul li {margin-bottom: 0px;}
	div .links {float: none; padding-right: 40px; padding-bottom: 30px;}
	input[type=text] {width: 320px;}
	textarea {width: 320px; margin-top: 12px;}
}

@media (max-width: 600px) {
	body {background-image: none;}
	#container {width: 100%;}
	#inhalt {padding: 40px 40px 30px 40px; margin-top: 10px;}
	#navigation li.aktiv .kranichaktiv {visibility: hidden;}
	img.kranich {display: none;}
	.zitat {padding-right: 0px; width: 200px; padding-top: 0px; font-size: 14px; line-height: 20px;}
	#inhalt.profil ul { width: 200px; margin-top: 30px;}
	.socialmedia {position: relative; margin-left: 0px; margin-top: 3px;}
	.kontaktadresse {padding-right: 20px;}
	img.kontakt {width: 80px; height: auto; padding-top: 55px;}
	input[type=text] {width: 220px;}
	textarea {width: 220px; margin-top: 12px;}
	
	#navigation {list-style-type: none; margin: 0; padding-top: 20px; text-align: left;}
	#navigation li {display: block; position: relative;}
	#navigation li a {display: block; padding: 6px 0px 4px 40px; height: 25px; color: #006d78; font-size: 16px; text-transform: uppercase; }
	#navigation li span { }
	#navigation li span:hover, #navigation li.aktiv span {display: block; padding-bottom: 0px; border: 0;}
	#navigation li.navi1 span:hover, #navigation li.navi1.aktiv span {padding-bottom: 0px;}
	#navigation li a:hover {color: #fff; background-color: #f39100;}
	#navigation li.navi1 a:hover {color: #fff; background-color: inherit;}
	#navigation li.aktiv { color: #f39100; font-weight: bold;}
	#navigation li.navi1 {text-align: left; margin-left: 0px;}
	#navigation li.navi1 a {padding-top: 0px; padding-bottom: 9px;}
	#navigation li.navi2 {background: url(images/ideaco_leistungen.png) 3px 3px no-repeat; background-size: auto 25px;}
	#navigation li.navi3 {background: url(images/ideaco_profil.png) 12px 3px no-repeat; background-size: auto 25px;}
	#navigation li.navi4 {background: url(images/ideaco_referenzen.png) 3px 3px no-repeat; background-size: auto 25px;}
	#navigation li.navi5 {background: url(images/ideaco_kontakt.png) 7px 3px no-repeat; background-size: auto 25px;}
	#navigation li.navi6 {visibility: hidden;}
	
	#subnavigation, #ankernavigation {
	display: none;
	list-style-type: none; 
	position: relative;
	margin-top: 0px;
	background-color: inherit;
	margin-bottom: 10px;}
	#subnavigation.aktiv, #ankernavigation.aktiv {
	display: block;}
	#subnavigation li, #ankernavigation li {
	margin-left: 0;
	padding-left: 40px;
	border-bottom: 0;
	height: 20px;
	width: 100%;
	font-weight: normal;}
	#subnavigation li a, #ankernavigation li a {
	padding: 5px 10px;
	color: #006d78;
	font-size: 13px;
	line-height: 16px;
	text-transform: capitalize;
	white-space: nowrap;}
	#subnavigation li a:hover, #ankernavigation li a:hover {color: #f39100; background-color: #e1f1f0;}
	#subnavigation li.aktiv {
	font-weight: bold;}
	
	.togglebox {
 	display: none;
	}
	#navigation li {
  	display: none;
	}
	label.toggle {
	display: block;
	position: absolute;
	top: 27px;
	right: 30px;
	background: url(images/toggle.png) 0px 3px no-repeat;
	color: #006d78;
  	cursor: pointer;
	z-index: 99999;
	padding-left: 25px;
	}
	label:hover {
	color: #f39100;
	}
	#navigation li.navi1 {display: block;}
	input[type="checkbox"]:checked ~ #navigation li {
  	display: block;
}
}

@media (max-width: 360px) {
	.zitat {padding-right: 0px; padding-top: 160px; font-size: 13px; line-height: 20px;}
	#inhalt.profil ul {padding-right: 0px; margin-top: 30px;}
	.sr-script {width: 230px; height: auto; margin-top: 10px;}
}

@media (max-width: 320px) {
	.zitat {padding-right: 0px; padding-top: 140px; font-size: 13px; line-height: 20px;}
}