/* Dies sind die CCS Formatierungen für die ABA Seite */

        a:link    { text-decoration: none;font-family: 'Verdana'; font-weight:normal;  font-size: 90%; background-color:#000000;color:white; }
        a:visited { text-decoration:none; font-weight:bold; background-color:#000000;  color:white; }
        a:hover   { text-decoration:none; font-weight:bold; background-color:#000000; color:white; }
        a:active  { text-decoration:none; font-weight:bold; background-color:#000000; color:white;}
        a:focus   { text-decoration:none; font-weight:bold; background-color:#000000; color:white;}




         .fixiert {
               position:fixed;
               left:100px;
               top:0px;
               width:100%
               height:50px;
               z-index:999;
               opacity: 1
            }


    .enlarge:hover{
        transform:scale(2,2);
        transform-origin:0 0 ;
    }

    .grow:hover { transform: scale(2.2); }
    .grow1:hover { transform: scale(4.0); }
    .grow2:hover { transform: scale(1.5); }

      /*Eliminates padding, centers the thumbnail */

        body, html {
            padding: 0;
            margin: 0;
            text-align: center;
        }

        /* Styles the thumbnail */

        a.lightbox img {
            height: 300px;
            border: 3px solid white;
            box-shadow: 0px 0px 8px rgba(0,0,0,.3);
            margin: 20px 20px 20px 20px;
        }


    /* Styles the lightbox, removes it from sight and adds the fade-in transition */

    .lightbox-target {
       position: fixed;
       top: -100%;
       width: 100%;
       background: rgba(0,0,0,.7);
       width: 100%;
       opacity: 0;
       -webkit-transition: opacity .5s ease-in-out;
       -moz-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
       transition: opacity .5s ease-in-out;
       overflow: hidden;
    }

    /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

    .lightbox-target img {
         margin: auto;
         position: absolute;
        top: 0;
        left:0;
        right:0;
        bottom: 0;
        max-height: 0%;
         max-width: 0%;
        border: 3px solid white;
         box-shadow: 0px 0px 8px rgba(0,0,0,.3);
        box-sizing: border-box;
         -webkit-transition: .5s ease-in-out;
       -moz-transition: .5s ease-in-out;
       -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }


    /* Styles the close link, adds the slide down transition */

    a.lightbox-close {
        display: block;
        width:50px;
        height:50px;
        box-sizing: border-box;
        background: white;
        color: black;
        text-decoration: none;
        position: absolute;
        top: -80px;
        right: 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }

    /* Provides part of the "X" to eliminate an image from the close link */

    a.lightbox-close:before {
        content: "";
        display: block;
        height: 30px;
        width: 1px;
        background: black;
        position: absolute;
        left: 26px;
        top:10px;
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg);
    }


    /* Provides part of the "X" to eliminate an image from the close link */

    a.lightbox-close:after {
        content: "";
        display: block;
        height: 30px;
        width: 1px;
        background: black;
        position: absolute;
        left: 26px;
        top:10px;
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }

    /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

    .lightbox-target:target {
        opacity: 1;
        top: 0;
        bottom: 0;
    }

    .lightbox-target:target img {
        max-height: 100%;
        max-width: 100%;
    }

    .lightbox-target:target a.lightbox-close {
        top: 0px;
    }







         #box1 {
              background-color: black;
              width: 90% ;
              height:  100%;
              margin-top: 0% ;
              margin-left: 5%;
              margin-right: 5%;
              border : none;
         }

         table.table1 {
                border: 5px solid #000;
                border-collapse: collapse;
                border-width: thin ;
                font-family:'Futura';
                font-size: 95%;
                font-weight: normal;
                text-align: center;
                color: black;
                padding: 2%;
                        }

         td.td1 {
                margin: auto;
                border: 50px solid #000;
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 110%;
                font-weight:bold;
                text-align: center;
                color: white;
                padding: 2px;
                        }

          table.table2 {
                margin: auto;
                border: 50px solid #000;
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 95%;
                font-weight: normal;
                text-align: left;
                color: white;
                padding: 1px;
                        }


         td.td2 {
                width: 20%;
                margin-bottom: 0px;
                border: 1px solid black;
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 90%;
                font-weight: normal;
                text-align: center;
                vertical-align: middle;
                color: white;
                padding: 5px;
                }


         td.td3 {
                width: 80%;
                margin: auto;
                border: none;/* 1px solid white;    */
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 100%;
                font-weight: normal;
                text-align: left;
                color: white;
                padding: 10px;
                }




         td.td4 {
                width: 20%;
                margin-bottom: 0px;
                border: 1px solid black;
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 150%;
                font-weight: normal;
                text-align: center;
                vertical-align: middle;
                color: white;
                padding: 5px;
                }

            td.td5 {
                width: 80%;
                margin: auto;
                border: none;/* 1px solid white;    */
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 130%;
                font-weight: normal;
                text-align: left;
                color: white;
                padding: 10px;
                }

          tr.tr1 {
                width: 80%;
                margin: auto;
                border: none;/* 1px solid white;    */
                border-collapse: collapse;
                border-width: thin ;
                background-color: black;
                font-family:'Verdana';
                font-size: 100%;
                font-weight: normal;
                text-align: center;
                color: white;
                padding: 100%;
                }

          p.p1 {
            font-family:'Futura-Normal', 'Verdana';
            font-size: 100%;
            color: white;
            text-indent: 5%;
          }
          ul.ul1 {
            font-family:'Futura-Norma','Verdana';
            font-size: 100%;
            color: white;

          }

         li.li1 {
             font-family:'Futura-Norma','Verdana';
            font-size: 100%;
            color: white;
         }

      /* , th, td    */

         h2 {
             font-family: 'Verdana';
             font-size: large;
             color: white;
             background-color: black;
         }

        h2.h2 {
             font-family: 'Verdana';
             font-size: large;
             font-style: italic;
             color: white;
             background-color: black;
         }


         h3 {
             font-family: 'Verdana';
             font-size: large;
             color: red;
             background-color: #000;
           }
         /*   position: absolute;
             bottom: 0;



         div.imageHold {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */

div.imageHold div {
  float: left;
  width: 230px;
  height: 160px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 100px;
}
div.imageHold img {
  width: 230px;  /* wir skalieren das große bild auf die kleine größe */
  height: 160px; /* um verpixelung beim vergößern zu verhindern       */
}
div.imageHold img:hover {
  position: absolute;
  margin-left: 0px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: 0px;  /* hier genau so */
  width: 460px;       /* die weite beim vergrößern */
  height: 320px;      /* die höhe beim vergrößern */
}