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

body {
    background-color:#edd9ac;
	color:#000000;
	font-family:Verdana, Geneva, sans-serif;
	margin:0px;
}

h1 {
  color:darkred;
  font:normal bold 24px Arial;
  text-align:center;
 }
h2 {
  text-align:center;
  color:darkred;
  font:italic bold 18px Arial;
  padding-left:1.0em;
 }
 
img { display: block;
     margin: auto;
     width: 100%;
}

video {
	 display: block;
     margin: auto;
     width:95%;
	 height:auto;
	 border-style: solid;
	 border-color:darkred;
}

#anzeigebereich{
	width:100%;
    height:75%;
   	background-color:#edd9ac;	
}	
aside{	
	float:left;
	width:25%;
	overflow:auto;
	text-align:center;
	border: 2px solid darkred;
	border-radius:10px;		
	background-color:#edd9ac; /*#ffffff;*/
    /*--------------------------------->background-color:green;*/	
	height:72%;
	padding:0.2em;
	margin:0.5%;
}


ul.links {
	padding:0;
    width:100%;
	background-color:#edd9ac; /*#ffffff;*/
	/*----------------------------------background-color:yellow;*/
    list-style-type:none;
	font-size:large;
}

#zaehler{
		font:italic bold 1.6em Arial;
		color:darkred;
}


figcaption {
    color:darkred;
	text-align:center;	
	font:italic normal 1.5em Arial;
	margin-top:1em;
	margin-bottom:1em;
}

	

.links li a {
	text-decoration:none;
	color:#ffffff;	
   	background-color:darkred;	
	border-radius:1.5em;
	font:italic normal 12px Arial;
	width:80%;
	/*margin:0.3em 0.3em 7.5% 5%;*/
	margin-bottom:0.3em;	
	margin-left:7.5%;
	margin-right:5%;
	display:block;
	text-align:center;	
	padding:0.5em 0.5em;
	font-size: 0.7em;
	border-radius:1.5em;
		
}

.links li a:visited {
color:#ffffff;
}
.links li a:hover, ul li .current {
	color:black;
    background-color:yellow;
}
.links li a:active {
  background-color: red;
  color: #444;
  cursor: default;                  
}

article.oben  {
    border:2px solid darkred;
	border-radius:10px;	
	color: darkred;
	font-size:12px;
	font-style:italic;
	overflow: auto;
	background-color:#edd9ac;
	float:left;
	width:70%;
	height:72%;
	margin:0.5%;
	padding:0.2em 1em;
}
h2 { 
	font-size:1.5em;
	margin-bottom: 0.5em;
	text-align: center;
}
 figure.textbild {
		width:40%;
		font:normal normal 0.8em Arial;
		color:darkred;
		
}
	
 p.textblock {
		width:98%;
		padding-left:0;
		padding-right:0.5em;
		font:normal normal 1.2em Arial;
		color:darkred;
		text-align:justify;		
 }

 strong {
	 clear:both;
	 /*color:yellow;*/
	 color:#edd9ac;
	 font:normal bold 1.5em Arial;
	 text-align:center; 
 }

 .kopf {
	 clear: both;
	 float: left;
	 background: #444; /*#024c68;*/
	 font-family: Verdana;
	 font-size: 1em;
	 text-align:center;
	border-radius:10px;
	width: 95%;	
	margin-left:1%;
	margin-right:2.5%;
	height:18%;
	overflow-x:hidden;
	overflow-y: hidden;
 }
 #navi {
 float: left;
 position: relative; 
 left: 50%;
 margin: 0 auto;
 padding: 0px; 
 list-style-type: none;
 }

 #navi li {
 float: left;
 position: relative;
 right: 50%;
 margin-bottom:10px;
 }

 #navi li a {
 
 width: 6.5em;
 height:5em;
 display: block;
 margin-left:2em;
 margin-top:0.5em;
 overflow: hidden;
 padding:8px 10px;
 line-height: 1.5em;
 /*color: yellow;*/
 color:#edd9ac; 
 background: darkred; 
 border:1px solid #024c68;
 font:italic bold 0.9em Arial;
 text-decoration:none;
 border-radius:10px;
 text-align:center; 
 }
 
#navi li a:visited {color:#ffffff;}
#navi li a:hover {background-color: #005f5f;}

footer {
	padding-top:0.3em;	
    background-color:#edd9ac;
	clear:left;
	color:#63adff;	
	font-style:italic;
	font-weight:bolder;
	text-align:center;	
	width: 100%;
	
	margin-top:0.5em;
	font-size:1em;
	padding-bottom:1em;	
}
	
