/* Geteilte Stile der Auth-Seiten (Login, Zugang einrichten): das
   Abweisungs-Signal (#105) und das Branding-Layout (#109). Beide
   Seiten laden zusätzlich tokens.css + theme.css. */

/* Abweisungs-Signal (#105): kurzes Wackeln, das der Auslöser bei JEDEM
   Fehlversuch neu startet (classList.remove → Reflow → add). Bei
   prefers-reduced-motion keine Bewegung — Text/Fokus tragen dann. */
@keyframes ari-abweisung {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
.abweisung {
  animation: ari-abweisung 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .abweisung {
    animation: none;
  }
}

/* Branding (#109): Logo + Vereinsname über dem Formular. */
.marke {
  display: grid;
  justify-items: center;
  gap: var(--ari-abstand-2);
  margin-bottom: var(--ari-abstand-4);
  text-align: center;
}
.marke img {
  max-height: 64px;
  max-width: 70vw;
  object-fit: contain;
}
.marke .verein {
  font-size: var(--ari-font-gross);
  font-weight: 600;
  color: var(--ari-text);
}

/* Links (#173): Theme-Akzentfarbe statt Browser-Blau (AA hell und dunkel,
   ~5.5:1), dezent — Unterstreichung erst bei Hover/Fokus, sichtbarer
   Fokus-Ring (D-12). Gilt zentral für alle Auth-Seiten. */
a {
  color: var(--ari-akzent);
  text-decoration: none;
}
a:hover {
  color: var(--ari-akzent-hover);
  text-decoration: underline;
}
a:focus-visible {
  outline: 2px solid var(--ari-fokus);
  outline-offset: 2px;
  border-radius: var(--ari-radius-klein);
}