.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

body {
  background: url('./assets/image.png') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.App-header {
  background: rgba(0, 0, 0, 0.6); /* Halbtransparenter schwarzer Hintergrund */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
  padding: 20px;
  text-align: center;
}

.App-header h1, .App-header p {
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter schwarzer Hintergrund */
  padding: 10px 15px;
  border-radius: 8px;
  display: inline-block;
}

.App-header h1 {
  background: rgba(0, 0, 0, 0.7); /* Dunklerer halbtransparenter Hintergrund */
  font-size: 2.5em; /* Größere Schriftgröße */
  padding: 15px 20px; /* Mehr Padding für bessere Lesbarkeit */
  border-radius: 10px;
  color: #ffffff; /* Weiß für besseren Kontrast */
}

.App-header p {
  background: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
  font-size: 1.2em; /* Etwas größere Schriftgröße */
  padding: 10px 15px;
  border-radius: 8px;
  color: #f0f0f0; /* Helles Grau für besseren Kontrast */
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

form {
  background: rgba(0, 0, 0, 0.6); /* Halbtransparenter schwarzer Hintergrund */
  backdrop-filter: blur(10px); /* Blur-Effekt */
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  width: 70%; /* Noch breitere Box */
  margin: 25px auto;
  margin-top: 200px; /* Abstand von der Oberseite */
  transition: transform 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriere die Inhalte in der Box */
  gap: 15px; /* Gleichmäßiger Abstand zwischen den Elementen */
}

form:hover {
  transform: scale(1.02);
}

form label {
  display: block;
  margin-bottom: 12px;
  font-size: 1.3em;
  color: #ffffff; /* Weiß */
  width: 100%; /* Eingabefelder und Labels nehmen die gesamte Breite ein */
  text-align: center; /* Zentriere den Text der Labels */
}

form input {
  width: 95%; /* Noch breitere Textfelder */
  padding: 12px;
  margin: 0 auto; /* Zentriere die Textfelder innerhalb der Box */
  margin-top: 6px;
  margin-bottom: 18px;
  border: 1px solid #555;
  border-radius: 6px;
  font-size: 1.2em; /* Größere Schriftgröße */
  height: auto; /* Automatische Höhe */
  line-height: 1.5; /* Angemessene Zeilenhöhe */
  background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund */
  color: #000000; /* Schwarz */
  text-align: center; /* Text zentriert in den Eingabefeldern */
}

form input:focus {
  outline: none;
  border-color: #61dafb;
  box-shadow: 0 0 5px #61dafb;
}

form select {
  width: 95%; /* Gleiche Breite wie die Textfelder */
  padding: 12px;
  margin: 0 auto 18px auto; /* Zentriere das Dropdown-Menü */
  border: 1px solid #555;
  border-radius: 6px;
  font-size: 1.2em; /* Gleiche Schriftgröße wie die Textfelder */
  background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund */
  color: #000000; /* Schwarz */
  text-align: center;
}

form select:focus {
  outline: none;
  border-color: #61dafb;
  box-shadow: 0 0 5px #61dafb;
}

form button {
  background-color: #28a745; /* Grün */
  color: #ffffff; /* Weiß */
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #218838; /* Dunkleres Grün beim Hover */
}

form button:active {
  background-color: #1b8cd8;
  transform: scale(0.98);
}

.radio-group {
  display: flex;
  flex-wrap: wrap; /* Optionen umbrechen, falls nötig */
  gap: 15px; /* Abstand zwischen den Optionen */
  justify-content: center; /* Zentriere die Optionen */
  margin: 15px 0; /* Abstand zur Umgebung */
}

.radio-group label {
  font-size: 1.2em; /* Gleiche Schriftgröße wie die Textfelder */
  color: #ffffff; /* Weiß */
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  padding: 10px 15px; /* Polsterung für bessere Lesbarkeit */
  border-radius: 8px; /* Abgerundete Ecken */
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Radio-Button und Text */
  cursor: pointer; /* Zeige den Cursor als Hand */
  transition: background-color 0.3s ease;
  border: 2px solid transparent; /* Standardrahmen transparent */
}

.radio-group label:hover {
  background-color: rgba(0, 128, 0, 0.7); /* Dunklerer grüner Hintergrund beim Hover */
}

.radio-group input[type="radio"] {
  display: none; /* Verstecke die Radio-Buttons */
}

.radio-group input[type="radio"]:checked + label {
  border-color: #28a745; /* Grüner Rahmen bei Auswahl */
  background-color: rgba(0, 128, 0, 0.7); /* Grüner Hintergrund nur bei Auswahl */
}

form input[type="number"] {
  width: 95%; /* Gleiche Breite wie die anderen Eingabefelder */
  padding: 12px;
  margin: 10px auto; /* Abstand zur Umgebung */
  border: 1px solid #555;
  border-radius: 6px;
  font-size: 1.2em; /* Gleiche Schriftgröße wie die Textfelder */
  background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund */
  color: #000000; /* Schwarz */
  text-align: center;
}

form input[type="number"]:focus {
  outline: none;
  border-color: #61dafb;
  box-shadow: 0 0 5px #61dafb;
}

@media (max-width: 768px) {
  form {
    width: 80%; /* Schmalere Box im mobilen Layout */
    padding: 20px; /* Weniger Padding für kleinere Bildschirme */
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Inhalte horizontal zentrieren */
    flex-direction: column;
    align-items: center; /* Zentriere die Inhalte in der Box */
    margin: 0 auto; /* Zusätzliche Sicherheit für horizontale Zentrierung */
  }

  form input {
    width: 90%; /* Textfelder nehmen die gesamte Breite der Box ein */
    margin: 0; /* Entferne zusätzliche Margins */
  }

  .App-header h1 {
    font-size: 2em; /* Kleinere Schriftgröße für Titel */
    padding: 10px 15px; /* Weniger Padding für kleinere Bildschirme */
  }

  .App-header p {
    font-size: 1em; /* Kleinere Schriftgröße für Untertitel */
    padding: 8px 12px; /* Weniger Padding für kleinere Bildschirme */
  }
}

#intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  color: white;
  padding: 20px;
}

#intro h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

#intro p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

#intro button {
  background-color: #28a745; /* Grün */
  color: #282c34;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#intro button:hover {
  background-color: #218838; /* Dunkleres Grün beim Hover */
}

