@font-face {
  font-family:"ArmandGrotesk";
  src: url("ArmandGrotesk-Regular.woff") format('woff');
}

body {
  margin: 0;
  font-family: 'ArmandGrotesk';
  /* justify-content: center; */
  /*lässt scrollbar verschwinden*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none !important;
}
body,
html {
  min-height: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

.SlideEins {
  /* margin-left: 10%; */
  z-index: 1;
  overflow: hidden;
}
#alles{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3%;
  overflow: hidden;
}
.titel {
  position: relative;
  font-size: 1.2vw;
  color:blue;
  text-align: left;
  top: 6%;
  left: 28%;
  width: 37%;
  background-color:white;
  z-index: 1;
  box-sizing: border-box;
  padding:1%;
  border-style: solid;
  border-color: blue;
}
.überschrift{
  padding-bottom: 10px;
  padding-top: 2%;
  font-size: 2.5em;
  padding-left: 8%;
}
.unterschrift{
  padding-left: 8%;
  padding-bottom: 4%;
}


p{
  margin: 0;
}

#menubox{
  position:relative;
  display: flex;
  flex-direction: column;
  color: blue;
  width: 37%;
  height: 63%;
  /* top:15vw; */
  left:28%;
  overflow: hidden;
  background-color: white;
  border-style: solid;
  border-color: rgb(0, 0, 255);
  border-width: 0.2vw;
  margin-top: 2%;
  padding-bottom: 1%;
}

.textabstand{
  color: blue;
  position: flex;
  padding:3%;
  padding-left: 11%;
  padding-top: 7%;
  font-size: 1.2vw;
  padding-right: 0;
  line-height: 1.2em;
  max-width: 90%;
}

.beschreibung1{
  color: blue;
  position: flex;
  padding:3%;
  padding-left: 11%;
  padding-top: 2%;
  font-size: 1.2vw;
  line-height: 1.2em;
  max-width: 80%;
}

p.beschreibung1 {
  width: 54%;
}
.geste{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.element{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 12%;
}

.scroll{
  padding-top: 1%;
}

.info{
    padding-top: 1%;
    padding-right: 13.5%;
}

.weiter{
    padding-top: 1%;
  }
.beschreibung2{
  color: blue;
  position: flex;
  padding:3%;
  padding-left: 11%;
  padding-top: 2%;
  font-size: 1.2vw;
  line-height: 1.2em;
  max-width: 100%;
}
.ExtensionLink2{
  color: rgb(0, 0, 255);
  width:100%;
}
.kasteninfo{
  font-size: 1.2vw;
  text-align: center;
  padding: 5% 25% 9% 25%;
  border-style: solid;
  border-color: blue;
  border-width: 0.2vw;
}

.kasten{
    font-size: 1.2vw;
    text-align: center;
    padding: 4% 9% 8% 9%;
    border-style: solid;
    border-color: blue;
    border-width: 0.2vw;
  }

img.ScrollenStart{
  position: absolute;
  left:69%;
  width: 7vw;
  z-index: 5;
  margin: 0;
}

img.InfoPoseStart{
  position: absolute;
  left: 24.01vw;
  width: 9vw;
  z-index: 5;
  margin: 0;
}

img.HandlinksStart{
  position:absolute;
  left:25vw;
  bottom: 15%;
  width: 3.4vw;
  z-index: 5;
  margin: 0;
  transform: rotate(90deg);
}
#Start{
  position: absolute;
  display: flex;
  align-items: center;
  padding-left: 1%;
  right:2%;
  top:43vh;
  width: 10%;
  height: 20%;

}
img.HandgifStart{
  position: absolute;
  width: 4vw;
  top: 13%;
  left:20%;
  margin:0;
  transform: rotate(90deg);
  z-index: 2;
}

.mySlides{
  display: none;
  font-size: 2vw;
  box-sizing: content-box;
}
.Frage{
  font-family: 'ArmandGrotesk';
  position: fixed;
  top: 10%;
  color:white;
  background-color: rgb(0, 0, 255);
  z-index: 3;
  text-align: left;
  max-width: 40%;
  display:inline-block;
  left: 28%;
  padding: 1%;
  margin: 1%;
  letter-spacing: 0.02em;
}

.antworten {
  position: absolute;
  top:33%;
  list-style-type: none;
  display: inline-block;
  overflow-y: scroll;
  flex-wrap: wrap;
  font-size: 2vw;
  line-height: 1.2em;
  color: white;
  z-index: 2;
  font-size: 100%;
  text-align: left;
  max-width: 45%;
  left: 28%;
  letter-spacing: 0.02em;
  /* transform: translateX(-50%); */
  padding-left: 2%;
  scrollbar-width: none !important;
}

