/* Hintergrundbild für die Login-Seite */
body {
  width: 100%;
  background-image: url("../images/login.png"); /* Pfad zum Hintergrundbild im Ordner /images */
  background-size: cover; /* Skaliert das Bild, um den gesamten Bildschirm auszufüllen */
  background-position: top left; /* Richtet das Bild am oberen linken Rand aus */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Hintergrundbildes */
  height: 100vh; /* Setzt die Höhe des body auf 100% der Höhe des Viewports */
  display: flex;
  align-items: center; /* Zentriert den Inhalt (Login-Karte) vertikal in der Mitte */
  justify-content: center; /* Zentriert den Inhalt (Login-Karte) horizontal in der Mitte */
}

/* Header-Styling */
.header {
  background-color: rgba(
    255,
    255,
    255,
    0
  ); /* Transparenter Hintergrund (unsichtbar) */
  color: white; /* Setzt die Schriftfarbe auf weiß */
  text-align: center; /* Zentriert den Text innerhalb des Headers */
  padding: 15px 0; /* Fügt vertikalen Innenabstand hinzu */
  position: absolute; /* Positioniert den Header absolut im Bildbereich */
  top: 0; /* Platziert den Header am oberen Rand des Bildschirms */
  width: 100%; /* Deckt die gesamte Breite des Bildschirms ab */
  font-size: 1.5em; /* Setzt die Schriftgröße */
}

/* Login-Karte */
.login-card {
  max-width: 400px; /* Begrenzung der maximalen Breite der Login-Karte */
  width: 100%; /* Setzt die Breite der Login-Karte auf 100% des Containers */
  background-color: rgba(255,255,255,0.4); /* Weißer Hintergrund mit 40% Transparenz, um den Hintergrund leicht durchscheinen zu lassen */
  padding: 20px; /* Fügt Innenabstand um den gesamten Inhalt der Karte hinzu */
  border-radius: 8px; /* Macht die Ecken der Karte abgerundet */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Fügt einen leichten Schatten unter die Karte für eine abgehobene Optik */
  color: rgb(0, 0, 0); /* Setzt die Textfarbe innerhalb der Login-Karte */
}

/* Login Button */
.btn {
  width: 100%;
  border: 3px double #5d4c2f;
  border-top-color: #c9a584;
  border-left-color: #c9a584;
  padding: 1px 10px;
  background: #edd192;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  color: #000000;
}

/* Success and Error box */
.success-box {
  width: 25%;
  background-color: #d4edda; /* Hellgrün für Erfolgsmeldungen */
  color: #155724; /* Dunkelgrüner Text */
  padding: 10px 15px;
  margin-top: 10px;
  margin-left: 20px;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.error-box {
  width: 25%;
  background-color: #f8d7da; /* Hellrot für Fehlermeldungen */
  color: #721c24; /* Dunkelroter Text */
  padding: 10px 15px;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}