* { margin: 0; padding: 0; box-sizing: border-box; }
        html { min-height: 100%; }
        /* Dunkelblau der Kopfleiste als Flaeche, zwei weiche Lichtflecken */
        body {
            font-family: var(--f-ui);
            background: linear-gradient(135deg, var(--navy) 0%, #071338 100%);
            color: var(--tx);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }
        body::before,
        body::after {
            content: "";
            position: absolute;
            border-radius: 9999px;
            pointer-events: none;
            filter: blur(80px);
        }
        body::before {
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(126,160,255,.38), transparent 70%);
            top: -130px;
            left: -110px;
        }
        body::after {
            width: 440px;
            height: 440px;
            background: radial-gradient(circle, rgba(0,71,219,.34), transparent 70%);
            right: -90px;
            bottom: -120px;
        }
        .login-card {
            position: relative;
            z-index: 1;
            background: var(--surface);
            padding: 36px 36px 32px;
            border-radius: 20px;
            box-shadow: 0 28px 64px rgba(4,18,59,.45);
            width: 100%;
            max-width: 400px;
        }
        .brand {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 22px;
        }
        .brand-logo { display: block; height: 42px; width: auto; max-width: 100%; }
        h1 {
            font-family: var(--f-d);
            text-align: center;
            margin-bottom: 4px;
            color: var(--tx);
            font-size: 21px;
            font-weight: 800;
            letter-spacing: -.015em;
        }
        .sub {
            color: var(--tx-3);
            text-align: center;
            font-size: 12.5px;
            margin-bottom: 24px;
        }
        label { display: block; margin-bottom: 5px; font-family: var(--f-d); font-size: 12px; font-weight: 700; color: var(--tx); }
        input {
            width: 100%;
            height: 40px;
            padding: 0 12px;
            margin-bottom: 14px;
            border: 1px solid var(--border-2);
            border-radius: var(--r-m);
            outline: none;
            font-family: inherit;
            font-size: 13.5px;
            color: var(--tx);
            background: var(--surface);
            transition: border-color .15s, box-shadow .15s;
        }
        input:focus {
            border-color: var(--sky);
            box-shadow: 0 0 0 3px rgba(126,160,255,.18);
        }
        .password-field { position: relative; margin-bottom: 14px; }
        .password-field input { margin-bottom: 0; padding-right: 42px; }
        .pw-toggle {
            position: absolute;
            top: 50%;
            right: 3px;
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            border-radius: var(--r-s);
            padding: 0;
            margin: 0;
            cursor: pointer;
            color: var(--tx-3);
            transition: color .15s, background .15s;
        }
        .pw-toggle:hover { color: var(--navy); background: var(--soft); }
        .pw-toggle:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
        .pw-toggle svg { width: 18px; height: 18px; }
        .pw-toggle .icon-eye-off { display: none; }
        .pw-toggle.visible .icon-eye { display: none; }
        .pw-toggle.visible .icon-eye-off { display: block; }
        /* Anmelden wie .btn--primary der Vorlage, nur in voller Breite */
        button[type="submit"] {
            width: 100%;
            height: 42px;
            color: var(--btn-primary-text);
            background-color: var(--btn-primary-bg);
            background-image: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.14) 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(4,18,59,.22);
            border: none;
            border-radius: var(--r-m);
            font-family: var(--f-d);
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 8px;
            transition: background-color .2s, box-shadow .2s;
        }
        button[type="submit"]:hover { background-color: var(--btn-primary-hover); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(4,18,59,.22); }
        button[type="submit"]:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.34); }
        button[type="submit"]:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
        .error {
            background: var(--danger-soft);
            color: var(--danger);
            padding: 10px 14px;
            border: 1px solid #F5CFCF;
            border-radius: var(--r-m);
            margin-bottom: 16px;
            font-size: 12.5px;
            font-weight: 600;
            text-align: center;
        }
        @media (max-width: 480px) {
            body { padding: 16px; }
            .login-card { padding: 28px 22px; border-radius: var(--r-l); }
        }