body, p a{
        color: white;
        background-image:url(bilder/Bannerkl.jpg);
        background-color: #000000;
        background-repeat:repeat-x;
        font-family: Arial,sans-serif;
        text-decoration: none;
        margin: 0; padding: 0em;
        min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
        max-width: 1100px;
}
html>body h1 {
        /*border-color: gray;  Farbangleichung an den Internet Explorer */
}

#banner1 {
        position:absolute;
        top:0px;
        left:190px;
        right: 50px;
        height:81px;
        min-width: 20em;
        max-width: 910px;
}

#logo {
      position:absolute;
      top:3px; left:38px;
      z-index:3;
      background:transparent;
}
html>body #logo {
      position:fixed;
      top:3px;
      left:38px;
      z-index:3;
      background:transparent;
}
/*********************************************************************************************/
/********************-infobox links-**********************************************************/
/*********************************************************************************************/
#box a {
        text-align:center;
        text-indent:0em; /* Textposition im Textfeld Schalter */
}
#box a:hover {
        color:black;
        background-color:transparent;
        margin-top:0.1em;
        text-indent:0.3em; /* Textposition im Textfeld Schalter bei hover */
        /*margin-left:0.3em;*/
}
#box a span {
        display:none;
}
#box a:hover span {
        position:absolute;
        top:215px;
        left:3em;
        display:block;
        width:11em;
        color:yellow;
        background-color:transparent;
        font:11px Arial, sans-serif;
        text-indent:0em;
        text-align:center;
}
#box2 a:hover {
        color:black;
        background-color:transparent;
        margin-left:0.3em;
}
#box2 a span {
        display:none;
}
#box2 a:hover span {
        position:absolute;
        top:-3em;
        left:1em;
        display:block;
        width:11em;
        color:yellow;
        background-color:transparent;
        font:11px Arial, sans-serif;
        text-indent:0em;
        text-align:center;
}
#box3 a:hover {
        color:black;
        background-color: transparent;
        margin-left:0.3em;
}
#box3 a span {
        display:none;
}
#box3 a:hover span {
        position:absolute;
        top:-7em;
        left:-3em;
        display:block;
        width:11em;
        color:yellow;
        background-color:transparent;
        font:11px Arial, sans-serif;
        text-indent:0em;
        text-align:center;
}
#box4 a {
        text-decoration:none;
}
#box4 a span {       /* Box Hinweis auf moderne Browser */
        display:none;
}

#box4 a:active span,
#box4 a:hover span {

        position:absolute;
        border-width:2px;
        left:180px;
        top:20px;
        display:block;
        color:yellow;
        width:525px;
        background-color:transparent;
        background-image:url(bilder/transback.png);
        background-repeat:repeat;
        font:14px Arial, sans-serif;
        text-align:left;
        text-decoration:none;
        border-style:solid;
        border-color:blue;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        -khtml-border-radius:10px;
        -moz-box-shadow:10px 10px 20px #000;  /* css3 für Firefox */
        -webkit-box-shadow:10px 10px 20px #000;  /* css3 für Safari und Chrome */
        box-shadow:10px 10px 20px #000;        /* css3 für Opera */
        border-radius: 10px;    /* css 3  Attribut*/
        padding:0 0 0px 20px;
}
/*********************************************************************************************/
/********************-Navigationsbereich links-***********************************************/
/*********************************************************************************************/
#fixiert12 {         /*St Josef Seite*/
        position: absolute;
        float:left;
        top: 400px; left: 1em;
        width: 9em;
        /*color: yellow;*/
        background-color: transparent;
        text-align: left;
}
html>body #fixiert12 {  /* nur fuer moderne Browser! */
        position: fixed;
        top: 400px;
}
#fixiert121 {         /*Essen singt*/
        position: absolute;
        float:left;
        top: 450px; left: 3.5em;
        width: 9em;
        /*color: yellow;*/
        background-color:transparent;
        text-align: left;
}
html>body #fixiert121 {  /* nur fuer moderne Browser! */
        position: fixed;
        top: 450px;
}
#fixiert11 {         /*Titel*/
        position: absolute;
        float:left;
        top: 100px; left: 0px;
        width: 170px;
        color:yellow;
        background-color: transparent;
        text-align: center;
}
html>body #fixiert11 {  /* nur fuer moderne Browser! */
        position: fixed;
        top: 100px;
}
#fixiert11 a {
        font-size: 11px;

}
#fixiert11 p {
        font-size: 11px;
        line-height:0px;
}
#fixiert11 a:link{
        color: #FFFF00;
}
#fixiert11 a:visited{
        color: #FFFF00;
}
#fixiert11 a:active{
        color: #FFFF00;
}
#fixiert11 a:hover{
        color: #00E0FF;
}
#fixiert {
        position: absolute;
        float:left;
        top: 135px; left: -22px;
        width: 200px;
        background-color: transparent;
}
html>body #fixiert {  /* nur fuer moderne Browser! */
        position: fixed;
        top: 135px;
        width: 200px;
}
html>body ul#Navigation {   /* nur fuer moderne Browser! */
        background-color:transparent;
        /*-moz-border-radius:7px;*/
        font-size: 0.80em;
        /*float: left;*/ width: 200px;  /* Textfeldbreite Schalter */
        margin: 0 0 0;
        padding: 0;
}
html>body ul#Navigation li {   /* nur fuer moderne Browser! */
        list-style: none;
        margin: 0;
        padding: 0.5px;
}
html>body ul#Navigation a {   /* nur fuer moderne Browser! */
        display: block;
        padding: 0.8em 0em 0em 0em;
        font-weight: bold;
        text-decoration:none; height: 25px;
        font-size: 12px;
}

