
<!--
 @viewport {

width: device-width;

zoom: 1;

}

 * {
         box-sizing: border-box;
        font-family:arial,helvetica;}
        
.med-body {
         min-height: 100vh;
         margin: 0;
         padding: 0;
}

#wrapper {
    width: 68rem;
    margin: 0 auto;
}

/* Grid-Layout */

.grid-container {
         display:grid;
         grid-gap:0;
         margin-top:40px;
         background-color: #ffffff;
         max-width:1100px;
         font-family:arial,helvetica;
         font-weight:bold;
}
.grid-container-weiss {
         display:grid;
         grid-gap:0;
         margin:0;
         background-color: #ffffff;
         max-width: 1100px;
         font-family:arial,helvetica;
}

.grid-item {
         text-align:left;
         padding:10px 0 0 10px;
}

.item1 {
         max-width:1050px;
         grid-column:1/span3;
         grid-row:1;
         background-image:url(../bilder/mum_logo_weiss_1100.gif);
         background-color:#A9A9A9;
         height:80px;
         color:#1668b1;
         font-family:arial,helvetica;
         font-weight:bold;
         font-size:1.00em;
}

.item2 {
         grid-column:1;
         grid-row:4;
         padding:1.5em;
         border-right:1px solid #aaa;
}

.item3 {
         grid-column:1;
         grid-row:3;
         background-color:#ffffff;
         margin-left:15px;
         margin-top:10px;
}

.item4 {
         grid-column:2/span3;
         grid-row:3;
         background-color:#ffffff;
         margin-left:30px;
}

.item5  {
         margin-top:45px;
         grid-column:1;
         grid-row:4;
         background-color:#ffffff;
         padding:1.5em;
         border-right:1px solid #aaa;
         max-height:auto;
         font-weight:bold;
}

.item6 {
         margin-top:20px;
         grid-column:2;
         grid-row:4;
         background-color:#ffffff;
         padding:20px 20px 20px 20px;
         margin:20px 20px 0 40px;
         text-align:left;
}

.item7 {
         background-color:#ffffff;
         color:#1668b1;
         max-width:100%;
         font-family:arial,helvetica;
         font-size:0.9em;
         font-weight:bold;
        margin-top: 10px;
         padding-left:0px;
         margin-left:30px;
         text-align: center;
         border-top:1px solid #aaa;
}

.item8 {
         margin-top:20px;
         grid-column:2;
         grid-row:4;
         background-color:#ffffff;
         font-family:arial,helvetica;
         font-size:0.7em;
         padding:20px 20px 20px 20px;
         margin:20px 20px 0 40px;
         border-top:1px solid #aaa;
}
/* Bildershow Startseite */

#stapel {
         height: 400px;
         width: 760px;
         margin: 2em auto 0;
         float:left;
}

#stapel img {
         position: absolute;
         height: 400px;
         max-width: 760px;
         opacity: 0;
}

#stapel img:nth-of-type(1) {
         animation: fade 30s ease-in-out infinite;
}

#stapel img:nth-of-type(2) {
         animation: fade 30s 6s ease-in-out infinite;
}

#stapel img:nth-of-type(3) {
         animation: fade 30s 12s ease-in-out infinite;
}

#stapel img:nth-of-type(4) {
         animation: fade 30s 18s ease-in-out infinite;
}

#stapel img:nth-of-type(5) {
         animation: fade 30s 24s ease-in-out infinite;
}

@keyframes fade {
         6.66%, 20%          {opacity:1;}
         0%, 26.66%, 100% {opacity:0;}
}


/* Foto-Layout */

.titel {
        margin-top:32px;
        margin-left:5px;
        max-width:100%;
        height:auto;
}

.fotos {
        border:0;
        margin:15px;
        max-width:100%;
        height:auto;
}

.fotos_klein {
        border:0;
        margin:15px;
        max-width:40%;
        height:auto;
}

.tumbs {
        border:0;
        max-width:100%;
        height:auto;
}

.control {
        width: 60px;
        height: 50px;
}

.fotos_rechts {
        border:0;
        margin-left:25px;
        max-width:100%;
        height:auto;
        float:right;
}
/*einschwebende Bildunterschriften*/

figure,
figcaption {
        margin: 0;
        padding: 0;
}

figure.einzel {
        overflow: hidden;
        position: relative;
        text-align: center;
}

figure.einzel img {
        border:10px;
        margin:5px 0 10px 20px;
        max-width:500px;
        height:auto;
        display: block;
}

figcaption.einzel {
        position: absolute;
        bottom: -3.0em;
        max-width:500px;
        left: 20px;
        text-align: center;
        font-size:0.60em;
        line-height: 2em;
        white-space: nowrap;
        color: #fff;
        background: rgba(0, 0, 0, 0);
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
}

figure.einzel:focus figcaption,
figure.einzel:hover figcaption {
         bottom: 10px;
         width:100%;
         background: rgba(0, 0, 0, 0.2);
}

/* Text- und Link-Layout */

.desc {
    padding: 15px;
    text-align: center;
}

.desc2 {
    padding: 15px;
    text-align: center;
    color:#1668b1;
}

nav ul li {
         list-style-type: none;
         text-align: left;
         padding: 0;
         margin: 0;
         font-size:1.0em;
         float:left;
}

nav a {
    color:#1668b1;
         text-decoration: none;
}

nav a:hover {
    color:#ffffff;
         background-color: #5A707E;
         text-decoration: none
}

nav a[aria-current=page]{
 background: #aaa;
}

a.mittelblau_rechts:link, a.mittelblau_rechts:visited {
         line-height:42px;
         padding: 5px;
         color:#1668b1;
         font-size:0.9em;
         line-height:40px;
         float:right;
         }

