body {
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        
      }
      
      header h1 {
        font-size: 80px;
      }

      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, article, section, aside, footer {
        /*border-radius: 0px 0.5em 0.5em;*/
        padding: 10px 0px 10px 0px; 
        margin: 10px;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      
      header, article, section, aside, footer {
        padding: 30px;
        color: rgba(0, 0, 0, 0.9);
        /*opacity: 0.9;
        filter: alpha(opacity=90);*/
        border: 1px solid #ccffcc;
      }
      
      img{
       color: rgba(179, 202, 239, 1);
       /*opacity: 1.0;
       filter: alpha(opacity=100);*/
      } 
      
      nav{
        opacity: 0.9;
        filter: alpha(opacity=90);
      }
      
      #gal{
       display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }
      
      #fotos{
       -webkit-flex: 1 auto;
        flex: 1 auto;
        webkit-order: 1;
        order: 1;
      }
      #bildvorschau{
       -webkit-flex: 1 auto;
        flex: 1 auto;
        webkit-order: 2;
        order: 2;
      }

      
      header {
        background: #b3caef;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      header * {
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
      }
      header img {
        -webkit-flex: 0 0 150px;
        flex: 0 0 150px;
      }
      header nav {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
      }
      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: #b3caef;
        border: 1px solid #ccffcc;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:hover {
        background-color: #ccffcc;
      }
      section {
        background: #b3caef;
        border-color: #ccffcc;
      }
      article {
        background: #b3caef;
      }
      aside {
        background: #b3caef;
      }
      footer {
        background: #b3caef;
        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 h1{
              font-size: 40px;
       }
       
      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%;
      }
      
      section {
        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: 3;
       /* flex: 1 auto; */
        order: 3;
      }
      footer {
        webkit-order: 4;
        order: 4;
      }
      .bucheinband {
        width: 30%;
        padding: 20px;
      }
      
      .bucheinband img{
        width: 100%;
      }
      
      
      
      
      
      
      }

     /* Large screens */
     @media all and (min-width: 50em) {
       
       header h1{
              font-size: 60px;
       }
    
     section {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        -webkit-flex: 7 1 0%;
        -webkit-order: 2;
        order: 2;
        flex: 7 1 0%;
      }
      

      aside {
        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
      }
      
      aside ul, aside li{
        margin: 0;
        padding: 0;
      }
      
      aside li{
        list-style-type: none;
      }
      
      aside a{
        text-decoration: none;
      }
     /* #news {
        -webkit-flex: 2 1 0%;
        -webkit-order: 2;
        -webkit-align-self: center;
        flex: 2 1 0%;
        order: 2;
        align-self: center;
        
      } */
      }
      
      
      
      
      /* Gallerie*/
      
      /* Mobile first - für schmale Viewports */

    #galerie li {
        display: inline-block;	
        list-style-type: none;
        width: 45%;
    }
    
    #galerie img {
        padding: 0;
        margin: 0;	
        width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
    }
    
    #galerie button {
      padding: 0.1em;
    }

     /* Large screens */
@media all and (min-width: 35em) {
	#galerie li {
		width: 10em;
	}

	#galerie img {
		padding: 0;
		margin: 0;	
		width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
	}

	#galerie button {
		padding: 0.1em;
	}

	#galerie button:focus, 
	#galerie button:hover {
		background: #09c;
	}
    
    #galerie button {
		padding: 0.1em;
		width: 10em;
		height: 7.5em;
		position: relative;	
	}

	#galerie button img {
		border: 0;
		position: absolute;
		left: 0%;
		top: 0%;
		z-index: 1;
		box-shadow: 0;
		width: 10em;		
		transition: all 1s;			
	}

	#galerie button:focus img, 
	#galerie button:hover img {
		border: 2em solid #eee;
		border-radius: 1em;
		box-shadow: 1px 1px 5px #333;
		width: 300%;
		position: absolute;
		left: -4%;
		top: -4%;
		z-index: 5;

		transition: all 1s;		
	}	
}