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

* {
        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:#880000;
}

/* 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;
        }
}

@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 {
         margin: auto;
        background: #eeeeee;
        padding: 0.5em;
         width: 100%;
}




h1 {
font-family: 'Didact Gothic';
font-style: normal;
color:#800000;
font-size: 2.0em;
margin: 20px 20px 10px 20px;
padding: 0px 0 0 0;
font-weight:normal;
}


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

h3 {
font-family: 'Didact Gothic';
font-style: normal;
color:#1a1a1a;
margin: 0 20px 0px 20px;
font-size:1.0em;
line-height: 140%;
font-weight:normal;
}

footer {
margin: auto;
background: #18181d;
width: 100%;
}



a{
color:#4d4d4d;
margin: 0 20px 0px 20px;
font-size: 1.0em;
line-height: 140%;
font-weight:normal;
text-decoration: none;
}

a:hover {
color: #1a1a1a;
text-decoration: none;
}