html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Verhindert Scrollen */
  touch-action: pan-x pan-y;
}

.main-container{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Inhalt nach oben ausrichten */
  align-items: center; /* Horizontal zentrieren */
  height: 100vh;

}


.progress-container {
display: flex;

  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-top: 1vh;
  margin-left: 1vh;
  margin-right: 1vh;
  width: 98vw;
  background-color: #D9D9D9;
  border-radius: 4vh;
  height: 10vh;
}


.progress-text-container {
  display: flex;
  white-space: nowrap;
  width: 100%;
  height: clamp(3em, 10vw, 6em);
  overflow: hidden;
  color: black; /* Textfarbe */
  font-weight: bold; /* Optional: Fettgedruckter Text */
  pointer-events: none; /* Verhindert, dass der Text anklickbar ist */
  font-family: "Inter", sans-serif; /* Schriftart */
}

.progress-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4vh;
  font-weight: 700;
  z-index: 1;
  text-align: center;
  animation: marquee 7s infinite linear;
  padding: 0 4.25em;
  animation: loopText 10s infinite linear;  
}

@keyframes loopText {

  from {
      transform: translateX(0);
   }

  to {
      transform: translateX(-100%);
   }

}


.content-container {
  display: flex;
  flex-direction: column; /* Ordnet die Kinder-Elemente vertikal an */
  justify-content: flex-start; /* Richtet die Inhalte am oberen Rand aus */
  align-items: center; /* Zentriert die Inhalte horizontal */
  width: 100%;
  height: 60vh; /* Abstand zum unteren Rand */
  padding-top: 7vh; /* Optional: Abstand vom oberen Rand */
}

h1 {
  text-align: center;
  font-weight: bold; 
  font-family: "Inter", sans-serif; 
  font-size: clamp(3vh, 5vh, 5.5vh);
  text-decoration: underline;
  margin: 0px;
  margin-bottom: 2vh;
}



p {
  display: inline-block; 
  font-family: "Inter", sans-serif; 
  margin: 0px;
}

.description {
  font-size: 2.5vh; /* Schriftgröße */
  margin-bottom: 5vh; /* Abstand zum nächsten Element */
  text-align: center; /* Zentriert den Text */
  width: 90vw;
}

.informationen {
  font-size: 2vh; /* Schriftgröße */
  margin-bottom: 5vh; /* Abstand zum nächsten Element */
  text-align: center; /* Zentriert den Text */
  width: 90vw;
  margin-bottom: 5vh;
}

.boxes {
  width: 100%;
  height:30vh;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-between;
  margin: 0px;
  margin-bottom: 5vh;;
}

.box {
  background-color: #fde9cc;
  padding: 20px;
  border-radius: 4vh;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
  width: 45vw;
  margin: 0px;
  margin-left: 1vw;
  margin-right: 1vw;
  text-align: left;

  /* Flexbox für vertikale Zentrierung */
  display: flex;
  flex-direction: column; /* Inhalte bleiben untereinander */
  justify-content: center; /* Vertikale Zentrierung */
  align-items: flex-start; /* Inhalte linksbündig ausrichten */
}

.box h2 {
  font-size: 4vh;
  margin-top: 1vh;;
  margin-bottom: 0vh;
  margin-left: 2vw;;
  font-weight: bold; 
  font-family: "Inter", sans-serif; 
}



li {
  font-size: 2vh; 
  margin-bottom: 1vh; 
  font-family: "Inter", sans-serif; 
  font-weight: 500;
}

.privacy {
  font-size: 2vh; /* Schriftgröße */
  margin-bottom: 4vh; /* Abstand zum nächsten Element */
  text-align: center; /* Zentriert den Text */
  width: 90vw;
  font-family: "Inter", sans-serif; 
}


.btn {
  border: none;
  border-radius: 3vh; /* Abgerundete Ecken */
  margin: 1vh;
  padding: 1.5vh;
  padding-left:10vh;
  padding-right:10vh;
  background-color: #7F7E98;
  box-shadow: 0.2vh 0.2vh 0.5vh rgba(0, 0, 0, 0.277); /* Optional: Schatten für die Box */
  color: black; /* Textfarbe */
  font-style:italic;
  font-family: "Inter", sans-serif; /* Schriftart */
  cursor: pointer; /* Zeigt an, dass es klickbar ist */
  font-size: 2vh; /* Schriftgröße */
  text-decoration: none;
}

.btn:hover {
  background-color: #4d4c5d; /* Hintergrundfarbe bei Hover */
  transition: box-shadow 0.1s, background-color 0.1s;
}

.btn:active {
  background-color: #706f86; /* Hintergrundfarbe bei Klick */
  box-shadow: 0.1vh 0.1vh 0.3vh rgba(0, 0, 0, 0.412); /* Optional: Schatten für die Box */
  transform: translateY(2px); /* Optional: Leichte Verschiebung nach unten bei Klick */
  transition: box-shadow 0.1s, background-color 0.1s, transform 0.1s; /* Animationseffekt für den Klick */
}

del {
  text-decoration: line-through;
  background-color: #fbb;
  color: #555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}
.debug-buttons {
    display: none !important;
}
.debug-buttons.show-debug {
    display: inline-block !important;
}