body {
margin: 0px auto;
padding: 0px;
color: #505050;
font-weight:normal;
background-color:#f2f2f2;
}

* {
        margin: 0;
        padding: 0;

}
/* didact-gothic-regular - latin */
@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/didact-gothic-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/didact-gothic-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/didact-gothic-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/didact-gothic-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/didact-gothic-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/didact-gothic-v19-latin-regular.svg#DidactGothic') format('svg'); /* Legacy iOS */
}

/* shippori-mincho-regular - latin */
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/shippori-mincho-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/shippori-mincho-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/shippori-mincho-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/shippori-mincho-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/shippori-mincho-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/shippori-mincho-v14-latin-regular.svg#ShipporiMincho') format('svg'); /* Legacy iOS */
}
header {

        background-color:#f2f2f2;
        width: 100%;
         float: left;
         position: fixed;
         border-bottom: 1px solid #333792;
}

#bereichlogo {
        color: #505050;
        background-color: #f2f2f2;
         display: block;
        padding: 0.5em;
        text-decoration: none;
        float: left;
}

#bereichlogo {
        width: auto;
}

#steuerung li {
        list-style: none;
        float: left;
}

#steuerung a {
        display: block;
        height: 100%;
        width: 100%;
        padding: 0.5em;
        text-decoration: none;
        color: #000000;
        background-color:#f2f2f2;
}

.menue-button {
        display: none;
}

#steuerung {
        float: right;
}

#steuerung a:hover {
        color: #ffffff;
        background-color:#333792;
}

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*        Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:600px) {
        .menue-button {
                display: block;
        }

        .menue-button {
                background-color: #f2f2f2;
                display: block;
                position: absolute;
                right: 0;
                top: 0;
                padding: 0.5em;
                color: #000000;
                cursor: pointer;
                text-decoration: none;
        }

        #bereichlogo {
                width: 100%;
        }

        #steuerung {
                float: left;
                width: 100%;
                display: none;
        }

        #steuerung li {
                width: 100%;
                border-bottom: 2px solid silver;
        }

        .menue-button:hover {
                color: black;
                background: orange;
        }
}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
        display: block;
}

/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
        display: none ;
}

/* Allgemein Anweisungen */
 section {
        background: #ffffff;
        padding: 0.5em;

        width: 90%;

}

alles {
        margin: 0 auto;
        width: 90%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        font-size:1.2em;
        background-color: #ffffff;
}

links,
mitte,
rechts {
       padding: 10px;
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;

}


article,
aside,
footer {

         padding: 10px;
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
}

header {
        background: #F1F3F4;
        border-color: #d5d5d5;
}

nav {
        background: #fffbf0;
        border-color: #e7c157;
}

section {
        background: #F1F3F4;
        border-color: slateblue;

}

article {
        background: #f2f2f2;

        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
}

aside {
        background: #f2f2f2;

        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
}

links {
        background: #ffffff;

        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
}

mitte {
        background: #ffffff;

        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
}

rechts {
        background: #ffffff;

        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
}



p {
color:#505050;
margin: 0 20px 0px 20px;
font-size: 0.8em;
line-height: 140%;
font-weight:normal;
}

h2 {
font-family: 'Didact Gothic';
font-style: normal;
color:#505050;
margin: 0 20px 0px 20px;
font-size: 1.2em;
line-height: 140%;
font-weight:normal;
}

h3 {
color:#505050;
margin: 0 20px 0px 20px;
font-size: 0.8em;
line-height: 140%;
font-weight:normal;
}

h1 {
color:#1a1a1a;
font-size: 1.0em;
color: #1a1a1a;
margin: 20px 20px 10px 30px;
padding: 0px 0 0 0;
font-weight:normal;
}

#ul{
width: 100%;
border-bottom: 1px solid #333792;
}

#main {
background-color:#e5e7cb;
margin: 10px 0px 0px 0px;
padding: 5px 5px 0 10px;
line-height: 140%;
width: 90%;
}

#fett{
width: 80%;
height: 30px;
margin: 10px 0 0 0;
background: #333792;
}

#fett2{
width: 80%;
height: 50px;
margin: 10px 0 0 0;
background: #333792;
}

h4 {
color:#ffffff;
font-size: 1.5em;
margin: 0px 20px 10px 20px;
padding: 0px 0 10px 0;
font-weight:normal;
}

h5 {
color:#333792;
font-size: 2.0em;
margin: 0px 20px 10px 20px;
padding: 0px 0 10px 0;
font-weight:normal;
}

a{
color:#505050;
margin: 0 20px 0px 20px;
font-size: 1.0em;
line-height: 140%;
font-weight:normal;
}

a:hover {
color: #333792;
text-decoration: underline;