@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }

html,body {
         /*width: 100%;*/
         height:100%;
         font-size: 12pt;
}
/* Sonstige Eigenschaften*/
figure {
        text-align:center;
}

h4 {
         font-style: italic;
}
img {
         max-width:100%;
         height:auto;
         /*margin: 5px;*/
}
a {
  text-decoration: none;
}
body {
        background: whitesmoke;
        color:#000000;
        font-family:Calibri, Verdana, Geneva, sans-serif;
        font-size: 1.1em;
        line-height: 1.0em;

        /* Wenn die Navigationsleiste fixiert sein soll, dann*/
        padding-top: 3.6em;
}
/* Für das Menü bei kleinen Bildschirmen */
.verstecke{display:none!important}
.zeige{display:block!important}
.float_right{float:right!important}

nav {
         background: #999;
         background: #bdbdbd;
         background: gold;

         color: #a4a4a4;
         margin: 0px;
         padding: 0px;
         font-size:0.9em;
         line-height:3.8em;
         height:4em;

         text-align:center;
         /* Wenn die Navigationsleiste fixiert sein soll, dann die nächsten 3 Zeilen*/
         top:0;
         width: 100%;
         position: fixed;
         /* flex-Verteilung*/
         display:flex;
         -webkit-flex-direction: row;
         flex-direction: row;
         /*align-items: center; */
         z-index: 1;
}

        nav .logo {
                 font-family: Calibri;
                 letter-spacing:0.6em;
                 color:#C40000;
                 font-size: 2.2em;
                 font-style:italic;
                 text-transform: none;
                 font-weight: 900;
                 /*margin-right:1em;
                 margin-top:0;*/
                 text-decoration: none;
                 padding-left:25px;
                 padding-right:25px;
                }

        nav .logo .weissgrau { color:#FAFAFA; }

        nav .logo:hover { color: rgba(192,0,0,0.75); }

        nav a {
               color: #ffffff;
               text-decoration: none;
               /* Animation Farbe und Hintergrundfarbe */
               transition-property: background-color, color;
               transition-duration: 1s, 1s;
               transition-timing-function: linear, ease-in;
               transition-delay: 0s, 1000ms;
               text-transform: uppercase;
               font-weight: 600;
               padding-left:25px;
               padding-right:25px;
        }

        nav a:hover {
                    background-color: #f2f2f2;
        }

/* Dropdown-Menü */
.dropdown {
        position:relative;
        display:inline-block;
        transition-property: background-color, color;
        transition-duration: 1s, 1s;
        transition-timing-function: linear, ease-in;
        transition-delay: 0s, 1000ms;
        /*border-radius: 0px 0.5em 0.5em; */
}

.dropdown_inhalt {
     display: none;
     position: absolute;
     background-color: #1b1b1b;
     background:gold;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     border-radius: 0px 0.5em 0.5em;
     padding: 12px 40px;
     margin-left:0px;
     line-height: 1.6em;
     text-align:left;
     left:0px;
     z-index: 1;
}

.dropdown:hover {
         background-color:#f2f2f2;
 }
.dropdown:hover .dropdown_inhalt {
        display: block;
 }

header {
         background: #bdbdbd;
         background: gold;
         width: 100%;
         margin: 0px;
         overflow: hidden;
}

.banner {
                 position:relative;
                 display:inline-block; ;
         }

.banner .inner {
                 position:absolute;
                 color: white;
                 font-size: 1.0em;
                 font-style:italic;
                 line-height: 1.5em;
                 left:50%;
                 bottom:5%;
                 transform:translate(-50%,0%);
                 -ms-transform:translate(-50%,0%);
}
#schwarz {
         background: #000;
}

#hilfscontainer {
         /* Zu breit verschlechtert die Lesbarkeit */
         max-width: 96em;
         min-height:70%;
         margin:0 auto;
         display: flex;
         flex-direction: row;

}

aside {
        margin-top:10px;
        text-align:center;
        flex:1;
}
aside ul {
         list-style-type: none;
}

aside figure {
         width:80%;
         text-align: center;
}

aside figcaption {
         text-align:left;
         margin-left:10px;
         font-size:10px;
         font-weight:bold;
         line-height:11px;
}

#navi {
         margin:10px auto;
         padding-bottom:20px;
         padding-top:10px;
         text-align:center;
}

main {
         background-color:whitesmoke;
         color: #000000;
         margin: 0 auto;
         flex:5;
}

main h1 {
         font-size: 2.5em;
         line-height: 1.6em;
         color:lightslategray;
         font-style:italic;
         margin-bottom: 10px;
         margin-top: 0px;
         }

article {
        /* border: 1px solid grey;
        border-radius:10px;*/
        font-size:1.1em;
        margin:20px;
        padding-bottom:10px;
        padding-left:20px;
        padding-right:20px;
        padding-top:10px;
        line-height:1.2em;
}

article p {
        line-height:1.6em;
        padding-top:10px;
        padding-bottom:10px;
}
article img {
         max-width:100%;
         height:auto;
         margin: 5px;
}

article figure {
        float: right;
        padding-top:10px;
        padding-bottom:10px;
}

article figcaption {
         text-align:left;
         margin-left:5px;
         font-size:small;
         font-weight:bolder;
}

