@charset "utf-8";
/* CSS Document */
/* gilt uneingeschränkt für Auflösungen width>1580 Pixel (große Desctop) */
html, body {
	/*background:#4cd4ef; /*hellblau*/
	margin:0;
	background:#eaded0;
	height:100%;
	overflow:hidden;
}
table {
  color:darkred;
  font:italic normal 12px Arial;
  margin-left:12px;
} 
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;
 }
 	 
 .mini{
	width:35px;
 }
 div.kopf {
	width: 100%;
	overflow: hidden;
	background: transparent; /*yellow; #024c68;*/
	font-family: Verdana;
	font-size: 1em;
	padding-bottom:1em;
 }

ul.navi {
	 list-style-type: none; 
	 text-align:center;
}

 ul.navi li {
	display:inline; 
	/*background-color:darkred;*/
	float: left;
	height: 5%; /*10%;*/
	margin:3px;
	border:1px solid #024c68;
	border-radius:10px;
	border-style:none;
	width:10%;
	
 }

ul.navi li a {
	display:inline-block;
	width:80%;
	height:80%;
	
	/*margin-left:0.3em;*/
	overflow: hidden;
	color: yellow; 
	
	background: transparent; /*darkred;*/ 
	padding: 10px 4px 10px 4px;
	 /*padding:0 4px;*/
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
	font:italic normal 0.8em Arial;
 }

ul.navi li:hover  {background-color: #005f5f;}

ul.navi li:active {	background-color:red;}

div.inhalt {
	clear:both;
	border:2px solid darkred;
	border-radius:10px;	
	background-color:transparent; /*:#ffffff;*/
	/*background-color:yellow;*/
	color: darkred;
	font-size:12px;
	font-style:italic;
	width:93%;
	height:70%; /*56%*/
	margin-left:2%;
	overflow-y:auto;
	padding:1.5em; 1.5em;
}

figure {
		/*width:70%;*/
		background-color:transparent;
		margin-left:2%;
		margin-right:2%;
				
}	

figure.textbild {
       	float:left;
		font:normal normal 1.5em Arial;
		color:darkred;
		background-color:yellow;	
}
figure.einzel {
	font:normal normal 1.5em Arial;
	
}	
figcaption {
	color:darkred;
	text-align:left;
	/*padding:1.0em 0.5em;*/
	padding-top:1em;
	padding-bottom:1em;
	font:italic bold 16px Arial;
	background-color:transparent;
	text-align:center;
}

figure img {
		/*width:50%;*/
		border: solid 2px darkred;
		border-radius:15px;
	
}

p  {
	margin:0;
}	
p.textblock {
	    /*margin:0;
	    width:90%;
		padding-left:3%;
		padding-right:3%;
		padding-bottom:1%;*/
		font:normal normal 1.2em Arial;
		color:darkred;
		text-align:justify;	
}

p.textfloat {
	float:left;
	margin:1%;
	font:normal normal 1.2em Arial;
	color:darkred;
	text-align:justify;
}

li.internlist{
	font-style:italic;
	font-size:1.0em;
	font-family:Arial;
	font-weight:bold;
	color:darkred;
	margin-left:2em;
}	
footer {
    clear:both;
	padding-top:0.3em;	
    background-color:transparent; /*#edd9ac;*/
	clear:left;
	color:#63adff;	
	font-style:italic;
	font-weight:bolder;
	text-align:center;	
	width: 100%;
	margin-top:0.5em;
	font-size:1.5em;
	padding-bottom:0.3em;	
	
	height:5%;
}

/*====================================== für Monitore mit max-width bis 1590 px  (kleiner Desctop) ========================================*/
@media screen and (max-width: 1590px) { 
	 div.kopf {
		 background:transparent;
	 }
	div.inhalt {
		/*background-color:green;*/
	}
	ul.navi li a {
		/*background: green;*/ 
		width: 90px;
		height:48px;
		font:italic normal 0.8em Arial;
		padding:3px;
		margin-bottom:12px;	
		
	}	
	footer {
		font-size:1.2em;
	}

	figcaption {
		font:italic normal 1.0em Arial;
	}	


	
}
@media screen and (max-height: 780px) {
	div.inhalt {
		height:60%;
		/*background-color:blue;*/
	}
}
	
/*======================================================================= bei geingerer Bildschitmhöhe (<1120 px) (incl. ipad landscape) ========*/


@media screen and (max-width: 1100px) { 
	div.inhalt {
		/*background:blue;*/
	}
	ul.navi li a {
		width: 70px;
		height:43px;
		font:italic normal 0.75em Arial;
		padding:3px; 
	}
	figcaption {
		/*color:green;*/
		font:italic normal 0.8em Arial;
	}
}

/*=========================================================================== für Bilschirmgrößen max-width bis 900 px (ipad porträt)========*/
@media screen and (max-width: 900px) { 
	h1 {
		font: italic bold 1.2em Arial;
	}
	div.kopf {
		height:20%;
		background:transparent; /*yellow;*/
		overflow:hidden;
	}
	div.inhalt {
		/*background-color:red;*/
		width:90%;
		height:70%;
	}
	
	 ul.navi li {
		 width:19%;
		 height:23%;
	 }
	ul.navi li a {
		/*background: green;*/ 
		/*width: 110px;
		height:50px;*/
		font:italic normal 0.7em Arial;
		padding:3px;
	}
	figure.textbild {
		/*clear:both;*/
		width:78%;
		padding-right:10%;
	}
	

}
/*========================================================================================================= iphon, smartphon =====================================================*/
/*------------------------------------------------------------------------- Landscape (Querformat) -----------------------------------------------------------------*/
@media screen and (max-width: 700px) { 
	h1, h2 {
		font: italic bold 0.6em Arial;
	}	
	div.kopf {
		height:30%;
		/*background:yellow;*/
		overflow:hidden;
	}
	div.inhalt {
		/*background-color:green;*/
		height:44%;
	}

	footer {
		font-size:0.8em;
		height:5%;
		
	}
	 ul.navi li {
		 width:19%;
		 height:20%;
	 }
	
	ul.navi li a {
		font:italic normal 0.5em Arial;
		padding:4px;
		margin-left:8px;
		margin-bottom:3px;	
	}
	
	figcaption {
		font:italic normal 0.8em Arial;
		padding:1.0em 0.5em;		
	}
	
}

@media screen and (max-width: 580px) { /*grün landscape klein */
	div.inhalt {
		/*background:red;*/
		height:42%;
	}
}

/*------------------------------------------------------------------------- Portträt (Hochformat) -----------------------------------------------------------------*/

@media screen and (max-width: 400px) { /*gelb iphon PORTRÄT standard*/
	div.kopf {
		height:20%;
		/*background:yellow;*/
		overflow:hidden;
	}
	div.inhalt {
		/*background-color:green;*/
		height:65%;
		width:80%;
	}
	
	ul.navi li {
		height: 25%;
		width: 28%;
	}
	ul.navi li a {
		font:italic normal 0.5em Arial;
		padding:4px;
		margin-left:4px;
		margin-bottom:2px;		
	}
}

@media screen and (max-width: 340px) { /*gelb iphon PORTRÄT*---> besonders klein/*/
	/*h2 {
		font: italic bold 1.2em Arial;
		margin-left:20px;
	}	
	ul.navi li a {
		color:red;
		width: 65px;
		height:30px;
		font:italic normal 0.7em Arial;
		padding:4px;
		margin-left:18px;
		margin-bottom:4px;	
	}
*/
}