@charset "UTF-8";

* {margin:0; padding:0;}

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

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

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

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

/* muli-700italic - latin */
@font-face {
  font-family: 'Muli';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/muli/muli-v19-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/muli/muli-v19-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/muli/muli-v19-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/muli/muli-v19-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/muli/muli-v19-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/muli/muli-v19-latin-700italic.svg#Muli') format('svg'); /* Legacy iOS */
}

/* muli-600italic - latin */
@font-face {
  font-family: 'Muli';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/muli/muli-v19-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/muli/muli-v19-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/muli/muli-v19-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/muli/muli-v19-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/muli/muli-v19-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/muli/muli-v19-latin-600italic.svg#Muli') format('svg'); /* Legacy iOS */
}





body {
	text-align: left;
	font-family: 'Muli', Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 1.5em;
	width: 100vw;
	height: 100vh;
	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
}

div {font-size: 1em;}

img {border: 0;}

a,
a:link
a:visited {
	text-decoration: underline;
	background-color: inherit;
	color: #000;
}

a:active {
	text-decoration: none;
	background-color: inherit;
	color: #000;
}

a:hover {
	text-decoration: underline;
	color: #999;
	background-color: inherit;
}

body {color: #000; background: #fff;}

.wrapper {
	width: 1100px;
	margin: 0 auto;
	color: black;
}

.left {
	float: left;
	width: 221px;
	display: block;
	margin: 0 0 20px 0;
}

.right {
	margin: 0 0 0 270px;	
}


header {
    clear:both;
    background-color: rgb(102, 197, 78);
}

header .wrapper {
    height: 120px;
}

header a:focus {outline: 0;}

header .left img {
	margin-top: 10px;
}

header .right h1 {
	padding-top: 50px;
	font-size: 1.9em;
	font-weight: 600;
	line-height: 1.4em;
}


div#content {
	margin: 30px 0 20px 0;
	font-size: 12px;
	font-weight: normal;
}


article {
	font-size: 1.3em;
	color: #333;
    line-height: 1.7em;
}

#main img {
	width: 220px;
	height: auto;
	margin-right: 30px;
	margin-bottom: 20px;
	float: left;
	background: #999;
}

#main p {
	margin: 0 0 10px 0;
}


nav {
	border-top: 1px solid #CCC;
	font-size: 15px;
}



footer {
	margin: 60px 0;
	clear: both;
	border-top: 3px solid rgb(102, 197, 78);
	padding: 10px 0;
	text-align: center;
	font-size: 1em;
	font-weight: normal;
}

footer .wrapper,
footer .wrapper a {
	color: #777;
}

footer span {
	margin: 0 10px;
}

h1.title {
	font-size: 1.8em;
	font-style: normal;
	font-weight: normal;
	color: rgb(51, 99, 39);
	margin: 40px 0 0px 270px;
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
	height: 1px;
	padding: 1em;
	border-bottom: 1px dashed black;
	margin: 0;
}

div#content h1 {
	font-size: 1.8em;
	font-style: normal;
	font-weight: normal;
	color: rgb(51, 99, 39);
	margin: 15px 0 5px 0;
}
div#content h2 {
	font-size: 1.4em;
	font-style: normal;
	font-weight: normal;
	color: rgb(51, 99, 39);
	margin: 15px 0;
}
div#content h3 {
	color: rgb(51, 99, 39);
	font-size: 1.35em;
	font-weight: bold;
	margin: 15px 0 5px 0;
}
div#content h4 {
	color: rgb(51, 99, 39);
	font-size: 1.3em;
	font-style: normal;
	text-decoration: underline;
	margin: 15px 0 5px 0;
}


.btform h2 {
	margin-top: 25px;
}


blockquote {
	border-left: 10px solid #ddd;
	margin-left: 10px;
}
strong, b {
	font-weight: 700;
}
em, i {
	font-style:italic;
}

code, pre {
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}

pre {
	border: 1px solid #000;  /* black border for pre blocks */
	background-color: #ddd;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
}

article ul,
article ol {
	line-height: 1.4em;
	margin: 20px 0 20px 0;
}

article ul li {
	list-style: none;
	background: url(../images/greydot.png) no-repeat 0px 3px;
	margin: 10px 0 10px 0;
	padding: 0 0 0 30px;
}

article ul.yellow li {
	background: url(../images/yellowdot.png) no-repeat left;
}

article ol {
	margin: 0 0 0.25em 0;
	padding-right: 0.5em;
}





/*
 ---------------------------------------------------------------
  Navigation
 ---------------------------------------------------------------- 
*/

nav {
	margin-bottom: 40px;
}

