/* für IE */
main {display:block;}


/* allgemeine Angaben für Farben, Abstände und Größen*/
body {background-color:#eff8f5;
	  margin:0 auto;
	  max-width:85em;
	  font-family:Helvetica, Geneva, Arial, sans-serif;
	  color:#123117;														/* Dunkelgrün Textfarbe */
	  display:-webkit-flex;
	  -webkit-flex-flow: row wrap;
	  display:flex;
	  flex-flow: row wrap;
	  -ms-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
	  }
	  
article			  {padding:0 0.5em;}
aside.rechteseite {padding:0 0.8em;}

header,
aside    		  {background:#224026;}
aside.rechteseite {background:#c6dea4;}	

#linie_dunkelgruen_unten{background-color:#224026; height:2.5px; margin-top:0em;}   /* Trennlinie im (Fließ)Text + unten */
#linie_dunkelgruen_duenn{background-color:#123117; height:1px; margin-top:-1em; margin-bottom:-0.5em;} /* Linie aside rechts */

#trennlinie_reportage_uebersicht
	{background-color:#123117; height:1px; margin-top:1.5em; margin-bottom:1em;} /* Tennlinie Liste Reportage-Bericht */
	
#trennlinie_galerie_uebersicht
	{background-color:#123117; height:1px; margin-top:3em; margin-bottom:1em;} /*Tennlinie Liste Galerie-Foto */



img {border:0px;}

  
	  
/* header = Kopfzeile */
header img {width:100%; height:auto; max-width:2000px; max-height:auto; margin:0em; border:0px;} /*max-height:initial; <-- testen*/

p.slogan_gross {font-size:1.9em;
		 color:#ffffff;
		 font-weight:bold;
		 line-height:1em;
		 margin-top:0.8em;
		 margin-left:1em;
		 -ms-hyphens: auto; -webkit-hyphens:auto; hyphens:auto;
		 }
		 
p.slogan_klein {font-size:1.35em;
		 color:#ffffff;
		 line-height:1em;
		 margin-top:-0.8em;
		 margin-left:1.4em;
		 margin-bottom:0.8em;
		 -ms-hyphens: auto; -webkit-hyphens:auto; hyphens:auto;
		 }
		 


/* nav = Navigation/Verlinkung */
a.navi:link {font-size:0.95em;
	color:#eff8f5;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}

a.navi:visited {font-size:0.95em;
	color:#eff8f5;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}

a.navi:active {font-size:0.95em;
    color:#eff8f5;
    font-family: Helvetica, Geneva, Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
}

a.navi:hover {font-size:0.95em;
	color:#c6dea4;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}
	
ul {text-indent:-0.2em;}	
	
li.navi {padding-bottom:0.5em;
		 margin-left:-0.5em;
		 list-style-type:none;
		 }
		 
li.navi_aktiv {padding-bottom:0.5em;
		 	   margin-left:-0.5em;
			   list-style-type:disc;
		 	   }
			   
.navi_aktiv {color:#c6dea4; font-weight:bold;}


li.unternavi1 {margin-top:-0.3em;
			  margin-bottom:0.5em;
			  margin-left:0.6em;
		      list-style-type:none;}
			  
li.unternavi1_aktiv {margin-top:-0.3em;
			 		 margin-bottom:0.5em;
			  		 margin-left:0.6em;
					 color:#c6dea4;
			   		 list-style-type:disc;
		 	   		 }

li.unternavi2 {margin-top:-0.3em;
			   margin-bottom:0.8em;
			   margin-left:0.6em;
		       list-style-type:none;}
			  
li.unternavi2_aktiv {margin-top:-0.3em;
			 		 margin-bottom:0.8em;
			  		 margin-left:0.6em;
					 color:#c6dea4;
			   		 list-style-type:disc;
		 	   		 }


a.text:link {font-size:1em;
	color:#a4215f;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:underline;
	}

a.text:visited {font-size:1em;
	color:#a4215f;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:underline;
	}

a.text:active {font-size:1em;
    color:#a4215f;
    font-family: Helvetica, Geneva, Arial, sans-serif;
    text-decoration: underline;
	}

a.text:hover {font-size:1em;
	color:#123117;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:underline;
	}
	
	
	
a.telefon_text:link {font-size:1em;
	color:#123117;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}

a.telefon_text:visited {font-size:1em;
	color:#123117;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}

a.telefon_text:active {font-size:1em;
    color:#123117;
    font-family: Helvetica, Geneva, Arial, sans-serif;
    text-decoration: none;
	}

a.telefon_text:hover {font-size:1em;
	color:#123117;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}




/* article = Inhalt */
h1 {font-size:1.45em; margin-bottom:-0.3em;}						/* für Hauptüberschrift */
h2 {font-size:0.95em; margin-bottom:-0.8em; margin-top:1.5em;}		/* für Teilüberschrift */
h3 {font-size:1.05em;}							 					/* für aside-Box */
h4 {font-size:0.95em; margin-bottom:-0.8em; 						/* Titel Naturreportagen */
    text-decoration:underline; font-weight:bold;}

h5 {font-size:1.4em; color:#92ad6b; font-variant:small-caps;		/* für Überschrift Datenschutz) */
	margin-top:1em; margin-bottom:-0.5em;}		
	
	 
p {font-size:0.95em; line-height:1.6em;}

.bildunterschrift {font-size:0.8em; line-height:1.35em; font-size:0.85em; padding:0 0.5em 0 0.5em; margin-top:0em;}
.ueberschrift_absatz_datenschutz01 {font-size:1.15em; font-weight:bold; color:#92ad6b;}

.italic  	   {font-style:italic;}
.hinweis 	   {font-size:0.8em;}


.dunkelgruen01 {color:#224026;}										/* Header, aside links, Linie unten + */
.dunkelgruen02 {color:#123117;}										/* Textfarbe, Linie dünn, Hover-Textlink, Telefon-Textlink */
.grasgruen     {color:#c6dea4;}										/* aside rechts, Hover-Navitext */
.mint          {color:#eff8f5;}										/* Hintergrund, Navitext */
.beere  	   {color:#a4215f;} 									/* Textlink */
.rot		   {color:#e10f2d;} 									/* WICHTIG */
.oliv		   {color:#92ad6b;}										/* nur für Datenschutz */


ul.text 	 		{margin-top:-0.8em; margin-bottom:-0.3em;}									/*Aufzählung nach Doppelpunkt*/
li.text 	 		{font-size:0.95em; line-height:1.45em; text-indent:0em; margin-left:-0.8em;}/*für alle Aufzählungen verwenden*/
li.text_eingerueckt	{font-size:0.95em; line-height:1.45em; text-indent:0em; margin-left:-2em;}	/*Aufzählungen in 2. Ebene*/
ul.text_aside		{margin-top:-0.8em; margin-bottom:2em;} 									/*Aufzählung aside rechte Seite*/

/*nur für Aufzählung im Datenschutz*/
ul.text_datenschutz	{margin-top:-0.5em; margin-bottom:0em;}
li.text_datenschutz {font-size:0.95em; line-height:1.45em; text-indent:0em; margin-left:-0.8em;}



img.foto_quer 			{width:240px; height:180px;}			/*Original: 800×600, 600x450, 100x750 */
img.foto_quer_vorschau	{width:140px; height:105px;}			/*Original: 800×600, 600x450, 100x750 */
img.foto_hoch 			{width:180px; height:240px;}			/*Original: 600×800 */

img.foto_portraet		{width:240px; height:180px;}			/*Original: 800×600 */
img.bild_logo			{width: 65px; height: 75px;}			/*in Originalgröße*/

			 
#foto_rechts_quer{float:right;
	   width:240px;
	   height:180px;
	   margin-left:0.8em;
	   border:solid; border-width:0.15em; border-color:#123117;
	   }
	   
#foto_rechts_quer_bildunterschrift_2_Zeilen{float:right;
	   width:240px;
	   height:180px;
	   margin-left:0.8em;
	   padding-bottom:2.7em;
	   background-color:#c6dea4;
	   text-align:left;
	   }
	   
#foto_rechts_quer_bildunterschrift_4_Zeilen{float:right;
	   width:240px;
	   height:180px;
	   margin-left:0.8em;
	   padding-bottom:5em;
	   background-color:#c6dea4;
	   text-align:left;
	   }
	   
#foto_rechts_hoch{float:right;
	   width:180px;
	   height:240px;
	   margin-left:0.8em;
	   border:solid; border-width:0.15em; border-color:#123117;
	   }
	   
#foto_links_quer{float:left;
	   width:240px;
	   height:180px;
	   margin-right:0.8em;
	   border:solid; border-width:0.15em; border-color:#123117;
	   }
	   
#foto_links_quer_vorschau{float:left;
	   width:140px;
	   height:105px;
	   margin-right:0.8em;
	   border:solid; border-width:0.15em; border-color:#123117;
	   }

	   
#foto_links_hoch{float:left;
	   width:180px;
	   height:240px;
	   margin-right:0.8em;
	   border:solid; border-width:0.15em; border-color:#123117;
	   }
	   

#bild_links_logo{float:left;
	   width:65px;
	   height:75px;
	   margin-left:0.8em; margin-right:1em; margin-bottom:1.2em;
	   }

			  
	   
	   
			  
/* aside = weiterführende Informationen */
p.abstand_nach_unten 		{margin-bottom:2em;}
p.abstand_nach_unten_quelle {margin-bottom:2em; font-size:0.8em;}




/* footer = Fußzeile */
footer section {display:flex;
			    flex-wrap: wrap;
				padding:0 0.5em;
				margin-top:-0.3em;
				}
				
footer p {font-size:0.8em; line-height:1.2em; padding-right:5em;
		 -ms-hyphens:none; -webkit-hyphens:none; hyphens:none;
		 }

#impressum {float:right; padding:0 0.5em 0 0; margin-top:0.5em; text-align:right;}



/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header{
	border-radius: 0em 0em 0em 0em;
	border: 0px solid;
	margin: 10px;
	flex: 1 100%;}

article,
aside,
footer {
	border-radius: 1em 1em 1em 1em;
	border: 0px solid;
	margin: 10px;
	flex: 1 100%;}
	
aside.rechteseite{border-radius: 1em 1em 1em 1em;}
	
#impressum {max-width:73px;}

textarea.formulartextfeld {min-height:8em; min-width:18.5em;}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
	article {order: 2;}
	
	aside {/*  durch auto werden die beiden asides in eine Zeile gesetzt 
	       --> funktioniert hier nicht - außer man läßt das Wort "auto" weg*/
		   flex: 1 1;
		   order: 3;}
	
	footer {order: 4;}
	
	#impressum {min-width:148px;}
	
	textarea.formulartextfeld {min-height:10em; min-width:32.5em;}
}


/* Large screens */
@media all and (min-width: 50em) {
	article {order: 3;
			 /* Der Article wird 2.5x so breit wie die beiden asides! */
			 flex: 5 1 0%;}
	
	aside {flex: 2 1 0%;}
	aside.linkeseite {order: 2;}
	
	#impressum {min-width:148px;}
	
	textarea.formulartextfeld {min-height:10em; min-width:32.5em;}
}