html 
    { background: #ebebeb; width: 100%; height: 100%; }
  body 
  { /*---width, min-width+max-width--verhindernRWD@media ausserkraft;_---max-width:1900px; max-height:1200px;*/ margin-right: 7%; margin-left: 7%;
   font: 1em PerpetuaTI Helvetica;
   background: #ebebeb;/*#999999*/
   color:#660000;
  }
   header {max-width:100%; border: 0px solid lime;
   display:flex;
   margin: 0px;
   padding: 0px;
   max-height: auto;
  /* border: 1px solid #eebb55;*/ 
   border-radius: 1pt;
   background: ;/*#ffeebb*/
   }
  #top { display: flex; justify-content: center;  /*space-between*/  margin-top:1em; border-bottom:1px #660000 solid; }
  
  #menue   {display: none/*inline*/; justify-content: center;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */}

  
	#main h1  { text-align: center; font-size:1.2em; font-weight:lighter;margin:0px;   padding: 0px;}
	#main h2  { text-align: center; font-size:0.9em; font-weight:lighter; margin:0px;   padding-top:5px;}
	#main p   {text-align: justify;  margin-top:0.1em;   }
	#main h4  {text-align: center;    font-size:1em; font-weight:lighter;   }

  #main {  display: -ms-flexbox; 

  	max-width:1300px;  margin-left: 0em; margin-right: 0em;
    min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -ms-flex-direction: row; 
   -webkit-flex-flow: row ;
           flex-flow: row ;
   }
 #edelholz   { margin:0 3.5em;   /*ausrichtung bild*/  }

  #main article {  -ms-flex: 3 1 43%;  -ms-flex-order:2;
   margin:2 4px;
   padding: 5px;
   border: 10px solid #ebebeb;/*cccc33;*/

   border-radius: 2pt;
   background: #ebebeb;/*#dddd88*/
   -webkit-flex: 3 1 43%;
           flex: 3 1 43%;
   -webkit-order: 2;/*2*/
           order: 2;
   }
  
  #main #leftside { -ms-flex: 1 6 10%;  -ms-flex-order:3;
  /*rechteseiteGMs*/ background: #ebebeb; 

   margin:2 0px;
   padding:0 0px;
   border: 10px solid #ebebeb;/*#8888bb*/
   justify-content: center;     
   background: #ebebeb;;/*#ccccff;*/
   -webkit-flex: 1 6 10%;
           flex: 1 6 10%;
   -webkit-order: 3;/*1*/
           order: 3; 
          
           font-size:1em;
   }
  
  #main #rightside {-ms-webkit-flex: 1 6 35%;
  /*linksHauptbild*/ 
   margin:2 0px;
   padding:0 0px;
   border: 10px solid #ebebeb;/* #8888bb;*/
   
   background: #ebebeb;;/*#ccccff;*/
   -webkit-flex: 1 6 35%;
           flex: 1 6 35%;
   -webkit-order: 1;/*3*/
           order: 1;
 }

 
   footer {
   display: block;
   margin: 1px;
   padding: 1px;
   min-height: 1px;
   border: 1px solid red;
 
   background: #ffeebb;
   }
   /*____________________________________________________________________________________________________________________*/
   /*____________________________________________________________________________________________________________________*
   /*____________________________________________________________________________________________________________________*/
   /*_______________________________________max-w-_640 original____________________________________________________________________________*/
    @media screen and (min-width: 321px) and (max-width:640px)
    {
  body  {	margin-left:1%; margin-right: 1%; border-bottom:0px red blue;}
  
	header { max-height:auto; width:320px;}
 #leftside, #rightside, h2, #edelholz {	 display: none;  }

 
#favi, #usa.gb {   margin-left: 3.5em;    }
  
h1 { font-size: 1.5em;} p  {font-size: 1em;    }

 img { margin-top: 0.5em; margin-bottom:0.5em;}/*Zwischenabstaende!!!!!!!*/
#top {max-height: auto;	display:inline; border: 0px solid lime;  margin-left:5em; margin-right:5em; margin-bottom:2em;  }

#main {     -webkit-flex-flow: column;  flex-direction: column;    }

   #main > article/*, #main > #leftside #main > #rightsideaside*/ { justify-content: center;  /* Return them to document order */  }
  
   }
    /*-------------------------------ende original-------------------------------------------------------------------*/
      /*----------------------------------queer kleine bis 800----------------------------------------------------------------*/ 
   @media screen and (min-width : 800px) and (max-width : 900px)
     {
 body  { border: 0px solid red;}                                
    #top,
    #rightside {  display:none;            }
	#menue  {display:inline;            }}
	  /*------------------------------------ende 800 queer-------------------------------------------------------*/
      /*------------------------------------768er hochformat----------------------------------------------------------*/  
 @media screen and (min-width : 767px) and (max-width : 899px)
     {
 body  { border: 0px dotted blue;}                                
    #top,
    #rightside {  display:none;            }
	#menue  {display:inline;            }}

    
    
    /*--------------------------------------------------------------------------------------------------*/
      /*--------------------------------------------------------------------------------------------------*/  
      /*----------------------------------tablets901--hoch--------------------------------------------------------------*/


     @media screen and (max-width: 1042px) and (min-width: 820px) 
     {
 body  {
	margin-left:1%; margin-right: 1%;border:0px solid lime;
}
#menue {
	 display: none;
}
 #rightside {
	display:inline;
}

   #main {
    -webkit-flex-flow: row;
            flex-direction: row;
   }

   #main > article/*, #main > #leftside #main > #rightsideaside*/ { justify-content: center;
    /* Return them to document order */
    -webkit-order:2;
            order:2;/*reihenfolge der boxen1=textboxstehtganzlinks*/
   }
  
   #main > #leftside, #main > #rightside, header {
   }}