/*----------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) { /*gelber Bereich - kleinerer Desctop*/
	article.oben  {
		width:68%;
	}
	#zaehler {
		font-size:1.4em;
	}
}
	
@media screen and (max-width: 1400px) {
	
	#zaehler {
		font-size:1.2em;
	}
}

@media screen and (max-width: 1100px) { /*blauer Bereich ipad landscape*/
    aside{
		width:30%;
	}
	
	article.oben {
		width:62%;
	}
	
	
	#zaehler {
		font-size:1.0em;
	}
	
	ul#navi li a{
		font-size:0.7em;
	}	
		
	
}
@media screen and (max-width: 900px) { /*roter Bereich ipad porträt*/
    
	aside{
		width: 40%;
		height: 80%;
		
	}
	article.oben{
		width: 50%;
		height: 80%;
	}	
		
	
	
	#zaehler {
		font-size:1.0em;
		/*color:yellow;*/
	}
	
	
	ul#navi li a{
		margin-left:0.3em;
		padding:8px 5px;
		font-size:0.7em;
	}	
	p.textblock {
		font-size:12px;
	}	
	
	.kopf {
		height:120px;
	}
    footer {
		font-size:0.8em;
	}
	
}
@media screen and (min-width: 600px) and (max-width: 700px) { /*gruener Bereich iphon landscape*/
	aside {
		width: 44%; /*340px;/*400px;*/
		height:87%;
		border-radius:5px;
		background-color:transparent;
	}
	article.oben  {
		width:46%;
		height:52%;
	}
	p.textblock {
		font-size:11px;
	}
	
	img {
		width:100px;
	}
	
	figure {
		float:left;
	}
	
	figcaption {
		font-size: 10px;
		margin-bottom:0;		
	}
	
	h2 {
		font-size:10px;
	}	
	ul.links {
		background-color:transparent;
		float:left;
		width:99%;
		/*height:100%;*/
		margin-top:0;
	}	
	.links li {
		float:left;
		width:45%;
		margin:0 1% 0.5% 0.5%;	
	}
	.links li a {
		padding:0.1em 0.1em;
		font-size: 0.6em;
		margin-top:0.1em;
		margin-bottom:0.1em;	
	}
	
		
	#zaehler {
		display:none;
		font-size:0.7em;		
	}
	
	ul#navi li a{
		margin-left:0.3em;
		padding:4px 10px;
		font-size:0.55em;
	}
	strong{
		display:none;
		font-size:0.8em;
	}
	.kopf{
		position:absolute;
		top: 50%; /*190px;*/
		left: -8px;
		
		/*display:none;
		float:left;*/
		margin-left:48%;
		width:52%;
		height:42%;
		background-color:transparent;
		
	}
	footer {
		clear:both;
		margin-top:0;
		font-size:0.6em;
		padding-bottom:0.7em;
	}	
	
}



@media screen and (max-width: 600px) {	/*GRÜNER BEREICH iphon porträt*/
	aside{
		width:95%;
		height:98%
	}
	
	ul li a {
	padding:0.4em 0.4em;
	margin-bottom:0.5em;
	font-size: 0.5em;
	}
	
	ul#navi li a{
		margin-left:1em;
		margin-top:0;
		margin-bottom:0;
		
		padding:8px 8px;
		font-size:0.7em;
	}	
	
	article.oben {
		margin:3% 1%;
		padding:1% 3%;
		width:90%;
		/*margin-right:4%;	
		margin-top:3%;
		padding-left:1.0em;
		padding-right:1em;*/
		font-size:10px;
 	}
	
	figure.textbild {
		width:100%;
		margin-left:2.5%;
		margin-right:2.5%;
		font:normal normal 1.5em Arial;
		color:darkred;
	}
	
	figcaption {
	font-size:0.8em;
	}
	img {
     width: 95%;
	 margin-right:3%;
	}
	
	
   	h2 { 
		font-size:1.2em;
		margin-bottom: 0.5em;
		text-align: center;
	}
		
	.kopf {
		overflow-y:auto;
		width: 99%;
		margin-left:0;
		margin-right:0;
	}
   
    #zaehler{
		font:italic bold 1.0em Arial;
	}
	
	strong{
		font-size:0.8em;
		margin: 2px 0;
	}
	
	footer {
		margin-top:0;
		font-size:0.7em;
		padding-bottom:0.7em;
	}

	
}
@media screen and (max-width: 350px) {
		ul#navi li a{
		margin-left:0.4em;
		margin-top:0;
		margin-bottom:0;
		padding:4px 11px;
		font-size:0.6em;
	}
	
	footer {
		font-size:0.6em;
	}
}