body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #f9f9f9;
  }
  /*-- Navigationsleiste --*/
  .navbar {
    background:#005ea9;
  }
  .nav-link,
  .navbar-brand {
    color: white;
    cursor: pointer;
  }
  .Logo  {
    height: 9vh;
  }

  .nav-link {
    margin-right: 1em !important;
  }
  .nav-link:hover,
  .navbar-brand:hover {
    color: black;
    text-decoration: underline;
  }
  .navbar-collapse {
    justify-content: flex-end;
  }
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 10vh; /* Höhe der Kopfzeile auf 10% der Viewport-Höhe setzen */
    z-index: 1000;
    background-color: lightskyblue; /* Hintergrundfarbe anpassen */
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10vh; /* Höhe der Fußzeile auf 10% der Viewport-Höhe setzen */
    z-index: 1000;
    background-color: lightskyblue; /* Hintergrundfarbe anpassen */
    text-align: center;
    /*padding: 10px 0;*/
    left: 0;
}


.half-size {
  width: 50%; /* Bild auf halbe Größe skalieren */
}
.mano-text {
  font-size: 2em;
  margin: 0 auto;
  position: absolute;
  left: 25%;
  /* transform: translateX(-50%); */
  color: blue;
}
.image-container {
  position: fixed;
  width: 100vw;
  height: 80vh;
  top: 10vh;
}

.image-wrapper {
  position: absolute;
  
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='blue' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.image-wrapper:nth-child(1) {
 
  left: 1vw;
  width: 43vw;
  top: 1vh;
}

.image-wrapper:nth-child(2) {
  top: 39vh;
  left: 23vw;
  width: 44vw;
}

.image-wrapper:nth-child(3) {
  top: 6vh;
  left: 50vw;
  width: 49vw;
}

.image-wrapper img {
  width: 100%; /* Bild auf Containergröße skalieren */
  height: 100%; /* Bild auf Containergröße skalieren */
  opacity: 0; /* Anfangs unsichtbar */
  object-fit: cover; /* Bild proportional skalieren und zuschneiden, um den Container zu füllen */
  animation-duration: 1s; /* Dauer der Animation */
  animation-fill-mode: forwards; /* Animationseffekt beibehalten */
}
.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 80%, rgba(255, 255, 255, 0.5)),
              linear-gradient(to right, transparent 80%, rgba(255, 255, 255, 0.5));
  pointer-events: none; /* Damit die Überlagerung keine Interaktionen blockiert */
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: lightskyblue; /* Textfarbe anpassen */
  font-size: 2.5em; /* Schriftgröße anpassen */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Textschatten für bessere Lesbarkeit */
}

.fly-in-left {
  animation-name: flyInLeft;
}

.fly-in-top {
  animation-name: flyInTop;
}

.fly-in-right {
  animation-name: flyInRight;
}

@keyframes flyInLeft {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes flyInTop {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes flyInRight {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}
.Impressum {
  text-align: center;
  /*font-size: 1.5em;*/
  margin-top: 10px;
  padding: 10px;
}


/* Media Queries für kleinere Bildschirme */
@media (max-width: 768px) {
  .image-wrapper {
      width: 80%; /* Breite der Bilder anpassen */
  }



  .text-overlay {
      font-size: 1.5em; /* Schriftgröße anpassen */
  }
   .nav-link {
    color: blue;
    background-color: lightskyblue;
    width: 30%;
    text-align: center;
    }

  /* .navbar-toggler-icon {
    color: blue;
    background-color: lightskyblue;
  } */
  /* Stil für den Hamburger-Button */

  body {
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    overflow-y: auto; /* Ermöglicht vertikales Scrollen */
    position: relative; /* Setzt die Position auf relativ */
    width: 100vw; /* Stellt sicher, dass der Body die volle Breite des Viewports einnimmt */
    height: 100vh; /* Stellt sicher, dass der Body die volle Höhe des Viewports einnimmt */
  }
  /* .image-wrapper:nth-child(1) {
  
    width: 100%;
  } */
  .image-wrapper {
  width: 100%;
  }
  .image-container {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .image-wrapper:nth-child(1) {
    top: 0vh;
    position: absolute;
    left: 0;
    width: 100%;
  }
  .image-wrapper:nth-child(2) {
    top: 43vh;
    position: absolute;
    left: 0;
    width: 100%;
  }
  .image-wrapper:nth-child(3) {
    top: 24vh;
    position: absolute;
    left: 0;
    width: 100%;
  }
}
  .image-wrapper img {
    width: 100%; /* Bild auf Containergröße skalieren */
    height: 100%; /* Bild auf Containergröße skalieren */
    opacity: 0; /* Anfangs unsichtbar */
    object-fit: cover; /* Bild proportional skalieren und zuschneiden, um den Container zu füllen */
    animation-duration: 1s; /* Dauer der Animation */
    animation-fill-mode: forwards; /* Animationseffekt beibehalten */
  }
  .blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 80%, rgba(255, 255, 255, 0.5)),
                linear-gradient(to right, transparent 80%, rgba(255, 255, 255, 0.5));
    pointer-events: none; /* Damit die Überlagerung keine Interaktionen blockiert */
  }
  
  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: lightskyblue; /* Textfarbe anpassen */
    font-size: 2.5em; /* Schriftgröße anpassen */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Textschatten für bessere Lesbarkeit */
  }
  
  .fly-in-left {
    animation-name: flyInLeft;
  }
  
  .fly-in-top {
    animation-name: flyInTop;
  }
  
  .fly-in-right {
    animation-name: flyInRight;
  }
  
  @keyframes flyInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
  }
  
  @keyframes flyInTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
  }
  
  @keyframes flyInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
  }
.QuestionImage {
  /* width: 100%; */
  height: 1em;
  /* object-fit: cover; */
}
label {
  font-size: 0.9em;
}
input {
  font-size: 0.9em;
  text-align: center;
}
h1 {
  font-size: 1em;
}
button {
  font-size: 3vw;
  margin: 0.9em;
}
select {
  font-size: 0.9em;
  margin: 0.9em;
}
.Parameter {
  font-size: 0.9em;
}