/* Grundlage: index_LI.css */
* { margin:0; padding:0; border:0; }
* { -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;}
body {font-size:0.9em;line-height: 1.5em;font-family:'Open Sans',sans-serif;}
#container {margin:1em auto;text-align:center;max-width:920px;height:auto;}
h1 {padding:0.5em;font-size:1.15em;font-family:'Dosis',sans-serif;}
.h1klein {font-size:1em;font-family:'Dosis',sans-serif;}
/*-------- Flex-Container - Navigationsleiste --------*/
.flex-container{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
ul.flex-container {list-style-type:none;padding:0.5em 0em;}
 /*Padding der UL  Oben/unten wirkt, links/rechts wirkt nicht*/
ul.flex-container li {margin:0.7em 0.5em;}
 /*Margin links/rechts oben/unten*/
ul.flex-container li a {padding:0.5em 1em; font-size: 1.25em;}
ul.flex-container li .aktiv {text-decoration:underline;font-weight:bold;}
/*-------- Hyperlink --------*/
a:link, a:visited, a:active {text-decoration: none; color: rgb(200,200,200);}
a:hover {text-decoration: none; color: rgb(153,153,255);}
a, a:link, a:visited {outline:none;}
/*-------- Inhalt als DIV's --------*/
.inhalt{text-align: center;max-width:100%;}
.bilder {max-width:100%;padding-top:0.5em;padding-bottom:0.5em;}
.text {font-size: 1em;}
span {font-size: 0.9em;padding:0 1em;}
.text img {border-width: 0; vertical-align: middle;}
/*-------- DIV footer --------*/
.footer {text-align:center;}
.fixed {position:fixed;right:0.25em;bottom:0.25em;width:auto;}
/* ---------- Bilder ---------- */
/*img {max-width: 100%; height: auto; border: 0.5em ridge #808080;}    */
img {
max-width: 100%; height: auto; max-height: 95vh;
vertical-align:bottom;   /* Beseitigt Spalt unter Grafik !!! */
border: 0.25em ridge #808080;
}
/* ---------- VIDEO ---------- */

/* ---------- Farben und Border ---------- */
* {color: rgb(204,204,204);background:rgb(51,51,51);}
h1, .h1klein, .inhalt {background:rgb(68,68,68);}
.flex-container, .footer {background:rgb(85,85,85);} /*Rot*/
ul.flex-container li a {background:rgb(85,85,85);} /*Blau*/
ul.flex-container li .aktiv {color:rgb(228,228,228);}
.fixed {background:transparent;}
.fixed img {border-width:0px;}
h1, .flex-container, .inhalt, .bilder {border: solid 1px rgb(127,127,127);}
.inhalt .bilder, .footer, .flex-container {border-top-width: 0px;}
.inhalt {border-bottom-width:0px;}
/* --------------- MEDIA SCREEN --------------- */
      @media screen and (min-width: 768px) {
* {color: rgb(204,204,204);background:rgb(100,100,100);}
body {font-size: 1.2em; line-height: 1.25em; }
img { border: 0.5em ridge #808080;}
      }