.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);
  backdrop-filter: blur(10px);
  padding: 12px; /* Weniger Padding */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 55%; /* Schmalere Box */
  margin: 15px auto;
  margin-top: 120px; /* Weniger Abstand von oben */
  transition: transform 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Weniger Abstand zwischen Elementen */
}

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

form label {
  display: block;
  margin-bottom: 6px;
  font-size: 1em; /* Kleinere Schriftgröße */
  color: #ffffff;
  width: 100%;
  text-align: center;
}

form input {
  width: 85%; /* Schmalere Felder */
  padding: 7px;
  margin: 0 auto 10px auto;
  border: 1px solid #555;
  border-radius: 5px;
  font-size: 1em; /* Kleinere Schriftgröße */
  height: auto;
  line-height: 1.3;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000000;
  text-align: center;
}

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

form select {
  width: 85%;
  padding: 7px;
  margin: 0 auto 10px auto;
  border: 1px solid #555;
  border-radius: 5px;
  font-size: 1em;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000000;
  text-align: center;
}

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

form button {
  background-color: #28a745;
  color: #ffffff;
  border: none;
  padding: 8px 16px; /* Weniger Padding */
  border-radius: 5px;
  font-size: 1em; /* Kleinere Schriftgröße */
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 4px;
}

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: 8px; /* Weniger Abstand */
  justify-content: center; /* Zentriere die Optionen */
  margin: 8px 0; /* Abstand zur Umgebung */
}

.radio-group label {
  font-size: 1em; /* Gleiche Schriftgröße wie die Textfelder */
  color: #ffffff; /* Weiß */
  background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  padding: 6px 10px; /* Polsterung für bessere Lesbarkeit */
  border-radius: 6px; /* Abgerundete Ecken */
  display: flex;
  align-items: center;
  gap: 6px; /* 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: 85%;
  padding: 7px;
  margin: 6px auto;
  border: 1px solid #555;
  border-radius: 5px;
  font-size: 1em;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000000;
  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: 95%;
    padding: 8px;
    margin-top: 40px;
  }

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

  form input, form select, form input[type="number"] {
    width: 98%;
    font-size: 0.95em;
    padding: 6px;
  }

  .radio-group label {
    font-size: 0.95em;
    padding: 5px 8px;
  }

  .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 */
  }
}

#management-section {
  min-height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 40px 20px 60px 20px;
  border-radius: 16px;
  margin: 40px auto 0 auto;
  width: 80%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: fadeIn 0.7s;
}

#management-section h2 {
  font-size: 2.2em;
  margin-bottom: 24px;
  letter-spacing: 1px;
  color: #61dafb;
}

#management-section p {
  font-size: 1.2em;
  margin: 20px 0 0 0;
  background: rgba(255,255,255,0.08);
  padding: 18px 24px;
  border-radius: 10px;
  color: #e0e0e0;
  max-width: 500px;
}

#management-section button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 1.1em;
  margin-bottom: 18px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(40,167,69,0.15);
}

#management-section button:hover {
  background-color: #218838;
  transform: scale(1.04);
}

.management-table {
  width: 100%;
  max-width: 420px;
  margin: 18px auto 0 auto;
  border-collapse: collapse;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
  font-size: 1.08em;
  font-family: 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.management-table th, .management-table td {
  padding: 10px 14px;
  text-align: left;
}

.management-table th {
  background: rgba(40,167,69,0.92);
  color: #fff;
  font-weight: 700;
  font-size: 1.13em;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px #222;
}

.management-table tr:nth-child(even) {
  background: rgba(255,255,255,0.13);
}

.management-table tr:nth-child(odd) {
  background: rgba(0,0,0,0.13);
}

.management-table td {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px #222;
}

@media (max-width: 768px) {
  #management-section {
    width: 95%;
    padding: 20px 5px 40px 5px;
    margin: 20px auto 0 auto;
  }
  #management-section h2 {
    font-size: 1.5em;
  }
  #management-section p {
    font-size: 1em;
    padding: 12px 8px;
  }
  #management-section button {
    font-size: 1em;
    padding: 10px 18px;
  }
  .management-table {
    font-size: 0.95em;
    max-width: 98vw;
  }
  .management-table th, .management-table td {
    padding: 6px 4px;
  }
}

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;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(30,30,30,0.85);
  padding: 32px 24px 24px 24px;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  min-width: 260px;
  max-width: 340px;
  margin: 0 auto;
  animation: fadeIn 0.7s;
}

.login-form h2 {
  color: #61dafb;
  margin-bottom: 18px;
  font-size: 1.5em;
}

.login-form input[type="password"] {
  width: 90%;
  padding: 12px;
  margin-bottom: 18px;
  border: 1px solid #555;
  border-radius: 6px;
  font-size: 1.1em;
  background: rgba(255,255,255,0.9);
  color: #222;
  text-align: center;
}

.login-form button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 1em;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.login-form button[type="button"] {
  background: #888;
}

.login-form button:hover {
  background-color: #218838;
}

.login-form button[type="button"]:hover {
  background: #555;
}

.gesamtanzahl {
  display: inline-block;
  font-size: 1.13em;
  font-weight: 700;
  color: #fff;
  background: #2196f3; /* Blau als Chip-Farbe */
  border-radius: 20px;
  padding: 7px 22px;
  margin: 10px 0 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px #0d47a1;
  border: 1px solid #bbdefb; /* Dünnerer Rand */
}