/* Allgemeine Einstellungen */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Gesamte Höhe des Viewports */
    background-color: #f0f0f0; /* Heller Hintergrund */
    font-family: Arial, sans-serif; /* Einheitliche Schriftart */
}

/* Header */
header {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20;
    background-color: #ffffff; /* Weißer Hintergrund */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    border-radius: 8px; /* Abgerundete Ecken */
}

header img {
    width: 100%; /* Bestehende Grafik bleibt erhalten und skaliert */
    border-radius: 8px; /* Abgerundete Ecken für das Bild */
}

/* Styling für Fehlermeldungen */
.error-message {
    width: calc(100% - 40px); /* Dynamische Breite mit Innenabstand */
    max-width: 900px; /* Maximale Breite */

    padding: 15px;
    margin-bottom: 50px;
    background-color: #f8d7da; /* Heller Rotton für Hintergrund */
    color: #721c24; /* Dunkler Rotton für Text */
    border: 1px solid #f5c6cb; /* Passender Rand */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 16px;
    text-align: center; /* Zentrierter Text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}


/* Footer */
footer {
    width: 100%;
    max-width: 1024px;
    margin: 20px auto;
    padding: 20px;
    background-color: #D4021D; /* Firmenrot */
    color: white; /* Weißer Text */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    border-radius: 8px; /* Abgerundete Ecken */
}


/* Standardlayout für größere Bildschirme */
.container {

    width: 100%;
    max-width: 1024px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;        
    padding-bottom: 120px;    
    background-color: #ffffff; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    display: flex;
    justify-content: flex-end; /* Logo bleibt rechts */
    align-items: center; /* Vertikale Zentrierung */
    flex-direction: column; /* Standard: Nebeneinander */
}

.loginbereich-container {

    width: 100%;
    max-width: 1024px;
    margin: auto;
    display: flex;
    justify-content: flex-end; /* Logo bleibt rechts */
    align-items: center; /* Vertikale Zentrierung */
    flex-direction: row; /* Standard: Nebeneinander */
}


/* Login-Formular Styling */
.login-form {
    width: calc(70% - 50px); /* Formular nimmt ca. 70% der Breite ein */
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    margin-left: 60px;
    margin-right:30px; 
}

input[type="text"], input[type="password"] {
    width: calc(100% - 20px); /* Dynamische Breite mit Innenabstand */
    max-width: 300px; /* Begrenzung auf maximale Breite */
    padding: 10px;
    margin-top: 8px;
    font-size: 16px;
    border-radius: 5px; /* Abgerundete Ecken */
    border: 1px solid #ccc; /* Leichter Rand */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); /* Innenschatten für Tiefe */
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #004494; /* Firmenblau bei Fokus */
    outline: none;
}

input[type="submit"] {
    background-color: #0056b3; /* Firmenblau */
    color: white; /* Weißer Text */
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px; /* Abgerundete Ecken */
    border: none; /* Kein Rand */
    cursor: pointer;
    margin-top: 20px; /* Abstand zum oberen Feld */
}

input[type="submit"]:hover {
    background-color: #004494; /* Dunkleres Blau beim Hover-Effekt */
}

/* Logo Styling im Container (rechts neben dem Formular) */

.logo-container img {
    max-width: 450px; /* Volle Größe des Logos auf großen Bildschirmen */
}

.logo-container {
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Logos */
}


/* Kleinere Größe für Tablets und Handys */
@media (max-width: 1024px) { /* Für Tablets und kleinere Geräte */
	.container {
	    padding-top: 60px;        
    padding-bottom: 60px;   }
    .logo-container img {
        max-width: 350px; /* Reduzierte Größe des Logos auf Tablets */
    }
}

@media (max-width: 768px) { /* Für Handys im Querformat */
	.container {
	    padding-top: 50px;        
           padding-bottom: 50px;   }
    .logo-container img {
        max-width: 320px; /* Deutlich kleinere Größe des Logos auf Handys */
         padding-bottom: 60px; 
    }
}

/* Spezialregel für Handys im Hochformat (max. 395px Breite) */
@media (max-width: 595px) { 
    .container {
        flex-direction: column; /* Logo und Login-Felder untereinander anordnen */
        align-items: center; /* Zentriert beide Elemente horizontal */
        text-align: center; /* Zentriert den Text im Formular */
    }
    .loginbereich-container {
 	align-items: center; 
 	text-align: center; /* Zentriert den Text im Formular */
    flex-direction: column; /* Standard: Nebeneinander */
}
.error-message {
margin-top: -20px;
margin-bottom: 15px;
}

    .logo-container img {
        max-width: 280px; /* Kleinere Größe des Logos für schmale Bildschirme */
        margin-bottom: -30px; /* Abstand zwischen Logo und Login-Feldern */
    }
  /* Login-Formular Styling */
.login-form {
    width: 90%; /* Formular nimmt ca. 70% der Breite ein */
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    margin-left: 5px;
    margin-right:5px; 
}  

}