body {
                                display: -webkit-flex;
                                display: flex;
                                -webkit-flex-flow: row wrap;
                                flex-flow: row wrap;
                                background-color: #f5f5f5;
                                background-image: url(bilder/bgrnd.jpg);
                                background-size: 100%;
                        }
                        /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
                        header, nav, nav a, nav span, article, section, aside, footer {
                                /*border-radius: 0.3em 0.3em 0.3em;*/
                                /*border: 1px solid;*/
                                padding: 5px;
                                margin: 5px;;
                                -webkit-flex: 1 100%;
                                flex: 1 100%;
                        }

                        img, video {
                                /*border-radius: 0.3em 0.3em 0.3em;;*/
                                border: 1px solid;
                                margin-right: 5px;
                                margin-left: 5px;
                                margin-top: 5px;
                                margin-bottom: 5px;
                                -webkit-flex: 1 97%;
                                flex: 1 97%;
                                max-width: 97%;
                        }

                        video {
                                display: block;
                                margin: 0 auto;
                        }

                        #artikelbild {
                                     display: none;
                        }

                        header {
                                background: none;
                                border: none;
                                display:-webkit-flex;
                                -webkit-flex-flow: row wrap;
                                display: flex;
                                flex-flow: row wrap;

                                padding-left: 0px;
                                padding-right: 0px;
                                margin-left: 0px;
                                margin-right: 2px;
                                margin-top: 0px;
                                padding-top: 0px;
                        }
                        ul {
                                box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.3);
                        }

                        header * {
                                -webkit-flex: 1 1 0%;
                                flex: 1 1 0%;
                        }
                        header img {
                                -webkit-flex: 0 0 150px;
                                flex: 0 0 150px;
                                margin-right: 20px;
                        }
                        header nav {
                                -webkit-flex: 1 1 100%;
                                flex: 1 1 100%;
                                /*position: fixed;*/ /*neu*/
                                /*top: 0;*/          /*neu*/
                        }
                        nav, nav ul, nav li{
                                margin-top: 0;
                                margin-bottom: 0;
                                padding: 0;
                                border: none;
                        }
                        nav ul {
                                /*display: -webkit-flex;*/
                                -webkit-flex-direction: column;
                                /*display: flex;*/
                                flex-direction: column;
                                background-color: #e1dccb; /*neu*/
                        }
                        nav li {

                                list-style-type: none;
                                /*margin: 13px 0;*/
                                -webkit-flex: 1 1 100%;
                                flex: 1 1 100%;
                        }
                        nav a, nav span {
                                display: inline-block;
                                width: 98%;
                                margin: 0;
                                text-decoration: none;
                                text-align: center;
                                box-shadow: 0px 15px 20px #f6e7d5 inset;
                                font-weight: bold;
                        }
                        nav a {
                                color: #5a421e;
                                background: #d3bfa6;
                                border: none;
                                transition: background-color .25s ease-in;

                        }
                        nav a:hover{
                                background-color: #a68f6e;
                                color: #452f1a;
                                border: none;
                        }

                        nav span {
                                background-color: #faf2e7;
                                color: #5b431f;
                                border: none;
                                box-shadow: 0px 15px 20px rgba(211, 191, 166, 0.64) inset
                        }
                        section {
                                background: #F1F3F4;
                                border-color: slateblue;
                        }
                        article {
                                /*background: #ffffcd;*/
                                border-color: #d1c1b2;
                        }
                        aside {
                                /*background: #efffe7;*/
                                /*border-color: #d1d0e5;*/
                        }
                        footer {
                                background: rgba(92, 68, 31, 0.2);
                                border-color: #cccccc;
                                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{
                         border-color: #b19173;
                        }

                                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;
                                        -webkit-order: 4;
                                        flex: 1 auto;
                                        order: 4;
                                }
                                footer {
                                        -webkit-order: 5;
                                        order: 5;
                                }
                        /* Smart Phones und Tablets mit mittlerer Auflösung */
                        @media all and (min-width: 600px) {

                               header nav {
                                position: fixed; /*neu*/
                                top: 0px;        /*neu*/
                                left: 0px;       /*neu*/
                                width: 98%;      /*neu*/
                                max-width: 70em; /*neu*/
                                z-index: 9999;   /*neu*/
                                }
                                header img {
                                        margin-right: 5px;
                                }

                                #logo {
                                       margin-top:40px;
                                }

                                nav ul {
                                        display: -webkit-flex;
                                        display: flex;
                                        -webkit-flex-direction: row;
                                        flex-direction: row;
                                }
                                nav li {
                                        margin: 0 1px;
                                        -webkit-flex: 1 1 0%;
                                        flex: 1 1 0%;
                                }
                                article {
                                        webkit-order: 2;
                                        order: 2;
                                        /*margin-top:30px;*/
                                }
                                #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;
                                        -webkit-order: 4;
                                        flex: 1 auto;
                                        order: 4;
                                }
                                footer {
                                        -webkit-order: 5;
                                        order: 5;
                                }
                        }
                        /* Large screens */
                        @media all and (min-width: 800px) {
                                article {
                                        /* Der Article wird 2.5x so breit wie die beiden asides! */
                                        -webkit-flex: 4 1 0%;
                                        -webkit-order: 3;
                                        order: 3;
                                        flex: 4 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: auto;*/
                                        text-align: -webkit-center;
                                        /*height: 120px;*/
                                }

                                header nav {
                                       position: relative; /*neu*/
                                }

                                #logo {
                                       margin-top:5px;
                                }

                                #artikelbild {
                                              display: block;
                                }

                        }

                        @media all and (min-width: 1600px) {
                               header nav {
                                      position: relative;
                                      margin-top: 30px;
                                      margin-bottom: 30px;
                                      }

                               #logo {
                                     margin-top:40px;
                                     }


                        }