body {
  background-color: rgba(29, 29, 28, 1.0);
  width: 100%;
  margin: 0;
  overflow-x: hidden;
}

/*____HEADER___________________________________________________*/

h1 {
  margin-top: 3%;
  margin-bottom: 2%;
  font-size: 3em;
  letter-spacing: 0.5em;
  font-family: Poiret One, Dorsa, sans-serif;
  color: rgba(230, 230, 230, 1.0);
  position: relative;
}

h2 {
  margin-top: 1%;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  font-family: Poiret One, Dorsa, sans-serif;
  color: rgba(210, 210, 210, 1.0);
  position: relative;
  margin-bottom: 2%;
}



.description {
  width: 40vw;
  margin: auto;
  font-size: 1em;
  letter-spacing: 0.1em;
  line-height: 1.3;
  font-family: Assistant, Josefin Sans,Poiret One, Dorsa, sans-serif;
  color: rgba(190, 190, 190, 1.0);
  text-align: justify;
  font-weight: 200;
  margin-bottom: 2%;
  margin-top: 2%;
}

.info{
  margin-bottom: 8%;
}


.button{
  display: none;
  width: 25%;
}





/*______IMG_________________________________________________*/

img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
  margin: 2%;
  opacity: 1.0;
}

.firstpic img{
    max-height: 40vh;
}



.quer {
  width: 20vw;
  height: auto;
}

.hoch {
  height: 33vw;
  width: auto;
}





/*_____Gliederung__________________________________________________*/

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 1 0px;
  /* 
  margin-left: 0vw;
  margin-right: 2vw;
  */
  margin-top: 5%;
  width: 100%;
  position:  relative;
}

.container {
  -ms-flex: 100%;
  flex: 10%;
  max-width: 100%;
  margin-bottom: 7%;
  margin: auto;
  position: relative;
  display: block;
  margin-bottom: 03%;
  border-radius: 14px;

}

.container img{
  border-radius: 20px;
}


/*_______________________________________________________*/

/* Add Animation */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}


/*Zoom In*/
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}

.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Verzögerung */
.fade-in-on-scroll.delay {
  transition-delay: 0.3s;
}

/*_______________________________________________________*/


/*_______________________________________________________*/




/*_______________________________________________________*/



/*_______________________________________________________*/

/*_______________________________________________________*/

@media only screen and (max-width: 700px) {
  #myimage{
    width: 95%;
  }
  .img-magnifier-container {
    position:relative;
    width: 99%;
  }
  .img-magnifier-glass {
    display: none;
  }
  h1 {
    font-size: 1.7em;
    margin-top: 13%;
    margin-bottom: 13%;
  }
  h2 {
    font-size: 1em;
  }
  /*_______________________________________________________*/
  img {
    margin-bottom: 10%;
    margin-top: 10%;
  }
  .description{
    max-width: 95%;
    font-size: 1em;
  }
  .quer {
    max-width: 95%;
    height: auto;
  }
  .quer2 {
    max-width: 95%;
    height: auto;
  }
  .hoch {
    max-width: 90%;
    height: auto;
  }
  img:hover {
    opacity: 1.0;
  }
  /*_______________________________________________________*/
  .container {
    position: relative;
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 5%;
  }
  /*_______________________________________________________
  .phone {
    border-radius: 20px;
    width: 150px;
    height: 300px;
  }
  .phonescreen{
    width: 140px;
    height: 280px;
    margin-top: 5px;
  }
  /*_______________________________________________________*/

  iframe{
    display: none;
  }
  .frame{
    display: none;
  }


  .button{
    display: block;
    border-radius: 100%;
    width: 100%
  }

  .box {
    position: absolute;
  /*  bottom: -100px;
    right: 60px;*/
    width: 170px;
    height: 100px;
    border-radius: 10px;
  /*   background-color: red;
   padding-right: 200px;
    padding-bottom: 200px; */
    transform: translate(61%, -250%);
    font-family:  Assistant, Josefin Sans,  Poiret One,  sans-serif;
    font-weight: bold;
    box-shadow:
      0 0.5px 2.2px   rgba(0, 20, 50, 0.032),
      0 6.1px 5.4px   rgba(0, 20, 50, 0.048),
      0 13.9px 10px   rgba(0, 20, 50, 0.059),
      0 23.6px 17.1px rgba(0, 20, 50, 0.068),
      0 35.9px 29.5px rgba(0, 20, 50, 0.076),
      0 60px 80px     rgba(0, 20, 50, 0.09);

    background: rgb(217,255,216);
    background: linear-gradient(180deg, rgba(176,255,247,1) 0%, rgba(113,255,152,1) 48%, rgba(31,190,144,1) 100%);
  }
  .image{
    width:300px;
  }


  .buttontext{
    font-size: 35px;
    text-align: center;
    transform: translate(0%, 5%);
    color: white;
  }

.box:hover {
    opacity: 0%;
    transition: 2s ease;

}
.button:hover{
    transform: scale(1.3);
    filter: blur(2px);
    transition: 3s;
}
.description{
    margin-bottom: 5%;
}

  /*_______________________________________________________*/

  .qrcode{
    display: none;
  }

  /*_______________________________________________________*/
  .modal-content {
    display: none;
  }
  #caption {
    display: none;
  }
  .modal {
    display: none;
    width: 0%;
    height: 0%;
  }
  .close {
    display: none;
  }
  /*_______________________________________________________*/
  footer {
    display: none;
  }
}

@media only screen and (max-width: 350px) {
  h1 {
    font-size: 1.4em;
  }
}
    /*_
  .phone {
    border-radius: 20px;
    width: 150px;
    height: 300px;
  }
  .phonescreen{
    width: 140px;
    height: 280px;
    margin-top: 5px;
  }
}