/* Cascade Layers: Inhalt in @layer features gehüllt – die Layer-Reihenfolge
   ist einmal in css/main.css deklariert (Base < Layout < Components <
   Features < Utilities); dieser per <link> geladene Block hängt sich per
   Name in den features-Layer ein. Begründung: DESIGN.md »Cascade Layers«. */
@layer features {
  /* Login-Seite: „Login mit Bexio"-Button (OIDC-SSO) und Trenner zum
   Notfall-Login. Allgemeine Button-/Card-Stile kommen aus main.css. */

  /* Primärer SSO-Button. Ein <a>, das wie ein Button aussieht – über die volle
   Breite, mit Lucide-Icon. Hover-Verhalten konsistent mit den globalen Buttons. */
  .btn-bexio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--rw-black);
    color: var(--rw-white);
    border-radius: var(--rw-radius);
    text-decoration: none;
    font-weight: 400;
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      box-shadow 0.2s ease;
  }

  .btn-bexio:hover,
  .btn-bexio:focus-visible,
  .btn-bexio:active {
    background: var(--rw-green);
    color: var(--rw-black);
    box-shadow: var(--rw-shadow-btn-hover);
  }

  .btn-bexio svg {
    width: 1.1em;
    height: 1.1em;
  }

  /* „oder"-Trenner zwischen SSO und Passwort-Login. */
  .login-trenner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--rw-muted);
    font-size: 0.875rem;
  }

  .login-trenner::before,
  .login-trenner::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rw-border);
  }
}