@font-face {
          font-family: lato;
          src: url('../font/Lato-Regular.woff2');
          font-display: swap;
          font-style: normal;
          font-weight: 400;
  }

@font-face {
          font-family: lato;
          src: url('../font/Lato-Italic.woff2');
          font-display: swap;
          font-style: italic;
          font-weight: 400;
  }

@font-face {
          font-family: roboto;
          src: url('../font/Roboto-Regular.woff2');
          font-display: swap;
          font-style: normal;
          font-weight: 400;
  }

@font-face {
          font-family: roboto;
          src: url('../font/Roboto-Bold.woff2');
          font-display: swap;
          font-style: normal;
          font-weight: 700;
  }

body     {
         background-color: #f2f2f2;
         margin: 7px 10px 7px 10px;
         font-family: 'Roboto', sans-serif;
         font-size: 100.01%;
         }

.gesamt  {
         max-width: 1000px;
         box-shadow: 0px 0px 5px 5px #cccccc;
         border-radius: 6px 6px 6px 6px;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 10px;
         margin-top: 10px;
         padding: 0px 0px 0px 0px;
         background-color: #eeeeee;
         font-family: 'Roboto', sans-serif;
         text-align: center;
         }

.content {
         padding: 10px;
         }

.header {
         position: relative;
         height: 100px;
         margin: 0px 0px 20px 0px;
         padding: 14px 0px 0px 0px;
         background-color: #eeeeee;
         font-family: 'Roboto', sans-serif;
         font-style: normal;
         text-align: left;
         line-height: 1.0;
         border-bottom: 2px solid #aaaaaa;
         border-radius: 6px 6px 6px 6px;
         }

.navi    {
         position: absolute;
         right: 0px;
         bottom: 0px;
         margin: 0px 0px 0px 0px;
         padding: 0px;
         height: auto;
         max-width: 50%;
         background-color: transparent;
         text-align: right;
         }

.bilddiv {
         vertical-align: bottom;
         height: auto;
         display: flow-root;
         margin: 0px 0px 6px 0px;
         padding: 20px 10px 40px 10px;
         background-color: #eeeeee;
         border-bottom: 0px solid #ffffff;
         border-radius: 6px 6px 6px 6px;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.4;
         text-align: left;
         color: #111;
         z-index: 2;
         }

.textob   {
         vertical-align: top;
         height: auto;
         margin: 0px 0px 6px 0px;
         padding: 10px 10px 12px 10px;
         background-color: #eeeeee;
         border-bottom: 0px solid #ffffff;
         border-radius: 6px 6px 6px 6px;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.4;
         text-align: left;
         color: #111;
         z-index: 2;
         }

.textgrid2  {
         display: grid;
         grid-template-columns: 100%;
         grid-row-gap: 20px;
         grid-column-gap: 20px;
         vertical-align: top;
         min-height: 250px;
         margin: 0px;
         padding: 20px 10px 35px 10px;
         background-color: #eeeeee;
         border-radius: 6px 6px 6px 6px;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.4;
         text-align: left;
         color: #111;
         z-index: 2;
         }

.textgrid2b  {
         display: grid;
         grid-template-columns: 100%;
         grid-row-gap: 0px;
         grid-column-gap: 0px;
         vertical-align: top;
         min-height: 250px;
         margin: 0px;
         padding:15px 10px 15px 10px;
         background-color: #eeeeee;
         border-radius: 6px 6px 6px 6px;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.4;
         text-align: left;
         color: #111;
         z-index: 2;
         }

.bild2li   {
         vertical-align: top;
         min-height: 250px;
         margin: 0px 3px 0px 0px;
         padding:5px 0px 5px 0px;
         background-color: #eeeeee;
         border-radius: 6px 6px 6px 6px;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.4;
         text-align: left;
         color: #111;
         z-index: 2;
         }

.bild2re   {
         vertical-align: top;
         min-height: 250px;
         margin: 0px 0px 0px 3px;
         padding:5px 0px 5px 0px;
         background-color: #eeeeee;
         border-radius: 6px 6px 6px 6px;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.4;
         text-align: left;
         color: #111;
         z-index: 2;
         }

p        {
         margin: 6px 0px 11px 0px;
         }

b, strong  {
         font-weight: 700;
         }

u        {
         text-decoration-color: #005279;
         text-decoration-style: single;
         }

small    {
         font-size: 80%;
         }

