/* Ausgelagert aus views/login.ejs (Welle 5). */

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    /* tokens inherited from /css/admin.css (Paper palette) */
    body{font-family:var(--font-ui);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
      background:radial-gradient(1200px 600px at 10% -10%,var(--accent) 0%,transparent 50%),radial-gradient(1000px 500px at 110% 110%,var(--accent-strong) 0%,transparent 45%),var(--sb);color:var(--text)}
    .card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
    .head{padding:2rem 2rem 1.25rem;text-align:center}
    .logo{width:54px;height:54px;border-radius: var(--r-xl);background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size: var(--fs-2xl);color: var(--akzent-auf);margin:0 auto 1rem;box-shadow:var(--shadow-md)}
    h1{font-size:var(--fs-lg);font-weight:800;letter-spacing:-0.02em}
    h1 svg{vertical-align:-0.12em;color:var(--warn)}
    .sub{font-size: var(--fs-md);color:var(--text-muted);margin-top:0.35rem;line-height:1.5}
    .body{padding:0.5rem 2rem 2rem}
    .fg{display:flex;flex-direction:column;gap: var(--sp-xs);margin-bottom:1rem}
    label{font-size: var(--fs-base);font-weight:650;color:var(--text)}
    input{padding:0.7rem 0.85rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size: var(--fs-lg);font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
    input::placeholder{color:var(--text-light)}
    input:hover{border-color:var(--border-strong)}
    input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
    .btn{width:100%;padding:0.8rem;border:none;border-radius:var(--radius-sm);background:var(--grad);color: var(--akzent-auf);font-size: var(--fs-lg);font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s;margin-top:0.25rem;box-shadow:var(--sh)}
    .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
    .btn:active{transform:translateY(0.5px)}
    .btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}
    .err{background:var(--danger-tint);color:var(--danger);padding:0.65rem 0.85rem;border-radius:var(--radius-sm);font-size: var(--fs-base);font-weight:600;margin-bottom:1rem;display:none;border:1px solid var(--danger-tint)}
    .err.show{display:block}
    .switch{margin-top:1.1rem;text-align:center;font-size: var(--fs-base);color:var(--text-muted)}
    /* --accent ist waehlbar und kann jede Helligkeit haben; auf dem
       dunklen Grund kam der Link gemessen auf 3.5:1. Zur Textfarbe hin
       gemischt behaelt er seinen Ton und traegt in jeder Wahl — derselbe
       Griff wie bei der Marke in der Tour. */
    .switch a{color:color-mix(in srgb,var(--accent) 45%,var(--text));font-weight:700;text-decoration:none}
    /* Tippziel 44 px (gemessen 89x14): der Link steht in einem Satz, die
       Flaeche waechst darum nur in der Hoehe und um etwas Luft seitlich. */
    .switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
    .switch a:hover{color:var(--text)}
    .switch a:hover{text-decoration:underline}
    .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} /* honeypot: für Menschen unsichtbar */
    .foot{padding:1rem 2rem;border-top:1px solid var(--border);text-align:center;font-size: var(--fs-sm);color:var(--text-light)}