#overlay ul,
nav ul {
	margin: 0;
}

#overlay li,
nav li {
   list-style: none;
   margin: 0;
   border-bottom: 1px solid #CCC;
   display: block;
}

#overlay ul ul,
nav ul ul {
   margin: 5px 0;
}

#overlay ul ul li,
nav ul ul li {
   border: none;
}

/* first level links */
#overlay a,
nav a {
   text-decoration:none; 
   display: block; 
   padding: 0.2em 2.5em 0.2em 0; 
   color: #381F0D; 
   min-height:1em;
   line-height: 1.5em; 
}


#overlay ul ul a,
nav ul ul a {
   font-size: 0.9em;
   padding: 1px 0 1px 0px;
}

#overlay a:hover,
nav a:hover {
   text-decoration: underline;
}

/* 
current pages in the default Menu Manager 
template are unclickable. This is for current page on first level 
*/
nav ul li.menuactive {
   background: url(../images/point.png) no-repeat 0px 5px
}

#overlay ul li a.menuactive,
#overlay ul li a:hover,
nav ul li a.menuactive,
nav ul li a:hover {
   color: rgb(51, 99, 39);
}



/* section header */
nav li.sectionheader {
   border-right: none;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0;
   background-color: #fff;
   line-height: 1em;
   margin: 0;
   text-align:center;
}



/* separator */
nav li.separator {
   height: 1px !important;
   margin-top: -1px;
   margin-bottom: 0;
   padding:2px 0 2px 0;
   background-color: #000;
   overflow:hidden !important;
   line-height:1px !important;
   font-size:1px; /* for ie */
}

nav li.separator hr {
   display: none; /* this is for accessibility */
}

.mobile-nav {
	display: none;
}

/*
 ---------------------------------------------------------------
  Section
 ---------------------------------------------------------------- 
*/

section.news {
	/*border: 2px solid rgb(102, 197, 78);*/
	background: #e8e8e8;
}

section .news {
	padding: 10px;;
}

section {
	line-height: 1.5em;
	font-size: 1.1em;
}

#content section h2 {
	margin-bottom: 5px;
}


/*
 ---------------------------------------------------------------
  File links
 ---------------------------------------------------------------- 
*/


/* PDF-Links */
a[href$='.pdf'] {
	background: url(../images/pdf.png) 0px 3px no-repeat;
	background-size: 14px 16px;
	padding-left:20px;
	padding-bottom: 2px;
}


/*
 ---------------------------------------------------------------
  News
 ---------------------------------------------------------------- 
*/



/* Start of CMSMS style sheet 'Module: News' */
div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000; 
  background: #FFE9AF; 
}

div#news h2 {
   line-height: 2em;
   background: #fff;
}

.NewsSummary {
    padding: 0.5em 0.5em 1em; /* padding for the news article summary */
    margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
    border-bottom: 1px solid #ccc; 
}

.NewsSummaryPostdate {
  font-size: 90%;
  font-weight: bold;
 }

.NewsSummaryLink {
    font-weight: bold;
    padding-top: 0.2em;
}

.NewsSummaryCategory {
  font-style: italic;
  margin: 5px 0;
 }

.NewsSummaryAuthor {
  font-style: italic;
  padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 140%;
 }

.NewsSummaryMorelink {
  padding-top: 0.5em;
}

#NewsPostDetailDate {
  font-size: 90%;
  margin-bottom: 5px;
  font-weight: bold;
  }

#NewsPostDetailSummary {
   line-height: 150%;
   }

#NewsPostDetailCategory {
  font-style: italic;
  border-top: 1px solid #ccc;
  margin-top: 0.5em;
  padding: 0.2em 0;
}

#NewsPostDetailContent {
  margin-bottom: 15px;
  line-height: 150%;
  }

#NewsPostDetailAuthor {

  padding-bottom: 1.5em;
  font-style: italic;
}


/* to add specific style to the below divs, uncomment them. */

/* 
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/
/* End of 'Module: News' */






/*
 ---------------------------------------------------------------
  FormBuilder
 ---------------------------------------------------------------- 
*/

form {
	margin-top:0;
	margin-bottom: 20px;
}
form, td, th, li {
	font-size: 100%
}
form div {
	margin-bottom:0
}
fieldset div {
	margin-bottom:0.5em;
}
fieldset div div {
	margin-top:0.5em;
	margin-left:1em
}
fieldset {
	margin-bottom:1em;
	border: none;
}
fieldset label {
	width:auto;
}
legend {
	color:#000;
	font-style:italic;
	font-size:1.2em;
	margin-bottom:0.5em;
	padding:0.2em;
	width:auto;
	/*border:1px solid #CCC*/
}




