html {
height: 101%;
}
body {
font: 100.01% Arial, serif;
text-align:center;
color:#2c2c2c;
margin:0;
padding:0;
}
#main {
max-width:800px;
min-width:500px;
margin:0 auto 50px auto;
}
#header,
#mainNavi,
#content,
#footer {
width:100%;
text-align: left;
}
											/* Aufklappmenü bgu_Proj.html ANFANG*/
/**
 * Animierter CSS-Spoiler von Florian Zier.
 */

/* Spoiler-Container */
.spoiler {
	position: relative;
	padding:  0;
	/*border:   1px solid black;*/
	border-radius: 4px;
}

/* Checkbox für Klappfunktion */
.spoiler > input[type=checkbox]:first-child {
	padding: 0px 65px;
	font: bold 50px/.825 'Yanone Kaffeesatz', arial, serif;
	position: absolute;
	margin:   0;
	width:    100%;
	cursor:   pointer;
	opacity:  0.0;
	/* Fix: IE9/10 bei Text-Klick klappen */
	background-color: white;
}

/* Titelzeile und Checkbox Höhe */
/*
.spoiler > input[type=checkbox]:first-child,
.spoiler > input[type=checkbox]:first-child + h3 {
	
	*//* Höhe der Titelzeile *//*
	min-height:  24px;
	line-height: 24px;
}
*/
/* Inhalt der Titelzeile */
.spoiler > input[type=checkbox]:first-child + h3 {
	display:          block;
	padding-left:     200px;
	background:       transparent no-repeat scroll 50px 5px;
	background-image: url(../images/pfeil_unten3.gif);
}
.spoiler > input[type=checkbox]:first-child:checked + h3 {
	background-image: url(../images/pfeil_oben3.gif);
}

.spoiler > input[type=checkbox]:first-child + h1 {
	display:          block;
	padding-left:     200px;
	background:       transparent no-repeat scroll 50px 8px;
	background-image: url(../images/pfeil_unten3.gif);
}
.spoiler > input[type=checkbox]:first-child:checked + h1 {
	background-image: url(../images/pfeil_oben3.gif);
}

/* Ein-/Ausfahren des Inhalts mit Animation */
/* http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto/27515933#27515933 */
.spoiler > input[type=checkbox]:first-child ~ div {
	overflow:   hidden;
	/*border-top: 0px solid black; */
	max-height: 0px;
	padding:    0;

	transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s,
				padding    0.0s linear 0.5s,
				border-top 0.0s linear 0.7s;
}
.spoiler > input[type=checkbox]:first-child:checked ~ div {
	overflow:           auto;
	padding:             0px 0px;
	border-top-width:    1px;
	max-height:       9999px;

	transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s,
				padding    0.0s linear 0.0s,
				border-top 0.0s linear 0.0s;
}
											/* Aufklappmenü bgu_Proj.html ENDE*/
#header,
#footer {
padding:20px 0;
margin:0 0 50px 0;
width:100%;
background-color: rgba(211,211,211,.6);
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
#header h1 {
font: 35px/1 'Yanone Kaffeesatz', arial, serif;
text-shadow: 1px 1px 1px #6c6c6c;
text-indent:50px;
}
#footer {
padding:25px 0;
margin:50px 0 0 0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.f_wrapper{
width: 800px;
margin: 0 auto;
}
.f_element{
display: inline-block;
}
.f_element2{
display: inline-block;
text-align: right;
float: right;
padding-right: 50px;
font-size: 16px;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-weight: normal;
}

