* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --background-color: #ffffff;
  --text-color: #003344;
  --grid-line: #00000011;
}

body {
  font-family: "ManifontGrotesk";
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.05;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
body {
  background-image: none;
  background-size: 100% 100%;
}



.Titel_1,
.Titel_2,
.Titel_3,
.Titel_4 {
  overflow: hidden;
  color: #ffffff;
  position: fixed;
  top: 0;
  max-height: 1em;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 100;
}

.Titel_1,
.Titel_3 {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.Titel_1 {
  left: 0;
  background-color: #98974e;
  max-width: 20em;
  z-index: 2;
}

.Titel_3 {
  background-color: #ec5d3a;
  color: #ffffff;
  margin-left: 0.4em; /* Abstand zu Text_2_1 */
  max-width: calc(100% - 20em); 
  cursor: pointer; 
  transition: background-color 0.3s;
  z-index: 1;
}

.Titel_3:hover {
  color: #ffffff;
  background-color: #8183ff;
}

.Titel_2,
.Titel_4 {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.Titel_2 {
  right: 0;
  z-index: 101;
  justify-content: flex-end;
  color: #ffffff;
  background-color: #ec5d3a;
  max-width: calc(100% - 10em); 
  margin-right: 3.1em;

}

.Titel_4 {
  color: #ffffff;
  background-color: #98974e;
  cursor: pointer;
  transition: background-color 0.3s;
  /* Platzierung in der oberen rechten Ecke */
  top: 0;
  right: 0;
}

.Titel_4:hover {
  color: #ffffff;
  background-color: #8183ff;
}




/*.Text_1,
.Text_1_1,
.Text_2,
.Text_2_1 {
  color: #ffffff;
  position: fixed;
  top: 0;
  max-height: 1em;
  overflow: scroll;
  display: flex;
  align-items: center;
  z-index: 100;
}

.Text_1 {
  right: 0;
  justify-content: flex-end;
  background-color: #ec5d3a;
  max-width: calc(100% - 10em); 
  cursor: pointer; 
  transition: background-color 0.3s; }

.Text_1:hover {
  background-color: #4e4f4c; /* Ändern Sie die Hintergrundfarbe nach Ihren Wünschen */
 /* text-decoration: none;
} */

/*
.Text_1_1 {
  right: 0;
  z-index: 101;
  justify-content: flex-end;
  background-color: #98974e;
  max-width: calc(100% - 10em); /* Reduziere die Breite um den Platz von Text_1_1 */
 /* margin-right: 6.9em; /* Abstand zu Text_2_1 */
/*}


/*

.Text_2 {
  background-color: #ec5d3a;
  margin-left: 5.05em; /* Abstand zu Text_2_1 */
 /* max-width: calc(100% - 20em); 
  cursor: pointer; 
  transition: background-color 0.3s;


}

/*
.Text_2:hover {
  background-color: #4e4f4c; 
  text-decoration: none; 
}
/*
.Text_2_1 {
  left: 0;
  background-color: #98974e;
  max-width: 20em;
  }
*/


.Text_3,
.Text_4 {
  color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;


  max-height: 1em;
  z-index: 100;
  background-color: #8183ff;
  line-height: 1.3;
}
.Text_3 {
  max-width: 15.15em;
  bottom: 1em;
  display: flex;
  justify-content: center; 
  left: -0; 
  z-index: 3;
}
.Text_4 {
  max-width: 11em;
  bottom: 0; 
  display: flex;
  justify-content: center;
  left: 0;
}


.Text_lang_1,
.Text_lang_2 {
  background-color: #98974e;
  line-height: 1.3;
}

.Text_lang_2 {
  color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 37em;
  max-height: 40em;
  display: flex;
  justify-content: center;
  align-items: flex-end; 
  z-index: 100;
  pointer-events: none;
}
.Text_lang_2 span {
  background-color: #98974e;
}

.Text_lang_2 span mark {
  background-color: transparent;
  color: #a8a8a8;
  font-family: "tgn-soft-round-con", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25pt;
  line-height: 0.7;
  letter-spacing: -0.06em;
  text-align: right;
  margin-left: auto;
}

.Text_lang_1 {
  color: #ffffff;
  background-color: #ec5d3a;
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 37em;
  max-height: 40em;
  display: flex;
  justify-content: flex-end; 
  align-items: flex-end; 
  z-index: 100;
  pointer-events: none;
  text-align: left;
  line-height: 115%;
}



.Text_lang_1 span mark {
  background-color: transparent;
  color: #6c6862;
  font-family: "tgn-soft-round-con", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25pt;
  line-height: 0.7;
  letter-spacing: -0.06em;
  text-align: right;
  margin-left: auto;
}

.container {
  position: fixed;
  top: 0;
  left: 0;

  width: 3000px;
  height: 2400px;
/* 
  width: 400vw;
  height: calc(400vw / 3 * 2.41);
   */

  overflow: hidden;

  background-image: url("Photos/Hintergrund_neu_7.jpg");

  background-size: cover;
  background-position: center center;

  transition: transform 0.25s ease-out;


}

section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* gap: 240px; */
  touch-action: none;
  /*transform: translate(var(--x), var(--y)) scale(2);*/

  /* border: 100px solid red; */
}

.container>section>a {
  /*background-color: rgba(255, 0, 0, 0.5);*/

  position: absolute;
  transform: translate(-50%, -50%);
}

.container>section>a>img {
  width: 100%;
  
  
}

#ameisen-link {
  left: 50%;
  top: 50%;
  width: 12%;
}

#mycel-link {
  left: 80%;
  top: 82%; 
  width: 15%;
}

