@charset "UTF-8";
/* CSS Document */


@-webkit-keyframes fading { from { opacity: 0; } to {opacity: 1; } }

@-moz-keyframes fading { from {opacity: 0; } to { opacity: 1; } }

@keyframes fading {from { opacity: 0; } to { opacity: 1; } }

.invisible { opacity: 0; -webkit-animation: fading ease-in 1s;  animation: fading ease-in 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation duration: 1s; animation-duration: 1s; }

.invisible.delay1 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s }

.fixed { 
	position:fixed; 
}

.z-index200 {
  z-index: 200;
}

.z-index1 {
  z-index: 1;
}

.z-index-1 {
  z-index: -1;
}

img {
 max-width: 100%;
 max-height: auto;
}

.hochformat {
 max-width: 70%;
 max-height: 70%;
}


a.black:link { color: #595959; text-decoration: none; cursor: pointer; }
a.black:visited {color: #595959; }
a.black:link:hover { color: #6ce680; }

a.green:link { color: #6ce680; text-decoration: none; cursor: pointer; }
a.green:visited {color: #6ce680; }
a.green:link:hover { color: #6ce680; }

a.gb:link { color: #6ce680; text-decoration: none; cursor: pointer; }
a.gb:visited {color: #6ce680; }
a.gb:link:hover { color: #595959; }


hr.black { height: 2px; width: 200px; background-color: #595959; border: none; }
hr.black-a { height: 2px; background-color: #595959; border: none; }
hr.green { height: 2px ; width: 200px; background-color: #6ce680; border: none; }
hr.dot-black { height: 0px; align="left"; background-color: transparent; border: 1px dotted #595959; }



ul.c { list-style-type: none; margin: 0; padding: 0; width: 200px; }

.logopos  { position: absolute; position: fixed; top: 40px; left: 40px; }
.ulpos { position: absolute;position: fixed; top: 160px; left: 40px; }
.infopos { position: absolute; position: fixed; top: 415px; left: 40px; }
.infotextpos { position: absolute; position: fixed; top: 470px; left: 40px; }
.titlepos { position: absolute; top: 87px; width:50%; float:left; margin: 0 auto; margin-left:30%; padding: 0; padding-bottom: 100px; }
.selectpos  { position: absolute; position: fixed; text-align: left; top: 150px; left: 420px; margin: auto; }

.section1 { position: absolute; top: 86px; width:50%; float:left; margin: 0 auto; margin-left:30%; padding: 0; padding-bottom: 100px; }




.navi { color: #6ce680; font-size: 15px; font-weight: light; font-family: Helvetica, Arial, sans-serif; line-height: 16px; text-decoration: none; background-color: transparent; letter-spacing: 0.1em; word-spacing: 0 em; line-height: 2.0; }

.subtitle { color: #6ce680; font-size: 16px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 16px; text-decoration: none; background-color: transparent; letter-spacing: 0em; word-spacing: 0 em; line-height: 2.0; }

.infotitle { color: #595959; font-size: 13px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 13px; text-decoration: none; background-color: transparent; letter-spacing: 0em; word-spacing: 0 em; line-height: 0.4; text-transform: uppercase; }

.infotext { color: #595959; font-size: 13px; font-weight: lighter; font-family: Helvetica, Arial, sans-serif; line-height: 13px; text-decoration: none; background-color: transparent; letter-spacing: 0em; word-spacing: 0 em; line-height: 1.7; }

.title_blk { color: #595959; font-size: 19px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 16px; text-decoration: none; background-color: transparent; letter-spacing: 0.04em; word-spacing: 0 em; line-height: 1.3; }

.text_blk { color: #595959; font-size: 15px; font-weight: lighter ; font-family: Helvetica, Arial, sans-serif; line-height: 13px; text-decoration: none; background-color: transparent; letter-spacing: 0.04em; word-spacing: 0 em; line-height: 1.4; }

.navi-detail { color: #595959; font-size: 3.3em; font-weight: lighter; font-family: Helvetica, Arial, sans-serif; line-height: 13px; text-decoration: none; background-color: transparent; letter-spacing: 0.04em; word-spacing: 0 em; line-height: 1.4; }




.cw15px_green { color: #6ce680; font-size: 15px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 24px; text-decoration: none; background-color: transparent; letter-spacing: 0.1em; word-spacing: 0 em; text-transform: uppercase; }

.cri_wag24px_blk { color: #595959; font-size: 24px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 20px; text-decoration: none; background-color: transparent; letter-spacing: 0.0em; word-spacing: 0 em; }

.cri_wag24px_green { color: #6ce680; font-size: 24px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 20px; text-decoration: none; background-color: transparent; letter-spacing: 0.0em; word-spacing: 0 em; }

.cw15px { font-size: 15px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 24px; text-decoration: none; background-color: transparent; letter-spacing: 0.1em; word-spacing: 0 em; text-transform: uppercase; }

.cri_wag24px { font-size: 24px; font-weight: bolder; font-family: Helvetica, Arial, sans-serif; line-height: 20px; text-decoration: none; background-color: transparent; letter-spacing: 0.0em; word-spacing: 0 em; }


.image-fader {
  width: 100%;
  height: 100%;
}

.aktuell-img-pos {
  position: absolute;
  top: 0px;
  left: 0px;}

.image-fader img {
  position: relative;
   display: inline-block;
  top: 0px;
  left: 0px;
  animation-name: imagefade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

@keyframes imagefade {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.image-fader img:nth-of-type(1) {
  animation-delay: 6s;
}
.image-fader img:nth-of-type(2) {
  animation-delay: 4s;
}
.image-fader img:nth-of-type(3) {
  animation-delay: 2s;
}
.image-fader img:nth-of-type(4) {
  animation-delay: 0;
}				
	
@keyframes imagefade {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.image-fader img:nth-of-type(1) {
  animation-delay: 6s;
}
.image-fader img:nth-of-type(2) {
  animation-delay: 4s;
}
.image-fader img:nth-of-type(3) {
  animation-delay: 2s;
}
.image-fader img:nth-of-type(4) {
  animation-delay: 0;
}	





.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2);
  cursor: zoom-out
}

.img {
  height: 60%;
  width: 60%;
}







<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://via.placeholder.com/200">
  </label>
</div>