body {
margin: 0px;
padding: 0px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-weight: normal;
color: #505050;
font-weight:normal;
background-color:#f3f4e6;
}

* {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
}

/* 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:#e5e7cb;
        width: 100%;
         float: left;
         position: fixed;
         border-bottom: 1px solid #505050;
}

#bereichlogo {
        color: #505050;
        background-color: #e5e7cb;
         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:#e5e7cb;
}

.menue-button {
        display: none;
}

#steuerung {
        float: right;
}

#steuerung a:hover {
        color: black;
        background: orange;
}

/* 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: #e5e7cb;
                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 */
#content {
        padding: 0.5em;
        float: center;
        width: 90%;
         margin: 0px auto;
}

p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color:#505050;
margin: 0 20px 0px 20px;
font-size: 14px;
line-height: 140%;
font-weight:normal;
}

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

h3 {
font-family: 'Didact Gothic', sans-serif;
color:#505050;
margin: 0 20px 0px 20px;
font-size: 1.0em;
line-height: 140%;
font-weight:normal;
}

h1 {
font-family: 'Didact Gothic', sans-serif;
font-size: 2.0em;
color: #505050;
margin: 0 20px 0 20px;
font-weight:normal;
}

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

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