html>body ul#Navigation a:link {   /* nur fuer moderne Browser! */
        color: #FFDF00;
        background-color: transparent;
        background-image:url(bilder/schalterneut.gif);
        /*background-image:url(bilder/schalterneutgrbl.gif);*/
        background-repeat:no-repeat;
}
html>body ul#Navigation a:visited {   /* nur fuer moderne Browser! */
        color: #FFDF00;
        background-color: transparent;
        background-image:url(bilder/schalterneut.gif);
        /*background-image:url(bilder/schalterneutgrbl.gif);*/
        background-repeat:no-repeat;
}
html>body ul#Navigation a:hover {   /* nur fuer moderne Browser! */
        color: yellow;
        background-color: transparent;
        background-image:url(bilder/schalterhover.gif);
        /*background-image:url(bilder/schalteraktivgrbl.gif);*/
        background-repeat:no-repeat;
        margin-left:0.3em;
}
html>body ul#Navigation a:active {   /* nur fuer moderne Browser! */
        color: yellow;
        background-color: transparent;
        background-image:url(bilder/schalteraktiv.png);
        /*background-image:url(bilder/schaltergedrbl.gif);*/
        background-repeat:no-repeat;
}
html>body ul#Navigation a:focus {   /* nur fuer moderne Browser! */
        color: yellow;
        background-color: transparent;
        background-image:url(bilder/schalteraktiv.png);
        /*background-image:url(bilder/schaltergedrbl.gif);*/
        background-repeat:no-repeat;
}

ul#Navigation {
        background-color:transparent;
        /*-moz-border-radius:7px;*/
        font-size: 0.80em;
        /*float: left;*/ width: 17em;  /* Textfeldbreite Schalter */
        margin: 0 0 1.2em;
        padding: 0;
}
ul#Navigation li {
        list-style: none;
        margin: 0;
        padding: 0.4em;
}
ul#Navigation a {
        display: block;
        padding: 0.2em;
        font-weight: bold;
        text-decoration:none; height: 21px;
        padding-top:8px;
        font-size: 12px;
}
ul#Navigation a:link {
        color: #FFDF00;
        background-color: transparent;
        background-image:url(bilder/schalterneut.gif);
        /*background-image:url(bilder/schalterneutgrbl.jpg);*/
        background-repeat:no-repeat;
}
ul#Navigation a:visited {
        color: #FFDF00;
        background-color: transparent;
        background-image:url(bilder/schalterneut.gif);
        /*background-image:url(bilder/schalterneutgrbl.jpg);*/
        background-repeat:no-repeat;
}
ul#Navigation a:hover {
        color: yellow;
        background-color: transparent;
        background-image:url(bilder/schalterhover.gif);
        /*background-image:url(bilder/schalteraktivgrbl.jpg);*/
        background-repeat:no-repeat;
        padding-left:0.3em;
}
ul#Navigation a:active {
        color: yellow;
        background-color: transparent;
        background-image:url(bilder/schalteraktiv.png);
        /*background-image:url(bilder/schaltergedrbl.jpg);*/
        background-repeat:no-repeat;
}
ul#Navigation a:focus {
        color: yellow;
        background-color: transparent;
        background-image:url(bilder/schalteraktiv.png);
        /*background-image:url(bilder/schaltergedrbl.jpg);*/
        background-repeat:no-repeat;
}