.kontaktform textarea {
	padding: 2px;
	width:450px;
	height: 10em
}

/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.kontaktform .short-label label {
	float:left; width:10em
}
.kontaktform .short-label fieldset div input,
.kontaktform .short-label fieldset div select {
	width:16em
}

.kontaktform .cms_checkbox {
	margin-left: 10px;
	border: none;
}

/* Pretty up your Captcha image output */
.kontaktform .captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center
}
.kontaktform .captcha img {
	border:1px solid #696868;
	margin-bottom:0.5em
}
.kontaktform .captcha input {
	width:196px;
	margin-top:0.5em
}

/* Just a bit more room for the Submit button */
.kontaktform .submit {
	margin-top:0.5em;
}

.kontaktform input {
	border: 1px solid #696868;
	padding:2px
}
.kontaktform label {
	display: block;
	float: left;
	width: 150px;
}
.kontaktform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}

/* Checkboxen */
.kontaktform .checkboxes input {
	border: none;
	vertical-align: bottom;
	float: left;
	clear: left;
}

.kontaktform .subcheckboxes {
	 margin-left: 25px;
}

.kontaktform .subinput {
	margin-left: 56px;
}

.kontaktform .subinput label {
	width: 120px;
}

.kontaktform .subinput input {
	width: 60px;
}

.kontaktform .subtext {
	margin-left: 56px;	
}



.kontaktform .checkboxes label {
	margin-left: 30px;
	margin-top: -20px;
	margin-bottom: 10px;
	float: left;
	width: 100%;
}
/* Ende Checkbox */

.kontaktform .mitteilung {
	margin-top: 25px;
}

.kontaktform textarea {
	border: 1px solid #696868;
	margin-top: 5px;
}

.kontaktform .cms_submit {
	background: #fff;
	border: 1px solid #696868;
}

.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}



/*
 ---------------------------------------------------------------
  Images
 ---------------------------------------------------------------- 
*/

img[style*="float: left"], 
img[style*="float:left"] {
	margin-right: 20px;
}

img[style*="float:right"], 
img[style*="float:right"] {
	margin-left: 20px;
}

#content img {
		max-width: 100%;
	}

/*
 ---------------------------------------------------------------
  Mobile Responsive
 ---------------------------------------------------------------- 
*/

#overlay {
	visiblity: hidden;
	display: none;
}

@media screen and (max-width: 1199px) {
	
	.wrapper {
		width: 95%;
	}
	
	header .right h1 {
		padding-top: 30px;
	}
}


@media screen and (max-width: 750px) {
	
	header {
		background-color: transparent;
	}
	header .wrapper {
   		background-color: rgb(102, 197, 78);	
	}
	
	.wrapper {
		width: 100%;
	}
	
	
	.left {
		float:none;
		width: 100%;
	}
	
	.left section .news {
		padding: 10px 20px;
	}
	
	.right {
		margin: 20px;
	}
	
	header .left {
		width: 190px;
		float: left;
	}

	header .left img {
		margin-left: 20px;
	}
	
	
	header .right h1 {
		padding-top: 30px;
	}

	header .right  {
		margin: 0 70px 0 190px;
	}
	
	nav {
		display: none;
	}
	
	footer .wrapper div {
		margin: 0 20px;
	}
	
	.mobile-nav {
		display: block;
	}
	
	@keyframes bugfix {
	    from {
	        padding: 0;
	    }
	    to {
	        padding: 0;
	    }
	}
	
	@-webkit-keyframes bugfix {
	    from {
	        padding: 0;
	    }
	    to {
	        padding: 0;
	    }
	}
	
	#overlay-button {
	    position: absolute;
	    right: 1em;
	    top: 1em;
	    padding: 26px 11px;
	    z-index: 5;
	    cursor: pointer;
	    user-select: none;
	}
	
	#overlay-button span {
	    height: 4px;
	    width: 35px;
	    border-radius: 2px;
	    background-color: white;
	    position: relative;
	    display: block;
	    transition: all .2s ease-in-out;
	}
	
	#overlay-button span:before {
	    top: -10px;
	    visibility: visible;
	}
	
	#overlay-button span:after {
	    top: 10px;
	}
	
	#overlay-button span:before,
	#overlay-button span:after {
	    height: 4px;
	    width: 35px;
	    border-radius: 2px;
	    background-color: white;
	    position: absolute;
	    content: "";
	    transition: all .2s ease-in-out;
	}
	
	#overlay-button:hover span,
	#overlay-button:hover span:before,
	#overlay-button:hover span:after {
	    background: #333332;
	}
	
	input[type=checkbox] {
	    display: none;
	}
	
	input[type=checkbox]:checked ~ #overlay {
	    visibility: visible;
	}
	
	input[type=checkbox]:checked ~ #pagewrapper {
	    display: none;
	}
	
	
	input[type=checkbox]:checked ~ #overlay-button:hover span,
	input[type=checkbox]:checked ~ #overlay-button span {
	    background: transparent;
	}
	
	input[type=checkbox]:checked ~ #overlay-button span:before {
	    transform: rotate(45deg) translate(7px, 7px);
	    opacity: 1;
	}
	
	input[type=checkbox]:checked ~ #overlay-button span:after {
	    transform: rotate(-45deg) translate(7px, -7px);
	}
	
	#overlay {
		display: block;
	    height: 100vh;
	    width: 100vw;
	    background-color: rgb(102, 197, 78);;
	    z-index: 2;
	    visibility: hidden;
	    position: fixed;
	}
	
	
	#overlay.active {
	    visibility: visible;
	}
	
	#overlay div > ul {
		margin: 80px 20px 20px 20px;
		height: auto;
		font-size: 1.5em;
	}
	
	#overlay ul li.menuactive {
	   background: url(../images/point-white.png) no-repeat right;
	}

	#overlay ul li.menuactive a,
	#overlay ul li a:hover  {
	   color: #fff;
	}
}


