/** { padding: 0; margin:0; }*/
html {margin:0;padding:0;height:100%;width:100%}
body { margin-left:12%; margin-right:12%;	
	 margin-top:1.5em; background: #ebebeb; padding-left:2.5px; padding-right: 2.5em; }
#vor, #cent, #ret, #imgR, imgL { display: -ms-inline-block; list-style: none; border: 0px;} 	
		

header, #navig, #innen {  display: -ms-flexbox;  height:60px;   -ms-flex-direction: row ; -ms-flex:4 1 90%; flex: 4 1 76%; border:0px solid blue; 

	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	 flex-direction: 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.1em; font-weight: lighter; text-align:center;}
p { text-align: justify;	}
h4 { text-align: center; font-weight: lighter; color: red; margin:0em auto;}
#cent {display: inline-block; margin:0 5em;     }

	
#navig    {  -ms-flex:2 1 auto; border:0px solid red;

	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	-ms-flex: 1 1 100%;}


	
 #innen {   display: inline-block; align-items:center; 
	}	
	
/*#navig,
#imgL,
#vocere,
#imgR
 { -ms-flex-align: center;
	display: -ms-flexbox;     
	-ms-flex-direction: row ; 
	flex-direction: row; 
	display: flex; 
	display: -webkit-flex; 
	-webkit-justify-content: 0px; /*space-around;
	-webkit-flex-direction: row;/*row
	justify-content: space-around;}*/





article {  /*MITTE box   text*/
	background: #ebebeb;      /* #ffede0*/
	border-color: #ebebeb;  /* #df6c20  rand um textfeld*/
	-webkit-flex: 3 1 0%;
	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.5em; /*abstand text vom linken rand*/}
	
 
	

/*#imgL, 
 {  /*box links, wenn deakt auch box rechts weg*/
	background: #ebebeb;   /*#ebf5d7*/
	border-color: #ebebeb ;/*#8db243  Rand ums bild 
	-webkit-flex: 1% 1% 10%;/*1 1 0% width:100px; height:100px;
	flex:0 0 0%;
	padding-right:0em;
	border:11px solid green; 
	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) {
header #navig #imgL,
 #imgR,
h3 
 {display: none; }


header {
  font-size: 0.7em;

}

div #top {
  margin-bottom: 0;
  padding: 0;
}



aside {
  float: none;
  width: 98%;
  padding-left: 25px;
}

aside h2 {
  margin: 0px 40px 10px 0px;
}

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

.linkszwischentext {
margin: 0px 40px 0px 0px;
}

h4    { font-weight: normal;}

}

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

@media (max-width: 480px) {

body { border:1px solid red }
article h1, article h2, article h3, article h4, article h5 {
  font-size: 1em;
}
h4    { font-weight: normal;}


}

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

@media screen and (min-width: 321px) and (max-width:479px)
{

body { border:10px solid #ebebeb; margin-left:0%; margin-right:0%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	 margin-top: 0.7em; background: #ebebeb; padding-left:.0em; padding-right: 0em;}
	 article {width:100%}

header #navig #imgL,
 #imgR,
h3 
 {display: none; }
 
h4    { font-weight: normal;}
#cent { display:inline-block; margin:0 1em; margin-top:1em;   }	
 nav,
 ul, 
 li
  { margin:0 auto;}
  h3 {margin: 1em auto; }
  
}