<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anmelden{{ " - " + app_name() }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f0f4f8; }
        .login-card { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); width: 100%; max-width: 380px; }
        .login-brand { text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #1565C0; }
        .error-msg { background: #ffebee; color: #c62828; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 1rem; }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="login-brand">📋 {{ app_name() }}</div>
        {% if error %}
        <div class="error-msg">{{ error }}</div>
        {% endif %}
        <form method="post" action="/login">
            <label for="kuerzel">Kürzel</label>
            <input type="text" id="kuerzel" name="kuerzel" placeholder="z.B. ME" required autofocus
                   style="text-transform: uppercase;">
            <label for="passwort">Passwort</label>
            <input type="password" id="passwort" name="passwort" required>
            <button type="submit" style="width: 100%; margin-top: 0.5rem;">Anmelden</button>
        </form>
    </div>
</body>
</html>
