* {box-sizing:border-box}

    body {  font-family: "times new roman";color: #00e800; background: #000000;
      background-image:url(./pics/back.jpg); background-repeat:repeat-y;}
    p    {margin:0px; line-height:1.3em }
    *.kursiv {color:#00e860; font-style:italic}

    h1   { font-family: "Comic Sans MS","times new roman";font-size: 2em; text-align: left; color: #20f020;margin-bottom:1em; font-weight:bold}
    h2   { font-family: "Comic Sans MS","times new roman";font-size: 1.7em; text-align: center; color: #20f020; font-weight:bold;}
    h3   { font-family: "Comic Sans MS","times new roman";font-size: 1.2emt; text-align: left; color: #00e800;}
    h4   { font-weight: 800; color: #00FFFF; line-height:100%}
    a:link    { font-weight:bold; color:#40ff00; }
    a:visited { font-weight:bold; color:#88ff00; }
    a:hover   { font-weight:bold; text-decoration:none; }
    a:active  { text-decoration:none; color:#00e800}
    a:focus   { text-decoration:none;}

    span.no   { display:none}
    a.nursp   { display:none}

    body.story {background-color:#101010; background-image:none;color:#00ff00}
    p.story    {font-size: 1em; text-indent:1em;text-align:justify}
    table {border-collapse:collapse;border: none; margin:0 }
    td {width:70%; padding: 0.3em 1.5em; vertical-align: top}
    td.rahmen {border-right: groove 5px #ff0000; padding-left:1em; width:30%}

    div.flex, div.flex2 {display:flex;flex-wrap: wrap;}
    div.men {color:#000000;max-width:400px;position:relative;padding: 1em; }

    a.menbig2:link, a.menbig2:visited {background:url(./pics/hinterhe.jpg) no-repeat center center;
      text-align:center; font:2em bold; color:#000000; text-decoration:none; }
    a.menbig2:hover  {background:url(./pics/hinterdu.jpg) no-repeat center center  }
    a.menbig2:active, a.focus {background:url(./pics/hinterdu.jpg) no-repeat center center  }

    a.menbig3:link, a.menbig3:visited {background:url(./pics/hinterhe.jpg) no-repeat center center;
      text-align:center; font:1.5em bold; color:#000000; text-decoration:none; }
    a.menbig3:hover  {background:url(./pics/hinterdu.jpg) no-repeat center center  }
    a.menbig3:active, a.focus {background:url(./pics/hinterdu.jpg) no-repeat center center  }

    a.mensmal2:link, a.mensmal2:visited {background:url(./pics/hinterhe.jpg) no-repeat center center;
      text-align:center; font:1.2em bold; color:#000000; text-decoration:none;  vertical-align:middle}
    a.mensmal2:hover  {background:url(./pics/hinterdu.jpg) no-repeat center center  }
    a.mensmal2:active, a.focus {background:url(./pics/hinterhe.jpg) no-repeat center center  }

    .men a::before, .men a::after {content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
    .men a::before {border: thin solid rgba(0,0,0,0.1); background: inherit; z-index: -1; background-clip: padding-box; }

      div.uberschrift {max-width: 1024px;display: flex; align-items: center;justify-content: center;flex-wrap: wrap;}
        img.bildub {width: 60%;float:left; max-width: 450px}
        img.bildub2 {width: 40%;float:left; max-width: 450px}

      div.rahmen {max-width: 1024px;background-color:#101010; padding:2em 2em 2em 2em; border: groove 0.5em #008000;margin:0}

        dl.bild {float:right; width: 20%; min-width: 3cm; margin:0.5em 0em 1em 2em;text-align:right}
        dl.bild2 {float:right; width: 35%; min-width: 3cm; margin:0.5em 0em 1em 2em;text-align:right;}
        dl.bildl {float:left; width: 20%; min-width: 3cm; margin:0em 2em 1em 0em}
        dl.bildl2 {float:left; width: 35%; min-width: 3cm; margin:0em 2em 1em 0em}
        img.lesepr {border: solid 2px #00e800;width:100%;}

        dt {display:inline;}
        dd {font-size: 0.8em;color: #00e860;text-align:center; margin-left:0;text-indent:0px }

      div.rechts {min-width: 8cm;float:right;width: 30%;background-color:#404040;color:#38E880; border: groove 8px #00e800;padding: 1em; margin: 3em 1em 1em}
      div.links {float:left;width: 50%;padding: 1em; margin: 3em 1em 1em}
      div.galerie {display:inline-block;}
      img.galerie {margin: 0; width:50%; border: groove 4px #606060}
      img.galerie3 {margin: 0; width:33%; border: groove 4px #606060}
      div.spalte2 {width:50%}
      div.bild215em {text-align:center; width:100%; display:inline-flex; }
      img.bild215em {border: solid 2px #00e800; width:50%}

    div.endmenue {max-width: 700px; display: flex; align-items: center;justify-content: space-around;
       flex-wrap: wrap;}


      a.but3:link, a.but3:visited {background:url(./pics/but3.gif) no-repeat center;border-width:0px;padding: 25px 40px;margin: 0 5px;
      text-align:center; font-size:14pt;font-weight:bold; color:#000000; text-decoration:none;line-height:90px;
      background-size: contain }
      a.but3:hover {color:#990000;  }

      a.but0:link, a.but0:visited {background:url(./pics/but0.gif) no-repeat center;border-width:0px; padding: 25px;
      text-align:center; font-size:14pt;font-weight:bold; color:#000000; text-decoration:none;line-height:90px;
      background-size: contain  }
      a.but0:hover {color:#990000;}

@media  (max-width: 15cm) {
      div.flex2 {display:block;}
      td {width:70%; padding: 0.3em 0.5em; vertical-align: top}
      td.rahmen {border-right: groove 5px #ff0000; padding-left:0.2em; width:30%}
      div.bild215em {text-align:center; width:100%; display:block; }


@media  (max-width: 15cm) {
      h1   { font-size: 1.5em; margin-bottom:1em; font-weight:bold}
      a.nurpc   { display:none}
      a.nursp   { display:initial}
      div.endmenue {}
      a.but3:link, a.but3:visited {padding: 15px 32px; font-size:9pt;line-height:55px;}
      a.but0:link, a.but0:visited {padding: 15px;font-size:9pt;line-height:55px;  }

      div.men {max-width:200px;position:relative;padding: 0.5em; }
      div.uberschrift {}
      div.rahmen {padding:1em;}
      div.rechts {min-width:0;width:100%;float: none; margin:0 0 1em 0}
      div.links {width:100%;margin:0; float:none}
      div.spalte2 {width:100%;margin:0;display:block}
      img.bild215em {width: 100%}
      img.bildub2 {width: 60%}

      dl.bild, dl.bildl, dl.bild2, dl.bildl2 {text-align:center; width:100%;margin: 1em 0px}
      img.lesepr {width:80%); text-align:center}
      a.menbig2:link {font-size: 1.2em;}
      a.menbig3:link {font-size: 1.0em;}
      a.mensmal2:link {font-size: 0.8em; font-weight:normal}

}