.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.login-logo { height: 40px; }

/* Groesse/Zeilenhoehe kommen aus .optic-h1 im gemeinsamen Stylesheet
   (55px, responsiv bis 25px) - hier nur der Abstand, den das Flex-gap
   der Seite ohnehin setzt. */
.login-page h1 { margin: 0; }

.login-intro,
.login-help,
.login-message {
  max-width: 32rem;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  max-width: 20rem;
  margin-top: 1rem;
  text-align: left;
}

.login-input {
  height: 40px;
  width: 100%;
  padding: 0 .75rem;
  border: 1px solid #b2bac2;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.login-submit {
  width: 100%;
  margin-top: 1rem;
}

.login-message { font-weight: 700; }
.login-message.is-error { color: #b3261e; }