/* Anmelde- und Einrichtungsseite */

* { box-sizing: border-box; }
        :root {
            --magenta: #9b0e5d;
            --blue: #183b82;
            --sky: #4aa8dc;
            --ink: #26354d;
            --muted: #6c7789;
            --line: #dfe6ef;
        }
        html, body { margin: 0; min-height: 100%; }
        body {
            display: grid;
            min-height: 100vh;
            place-items: center;
            padding: 24px;
            color: var(--ink);
            background:
                radial-gradient(circle at 8% 8%, rgba(155, 14, 93, .10), transparent 28rem),
                radial-gradient(circle at 92% 18%, rgba(74, 168, 220, .14), transparent 28rem),
                #f7f9fc;
            font-family: Inter, ui-rounded, "Segoe UI", Arial, sans-serif;
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0 0 auto;
            height: 7px;
            background: linear-gradient(90deg, #9b0e5d, #f3a000, #94c42e, #183b82, #d40f18, #258a88, #4aa8dc);
        }
        .login-card {
            width: min(100%, 470px);
            padding: 30px;
            background: rgba(255,255,255,.97);
            border: 1px solid var(--line);
            border-radius: 24px;
            box-shadow: 0 18px 50px rgba(31,53,83,.13);
        }
        img { display: block; width: 100%; height: auto; margin-bottom: 24px; }
        h1 { margin: 0 0 8px; color: var(--blue); font-size: 29px; }
        p { margin: 0 0 24px; color: var(--muted); line-height: 1.5; }
        label { display: block; margin: 16px 0 7px; color: var(--muted); font-weight: 700; }
        input {
            width: 100%;
            padding: 15px 16px;
            color: var(--ink);
            background: #f4f7fb;
            border: 2px solid var(--line);
            border-radius: 13px;
            font: inherit;
            outline: none;
        }
        input:focus { background: #fff; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(74,168,220,.16); }
        .remember-toggle {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 18px;
            color: var(--ink);
            cursor: pointer;
        }
        .remember-toggle input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            opacity: 0;
            pointer-events: none;
        }
        .remember-toggle-control {
            position: relative;
            flex: 0 0 auto;
            width: 48px;
            height: 28px;
            background: #d7dfeb;
            border: 2px solid #c5cfdd;
            border-radius: 999px;
            transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .remember-toggle-control::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(31, 53, 83, .25);
            transition: transform .18s ease;
        }
        .remember-toggle input:checked + .remember-toggle-control {
            background: var(--magenta);
            border-color: var(--magenta);
        }
        .remember-toggle input:checked + .remember-toggle-control::after {
            transform: translateX(20px);
        }
        .remember-toggle input:focus-visible + .remember-toggle-control {
            box-shadow: 0 0 0 4px rgba(74,168,220,.22);
        }
        .remember-toggle-copy {
            display: grid;
            gap: 2px;
        }
        .remember-toggle-copy strong { font-size: 15px; }
        .remember-toggle-copy small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
        button {
            width: 100%;
            margin-top: 22px;
            padding: 15px;
            color: #fff;
            background: linear-gradient(135deg, var(--magenta), #b51c6c);
            border: 0;
            border-radius: 13px;
            font: inherit;
            font-weight: 800;
            cursor: pointer;
        }
        .error { margin: 18px 0 0; padding: 12px 14px; color: #a60c13; background: #fff0f0; border: 1px solid #f0bfc1; border-radius: 11px; }
        .hint { margin: 8px 0 0; font-size: 13px; }
        .secondary-auth-form button {
            margin-top: 10px;
            color: var(--blue);
            background: #eef3f9;
        }