* {
         box-sizing: border-box;
         }
         html {background-color: wheat;}

         body {width: 100%;
               margin: 0 auto;
               background-color: white;}

         .row::after {
         content: "";
         clear: both;
         display: table;
         }
         [class*="col-"] {
         float: left;
         padding: 15px;
        }

        .row img {
        max-width: 100%;
        height: auto;
        margin-top: 0.2em;
        margin-bottom: 2em;
        border-radius: 10px;
         }

         html {
         font-family: "Lucida Sans", sans-serif;
         }

         .header {
         color: #ffffff;
         Xpadding: 15px;
         background-color: #80a7c4 ;
         xbackground-size: 100% 139px;
         Xmargin: 0px auto;
         Xheight: 139px;
         }

         .menu {
         display: inline-block;
         }

         .menu ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         }
         .menu li {
         padding: 8px;  text-decoration: none;
         margin-bottom: 7px;
         background-color: lightsteelblue;
         color: black;
         box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
         width: 100%;
         }
         .menu li:hover {
         background-color: lavender;
         }

         .menu a {text-decoration: none; display: block; width: 100%; height: 100%; color: black;}
         .menu a:hover{color: darkblue;}

         .aside {
         background-color: #33b5e5;
         padding: 15px;
         color: #ffffff;
         text-align: center;
         font-size: 14px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
         }
         .footer {
         background-color: lightsteelblue;
         Xcolor: Darkblue
         text-align: center;
         font-size: 1em;
         line-height: 2em;
         padding: 15px;
         }

         .footer a {text-decoration: none; width: 100%; height: 100%; color:black;}
         .footer a:hover{color: darkblue; background-color: lavender;}

.verweis:link,
.verweis:visited {
        width: 10em;
        float: right;
        margin: 0.6em 1em 1em 0;
        padding: 1.0em;
        text-decoration: none;
        color: black;
        Background-color: lightsteelblue;
        text-align: center;
}

.verweis:hover {
        color: black;
        background-color: lavender;
}

.tverweis:link,
.tverweis:visited {
        text-decoration: none;
        color: black;
        Background-color: lightsteelblue;
        text-align: center;
}

.tverweis:hover {
        color: black;
        background-color: lavender;
}



/* zum Einbinden von Youtube-Videos
   <iframe> mit  <div class="responsive-video">  </div> umschließen */

.responsive-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

.responsive-video {
        position: relative;
        padding-bottom: 56.25%;
        /* Default for 1600x900 videos 16:9 ratio*/
        padding-top: 0px;
        height: 0;
        overflow: hidden;
}


/* zum Einbinden von Youtube-Videos
   <iframe> mit  <div class="responsive-video">  </div> umschließen */

 /* For mobile phones: */
[class*="col-"] {
  width: 100%;
}


@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

         @media only screen and (min-width: 1200px) {
         /* For desktop: */
         body{width:1200px; margin: 0 auto; background-color: #FEFEFE;}
         .header{width:1200px; margin: 0 auto;}
         .col-1 {width: 8.33%;}
         .col-2 {width: 16.66%;}
         .col-3 {width: 25%;}
         .col-4 {width: 33.33%;}
         .col-5 {width: 41.66%;}
         .col-6 {width: 50%;}
         .col-7 {width: 58.33%;}
         .col-8 {width: 66.66%;}
         .col-9 {width: 75%;}
         .col-10 {width: 83.33%;}
         .col-11 {width: 91.66%;}
         .col-12 {width: 100%;}
         }