/*********************************************************************************************/
/********************-Inhaltsbeschreibung mitte-**********************************************/
/*********************************************************************************************/
html>body #Inhalt1 {   /* nur fuer moderne Browser! */
        position: absolute;
        background-color: transparent;
        text-decoration:none;
        text-align:center;
        right: 20px;
        top: 50px;
        max-left:450px;
        padding: 0;
        z-index:20;
        width:30%;
}
* html #Inhalt1 {
        background-color: transparent;
        position: absolute;
        text-decoration:none;
        margin:2em;
        padding: 10em 0 0 17em;
        width:200px;
        right:10em;
        z-index:20;
}
html>body #Inhalt {   /* nur fuer moderne Browser! */

        text-decoration:none;
        margin-top:0em;
        padding: 3em 0em 0 12em;
        z-index:18;
}
* html #Inhalt {
       z-index:22;
        position: static;
        text-decoration:none;
        margin-top:0em;
        padding: 10em 0 0 17em;
        width:65%;
        right:100em;

}
/*html>body #Inhalt {
        margin: 0em 0em 1em 13em;
        top:200em;
        margin: 10em 5em;
        width:66% ;
        margin-top:4em;
}*/
/** html #Inhalt {
        height: 1em; *//* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
        /*margin: 0 0.5em 0em 0.5em;
}*/
#Inhalt h2 {
        font-size: 1.0em;
        margin: 0.2em 0;
}
#Inhalt, p a {
        font-size: 16px;
        margin: 1em 0;
}

#Inhalt a:link{
        color: #FFFF00;
}
#Inhalt a:visited{
        color: #FFFF00;
}
#Inhalt a:active{
        color: #FFFF00;
}
#Inhalt a:hover{
        color: #00E0FF;
}