#farne-link {
  left: 26%;
  top: 80%; 
  width: 10%;
}

#stare-link {
  left: 90%;
  top: 38%; 
  width: 6%;
}

#löwenzahn-link {
  left: 13%;
  top: 42%; 
  width: 11%;
}

#wavicle-link {
  left: 50%;
  top: 14%; 
  width: 13%;
}


h1 {
  margin-left: 0;
  position: fixed;
  text-align: left;
  
  top: 3%;
  left: 1.5%;
 /* transform: translate(-50%, -50%);*/
  z-index: 1;
  pointer-events: none;


  color: #ffffff;
}



/*
p {
  font-family: "ManifontGrotesk";
  font-weight: normal;
  font-style: normal;
  color: white;
  position: fixed;
  top: 10px;
  left: 10px;
  /*transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;

  font-size: 15px;
  line-height: 125%; } */

body.hovered img {
  opacity: 0.05;
  filter: drop-shadow(0 0 16px #ffffff);
}

body.hovered a.hovered.visible img {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 0 16px #ffffff);
}

/*
section a {
  display: block;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

section img {
  max-width: 100%;
  max-height: 560px;
  transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 0 16px #00000000;
}
*/

/*
body.yellow {
  --text-color: #f8d11c;
}

body.green {
  --background-color: #edfff6;
  --text-color: #00f9b5;
}

body.blue {
  --text-color: #2248cd;
}

*/

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



@media (max-width: 768px) {
  .game-start-button {
      display: none; 
  }
  .escape-button {
      display: none; 
  }
  #overthinking-link {
      display: none; 
  }
  .modal {
      display: none; 
  }
  #information {
      display: none;
      font-size: 1.2em; 
      width: 90%; 
  }
  .iphone {
      display: block; 
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10000;
      background-color: #a8a8a8;
      color: #ffffff;
      padding: 8px;
      margin: 0;
      line-height: 1.3;
  }

  .iphone .iphone_1 {
    background-color: #98974e;
  }

  .iphone .iphone_2 {
    background-color: #ec5d3a;
  }

  .logo{
      width: 45vw; 
      top: 1vh;
      left: 1vh;
  }
  #timer {
      position: fixed;
      bottom: 2vh; 
      left: 2vw; 
      font-size: 3vw; 
  }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.2s ease-in-out;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}