/* Allgemeine Einstellungen */

html{
  overflow: clip !important;
  height: 100vh !important;
  width: 100vw !important;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  overflow: clip;
  height: 100vh;
  width: 100vw;
}

/* Startscreen */
#start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #ffffff;
  overflow: hidden;
}

#start-image {
  width: 100vw;
  height: 100vh;
  cursor: pointer;
}
/* End-Screen */
#end-screen {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Ergebnisbild */
.result-img {
width: 100vw;
height: 100vh;
}


/*Pfeile*/
.end-arrow.boden {
  position: fixed;
  bottom: 2vh;
  width: 8vw;
  left: 10vw;
  animation-name: arrow-boden;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.end-arrow.natur {
  position: fixed;
  bottom: 2vh;
  width: 101px;
  right: 10vw;
  animation-name: arrow-natur;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.end-arrow.technik {
  position: fixed;
  bottom: 2vh;
  width: 101px;
  left: 60vw;
  animation-name: arrow-technik;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.end-arrow.tier {
  position: fixed;
  bottom: 2vh;
  width: 101px;
  left: 30vw;
  animation-name: arrow-tier;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

#start-screen img {
  position: fixed;
}

@keyframes arrow-boden {
  0%   {transform: rotate(30deg) translateY(-100px);}
  50%  {transform: rotate(30deg) translateY(0px);}
  100% {transform: rotate(30deg) translateY(-100px);}
}
@keyframes arrow-natur {
  0%   {transform: rotate(-30deg) translateY(-100px);}
  50%  {transform: rotate(-30deg) translateY(0px);}
  100% {transform: rotate(-30deg) translateY(-100px);}
}
@keyframes arrow-technik {
  0%   {transform: translateY(-80px);}
  50%  {transform: translateY(10px);}
  100% {transform: translateY(-80px);}
}
@keyframes arrow-tier {
  0%   {transform: translateY(-80px);}
  50%  {transform: translateY(10px);}
  100% {transform: translateY(-80px);}
}


/* Endnachricht */
.end-message {
  display: none;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
  overflow: hidden;
}
#end-home-icon {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 2vw;
  width: 30px;
  height: 30px;
}

/* Quiz */
#quiz-container {
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: white;
  font-size: 10vw;
}
#quiz-container::after {
  content: '';
  position: absolute;
  background-image:url(/images/bg.svg);
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  filter: opacity(.4);
  pointer-events: none;
}
.option-div:nth-of-type(1) p{
  padding-top: 10vh;
}.option-div:nth-of-type(2) p{
  padding-bottom: 10vh;
}
.option-text {
  z-index: 2;
}

#oder {
  position: absolute;
  width: 100vw;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.tab-finger {
  position: absolute;
  right: 20vw;
  width: 15vw;
  animation-name: tab-finger;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes tab-finger {
  0%   {top: -3vh;}
  50%  {top: 5vh;}
  100% {top: -3vh;}
}

#progress-container {
  width: 80%;
  margin: 20px auto;
}

#progress-bar {
  width: 100%;
  height: 20px;
}

#question-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.option-div {
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/* Fortschrittsanzeige */
#progress-container {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#progress-bar {
  flex-grow: 1;
  height: 19px;
  background-color: #ffffff8a;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: width 0.5s ease;
  border-color: transparent;
}

#progress-bar::-webkit-progress-bar {
  background-color: #ffffff;
  border-radius: 10px;
  transition: width 0.5s ease;
}

#progress-bar::-webkit-progress-value {
  background-color: #ffffff; /* Standardfarbe */
  border-radius: 10px;
  transition: width 0.5s ease; /* Animation */
}

#progress-bar::-moz-progress-bar {
  background-color: #ffffff;
  transition: width 0.5s ease;
}

/* Home-Icon */
#home-icon {
  width: 30px;
  height: 30px;
  margin-left: 75px;
  cursor: pointer;
}



/*START ANIMATIONEN*/

.zapfhahn {
  position: absolute;
  right: 0;
  top: 6.5vh;
  width: 23vw;
  z-index:2;
  pointer-events: none;
}
.becher_kuh {
  position: absolute;
  top: 34vh;
  right: 1vw;
  width: 37vw;
  pointer-events: none;
  transform: rotate(0deg);
  transform-origin: bottom;
  animation-name: becher-kuh;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 1.6s;
}

.becher_boden {
  position: absolute;
  top: 39vh;
  width: 52vw;
  left: 14vw;
  transform: rotate(0deg);
  transform-origin: bottom right;
  animation-name: becher-boden;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 1.4s;
  pointer-events: none;
}
.becher_natur {
  position: absolute;
  top: 35vh;
  width: 48vw;
  left: 35vw;
  transform: rotate(0deg);
  transform-origin: bottom;
  animation-name: becher-natur;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 1.6s;
  pointer-events: none;
  z-index: 2;
}
.becher_technik {
  position: absolute;
  top: 37vh;
  right: -14.5vw;
  width: 47vw;
  transform-origin: bottom;
  animation-name: becher-natur;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 1.8s;
  pointer-events: none;
}
.tab-finger-start {
  position: absolute;
  bottom: 7.5vh;
  right: 34vw;
  width: 18vw;
  pointer-events: none;
  animation-name: tab-finger-start;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-delay: 1.8s;
  pointer-events: none;
}
.coin1 {
  position: absolute;
  top: 16.5vh;
  left: 6.5vw;
  width: 18vw;
  animation-name: coin;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  pointer-events: none;
}
.coin2 {
  position: absolute;
  top: 18vh;
  left: 16vw;
  width: 18vw;
  animation-name: coin;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
.coin3 {
  position: absolute;
  top: 19vh;
  left: 25.5vw;
  width: 18vw;
  animation-name: coin;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-delay: 1.4s;
  pointer-events: none;
}

#logo img {
  position: absolute;
  bottom: 2vh;
  right: 5vw;
  width: 17vw;
}

@keyframes coin{
  0%   {transform: rotateY(0deg);}
  20%  {transform: rotateY(360deg);}
  100% {transform: rotateY(360deg);}
}

@keyframes becher-boden{
  0%   {transform: rotate(0deg);}
  10%   {transform: rotate(-5deg);}
  20%  {transform: rotate(10deg);}
  40% {transform: rotate(0deg);}
  50% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
@keyframes becher-natur{
  0%   {transform: rotate(0deg);}
  10%   {transform: rotate(-5deg);}
  20%  {transform: rotate(10deg);}
  40% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
@keyframes becher-kuh{
  0%   {transform: rotate(0deg);}
  10%   {transform: rotate(-2deg);}
  20%  {transform: rotate(7deg);}
  40% {transform: rotate(0deg);}
  50% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
@keyframes becher-technik{
  0%   {transform: rotate(0deg);}
  10%   {transform: rotate(-10deg);}
  20%  {transform: rotate(15deg);}
  40% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
@keyframes tab-finger-start{
  0%   {bottom: 7.5vh; right: 32vw;}
  25%    {bottom: 10.5vh; right: 36vw;}
  50%   {bottom: 7.5vh; right: 32vw;}
  75%    {bottom: 10.5vh; right: 36vw;}
  100%  {bottom: 7.5vh; right: 32vw;}
}

/* Fullscreen-Button */
#fullscreen-button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 20px;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10;
  background: #a58c7d5e;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}


/* Deaktiviert Scrollen */
body {
  overflow: hidden;
}

#fullscreen-button{
  visibility: hidden !important;
  display: none;
}