.collage {
    max-width: 850px;
    margin: 15px auto;
    position: relative;
     z-index:1;
-webkit-box-reflect: below 40px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
box-reflect: below 40px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
     }

    .collage a {
        position: absolute;
        max-width: 330px;
        padding: 7px;
        background-color:rgb(255,255,255);
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                   transform:scale(0.6)rotate(-18deg);
            -ms-transform:scale(0.6)rotate(-18deg);
            -moz-transform:scale(0.6)rotate(-18deg);
            -webkit-transform:scale(0.6)rotate(-18deg);
            -o-transform:scale(0.6)rotate(-18deg);
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        transition: all 0.2s linear;

                                /*** Fix für Webkit um das flackern Problem zu lösen
                   Suggested by erikhatfield ***/
                                -webkit-transform-style: preserve-3d;

        -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#33000000,Positive=true)";
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#33000000,Positive=true);
    }

    .collage a:nth-child(2) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
            transform:rotate(7deg);
        -ms-transform:rotate(7deg);
        -moz-transform:rotate(7deg);
        -webkit-transform:rotate(7deg);
        -o-transform:rotate(7deg);
                transform:scale(0.7)rotate(7deg);
            -ms-transform:scale(0.7)rotate(7deg);
            -moz-transform:scale(0.7)rotate(7deg);
            -webkit-transform:scale(0.7)rotate(7deg);
            -o-transform:scale(0.7)rotate(7deg);
        margin-top: -30px;
        margin-left: 35%;
    }

    .collage a:nth-child(3) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.7)rotate(-15deg);
            -ms-transform:scale(0.7)rotate(-15deg);
            -moz-transform:scale(0.7)rotate(-15deg);
            -webkit-transform:scale(0.7)rotate(-15deg);
            -o-transform:scale(0.7)rotate(-15deg);
        margin-left: 60%;
    }

    .collage a:nth-child(4) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.5)rotate(-10deg);
            -ms-transform:scale(0.5)rotate(-10deg);
            -moz-transform:scale(0.5)rotate(-10deg);
            -webkit-transform:scale(0.5)rotate(-10deg);
            -o-transform:scale(0.5)rotate(-10deg);
        margin-top: 60px;
        margin-left: -2%;
    }

    .collage a:nth-child(5) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.6)rotate(25deg);
            -ms-transform:scale(0.6)rotate(25deg);
            -moz-transform:scale(0.6))rotate(25deg);
            -webkit-transform:scale(0.6)rotate(25deg);
            -o-transform:scale(0.6)rotate(25deg);
        margin-left: 18%;
        margin-top: -5px;
    }

    .collage a:nth-child(6) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                 transform:scale(0.7)rotate(18deg);
            -ms-transform:scale(0.7)rotate(18deg);
            -moz-transform:scale(0.7))rotate(18deg);
            -webkit-transform:scale(0.7)rotate(18deg);
            -o-transform:scale(0.7)rotate(18deg);
        margin-left: 65%;
        margin-top: 160px;
    }
     .collage a:nth-child(7) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.7)rotate(27deg);
            -ms-transform:scale(0.7)rotate(27deg);
            -moz-transform:scale(0.7))rotate(27deg);
            -webkit-transform:scale(0.7)rotate(27deg);
            -o-transform:scale(0.7)rotate(27deg);
        margin-left: 3%;
        margin-top: 330px;
    }
     .collage a:nth-child(8) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.7)rotate(-5deg);
            -ms-transform:scale(0.7)rotate(-5deg);
            -moz-transform:scale(0.7)rotate(-5deg));
            -webkit-transform:scale(0.7)rotate(-5deg);
            -o-transform:scale(0.7rotate(-5deg));
        margin-left: 25%;
        margin-top: 390px;
    }
     .collage a:nth-child(9) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                 transform:scale(0.7)rotate(-9deg);
            -ms-transform:scale(0.7)rotate(-9deg);
            -moz-transform:scale(0.7)rotate(-9deg);
            -webkit-transform:scale(0.7)rotate(-9deg);
            -o-transform:scale(0.7)rotate(-9deg);
        margin-left: 62%;
        margin-top: 320px;
    }
     .collage a:nth-child(10) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.7)rotate(5deg);
            -ms-transform:scale(0.7)rotate(5deg);
            -moz-transform:scale(0.7)rotate(5deg);
            -webkit-transform:scale(0.7)rotate(5deg);
            -o-transform:scale(0.7);
        margin-left: 45%;
        margin-top: 390px;
    }

     /*** Gruppenbild in der Mitte ***/
    .collage a:nth-child(11) {
         -webkit-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         -moz-box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
         box-shadow: 18px 18px 21px -14px rgba(0,0,0,1);
                transform:scale(0.7)rotate(-4deg);
            -ms-transform:scale(0.7)rotate(-4deg);
            -moz-transform:scale(0.7))rotate(-4deg);
            -webkit-transform:scale(0.7)rotate(-4deg);
            -o-transform:scale(0.7)rotate(-4deg);
        margin-left: 10%;
        margin-top: 65px;
        max-width: 700px
    }
     /*** Graufilter für die Mitte abschalten ***/
     .collage a:nth-child(11) img {
             filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
            -webkit-filter: grayscale(0%);

    }
        .collage a img {
            max-width: 100%;
            max-height: 100%;

<!--             filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 -->
            filter: url(farblos.svg#greyscale);
            filter: gray;
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -webkit-filter: grayscale(1);
        }

        .collage a:hover {
            z-index: 60;
                transform:rotate(0deg);
            -ms-transform:rotate(0deg);
            -moz-transform:rotate(0deg);
            -webkit-transform:rotate(0deg);
            -o-transform:rotate(0deg);
                 transform:scale(1.0);
            -ms-transform:scale(1.0);
            -moz-transform:scale(1.0));
            -webkit-transform:scale(1.0);
            -o-transform:scale(1.0);

            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            transition: all 0.5s linear;
        }

        .collage a:hover > img {

<!--            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
 -->
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            filter: grayscale(0%);
            -webkit-filter: grayscale(0);
            filter: none;
        }
 #reflection {
 position:absolute;z-index:-1;
 opacity:.2;
 left:192px;
 top:705px;
 width:900px;
 height:650px;
 overflow:hidden;
 background:
 -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255,255,255,0.2) 100%),
 -moz-element(#collage) no-repeat;
 -moz-transform: scale(1,-1);


 }

/*********************************************************************************************/
/********************-Fusszeile-**************************************************************/
/*********************************************************************************************/
p#Fusszeile1 {
        clear: left;
        font-size: 0.9em;
        margin: 0;
        padding: 0.1em;
        /*align:center;*/
        color: black;
        background-color: transparent;
}
html>body #Fusszeile1 {  /* nur fuer moderne Browser! */
        left:100px;
}
#Fusszeile {
        position:absolute;
        /*text-align: center;*/
        background-image:url(bilder/Bannerswkl.gif);
        background-repeat:repeat-x;
        height:24px;
        left:190px;
        right:20px;
        min-width: 20em;
        max-width: 910px;
        z-index:1;
        }
#Fusszeile a:link{
        color: #FFFF00;
}
#Fusszeile a:visited{
        color: #FFFF00;
}
#Fusszeile a:active{
        color: #FFFF00;
}
#Fusszeile a:hover{
        margin-top:0.1em; color: #00E0FF;
}