Registrierung und Login aufgeräumt: Felder und Fehler angepasst, Formulardaten bleiben bei Fehlern erhalten, Navigation zeigt jetzt nur noch passende Links je nach Login-Status, Passwort-Fehler verständlich auf Deutsch. Alles einheitlich und benutzerfreundlich gemacht!

CSS/style.css

@@ -150,32 +150,63 @@ a {
     border-radius: 10px;
 }
 
-.login-container {
-    position: absolute;
-    top: 200px;
+.form-container {
     background-color: #BAC8D4;
-    width: 900px;
-    height: 450px;
+    width: 100%;
+    max-width: 400px;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     box-sizing: border-box;
+    padding: 32px 24px 24px 24px;
+    margin: 32px auto;
 }
-
-.event-container  {
-    position: absolute;
-    top: 200px;
-    background-color: #BAC8D4;
-    width: 900px;
-    height: 450px;
-    border-radius: 10px;
+.form-horizontal {
+    width: 100%;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    gap: 12px;
+    margin-bottom: 10px;
+}
+.form-horizontal label {
+    margin-bottom: 2px;
+}
+.form-horizontal input[type="text"],
+.form-horizontal input[type="email"],
+.form-horizontal input[type="password"] {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid #BAC8D4;
+    border-radius: 4px;
+    font-size: 1rem;
     box-sizing: border-box;
+    background: #fff;
+}
+.form-horizontal button {
+    width: 100%;
+    padding: 10px 0;
+    border: none;
+    border-radius: 4px;
+    background: #4d4d4d;
+    color: #fff;
+    font-size: 1rem;
+    margin-top: 8px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.form-horizontal button:hover {
+    background: #333;
+}
+.login-error, .form-error {
+    background: #ffe0e0;
+    color: #b30000;
+    border: 1px solid #ffb3b3;
+    border-radius: 6px;
+    padding: 10px 16px;
+    margin-bottom: 18px;
+    width: 100%;
+    text-align: center;
 }
 
 @media (max-width: 600px) {