body {
        font:1em Arial, Helvetica, Geneva, Sans-serif, sans-serif;
          background: url(fotos/DSCF1858-2.jpg) no-repeat;
        background-color: rgb(255,255,255);
      	 
          width: 90%;       
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        
      }
      div.background {
          background: url(fotos/DSCF1858-2.jpg) no-repeat fixed;
          
        }
 
.box1 {
          margin-left: 10px;
                 
          border: 0px solid red;
          width: auto;
          height: 50px;
          
        } 
 
        

div.transbox {
        
          margin-left: 5px;
          margin-top: 20px;
          margin-bottom: 50%;
         
          border: 0px solid white;
          opacity: 0.9;
          filter: alpha(opacity=90); /* For IE8 and earlier */
        }


div.transbox {
  margin-top:6em;
   margin-bottom:4em;
  font-weight:bolder;
  color: #000000;
  background-color: lightgreen;
  
}
 
 
      
h3 {
    color: #000000;
    text-align: center;
}     
      
.p1 {
    color: #000000;
    text-align: center;
    background-color: lightgreen;
}     
      
.p2 {
    color: #000000;
    text-align: center;
    background-color: PaleGreen;
}     




 
.rundecken {

    background: #99ffcc; /* Fallback IE 6-8 */
    /* background: rgba(0, 128, 128, .6); */
    color: #dff;
   
    padding: 8px;
    margin:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 3px 3px 5px #222;
    -moz-box-shadow: 3px 3px 5px #222;
    box-shadow: 5px 5px 7px #111;
    /*text-shadow: 2px 2px 1px #444;*/
     opacity:0.9;
        text-decoration:none;
    
}

.rundecken2 {

    background: #99ffcc; /* Fallback IE 6-8 */
    /* background: rgba(0, 128, 128, .6); */
    color: #dff;
   
    padding: 8px;
    margin:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 3px 3px 5px #222;
    -moz-box-shadow: 3px 3px 5px #222;
    box-shadow: 5px 5px 7px #111;
    /*text-shadow: 2px 2px 1px #444;*/
     opacity:0.8;
        text-decoration:none;
    
}

 
 
      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
@media screen and (min-device-width : 320px) 
and (max-device-width : 480px) 
  
   

.schriftgroesse{
         

}
                                                                   
      header, nav, nav a, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 0px solid;
        padding: 5px;
        margin: 5px;
        
        -webkit-flex: 1 90%;
        flex: 1 90%;
      }
 

      header {
        
        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;
      }     
      
      header img {
        -webkit-flex: 0 0 100px;
        flex: 0 0 100px;
        margin-right: 20px;
      }
      
      
      
      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: #fffbf0;
        border: 0px solid #dfac20;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:hover {
        background-color: #66CCFF	;
          
      }
      section {
       
        border-color: slateblue;
      }
      
      
      article {
        
        border-color: #df6c20;
         height: auto;
         	
      }
      aside {
       
         
        height: auto;
        
        
      }  
      
      .o0  { opacity: 0; }
      .o2  { opacity: 0.2; }
      .o4  { opacity: 0.4; }
      .o6  { opacity: 0.6; }
      .o8  { opacity: 0.8; }
      .o10 { opacity: 1; }      
      

      
      footer {
        
        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;
      }


      img { width: 90%; height: auto; }
       
      /* 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: 20em) {
    
      img { width: 400px; height: auto; }
    
     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;
      }
      aside {
        flex: 2 1 0;
      }
      #news {
        -webkit-flex: 2 1 0;
        -webkit-order: 2;
        -webkit-align-self: center;
        flex: 2 1 0;
        order: 2;
        align-self: center;
        
      }
      }