@media screen and (max-width: 950px) and (min-width: 751px) {
	
	#content img {
		float: none !important;
		margin: 5px 0;
	}
}

@media screen and (max-width: 650px) {
	
	header .right h1 {
	    font-size: 1.6em;
	    padding-top: 10px;
	}
	
	#content img {
		float: none !important;
		margin: 5px 0;
	}
}



@media screen and (max-width: 450px) {
	
	header .wrapper {
	    height: auto;
	    background-color: transparent;
	}
	
	div#content {
		margin-top: 10px;
	}
	
	header .left {
		width: 100%;
		height: 120px;
	    background-color: rgb(102, 197, 78);
		float: none;
		margin: 0;
	}
	
	header .right {
		width: 100%;
		margin: 0;
	}
	header .right h1 {
	    font-size: 1.6em;
	    padding: 5px 10px;
	}
	
	#content img {
		float: none !important;
		margin: 5px 0;
	}
}



/*
 ---------------------------------------------------------------
  Accessibility
 ---------------------------------------------------------------- 
*/

@media screen, projection, print
{
	/*
	menu links accesskeys
	*/
	span.accesskey {
	   text-decoration:none;
	}
	
	/*
	accessibility divs sind normalerweise verteckt
	text, screenreaders und �hnliche Browser zeigen diese jedoch an.
	*/
	.accessibility, hr {
	   position: absolute;
	   top: -999em;
	   left: -999em;
	}
	
	/*
	Definitionstags in den Men�s werden versteckt.
	*/
	dfn {
	   position: absolute;
	   left: -1000px;
	   top: -1000px;
	   width: 0;
	   height: 0;
	   overflow: hidden;
	   display: inline;
	}
	/* Ende accessibility */
	
	
	/* wiki style external links */
	/* external links will have "(external link)" text added, lets hide it */
	a.external span {
	  position: absolute;
	  left: -5000px;
	  width: 4000px;
	}
	
	/* make some room for the image */
	a.external {
	/* css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
	  padding: 0 12px 0 0;
	}
	/* colors for external links */
	a.external:link {
	  color: #18507C;
	/* background image for the link to show wiki style arrow */
	  background: url(images/external.gif) no-repeat 100% 0;
	}
	a.external:visited {
	  color: #18507C; /* a different color can be used for visited external links */
	
	/*
	Set the last 0 to -100px to use that part of the external.gif image for different color for active links
	external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.
	*/
	  background: url(images/external.gif) no-repeat 100% 0;
	}
	
	a.external:hover {
	  color: #18507C;
	/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
	  background: url(images/external.gif) no-repeat 100% 0;
	  background-color: #C3D4DF;
	}
	/* end wiki style external links */
	
	
	/* clearing */
	/*
	clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item.
	We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience.
	Do not edit if you dont know what you are doing
	*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block;
		width: 100%;
	}

	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */
/* End of 'Accessibility and cross-browser tools' */

}


/*
 ---------------------------------------------------------------
  Print
 ---------------------------------------------------------------- 
*/

@media print {
	.noprint {
		display:none;
	}
	nav ul {
		display:none !important;
	}
	article, div#heading {
		margin: 0 300px 0 0 ;
		font-size:12px;
		color: #333;
		line-height: 18px;
	}
}