body{
            background: #F5F5DC;
            font-family:Verdana, Tahoma, Arial, sans-serif; 
            font-size: 1.0em; 
            overflow:auto;
        }
        h1,h3{
            text-align:center;
            padding-left: 5%;
            color: #62615C;
        }
        p{
            padding:2%;
            color: #62615C;
        }
        img{
            text-align:center;
            max-width: 100%;
            height:auto;
            width:auto;
        }
        #wrapper{
            background: #E7F3EF;
            margin: 0 auto;
            max-width: 1020px;
            width:98%;
            border: 1px solid #73726D;
            border-radius: 2px;
            box-shadow: 0 0 10px 0px rgba(12, 3, 25, 0.8);
        }
        
       header{
            width: 100%;
            min-height: 54px;
            text-align: center;
        }
        nav ul{
            list-style: none;
            margin: 0;
            padding-left: 20px;
        }
        nav ul li{
            float:left;
            border: 1px solid #73726D;
            width: 12%;
        }
        nav ul li a{
            background: #528B8B;
            display: block;
            padding: 2% 0% 2% 0% ;
            font-weight: bold;
            font-size: 0.8em;
            color: #e7f3ef;
            text-decoration: none;
            text-align: center;
        }
        nav ul li a:hover, nav ul li a.active{
            background: #e7f3ef;
            color: #528B8B;
        }
   
        .bereich-links{
            width: 55%;
            float: left;
            margin: 1% 1% 1% 1%;
        }
        .bereich-rechts{
            width: 41%;
            float: right;
            margin: 1%;
            text-align: center;
        }
        .handwerk{
            float:left;
            margin: 16% 1% 1% 1%;
            max-width: 100%;
            height: auto;
            padding: 1%;
        }
        .loeschen{
            clear: both;
        }
        .bereich{
            width: 29%;
            float: left;
            margin: 2% 2.16%;
            text-align: center;
        }   

        footer {
            background: #528B8B;
            width: 100%;
            overflow: hidden;
        }
        footer p {
            color: #F1F0D1;
        }
  
      
       
        @media screen and (max-width: 478px){
            body{
                font-size: 0.6em;
            }
        }
        @media screen and (max-width: 740px){
            #banner{
                display:none;
            }

/* banner ist hier nicht relevant, gibt es nicht, hier geht es nur um die Syntax  */

            nav {
                width: 100%;
                margin-bottom: 10px;
            }
            nav ul{
                list-style:none;
                margin: 0 auto;
                padding-left: 0px;
            }
            nav ul li{
                font-size: 2.0em;
                text-align: center;
                margin-left: 0;
                width: 100%;
                border-top: 1px solid #878EEE;
                border-right: 0px solid #878EEE;
                border-bottom: 1px solid #878EEE;
                border-left: 0px solid #878EEE;
            }
            nav ul li a {
                padding: 8px 0;
            }
            .bereich-links{
                width: 100%;
            }
            .bereich-rechts{
                width: 100%;
            }
            .bereich{
                float: left;
                margin:0;
                width: 100%;
            }
        }