#form-section {
  display: none; /* Formularbereich zunächst ausblenden */
  padding-top: 50px;
  min-height: 100vh; /* Füllt den gesamten Bildschirm aus */
  background: transparent; /* Vollständig transparenter Hintergrund */
  transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out; /* Längere Übergangszeit für Transparenz */
  opacity: 0;
  transform: translateY(20px) scale(0.9); /* Leicht nach unten verschoben und Start mit kleinerer Skalierung */
}

#form-section.visible {
  display: block; /* Formularbereich sichtbar machen */
  opacity: 1;
  transform: translateY(0) scale(1); /* Zurück in die ursprüngliche Position und zur vollen Größe skalieren */
  animation: bounceIn 0.8s ease-in-out; /* Bounce-Effekt hinzufügen */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    transform: translateY(-50px) scale(0.8); /* Start kleiner und weiter oben */
    opacity: 0;
  }
  50% {
    transform: translateY(10px) scale(1.1); /* Überschwingung nach unten */
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1); /* Endposition */
  }
}

footer {
  background: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
  color: white;
  text-align: center;
  padding: 5px 0; /* Weniger Padding */
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 0.8em; /* Kleinere Schriftgröße */
}

footer a {
  color: #61dafb;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.facts {
  margin: 20px 0;
  text-align: left;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  padding: 15px;
  border-radius: 8px;
  color: white;
}

.fact-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fact-label {
  font-weight: bold;
  margin-right: 10px;
}

.fact-value {
  text-align: right;
}