article table {
         width:100%;
         font-size:1.1em;
         text-align:left;
         /*margin: 1em auto; */
}

article td {
         height:50px;
}
article ul {
         padding-left:40px;
}
footer {
         background: #999;
         background: gold;
         clear:left;
         color:#ffffff;
         font-size:0.7em;
         line-height: 2em;
         font-style:italic;
         font-weight:bolder;
         text-align:center;
         width: 100%;
         height:5em;
}

footer a {
         color: #ffffff;
         text-decoration: none;
         font-style:normal;
         padding-left:5px;
         padding-right:5px;
         padding: 1px 5px;
         /*background:silver;*/
}

footer a:hover {
       background-color: goldenrod;
}

/* Sonstige Eigenschaften*/

#bild1 {
         text-align:center;
         margin: 0.5em auto 0.5em auto;
}
audio,video{display:inline-block}
audio {
         width:360px;
         height:40px;
}
iframe {
         width:854px;
         height:480px;
}
video {
      width:854px;
      height:480px;
      border-style: solid;
      border-color: lightgrey;
      border-width: 2px;
}
/* Zum Schluss für kleinere Bildschirme */
@media screen and (max-width: 1280px) {
           nav .logo {
                 font-size: 2.0em;
           }
           nav,
           nav a {
                 font-size: 0.9em;
                 flex-direction: row;
           }
           main h1 {
                 font-size: 2.4em;
           }
           article {
                 font-size: 1.0em;
           }
         }
@media screen and (max-width: 1024px) {
           nav .logo {
                 font-size: 1.8em;
                 letter-spacing:0.5em;
           }
           nav,
           nav a {
                 font-size: 0.8em;
                 flex-direction: row;
           }
           main h1 {
                 font-size: 2.4em;
           }
           article {
                 font-size: 1.0em;
           }
           iframe {
                 /*width:480px;
                 height:270px;*/
                 width:540px;
                 height:304px;
                 }
           video {
                 width:540px;
                 height:304px;
                 }
         }
@media screen and (max-width: 800px) {
           nav .logo {
                 font-size: 1.5em;
                 letter-spacing:0.5em;
           }
           nav,
           nav a {
                 font-size: 0.8em;
                 flex-direction: row;
           }
           main h1 {
                 font-size: 2.0em;
           }
           article {
                 font-size: 0.9em;
           }
           aside {
                 display: none;
           }
           iframe {
                 /*width:480px;
                 height:270px;*/
                 width:540px;
                 height:304px;
                 }
           video {
                 width:540px;
                 height:304px;
                 }
           audio {
                 width:150px;
                 height:40px;
                 }
         }
@media screen and (max-width: 640px) {
           body { padding-top: 0px; }
           nav .logo {
                 text-align:left;
                 font-size: 1.4em;
                 -webkit-flex-direction: column;
                 flex-direction: column;
           }
           nav,
           nav a {
                 font-size: 0.9em;
                 line-height: 2.0em;
                 text-align:left;
                 flex-direction: column;
           }
           nav {
                 height:12em;
                 position: relative;
                 /*background: silver; */
           }
           .dropdown_inhalt {
                 line-height: 1.4em;
                 top:2.0em;
           }

           .banner .inner {
                   font-size: 0.8em;
           }
           #schwarz {
                   padding-top:1em;
           }
           main h1 {
                 font-size: 1.4em;
           }
           article {
                 font-size: 0.8em;
           }
           article table {
                 font-size:0.9em;
                 /*margin: 0.8em auto;*/
           }
           article ul {
                 padding-left:20px;
           }
           aside {
                 display: none;
           }
           form {
                 font-size:0.7em;
           }
           iframe {
                 width:400px;
                 height:225px;
                 }
           video {
                 width:400px;
                 height:225px;
                 }
           audio {
                 width:260px;
                 height:50px;
                 }
         }
@media all and (max-width: 480px) {
          body { padding-top: 0px; }
          nav .logo {
                 font-size: 1.4em;
                 text-align:left;
                 -webkit-flex-direction: column;
                 flex-direction: column;
           }
           nav,
           nav a {
                 text-align:left;
                 font-size: 0.8em;
                 line-height: 2.0em;
                 -webkit-flex-direction: column;
                 flex-direction: column;
           }
           nav {
                 height:12em;
                 position: relative;
                 /*background: silver; */
           }
           .dropdown_inhalt {
                 line-height: 1.4em;
                 top:2em;
           }
           .banner .inner {
                   font-size: 0.6em;
           }
           #schwarz {
                   padding-top:1em;
           }
           main h1 {
                 font-size: 1.2em;
           }
           article {
                 font-size: 0.8em;
           }
           article table {
                 font-size:0.9em;
                 /*margin: 0.8em auto; */
           }
           article ul {
                 padding-left:20px;
           }
           aside figcaption {
                 font-size: 6px;
                 line-height:8px;
           }
           footer {
                 font-size: 0.6em;
           }
           form {
                 font-size:0.8em;
           }
           aside {
                 display: none;
           }
           iframe {
                 width:260px;
                 height:146px;
                 }
           video {
                 width:260px;
                 height:146px;
                 }
           audio {
                 width:180px;
                 height:50px;
                 }
         }

/* Ende CSS-Datei */