/** Bitte optimieren und integrieren: **/
.changeform { display: none; }
.edit {
	background-color: #7fa9c4;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
	padding: 30px 50px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	top: 0;
}
.preview-notification {
	background-color: #7fa9c4;
	font-size: 20px;
	font-weight: bold;
	padding: 30px 50px;
	position: fixed;
	left: 0;
	text-transform: uppercase;
	top: 0;
	z-index: 1000;
}
.wym_classes.wym_section.wym_panel { display: none; }
#wrapper > div, #ansatz, #ansatz-teil-2, #foto, #map , #handlungsfelder, #handlungsfelder2 { position: relative; }




html, body { font-size: 18px; line-height: 30px; font-family: GillSansMTStd-Light; color: #333; margin: 0; padding: 0; }

::selection { background: #98bca8; color: #fff; }
::-moz-selection { background: #98bca8; color: #fff; }


/*ANCHOR
================================================== */
a { text-decoration: none; cursor: pointer; color: #00538a; -webkit-transition: color .4s ease; -moz-transition: color .4s ease; -o-transition: color .4s ease; transition: color .4s ease; outline: none; text-transform: uppercase; letter-spacing: 0.1em; }
a:hover { opacity: 0.6; text-decoration: none; }






/*GENERAL
================================================== */
p { text-align: left; margin: 0 0 30px 0; padding:0;}


h1 { font-size: 24px; font-weight: 600; margin:0; margin-bottom: 30px; } 
h2 { font-size: 24px; font-weight: 600; margin:0; color: #3c6d8c; }
h3 { font-size: 30px; margin: 0; color: #1f5374; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } 

.clear { clear: both; }






/*HEADER
================================================== */
#header { position: fixed; width: 100%; height: 420px; background-image: url(../img/bg_pattern.png); z-index: -200; }
#logo { position: relative; width: 428px; height: 142px; margin: 139px auto;  }






/*WRAPPER
================================================== */
#wrapper { position: relative; top: 420px; width: 100%; background: #fff; z-index: 50; }






/*MENU
================================================== */
#menu_box { position: relative; width: 100%; height: 90px; background: #fff; -webkit-box-shadow: 0px 0px 6px #666;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #666;	/* firefox */ box-shadow: 0px 0px 6px #666; z-index: 300; }
#menu { width: 1024px; margin: 0 auto; height: 90px; }
	
	#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
	#menu ul { padding-top: 31px; }
	
	#menu li { float: left; padding: 0 18px 0 18px; }
	#menu li:first-child { padding-left: 39px; }
	#menu li a#icon { background-image: url(../img/icon.png); display: block; width: 23px; height: 23px; cursor: default; }
	.is-sticky #menu li a#icon { background-image: url(../img/logo_klein.png); display: block; width: 57px; height: 32px; margin-top: -2px;}
	.is-sticky #menu li:first-child { padding-left: 17px; }
		
		
		
		
/*MENU MOBILE
================================================== */
#menu_box_mobile, #menu_mobile_active { display: none;  }





/*CONTENT
================================================== */
.content { width: 924px; margin: 0 auto; padding: 96px 50px 50px 50px; }




/*Handlungsfelder
================================================== */
#figuren-img { -webkit-box-shadow: 0px 0px 6px #666;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #666;	/* firefox */ box-shadow: 0px 0px 6px #666; width: 100%; max-width: 924px; margin: 32px 0;}



/*BERATUNG COACHING MEDIATION
================================================== */
#bereiche { margin: 32px 0 25px 0; }
	
	#bereiche ul { position: relative; z-index: 101; }
	#bereiche ul, #bereiche li { margin: 0; padding: 0; list-style: none; }
	#bereiche li { position: relative; float: left; width: 295px; height: 63px;  margin: 0 0 -18px 19px; }
	#bereiche li:first-child { margin-left: 0; }
	
	#bereiche li a { display: block; width: 271px; height: 36px; color: #fff; text-transform: uppercase; padding: 9px 0 0 25px; background: #666; opacity: 0.8; }
	#bereiche li a:hover, #bereiche li a.active { opacity: 1; height: 53px; background-image: url(../img/back_ber.png);  }
	#bereiche li a:hover.coaching { background-image: url(../img/back_ber_coa.png); z-index: 150; position: relative;}
	#bereiche li a:hover.mediation { background-image: url(../img/back_ber_med.png); z-index: 150; position: relative; }
	#bereiche li a:hover.beratung { opacity: 1; height: 53px; background-image: url(../img/back_ber.png); z-index: 300; }
	
	#bereiche li a.active { opacity: 1; height: 53px; background-image: url(../img/back_ber.png); }
	#bereiche li.li_med a.active { opacity: 1; height: 53px; background-image: url(../img/back_ber_med.png); }
	#bereiche li.li_coa a.active { opacity: 1; height: 53px; background-image: url(../img/back_ber_coa.png); }
	
	#bereiche li a.beratung { background-color: #5ca2d3; }
	#bereiche li a.coaching { background-color: #7db5dc; }
	#bereiche li a.mediation { background-color: #9dc7e5; }
	
	#bereiche_content {
	z-index: 100; position: relative;
	-webkit-transition: height 1.5s ease;
	   -moz-transition: height 1.5s ease;
	    -ms-transition: height 1.5s ease;
	     -o-transition: height 1.5s ease;
	        transition: height 1.5s ease; }
	
	.bereiche-image { position: relative; }
	.bereiche-image img { margin-left: 50px;  -webkit-box-shadow: 0px 0px 6px #666;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #666;	/* firefox */ box-shadow: 0px 0px 6px #666; margin-bottom: 25px; }
	.bereiche-text .edit { right: 250px; }
	.bereiche-image .edit { right: -50px; top: -50px; }
	.bereiche-text p { margin-bottom: 0; }
	
	#bereiche_content div img { float: right; }
	
	#coaching_content { display: none; }
	#mediation_content { display: none; }

	#beratung_content { width: 822px; padding: 50px; border: 1px solid #5ca2d3; color: #2e5169; }
	#coaching_content { width: 822px; padding: 50px; border: 1px solid #7db5dc; color: #646f76; }
	#mediation_content { width: 822px; padding: 50px; border: 1px solid #9dc7e5; color: #54636d; }



/*CAPTION_BOX
================================================== */
.caption_box { position: relative; width: 100%; height: 57px; padding-top: 33px; background: #d8e5ed; -webkit-box-shadow: 0px 0px 6px #999;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #999;	/* firefox */ box-shadow: 0px 0px 6px #999; }






/*ANSATZ
================================================== */
#ansatz {}

	#meine_staerke { width: 924px; height: 204px; background-image: url(../img/meine_staerke.jpg); }
	#prozesse_verstehen { width: 851px; height: 211px; background-image: url(../img/prozesse_verstehen.jpg); }
	#ansatz-teil-2 > ul {margin: 0; }
	#ansatz-teil-2 > ul > li { list-style-image: url(../img/pfeil.png); }




/*PROFIL
================================================== */
#profil {  }

	#profil  p { margin-bottom: 0px; }
	#profil > ul { margin-bottom: 31px; margin-top: 0; }	
	#profil > ul > li { list-style-image: url(../img/pfeil.png); }


#foto { width: 345px; margin-left: 20px; float: right; }
#foto img { -webkit-box-shadow: 0px 0px 6px #666;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #666;	/* firefox */ box-shadow: 0px 0px 6px #666; }
#foto img.img_phusen { width: 345px; height: 517px; }
#foto p { text-align: right; font-size: 14px; width: 345px; }






/*KONTAKT
================================================== */
#kontakt { float: left; width: 345px; margin-right: 20px; }
#kontakt a { text-transform: lowercase; font-size: 16px; }
#kontakt p { margin-top: 11px; }

#map { float: left; }






/*FOOTER
================================================== */
#footer { position: relative; width: 100%; height: 44px; padding-top: 106px; background-image: url(../img/bg_pattern.png); }

#content_footer { width: 924px; position: relative; margin: 0 auto; }
#content_footer p { font-size: 14px; color: #666; margin: 0; padding: 0; }


	/*IMPRESSUM
	================================================== */
	#impressum { position: absolute; margin: -31px 0 0 0; right: 0; }
	#impressum a { font-size: 14px; color: #666; }
	
		#inline_content { font-size: 14px; line-height: 16px; }
		#inline_content p { margin: 5px 0 5px 0; }
		#inline_content a { text-transform: inherit; }









	
/*  ---------------------------------------------------------- Desktop device --------------------------------------------------------- */
/* =================================================================================================================================== */

@media screen and (min-width: 321px) and (max-width: 1024px) {
	
#header, #wrapper, #menu-box, .caption-box, #footer { width: 1024px; }	
	
}






@media screen and (max-width: 320px) {
	
	/*PHONES
================================================== */
@viewport { width: 320px; }

html, body { font-size: 14px; line-height: 20px; }


/*GENERAL
================================================== */
h1 { font-size: 18px;  } 
h2 { font-size: 18px;  }
h3 { font-size: 24px; } 

p { width: 270px; }



/*HEADER
================================================== */
#header { width: 320px; height: 356px; }
#logo { width: 220px; height: 73px; margin: 121px auto; }
#logo img { width: 220px; height: 73px;}



/*MENU
================================================== */
#menu_box { display: none; height:0; }
#menu { display: none; }



/*MENU MOBILE
================================================== */
#menu_box_mobile { display: block; width: 320px; height: 40px; background: #fff; margin: 0; padding: 0; position: fixed; top: 0; z-index: 100; -webkit-box-shadow: 0px 0px 6px #999;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #999;	/* firefox */ box-shadow: 0px 0px 6px #999; }
	
	#menu_box_mobile a { color: #000; position: absolute; display: block; background-image: url(../img/menu_mobile.png); width: 76px; height: 17px; left: 220px; top: 11px; }
	
#menu_mobile_active { position: fixed; z-index: 200; left: 171px; -webkit-box-shadow: 0px 0px 6px #999;	/* webkit browser*/ -moz-box-shadow: 0px 0px 6px #999;	/* firefox */ box-shadow: 0px 0px 6px #999; }

	#menu_mobile_active ul, #menu_mobile_active li { margin: 0; padding: 0; list-style: none; line-height: 12px;  background: #fff; }
	#menu_mobile_active li { padding: 8px 10px 0 10px; border-bottom: 1px solid #7fa9c4; height: 32px; }
	#menu_mobile_active li.one-line { padding-top: 14px; height: 26px; }
	#menu_mobile_active li:first-child { /*border-left: 1px solid #7fa9c4; */}
	#menu_mobile_active li:last-child { border-bottom: none; }
	#menu_mobile_active a { font-size: 12px; color: #000; }
	
	a.close-button { position: absolute; margin: -30px 0 0 125px; font-size: 14px; font-weight: bold; }



/*WRAPPER
================================================== */
#wrapper { top: 356px; width: 320px; }



/*CONTENT
================================================== */
.content { width: 270px; padding: 25px 25px 50px 25px; }


/*BERATUNG COACHING MEDIATION
================================================== */

	#bereiche li { width: 83px; height: 43px;  margin: 0 0 -8px 9px; }
	
	#bereiche li a {  width: 83px; height: 26px; padding: 9px 0 0 6px; font-size: 0.9em; }
	
	#bereiche li a:hover.beratung { opacity: 1; height: 39px; background-image: url(../img/back_ber_mobile.png); background-repeat: no-repeat; z-index: 300; }
	
	#bereiche li a.active { opacity: 1; height: 39px; background-image: url(../img/back_ber_mobile.png); background-repeat: no-repeat; z-index: 300;  }
	#bereiche li.li_med a.active { opacity: 1; height: 39px; width: 82px; background-image: url(../img/back_ber_med_mobile.png); background-repeat: no-repeat; z-index: 300; }
	#bereiche li.li_coa a.active { opacity: 1; height: 39px; background-image: url(../img/back_ber_coa_mobile.png); background-repeat: no-repeat; z-index: 300; }
	

	
	
	.bereiche-text .edit { right: 150px; top: 25px; }
	.bereiche-image .edit { top: 0; }
	#beratung_content { width: 220px; padding: 25px;  }
	#coaching_content { width: 220px; padding: 25px;  }
	#mediation_content { width: 220px; padding: 25px;  }
	.bereiche-text p { max-width: 220px; }
	#bereiche_content .bereiche-image img { float: none; margin: 5px 0 25px 9px; display: block; }
	



/*CAPTION_BOX
================================================== */
.caption_box {  width: 320px; height: 41px; padding-top: 25px; }


/*ANSATZ
================================================== */
#ansatz {}

	#meine_staerke { width: 270px; height: 515px; background-image: url(../img/meine_staerke_mobile.jpg); }
	#prozesse_verstehen { width: 270px; height: 157px; background-image: url(../img/prozesse_verstehen_mobile.jpg); }



/*PROFIL
================================================== */
#profil { float: none; width: 270px; }

	#profil  p { width: 250px; }
	#profil ul, #profil li { width: 230px; }
	
#foto { width: 270px; margin-left: 0px; float: none; }
#foto img.img_phusen { width: 270px; height: 405px; }
#foto p { text-align: right; font-size: 10px; width: 270px; }


	
	/*KONTAKT
================================================== */
#kontakt { float: none; width: 270px; margin-right: 0px; }
#kontakt a { font-size: 14px; }

#map { float: none; width: 270px; height: 257px; overflow: hidden;  }
#map img { margin-left: -88px; }



/*FOOTER
================================================== */
#footer { width: 320px; height: 44px;  }

#content_footer { width: 270px; }
#content_footer p { font-size: 12px; }


	/*IMPRESSUM
	================================================== */
	#impressum { margin: 0; left: 0; }
	#impressum a { font-size: 12px; }	
	
}