#img{
display:block;
margin:0;
padding:0px 50px;
}
#content {
background-color: #FFF;
font-size: 30px;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*font: bold 30px 'Yanone Kaffeesatz', arial, serif;;*/
font-weight: normal;
text-shadow: 0px 0px 0px #CCC;
margin:0;
padding:10px 0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
border-bottom-right-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
border-top-right-radius:5px;
}
#content h1 {			/* content Anfang*/
font-size: 22px; /*30px;*/
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*font: bold 30px 'Yanone Kaffeesatz', arial, serif;;*/
font-weight: bold;
padding:0px 50px;
margin-top: 10px;
margin-bottom: 2px;
line-height: 24px;
}
#content h2 {
font-size: 19px;  /*22px;*/
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*Arial,Helvetica Neue,Helvetica,sans-serif;*/
font-weight: bold;
padding:0px 50px;
margin-top: 5px;
margin-bottom: 2px;
line-height: 20px;
}
#content h3 {
font-size: 17px;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*Arial,Helvetica Neue,Helvetica,sans-serif;*/
font-weight: normal;
padding:0px 50px;
margin-top: 5px;
margin-bottom: 2px;
line-height: 18px;
}
#content h3.plus {    /* bgu_Proj.html */
/*font: 18 arial, serif;
font-size: 17px;*/
/*font-family: "Times New Roman", Times, serif;*/
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*Arial,Helvetica Neue,Helvetica,sans-serif;*/
font-weight: normal;
padding:0px 65px;
margin-top: 2px;
margin-bottom: 2px;
}
#content h2.plus {
padding:0px 65px;
} 
#content h1.plus {    /* bgu_Proj.html */
/*font: 18 arial, serif;*/
font-size: 22px;
/*font-family: "Times New Roman", Times, serif;*/
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*Arial,Helvetica Neue,Helvetica,sans-serif;*/
font-weight: bold;
padding:0px 65px;
margin-top: 2px;
margin-bottom: 2px;
line-height: 24px;
}
#content h4 {
font-size: 16px;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; /*Arial,Helvetica Neue,Helvetica,sans-serif;*/
font-weight: normal;
padding:0px 50px;
margin-top: 10px;
margin-bottom: 2px;
}
#content p {
font-size: 15px;
padding:0px 50px; 
margin-top: 5px;
margin-bottom: 3px;
line-height: 15px;
vertical-align:top;
}					
#content table p{ 
padding: 0px 0px;
margin: 0;
line-height: 15px;
}
#content table{ 
color: #2c2c2c;
font-size: 15px;
/* border-collapse: collapse; */
table-layout: fix;
/*text-align: left;  */
text-align: topleft;
}
#content p.index {   /* index.html*/
/*font-size: 20px;*/
font: 20px arial, serif;
color:#6c6c6c;
line-height: 20px;
}
#content  h1.bg_titel_h1{
padding:0px 50px;
font: bold 50px 'Yanone Kaffeesatz', arial, serif;
text-shadow: 5px 5px 5px #A9A0A0;
display:block;
line-height: 45px;
margin-top: 40px;
margin-bottom: 30px;
}
#content  span.bg_titel_span{
color:#6c6c6c;
font: bold 22px 'Yanone Kaffeesatz', arial, serif;
padding: 0px 0px;
text-shadow: 3px 3px 3px #A9A0A0;
display: block;
line-height: 28px;
}
#content table p.bg_name_p{
padding:0px 0px;
font: bold 30px 'Yanone Kaffeesatz', arial, serif;
text-shadow: 5px 5px 5px #A9A0A0;
display:block;
line-height: 28px;
}
#content table span.bg_name_span{
color:#6c6c6c;
font: bold 18px 'Yanone Kaffeesatz', arial, serif;
padding: 0px 0px;
text-shadow: 3px 3px 3px #A9A0A0;
margin: 0;
margin-bottom: 10px;
display: block;
line-height: 18px;
}					/* content Ende*/
.img{				/* bgu_Ma.html*/
padding: 0px 50px;
}
.td_top{			/* bgu_Ma.html*/
vertical-align:top;
}

/* STichpunkte ANFANG */
#content ul.first{
padding: 0px 63px;
margin-top: 0px;
margin-bottom: 0px;
}
#content .spoiler ul.first{
padding: 0px 78px;
}
#content ul.first li {
list-style-type: disc;
font-size: 15px;
text-shadow: 0px 0px 0px #A9A0A0;
padding: 0px 0px;
border-top: 0px;
border-bottom: 0px;
/*color: #6c6c6c;*/
margin-top: 0px;
margin-bottom: 0px;
line-height: 15px;
}
#content ul.second{
padding: 0px 73px;
margin-top: 0px;
margin-bottom: 0px;
}
#content .spoiler ul.second{
padding: 0px 88px;
}
#content ul.second li {
list-style-type: circle;
font-size: 14px;
text-shadow: 0px 0px 0px #A9A0A0;
padding: 0px 0px;
border-top: 0px;
border-bottom: 0px;
/* color: #6c6c6c;*/
margin-top: 0px;
margin-bottom: 0px;
line-height: 14px;
}
/* STichpunkte ENDE*/

