/* Globale Stile für alle Elemente */
* {
    margin: 0; /* Entfernt den Standardabstand */
    padding: 0; /* Entfernt das Standardpadding */
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Gesamtbreite/Höhe enthalten sind */
}

/* HTML und Body */
html, body {
    height: 100%; /* Setzt die Höhe auf 100% */
    background-color: gray; /* Setzt den Hintergrund des gesamten Dokuments auf grau */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Hintergrunds */
    background-attachment: fixed; /* Hält den Hintergrund beim Scrollen an Ort und Stelle */
    background-size: cover; /* Deckt den gesamten Bereich des Hintergrunds ab */
    display: flex; /* Verwendet Flexbox, um die Elemente zu positionieren */
    justify-content: center; /* Zentriert die Inhalte horizontal */
    align-items: center; /* Zentriert die Inhalte vertikal */
    font-family: Arial, Helvetica, sans-serif; /* Setzt die Schriftart */
}

.Account {
    position: absolute; /* Positioniert das Element absolut */
    top: 33%; /* Setzt die Position 33% vom oberen Rand */
    text-align: center; /* Zentriert den Text */
    font-size: 32px; /* Setzt die Schriftgröße */
    color: white; /* Setzt die Textfarbe auf Weiß */
}

/* Formular */
form {
    width: 100%; /* Setzt die Breite auf 100% */
    max-width: 650px; /* Setzt die maximale Breite des Formulars auf 650px */
    padding: 50px; /* Fügt Padding von 50px rundum hinzu */
    border-radius: 15px; /* Rundet die Ecken des Formulars ab */
    background-color: black; /* Setzt den Hintergrund des Formulars auf schwarz */
    display: flex; /* Verwendet Flexbox, um die Elemente innerhalb des Formulars zu positionieren */
    flex-direction: column; /* Richtet die Elemente in einer Spalte aus */
    justify-content: space-evenly; /* Verteilt die Elemente gleichmäßig */
    align-items: center; /* Zentriert die Elemente horizontal */
}

/* Fehler- und Erfolgsmeldungen */
.error {
    color: red; /* Setzt die Textfarbe auf rot */
    font-size: 16px; /* Setzt die Schriftgröße auf 16px */
    margin-bottom: 20px; /* Fügt unten einen Abstand von 20px hinzu */
}

.success {
    color: green; /* Setzt die Textfarbe auf grün */
    font-size: 16px; /* Setzt die Schriftgröße auf 16px */
    margin-bottom: 20px; /* Fügt unten einen Abstand von 20px hinzu */
}

/* Eingabefelder */
input {
    height: 45px; /* Setzt die Höhe der Eingabefelder auf 45px */
    width: 95%; /* Setzt die Breite auf 90% */
    margin: 10px 0; /* Fügt oben und unten einen Abstand von 10px hinzu */
    padding: 0 15px; /* Fügt links und rechts einen Abstand von 15px hinzu */
    border: none; /* Entfernt die Standardrahmen */
    border-radius: 10px; /* Rundet die Ecken der Eingabefelder ab */
    background-color: gainsboro; /* Setzt die Hintergrundfarbe auf gainsboro (grau) */
    color: white; /* Setzt die Textfarbe auf dunkelgrau */
    font-size: 16px; /* Setzt die Schriftgröße auf 16px */
    transition: 0.2s; /* Fügt einen Übergangseffekt von 0,2s hinzu */
}

/* Hover-Effekt für Eingabefelder */
input:hover {
    background-color: #47505f; /* Ändert die Hintergrundfarbe, wenn das Eingabefeld mit der Maus überfahren wird */
}

/* Button */
button {
    background-color: #4CAF50; /* Setzt den Hintergrund des Buttons auf grün */
    color: white; /* Setzt die Textfarbe des Buttons auf weiß */
    padding: 15px 25px; /* Fügt dem Button Padding hinzu */
    border: none; /* Entfernt den Standardrahmen des Buttons */
    border-radius: 22px; /* Rundet die Ecken des Buttons ab */
    cursor: pointer; /* Ändert den Mauszeiger beim Überfahren des Buttons */
    font-size: 14px; /* Setzt die Schriftgröße des Buttons */
    transition: background-color 0.3s ease; /* Fügt einen Übergangseffekt für die Hintergrundfarbe hinzu */
}

/* Hover-Effekt für Button */
button:hover {
    background-color: #45a049; /* Ändert die Hintergrundfarbe des Buttons, wenn er mit der Maus überfahren wird */
}
/* SIDEBAR */

.sidebar {
    height: 100%; /* Volle Höhe */
    width: 250px; /* Feste Breite */
    position: fixed; /* Bleibt auf Position */
    top: 0; /* Startpunkt oben */
    right: -250px; /* Standardmäßig versteckt */
    background: linear-gradient(180deg, #222, #444); /* Farbverlauf */
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
    transition: right 0.4s ease-in-out; /* Weiche Animation */
    padding-top: 60px; /* Abstand zum oberen Rand */
    z-index: 1000; /* Sidebar liegt oben */
}

/* SIDEBAR LINKS */

.sidebar a {
    display: block; /* Jeder Link wird in einer eigenen Zeile angezeigt */
    color: white; /* Weiße Schrift */
    text-decoration: none; /* Kein Unterstrich */
    font-size: 18px; /* Schriftgröße */
    padding: 15px; /* Innenabstand */
    transition: 0.3s; /* Animation */
}

.sidebar a:hover {
    background: rgba(255, 255, 255, 0.2); /* Heller Hover-Effekt */
    padding-left: 30px; /* Einrücken */
}

/* SCHLIEẞEN-BUTTON */

.closebtn {
    position: absolute; /* Fixe Position */
    top: 15px; /* Abstand nach oben */
    right: 20px; /* Abstand nach rechts */
    font-size: 36px; /* Große Schrift */
    color: white; /* Weiße Farbe */
    background: none; /* Kein Hintergrund */
    border: none; /* Kein Rand */
    cursor: pointer; /* Zeiger als Mauszeiger */
    transition: 0.3s; /* Animation */
}

.closebtn:hover {
    color: #ff5757; /* Roter Hover-Effekt */
}

/* MENÜ-BUTTON */

.openbtn {
    font-size: 20px; /* Schriftgröße */
    position: absolute; /* Fixe Position */
    top: 20px; /* Abstand nach oben */
    right: 20px; /* Abstand nach rechts */
    background: #222; /* Dunkelgrauer Hintergrund */
    color: white; /* Weiße Schrift */
    padding: 12px 18px; /* Innenabstand */
    border: none; /* Kein Rand */
    cursor: pointer; /* Zeiger als Mauszeiger */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: 0.3s; /* Animation */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
}

.openbtn:hover {
    background: #444; /* Mittelgrau */
               }




@media(min-width: 1200px){

    h1{
            left: 50%;                   /*Ohne left bleibt das Element am linken Rand egal was passiert*/
            transform: translateX(-50%); /*Element beginnt in der Mitte ist aber nicht wirklich mittig sondern nach rechts verschoben*/
            text-align: center;          /*Text bleibt linksbündig wenn das Element breiter als der Text ist*/
        }
}





/* Mobile und Tablet-Anpassungen */
@media(max-width: 650px) {
    form {
        width: 90%;
        padding: 20px;
    }

    h1 {
        font-size: 32px;
    }

    input {
        width: 100%;
    }
}