body {
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
		/*font-family: Bodoni MT,Didot,Didot LT STD,Hoefler Text,Garamond,Times New Roman,serif;*/
		font-family: Arial,sans-serif;  
		font-size:0.8em;
		color:#006854; 		
      }
	  h1 { font-size:2em;
	  }	
      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 1px solid;
        padding: 10px;
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }
 
      header {
        /*background: #F1F3F4;*/
        /*border-color: #d5d5d5;*/
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      header * {
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
		/* font-family: cursive; */
      }
      header img {
        -webkit-flex: 0 0 150px;
        flex: 0 0 150px;
        margin-right: 20px;
		margin-left:10px;
		margin-bottom: 10px;
	  }
      header nav {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }
      nav ul {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        display: flex;
        flex-direction: column;
      }
      nav li {
        list-style-type:none;
        margin: 1.3em 0;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav a {
        display:inline-block;
        width:95%;
        background: #e4ebf2;
		color: #222222;
        border: 1px solid #e4ebf2;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:focus, nav a:hover  {
        /*background-color: #dfac20;*/
		border: 1px solid /*#dfac20*/ #8a9da8;
		
      }
	  
	  .dropdown {
		position:relative;
		}
		
	  .drop-nav {
	    position:absolute;
		display:none;
		flex-direction:column;
		}
	  .dropdown:active > .drop-nav {
		display:block;
		}
	  .dropdown:hover > .drop-nav {
		display:block;
		}	
  
      section {
        background: #F1F3F4;
        border-color: slateblue;
      }
      article {
        /*background: #ffede0;*/
        /*border-color: #df6c20;*/
		border: 0px;
		text-align: justify;
      }
      aside {
        /* background: #ebf5d7;
        border-color: #8db243; */
		border: 0px solid;
      }
      footer {
        background: #F1F3F4;
        border-color: #8a9da8;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      footer * {
        -webkit-flex: 1 1 0%;
        -webkit-justify-content: space-between;
        flex: 1 1 0%;
        justify-content: space-between;
      }
      footer p {
        text-align: right;
      }
      /* Smart Phones und Tablets mit mittlerer Auflösung */
      @media all and (min-width: 35em) {
      header img {
        margin-right: 50px;
      }
      nav ul {
        -webkit-flex-direction: row;
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
      }
      article {
        webkit-order: 2;
        order: 2;
      }
      #news {
        -webkit-flex: 1 auto;
        -webkit-order: 3;
        flex: 1 auto;
        order: 3;
      }
      aside {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        -webkit-flex: 1 auto;
        -webikit-order: 4;
        flex: 1 auto;
        order: 4;
      }
      footer {
        webkit-order: 5;
        order: 5;
      }
      }
 
     /* Large screens */
     @media all and (min-width: 50em) {
     article {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        -webkit-flex: 5 1 0%;
        -webkit-order: 3;
        order: 3;
        flex: 5 1 0%;
		padding-left:20px;
		padding-right:20px;
		border-radius: 0px;
		border-left: 1px solid #006854;
		border-right: 1px solid #006854;
      }
      aside {
        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
		
      }
      #news {
        -webkit-flex: 2 1 0%;
        -webkit-order: 2;
        -webkit-align-self: flex-start;
        flex: 2 1 0%;
        order: 2;
        align-self: flex-start;
        
      }
	 }
	 
	  @media all and (min-width: 60em) {
	   header img {
		   margin-right:20%;
	   }
	  }
	  	  @media all and (min-width: 72em) {
	   header img {
		   margin-right:26%;
	   }
	  }
	  @media all and (min-width: 84em) {
	   header img {
		   margin-right:32%;
	   }
	  }
	  @media all and (min-width: 96em) {
	   header img {
		   margin-right:38%;
	   }
	  }