feat(login): field-specific validation errors instead of generic message

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/pages/login.js

@@ -79,8 +79,17 @@ export async function render(container) {
     const username = form.username.value.trim();
     const password = form.password.value;
 
+    const usernameInput = form.querySelector('#username');
+    const passwordInput = form.querySelector('#password');
+    const usernameGroup = usernameInput.closest('.form-group');
+    const passwordGroup = passwordInput.closest('.form-group');
+
+    usernameGroup.classList.toggle('form-group--error', !username);
+    passwordGroup.classList.toggle('form-group--error', !password);
+
     if (!username || !password) {
-      showError(errorEl, t('common.allFieldsRequired'));
+      if (!username) usernameInput.focus();
+      else passwordInput.focus();
       return;
     }
 
@@ -107,6 +116,13 @@ export async function render(container) {
       spinner.remove();
     }
   });
+
+  form.querySelector('#username').addEventListener('input', () => {
+    form.querySelector('#username').closest('.form-group').classList.remove('form-group--error');
+  });
+  form.querySelector('#password').addEventListener('input', () => {
+    form.querySelector('#password').closest('.form-group').classList.remove('form-group--error');
+  });
 }
 
 function showError(el, message) {

public/styles/login.css

@@ -68,6 +68,16 @@
   opacity: 0.6;
 }
 
+/* Feld-Fehler-Zustand */
+.form-group--error .input {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 20%, transparent);
+}
+
+.form-group--error .label {
+  color: var(--color-danger);
+}
+
 .login-spinner {
   width: 16px;
   height: 16px;