a.mittelblau_rechts:hover {
         color:#ffffff;
         background-color: #5A707E;
         text-decoration: none;
         font-size:0.9em;
         line-height:40px;
         float:right;
         }
a.mittelblau:link, a.mittelblau:visited {
         line-height:42px;
         padding: 5px;
         color:#1668b1;
         font-size:0.9em;
         line-height:20px;
         text-decoration:none;
         }
a.mittelblau:hover {
         color:#ffffff;
         background-color: #5A707E;
         text-decoration: none;
         font-size:0.9em;
         line-height:20px;
         text-decoration:none;
         }

a.mittelblauklein:link, a.mittelblauklein:visited {
         color:#5A707E;
         font-family:arial,helvetica;
         font-size:0.65em;
         font-weight:bold;
         }
a.mittelblauklein:hover {
         color:#ffffff;
         background-color: #5A707E;
         text-decoration: none;
         font-family:arial,helvetica;
         font-size:0.65em;
         font-weight:bold;
         }

.schwarzfett { font-family:verdana,arial,helvetica;
               font-size:0.8em;
         }

.schwarzfliess { color:#6e6e6e;
                 font-family:verdana,arial,helvetica;
                  font-size:1.1em;
                  font-weight:normal;
                  }

.schwarzfliessklein { color:#6e6e6e;
                 font-family:verdana,arial,helvetica;
                  font-size:0.8em;
                  font-weight:normal;
                  }

.schwarzfett_unter { font-family:verdana,arial,helvetica;
               font-size:0.8em;
               border-bottom:1px solid #aaa;
               margin-bottom:20px;
         }

.schwarzfetteinleit {
         font-family:verdana,arial,helvetica;
         font-size:0.9em;
         font-weight:bold;
         }

.schwarznormal {
         text-align:justify;
         font-family:verdana,arial,helvetica;
         font-size:0.8em;
         font-weight:normal;
         }

.uber {
         color:#1668b1;
         font-family:arial,helvetica;
         font-size:0.9em;
         font-weight:bold;
         }

.tiefer {
         font-family:verdana,arial,helvetica;
         font-size:0.9em;
         line-height:120px;
         }
.tief {
         font-family:verdana,arial,helvetica;
         font-size:1.0em;
         line-height:0px;
         }

.weiss { color:#6e6e6e;
         font-size:1em;
         padding-right:1.5em;
         padding-left:0.6em; }

hr { color:#ffffff; }
h4       { color: #1668b1;
           font-size:1.5em;
           margin-top:40px; }
h3       { color: #1668b1;
           font-size:1.0em;
                  }

.abstand { margin-top:60px;
           margin-bottom:60px; }

 .Auswahl
   { width:120px; }


hr.weiss {
 border: none;
 color: #ffffff;
 height: 1px;
 width: 100%;
}

hr.mittelblau {
 border: none;
 color: #1668b1;
 height: 1px;
 width: 100%;
}

/* responsive */

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
    .figure img  {
        max-width:200px;
        height:auto;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


@media only screen and (max-width: 800px) {

        figure.einzel {
                width: 70%;
        }
}

@media only screen and (max-width: 600px) {
        figure.einzel {
                width: 100%;
        }
}
/*slider */
 .sliderElements,
.sliderElements figure,
.sliderControls {
    margin: 0;
}

figure.slider {
    list-style: none;
    position: relative;
    left: 0;
    width: 100%;
    margin-bottom: .8em;
    padding: 0;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}

.sliderElements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}

.cssSlider {
    overflow-x: hidden;
    width: auto;
}

.sliderElements {
    list-style: none;
    position: relative;
    left: 0;
    width: 1000%;
    margin-top: 1.8em;
    margin-bottom: .8em;
    padding: 0;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}

.sliderElements > li {
    float: left;
    width: 10%;
    position: relative;
}

#slide02:checked ~ .sliderElements {
    left: -100%;
}

#slide03:checked ~ .sliderElements {
    left: -200%;
}

#slide04:checked ~ .sliderElements {
    left: -300%;
}

#slide05:checked ~ .sliderElements {
    left: -400%;
}

#slide06:checked ~ .sliderElements {
    left: -500%;
}

#slide07:checked ~ .sliderElements {
    left: -600%;
}

#slide08:checked ~ .sliderElements {
    left: -700%;
}

#slide09:checked ~ .sliderElements {
    left: -800%;
}

#slide10:checked ~ .sliderElements {
    left: -900%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption.position{
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 1em;
    padding: .3em;
    background: rgba(0,0,0,0.4);
}
.slider {display: block;
         color: #fff;
         position: absolute;
         left: 0;
         bottom: 1em;
         padding: .3em;
         background: rgba(0,0,0,0);
}

/* Bilder responsive */
.sliderElements img {
    width: 100%;
    height: auto;
}


/* inputs aus dem Blickfeld schieben */
.cssSlider input {
    position: absolute;
    left: -999999px;
}

/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
    text-align: center;
}

/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
    padding: 1.3rem;
}

/* Controls auf einheitliche Ma�e bringen und die Ecken abrunden */
.sliderControls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #68B022;
    color: #68B022;
}

/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"],
#slide05:checked ~ .sliderControls label[for="slide05"],
#slide06:checked ~ .sliderControls label[for="slide06"],
#slide07:checked ~ .sliderControls label[for="slide07"],
#slide08:checked ~ .sliderControls label[for="slide08"],
#slide09:checked ~ .sliderControls label[for="slide09"],
#slide10:checked ~ .sliderControls label[for="slide10"] {
    background: #ddd;
    color: #ddd;
}
-->