h1       {
         font-family: 'Roboto', sans-serif;
         font-size: 26px;
         color: #333;
         font-weight: 400;
         text-align: left;
         line-height: 1.0;
         padding: 0px;
         margin: 0px 0px 10px 0px;
         }

h2       {
         font-family: 'Roboto', sans-serif;
         font-style: normal;
         font-size: 21px;
         font-weight: 400;
         line-height: 1.0;
         color: #333;
         letter-spacing: 0.3px;
         padding: 0px;
         margin: 18px 0px 12px 0px;
         border-bottom: 0px solid #5bc;
         }

h3       {
         font-family: 'Roboto', sans-serif;
         font-style: normal;
         font-size: 19px;
         font-weight: 400;
         line-height: 1.3;
         color: #333;
         padding: 0px;
         margin: 10px 0px 5px 0px;
         }

h4       {
         font-family: 'Roboto', sans-serif;
         font-style: normal;
         font-size: 15px;
         font-weight: 700;
         line-height: 1.3;
         color: #333;
         padding: 0px;
         margin: 0px 0px 10px 0px;
         }

.header a {
         text-decoration: none;
         }

.text a,
.textob a,
.text2li a,
.text2re a {
         color: inherit;
         font-family: 'Roboto';
         font-weight: 400;
         font-size: 15px;
         color: #777777;
         text-decoration: underline;
         padding: 0px 2px 0px 2px;
         transition: all ease 0.6s;
         }

.text a:hover,
.textob a:hover,
.text2li a:hover,
.text2re a:hover {
         font-family: 'Roboto';
         font-weight: 400;
         font-size: 15px;
         color: #eeeeee;
         background-color: #cccccc;
         text-decoration: none;
         padding: 0px 2px 0px 2px;
         }

.navi ul {
         margin: 0;
         padding: 0 2px 0 0;
         }

.navi li {
        display: inline-block;
        list-style-type: none;
        position: relative;
        margin: 0;
        }

.navi li a {
        display: block;
        list-style-type: none;
        padding: 4px;
        margin: 0;
        color: #aaaaaa;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        }

.navi a:hover,
.navi a:focus {
        color: #222;
        font-weight: 400;
        text-decoration: none;
        background-color: #ffffff;
        transition: all ease 0.8s;
        }

code    {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        color: #005279;
        }

blockquote {
         background-color: #fdfdfd;
         border: 1px solid #dddddd;
         margin: 10px 0px 10px 0px;
         padding:7px 12px 7px 12px;
         font-family: 'Lato';
         font-style: italic;
         font-size: 15px;
         line-height: 1.5;
         text-align: left;
         }

ul       {
         display: inline-block;
         margin-block-start: 0em;
         margin-block-end: 0em;
         margin-inline-start: 0px;
         margin-inline-end: 0px;
         padding-inline-start: 5px;
}

li       {}

table    {
         width: 100%;
         margin: 7px 0px 0px 0px;
         background-color: transparent;
         padding-top: 0px;
         border-collapse:seperate;
         border-spacing: 4px;
         }

th       {
         font-family: 'Roboto';
         font-style: normal;
         font-size: 17px;
         font-weight: 700;
         color: #333;
         background-color: transparent;
         text-align: left;
         padding: 4px 9px 4px 0px;
         border-top: 0px solid #fff;
         border-bottom: 1px solid #111;
         }

td       {
         vertical-align: top;
         font-size: 15px;
         line-height: 1.2;
         text-align: left;
         color: #222;
         padding: 1px 3px 1px 3px;
         border-top: 0px solid #eee;
         border-bottom: 0px solid #eee;
         }

img      {
         padding: 0px;
         margin: 0px;
         }

img.border {
         padding: 0px;
         margin: 0px;
         border: 3px solid #fff;
         }

img a  {
         color: inherit;
         text-decoration: none;
         background-color: none;
         padding: 0px;
         }

img a:hover  {
         color: inherit;
         text-decoration: none !important;
         background-color: none !important;
         padding: 0px;
         }

.bild    {
         width: 100%;
         height: auto;
         }

.bild1    {
         width: 100%;
         height: auto;
         box-shadow: 0px 0px 8px 6px #fdfdfd;
         border-radius: 6px 6px 6px 6px;
         }

.bild2   {
         width: 90%;
         height: auto;
         max-height: 350px;
         margin: 0px;
         box-shadow: 0px 0px 8px 4px #fdfdfd;
         border-radius: 4px 4px 4px 4px;
         }

.bild3   {
         width: 90%;
         height: auto;
         margin: 5px 5px 5px 5px;
         box-shadow: 0px 0px 8px 4px #fdfdfd;
         border-radius: 4px 4px 4px 4px;
         }

.bild4   {
         width: 200px;
         height: 200px;
         margin: 5px 5px 5px 5px;
         box-shadow: 0px 0px 8px 6px #fdfdfd;
         border-radius: 6px 6px 6px 6px;
         }

hr       {
         width: 100%;
         border: 0;
         height: 2px;
         margin: 20px auto;
         background: #006289;
         background-image: linear-gradient(to right, #ececec, #bbbbbb, #bbbbbb, #ececec);
         }

#gallery {
        position: relative;
        margin: 0px 0px 0px 0px;
        background: #f9fdff;
        border: 0px solid #f9fdff;
}

#gallery figure {
        position: absolute;
        display: inline-block;
        display: block;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        top: 0;
        left: 0;
        z-index: 1;
        animation: wechseln 15s infinite;
}

