* {
    margin: 0;
    padding: 0;     
    /* alles auf Null setzen */
    
    font-family: Arial, sans-serif;
}

    /* Jetzt kommt der unsichtbare rahmen wrapper. 
    * 960px aber immer 90% Abstand 0 und automatisch */

.wrapper {
    width: 960px;
    max-width: 90%;
    
    margin: 0 auto;
}

    /* NAVIGATION */

#navigation {
    position: fixed ;
    /* Position bleibt fixiewrt */
    
    top: 0;
    /* Menue bleibt fixiert - oben  */
    
    z-index: 10;  
    /* z-index, wie mehrer Blätter di übereinander liegen
     * z-index 10 liegt vorne, und 0 lieht hinten (banner)  */
    
    width: 100%;
    height: 100px;
    
    /* zum besseren Sehen und Testen die erste 250 auf 2 setzen */
    background-color: rgba(250, 250, 250, 0.8); 
}

#logo img {
    width: 30px;
    height: 30px;
    
    float:  left;
    margin: 44px;
}

#logo p {
    font-family: serif;
    font-size: 3em;
    line-height: 1em;
    color: #274e71;
}

#menue {
    float:  right;
    margin-top: 44px;
    margin-right: 30px;
}

#menue a {
    padding-right: 40px;
    padding-top: 35px;
    
    text-decoration:  none;
    color: #274e71;
    font-weight:  700;
}

#menue a:hover {
    border-bottom: solid #DFC9E6 10px;
}

/* BANNER */

#banner {
    width: 100%;
    height: 700px;
    z-index: 0; 
    
    background-color:  grey;
    background: url(picture/blume-1.jpg);
    background-size: cover;
}

#banner h1 {
    padding-top: 250px;
    text-align: center;
    color: #274e71;
    font-size: 6em;
    font-family:  serif;
}

#content {
    margin-top: 44px;
}