.slideshow-container {
  height: 100%;
  width: 80%;
  left:10%;
  z-index: 1;
  font-family: 'ArmandGrotesk';
}

ul li {
  padding-bottom: 25px;
}

.prev, .next {
  cursor: pointer;
  position: fixed;
  top: 50%;
  width: auto;
  color: white;
  font-size: 2vw;
  box-sizing: border-box;
  padding: 0.3%;
  border-style: solid;
  border-color: white;
  background-color: rgba(0, 0, 0,0.2);
  user-select: none;
  text-decoration: none;
  border-width: 0.2vw;

}

.prev{
  left:3%;
}

.next {
  position: fixed;
  right: 3%;
  /* background-image:url(hand_rechts_wiggle_300.gif); */
  /* background-repeat:no-repeat;  */
}
.Startlink{
  right: 3%;
  cursor: pointer;
  position: fixed;
  top: 50%;
  width: auto;
  color: white;
  font-size: 2vw;
  box-sizing: border-box;
  padding: 0.3%;
  border-style: solid;
  border-color: white;
  background-color: rgba(0, 0, 0,0.2);
  user-select: none;
  text-decoration: none;
  border-width: 0.2vw;
}
#Weitermenu{
  position: fixed;
  top:45vh;
  width:9%;
  height: 15%;
  right:2%;
  z-index: 2;
}
#Zurückmenu{
  position: fixed;
  top:45vh;
  width:9%;
  height: 15%;
  left:2%;
  z-index: 2;
}

#Handgiflinks{
  position: absolute;
  transform: rotate(90deg);
  top:4%;
  width: 4vw;
  z-index: 2;
  object-fit: scale-down;
}

#Handgifrechts{
  position: absolute;
  transform: rotate(-90deg);
  top:4%;
  left:59%;
  width: 4vw;
  z-index: 2;
  object-fit: scale-down;
}



/* .prev:hover, .next:hover {
  color: white;
} */

/* .transform {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
} */
.ExtensionLink{
  line-height: 1.5em;
  padding-bottom: 10%;
  letter-spacing: 0.02em;
  color: white;
}

.boxbig {
  /* -webkit-transition: all 2s ease; */
  position: absolute;
  align-items: center;
  height: 100%;
  left:20%;
  width: 60%;
  /* background-color: white; */
  z-index: 4;
  display: none;
  overflow-y: auto;
  scrollbar-width: none !important;
}

.boxbig: :-webkit-scrollbar {
  display: none;
}

.textfeld{
  position: absolute;
  font-family: 'ArmandGrotesk';
  font-size: 2vw;
  color: white;
  top:30%;
  left: 10%;
  right: 10%;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing:border-box;
  border-style: solid;
  border-color: rgb(0,0,255);
  padding: 3%;
  border-width: 0.1vw;
}
.absatz1{
  line-height: 1.5em;
  padding-bottom: 10%;
  letter-spacing: 0.02em;
}
mark{
  background-color: blue;
  color:white;
}
.absatz2{
  line-height: 1.4em;
  padding-bottom: 10%;
  padding-top: 10%;
  letter-spacing: 0.01em;
}

.absatz3, .absatz4, .absatz5{
  padding-top: 4%;
  font-size: 1.1vw;
  letter-spacing: 0.01em;
}

.infotitel{
  font-family: 'ArmandGrotesk';
  position: fixed;
  display: none;
  top: 10%;
  color:white;
  background-color: rgb(0, 0, 255);
  z-index: 4;
  font-size:2vw;
  text-align: left;
  left: 50%;
  transform: translateX(-50%);
  width:53%;
  padding: 1%;
  box-sizing: content-box;
  letter-spacing: 0.02em;
}

p{
  margin-top:0px;
  margin-bottom: 0px;
}

.Infogif {
  position: absolute;
  width:10vw;
  top:-25%;
  left:-8.5%;
  z-index: 10;
  object-fit: scale-down;
  cursor: pointer;
}
#Infomenu{
  position: fixed;
  /* top:2vh; */
  bottom: -5vh;
  left:3%;
  width: 20%;
  height: 20%;
  z-index: 10;
}

#open {
  cursor: pointer;
  position: fixed;
  /* top: 8%;
  left: 3%; */
  padding: 0.1%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  color: white;
  font-size: 2vw;
  user-select: none;
  border-style:solid;
  border-color: white;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.2);
  z-index: 5;
  border-width: 0.2vw;
}

 .containerbg{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

::-webkit-scrollbar {
    display: none;
}

#video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  position: fixed;
  border: none;
  width: 102%;
  height: 102%;
  top:-1%;
  left:-1%;
  bottom: 0;
  object-fit: cover;
  z-index: -1;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.color-overlay {
  filter: blur(4px) brightness(90%);
  -webkit-filter: blur(4px) brightness(90%);
  height: 100%;
  width: 105%
}