/** { padding: 0; margin:0; }*/
html {margin:0;padding:0;height:100%;width:100%}
body {
	display: -webkit-flex; margin-left:5%; margin-right:5%; margin-top:1.5em;
	display: flex;
		-webkit-flex-flow: row wrap;/*regeltreihenfolge*/
	flex-flow: row wrap;
	 background: #ebebeb; 
	 }

header,
nav,
nav a,
article


 {    
	
	/*border: 10px solid red;macht alle raender dicker aber farbe fuer footer stimmt*/
	padding:0 0em;
	margin:0 1em;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	
	 -ms-flex-direction: row;
	/*alles wird in einer hauptachse ausgerichtet reihe*/
	
	

}

header {
	background: #ebebeb; /*#F1F3F4*/
	border-color: #ebebeb;
	display: -webkit-flex;
	display: -ms-flexbox;
	

	-webkit-flex-flow: row;
	display: flex;
	flex-flow: row;
	text-align: center;  /*Ueberschrift*/
	font-family: perpetua;/*Ueberschrft*/
	color: #660000; 
	font-weight: normal; }

	
 h1 { font-size: 1.5em; font-weight: lighter; text-align:center;}
h3 { font-size: 1.5em; font-weight: lighter; text-align:center;}
p { text-align: justify;	}
#main h4 { text-align: center; font-weight: lighter; color: red; margin:0em;
	border:  0px solid red ;/*???? --*/
	font-style: felix-titling;
 font-weight: normal;
}


nav,
nav li,
nav li a img { list-style: none;
	margin-top: 0px;
	padding:0 1em;/*abstand pfeile zur mitte bilder*/
	border:  solid blue 0px;/*linie unter H1, zum entfernen-none einsetzen--*/ 
	font-size: 1.1em;
	
}

nav {
	display: -webkit-flex; -webkit-flex: 1 1 auto;
	-ms-flex-direction:row;
	-webkit-flex-direction: row;/*row*/
	display: flex; flex:0 0 auto;/*ersteZahl.mit.1verschiebt.nav.nach.links*/
	display: -ms-flexbox;
	
	margin: auto;/*verschiebt navleiste nach links wenn entfernt*/

	
	/*justify-content: space-around;*/}
	
	
	
}

nav li { 

	list-style: none;
	margin: 0 0px; /*1terWert macht um gesamten nav alles blau//2ter wert macht einen Block um das center*/
	align-content: stretch;
	flex-direction: row;
	
	align-self:center;
}

nav a {
	
	width: 96%; /*96%*/
	background: #ebebeb; ;/*#fffbf0*/
	border: 0px solid red; /*#ebebeb; /*#dfac20 macht hoehe um navleiste im head */
	margin: 0;
	text-align: center;
	text-decoration: none;
}

nav a:hover {	background-color: #ebebeb;/*#dfac20*/ /*#ebbfd7*/}

#main {  display: -ms-flexbox;     -ms-flex-direction: row; display: flex; flex-direction: row; -webkit-direction: row; }

article {  /*MITTE box   text*/     -ms-flex-direction: column;  

	background: #ebebeb;      /* #ffede0*/
	border-color: #ebebeb;  /* #df6c20  rand um textfeld*/
	-webkit-flex: 1 0 60%;
	-ms-flex: 1 0 60%;
	flex: 1 0 60%;

	
 /*1 0%breite linkes flex item */
	text-align: justify; 
	color: #660000;
	/*border-right-width: 1.2em;abstand text vom bild*/ 
	/*border-left-width: 1.2em; abstand text vom linken rand*/}
	
 
	

aside #img {  /*box links, wenn deakt auch box rechts weg*/
	background: #ebebeb;   /*#ebf5d7*/
	border-color: #ebebeb ;/*#8db243  Rand ums bild */
	-webkit-flex: 1 1 33%;/*1 1 0%*/
	flex:1 1 33%;
	-ms-flex:1 1 33%;
	
	padding-right:0em;
	border:1px solid red; 
	margin-top: 0.8em; margin-right: 1.5em;

	
}

/*Der nächste Code-Schnipsel ist banal, aber wirkungsvoll. Mit ihm skaliert ihr alle Bilder auf die jeweilige Breite des Displays und 
bewirkt die typische großflächige “Mobile-Optik”.   */
/******************Besonderheiten für Bildschirmgroesse max. 768px**********************/
@media (max-width: 768px) 
{
img {max-width: 100%; height: auto;}
body { margin-left:0%; margin-right:0%; border:0px solid blue; justify-content: center; display: flex; flex-direction: column; margin-top: 0.4em;   }
#main  {  flex-direction: column; display: flex/*inline-block*/; align-items:center; margin:0.1 0.1em; max-width:97%; justify-content: center;}	






nav {
  margin: 0px 40px 20px 0px;
  text-align: center;
}



}

/*****************Besonderheiten für Bildschirmgroesse max. 480px***********************/

@media screen and (min-width : 479px) and (max-width : 550px)
{
body { margin-left:0%; margin-right:0%; border:0px solid red; justify-content: center; display: flex; flex-direction: column; margin-top: 0.4em;   }
#main  {  flex-direction: column; display: flex; align-items:center; margin:0.1 0.1em; max-width:97%; justify-content: center;}	



article h1, article h2, article h3, article h4, article h5 {  font-size: 1em;}


}

/*****************Besonderheiten für Bildschirmgroesse max. 32px***********************/

@media screen and (min-width: 319px) and (max-width: 380px)
 {

body { margin-left:0%; margin-right:0%; border:0px solid lime; justify-content: center; display: flex; flex-direction: column; margin-top: 0.4em;   }
aside #imgG { margin-left:0%; margin-right:0%;}
#menue {  flex-direction: column; display: flex; align-items:center; margin:0.1 0.1em; max-width:100%;}	
 nav  
  { margin:0 auto; display: flex; flex:1 0 92%; align-items:start; justify-content: start;}
  h4 {border-bottom:2em; }
  
}