#gallery figure:last-of-type {
        position: relative;
}

#gallery > figure figcaption {
        position: absolute;
        right: 3em;
        bottom: 0.5em;
        z-index: 2;
        font-size: 1em;
        font-weight: normal;
        color: #fafafa;
}

@keyframes wechseln {
        0%  {   opacity: 0;   }
        20% {   opacity: 1;   }
        40% {   opacity: 1;   }
        60% {   opacity: 0;   }
        100% {  opacity: 0;   }
}

#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
        opacity: 0;
}

#gallery figure:nth-of-type(3) {
        animation-delay: 10s;
        opacity: 0;
}


.galerie {
        box-sizing: border-box;
        background-color: #fdfdfd;
        padding: 30px 0 40px 0;
}
/* weitere Muster mit linear-gradient unter: http://lea.verou.me/css3patterns/   */

.galerie figure {
        background: #FFF;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        display: inline-block;
        height: 225px;
        margin: 0 0 20px 30px;
        overflow: hidden;
        padding: 0;
        width: 225px;
        -webkit-transition: all 0.25s ease-in;
        /* für Safari 5.1, Android 2.3 bis 4.3 */

        transition: all 0.25s ease-in;
}

.galerie figure img {
        width: 225px;
        height: 225px;
}

.galerie figure:hover {
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.8);
        margin: -15px 0px 0 20px;
        padding: 5px 5px 30px 5px;
        width: 225px;
        z-index: 2;
        -webkit-transform: scale(1.5);
        /* für Safari, Android */

        -ms-transform: scale(1.5);
        /* für IE9 */

        transform: scale(1.5);
}

.galerie figcaption {
        color: #333;
        position: relative;
        text-align: center;
        width: 225px;
}

.galerie figure:nth-child(2n):hover {
        -webkit-transform: scale(1.5) rotate(-2.0deg);
        /* für Safari, Android */

        -ms-transform: scale(1.5) rotate(-2.0deg);
        /* für IE9 */

        transform: scale(1.5) rotate(-2.0deg);
}

.galerie figure:nth-child(2n-1):hover {
        -webkit-transform: scale(1.5) rotate(1.5deg);
        -ms-transform: scale(1.5) rotate(1.5deg);
        transform: scale(1.5) rotate(1.5deg);
}

.galerie:after {
        clear: both;
        content: " ";
        display: block;
}

.navi02 ul {
         margin: 0;
         padding: 0px;
         }

.navi02 li {
        list-style-type: none;
        position: relative;
        margin: 0;
        }

.navi02 li a {
        list-style-type: none;
        padding: 2px 0px;
        margin: 0;
        color: #ffffff;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        }

.navi02 a:hover,
.navi02 a:focus {
        color: #222;
        font-weight: 400;
        text-decoration: none;
        background-color: #ffffff;
        transition: all ease 0.8s;
        }


@media all and (min-width: 40em) {
.content {
         padding: 20px 50px 20px 50px;
         }

.textgrid2  {
         display: grid;
         grid-template-columns: 50% 50%;
         grid-row-gap: 0px;
         grid-column-gap: 0px;
         }

.textgrid2b  {
         display: grid;
         grid-template-columns: 60% 40%;
         grid-row-gap: 0px;
         grid-column-gap: 0px;
         }
         }