/* gsv2.com/login — nur das Layout DIESER Seite.

   Alles Grundsätzliche kommt aus dem Design-Layer (gsv2.css): Karte, Knopf,
   Eingabefeld, Navbar, Fundament. Hier steht ausschließlich, was es dort nicht
   gibt — sonst entsteht eine zweite Fassung von Bausteinen, die überall gleich
   aussehen sollen. */

.login-main {
  /* Die Karte sitzt mittig im Blickfeld: auf dieser Seite gibt es genau eine
     Sache zu tun. Kein Hero, keine Beschreibung daneben. */
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-title {
  margin: 0;
  text-align: center;
  font-size: 1.65rem;
  font-weight: 600;
}

.login-discord {
  justify-content: center;
  width: 100%;
}

/* Trennlinie mit einem Wort in der Mitte — die beiden Wege sind gleichwertig,
   nicht Haupt- und Nebenweg. */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gsv2-text-dim);
  font-size: 0.85rem;
}

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

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.login-label {
  font-size: 0.85rem;
  color: var(--gsv2-text-muted);
}

.login-submit {
  justify-content: center;
  width: 100%;
}

.login-error,
.login-note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.login-error {
  color: var(--gsv2-danger);
}

.login-note {
  color: var(--gsv2-text-muted);
}

/* Die Nebenwege stehen als Text, nicht als Knopf: drei gleich aussehende Knöpfe
   untereinander machen aus einer Anmeldung eine Auswahlaufgabe. */
.login-alt {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.login-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gsv2-text-muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.15s var(--gsv2-ease);
}

.login-link:hover {
  color: var(--gsv2-accent);
}

.login-link[hidden] {
  display: none;
}