#footer p {
font: normal 16px 'Yanone Kaffeesatz', arial, serif;
text-shadow: 1px 1px 1px #6c6c6c;
margin:0;
padding:0;
text-indent:50px;
}
#navi {
text-align:left;	
}
#navi ul {
width:100%;
padding:0;
margin:0;
list-style:none;
}
#navi li {
display:inline-block;
padding:7px 0 0 0;
margin:0 5px 0 0;
font: bold 81.25%/2.125 Arial, Verdana, sans-serif;
}
#navi li a {
display: block;
color:#fff;
text-decoration: none;
padding:0 0 0 5px;
background:#2c2c2c;
/* alte webkit-basierte Browser (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom, from(#848487), to(#3c3c3c));
/* neue webkit-basierte Browser(Safari, Chrome, etc.) */
background: -webkit-linear-gradient(top, #848487, #3c3c3c);
/* Mozilla/Gecko (Firefox, Flock, etc) */
background: -moz-linear-gradient(top, #848487, #3c3c3c);
/* F�r Presto (Opera ab Version 11.1) */
background: -o-linear-gradient(top, #848487, #3c3c3c);
/* IE10 Pre-Beta */
background: -ms-linear-gradient(top, #848487, #3c3c3c);
/* aktueller W3C working draft */
background: linear-gradient(top, #848487, #3c3c3c);
}
#navi li#active span,
#navi li a {
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
border-top-right-radius:5px;
border-top-left-radius:5px;
}
#navi li a:hover,
#navi li a:active,
#navi li a:focus {
outline: none;
text-decoration: underline;
}
#navi li a span {
display:block;
margin:0;
padding:0 15px 0 10px;
}
#navi li#active {
margin:0 5px 0 0;
padding:0;
}
#navi li#active span {
display:block;
margin:0;
padding:7px 15px 0 15px;
color:#2c2c2c;
background:#FFF;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* IE-Patch f�r IE 7*/
*:first-child+html .clearfix { min-height: 0; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

@media only screen and (max-width: 750px) {
#main {
margin:0 auto;
max-width:700px;
min-width:400px;
width:90%;
}

#header,
#footer {
margin:25px auto;
width:100%;
height:auto;
}

#header {
margin-top:0;
}


#header h1,
#footer p {
text-indent:20px;
}

#main h1,
#main h2 {
font-size:30px;
line-height: 1.25;
}

#content h1 span {
font-size:18px;
}
}

@media only screen and (max-width: 400px) {
#main {
margin:0 auto;
max-width:400px;
min-width:150px;
width:90%;
}

#navi ul {
float:none;
width:100%;
padding:0;
}

#navi li,
#navi li#active span,
#navi li a,
#navi li a span {
float:none;
width:100%;
}

#navi ul li {
padding:0;
}

#content h2,
#content p {
margin:0;
padding:10px;
}
#header,
#footer {
padding:5px 0;
}

#header h1,
#footer p {
text-indent:10px;
}

#header h1 {
line-height:.66;
}

#navi li a,
#navi li#active {
height:27px;
text-align: left;
margin:0;
padding:0;
text-indent:10px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
	#navi li a,
	#navi li a span,
	#navi li#active span {
		padding:0;
	}
	#content,
	#navi li#active span,
	#navi li a {
		-webkit-border-top-right-radius:0px;
		-webkit-border-top-left-radius:0px;
		-moz-border-radius-topright:0px;
		-moz-border-radius-topleft:0px;
		border-top-right-radius:0px;
		border-top-left-radius:0px;
	}
	#navi li:first-child a,
	#navi li#active:first-child span {
		-webkit-border-top-right-radius:5px;
		-webkit-border-top-left-radius:5px;
		-moz-border-radius-topright:5px;
		-moz-border-radius-topleft:5px;
		border-top-right-radius:5px;
		border-top-left-radius:5px;
	}
}

								/* Wechselnde Hintergrundbilder ANFANG*/
@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#cf4a{
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#cf4a img {
  position:absolute;
  height:auto;
  width: 100%;
  left: 0;
  height: 100%;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 80s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 80s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 80s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 80s;
}
#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 60s;
  -moz-animation-delay: 60s;
  -o-animation-delay: 60s;
  animation-delay: 60s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 40s;
  -moz-animation-delay: 40s;
  -o-animation-delay: 40s;
  animation-delay: 40s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
/* Wechselnde Hintergrundbilder ENDE*/