html { background: #ebebeb; }
body {margin-left:5%; margin-right:5%;
  
  padding: 0;
  color: #660000; /*textfarbe ueber alles*/
  background-color: ebebeb;        /*#990134   */
  font-family: verdana,arial,helvetica,sans-serif,Felix titling;
  /*max-width: 1300px;*/
}

#wrapper {
  background-color: #EBEBEB;/*#FFFFFF */
  margin: 0 auto;
  width: 98%;
  
}

/* oben*/
header {margin-left: 0em; margin-right: 0em; margin-top: .6em;
  /*margin: 10px;/*20*/
  border-top:1px maroon solid;
  text-align:center;
  color: #660000;
   font-size: 1em;/* schrift in h1 und nav hor ist bei 0em weg*/
   font-family: Felix titling;}

div#navihor {display: -ms-flexbox; -ms-flex-direction: row;

  background-color: #EBEBEB;/*#D30148 */
  margin: 0 20px 10px 20px;
  text-align: center;
  font-family: Perpetua;
   border-top: 0px solid #EBEBEB;
   margin-top: 0.4em;
  border-bottom: 1px solid #FFFFFF;/*#FFFFFF*/
/*-webkit-box-shadow: 0px 4px 4px #7F7F7F; /* Schatten um die horizontaleNav- Leiste*/
 -moz-box-shadow: 0px 4px 4px #7F7F7F; /* Firefox */
 /*box-shadow: 0px 4px 4px  #7F7F7F;*/
  height: 36px;
}

.hornavi a:link, .hornavi a:active, .hornavi a:visited { /*waagerechte navleiste*/ 
  color: #660000;/*#FFFFFF */
  background-color: #EBEBEB;/* transparent;*/
  text-decoration: none;
  font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;*/
  font-size: 1em;
  padding: 4px 15px;
  margin: 0;
  text-align: center;
  border-left: solid 0px #ebebeb;/*#D90149*/
  border-right: solid 0px #ebebeb;/*#59011E*/
  line-height: 36px;
 /*font-family:Felix titling;*/
  font-weight: normal;

}

.hornavi a:hover, hornavi a:focus { 

  color:#EBEBEB;   /*#FF9E28 */
  text-decoration: none;
  font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
}

/*NavigationENDE*/



/*Haupttext*/
.container { display: -ms-flexbox; -ms-flex-direction: row;

display:flex; flex-direction: row;  margin: 0 4em; color:maroon; font-size: 1em;/*align-items: center; /* richtet an der querachsevertikal aus */ }
#leftside,
#rightside
 {max-width:12%;  border:0px red solid; font-size:0.8em;  -ms-flex-direction: column; margin:0 0em; padding: 0 0em; }
/*#leftside {  padding-right:0px;}
#rightside { padding-left:0px; padding-right:0px;}*/





#main {display: -ms-flexbox; -ms-flex: 1 1 70%;


  padding:0 0px;
 
  display: flex;  /*wegen Fehldarstellung IE*/}

article {display: -ms-flexbox; -ms-flex-direction: column; -ms-flex: 1 1 50%; margin:0 1em;





  padding: 10px 20px 20px 0px;
  font-size: 1.2em;
  font-weight: normal;
  text-align: justify;
  line-height: 20px;
   font-family: Perpetua; }
#grabmale { -ms-flex: 0 6 auto; -ms-margin:0 2em;
	margin: 0 7.5em; align-items:center;
}
article h1 {
  text-align:center;
  font-size: 1.2em;
  margin: 0 0.1em;
  color: #660000;
 /* font-family: "Trebuchet MS",georgia,calibri,serif;*/
  letter-spacing:2px;
  line-height:1em;
  font-family: Perpetua;/*textstil nach h1 und 2*/
  font-weight: normal;}

article h2 {/*zeile 2 text*/    
  color: #660000;
  background-color: #EBEBEB;    /*inherit*/
 /* font-family: "Trebuchet MS",georgia,calibri,serif;*/
  font-size: 1.1em;
  text-align: center;
  margin: 0.3em;
  padding: 2px;
  font-family: Perpetua;
   font-weight: normal; }

article h3 { /* .......sind kostenlos*/
  color: #660000;
  background-color: #ebebeb;/*inherit*/
  font-size: 0.9em;
  padding-left: 5px;
  font-weight: normal;
  text-align: center;
   font-family: Perpetua; }
/******************Besonderheiten für Bildschirmgroesse max. 1024px**********************/


@media screen and (max-width: 1024px) 
{
.container
   {
margin-left: 2em; margin-right:2em; border: 0px solid red;
}



#grabmale
  #leftside,
  #rightside,
  h2
   { display: none;}


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

@media screen and (max-width: 767px) 
{
.container
   {
margin-left: 1em; margin-right:1em; border: 0px solid red;
}

#wrapper {
  width: 90%;
}

header {
  font-size: 0.7em;
}

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

div#navihor {
  height: 100%;
  padding: 10px 0px;
  font-size: 1.25em;
}

.hornavi a:link, .hornavi a:active, .hornavi a:visited {
  display: block;
  text-align: center;
}

.hornavi a:hover, hornavi a:focus {
  display: block;
}

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

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

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


main {
  margin: 10px;
  
}

article {
  text-align: justify;
}
#grabmale,
  #leftside,
  #rightside,
  h2
   { display: none;}

}

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

@media screen and (max-width: 500px) and (min-width:320px)/*durch vermindern auf 320 is breit bei  min320/max480 crollbalken weg*/
{
 body 
  {border: 0px solid blue;
	margin-left:0em; margin-right:0em;}
	#grabmale
  #leftside,
  #rightside,
  h2
   { display: none;}

.container
   {
margin-left:0em; margin-right:0em;
	
}
aside {
  float: none;
  width: 98%;
  padding-left: 20px;
}

.toptext {
  margin: 0 10px;
  padding: 30px 0px 0px 10px;
  font-size: 1em;
}


article h1, article h2, article h3, article h4, article h5 {
  font-size: 1em;
}
 
  #leftside,
  #rightside,
  h2
   { display: none;}


}

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

@media screen and  (min-width: 320px) and (max-width: 480px)
 {
  body  {
	margin-left:0em; margin-right:0em; }
	#grabmale,
  #leftside,
  #rightside,
  h2
   { display: none;}
#main article h3 {color: #ff0000; }
  
  header { margin-left:0em; margin-right:0em; border: 0px solid lime; }
   .container { display:flex; flex-direction: column;   margin-left:0em; margin-right:0em; 
 justify-content: center;	 align-items: center; }
 
}