@keyframes login-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes login-pop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  .login-in {
    opacity: 0;
    animation: login-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .login-pop {
    animation: login-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .login-in, .login-pop { animation: none !important; opacity: 1 !important; transform: none !important; }
  }

  .login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 34px;
  }
  .login-brand .brand-logo { font-size: 2.5rem; }

  .gate-screen { margin-top: 0; }

  /* ---------- Anmeldung mit Passkey oder Code (T-26, Mockup LoginPasskey) ---------- */
  .login-karte {
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 24px 24px;
    box-sizing: border-box;
    align-items: stretch;
    text-align: left;
  }
  .login-karte[hidden], .login-oder[hidden] { display: none; }
  .login-karte { width: 100%; min-width: 0; }
  .login-karte h2 { font-size: 1.35rem; overflow-wrap: anywhere; hyphens: auto; }
  .login-karte .login-form { max-width: none; }
  .login-hinweis { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
  .login-dunkel { color: var(--ink); }
  .login-breit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    border-radius: 999px;
    font-weight: 700;
  }
  .login-oder {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .login-oder span { flex: 1; height: 1px; background: var(--border); }
  .login-label { font-size: 0.85rem; font-weight: 700; }
  .login-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
  }
  .login-code[aria-invalid="true"] { border-color: var(--danger); }
  .login-info {
    background: var(--surface-alt);
    color: var(--lavender-ink);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .login-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .login-linkknopf { background: none; border: none; padding: 0; cursor: pointer; min-height: 44px; }
  .login-fuss { margin: 0; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.5; }
  .login-status:empty { display: none; }
  /* Passkey-Angebot nach der Anmeldung mit Code (Mockup LoginPasskeyAngebot) */
  .login-angemeldet {
    align-self: flex-start;
    margin: 0;
    background: #e3f2ea;
    color: #2f6f55;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .login-ok { margin: 4px 0 0; color: #2f6f55; font-size: 0.9rem; font-weight: 600; line-height: 1.55; }
  .login-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
  .login-knoepfe > button { min-height: 46px; border-radius: 999px; font-weight: 700; padding: 10px 22px; }
  @media (max-width: 480px) {
    .login-knoepfe { flex-direction: column; }
    .login-knoepfe > button { width: 100%; }
  }