/*
 * Marke fuer die Anmeldemaske.
 *
 * Bewusst sparsam: Wir ueberschreiben Farbe, Marke und Rundung, nicht das
 * Verhalten. Keycloak pflegt Barrierefreiheit und Sicherheitsmeldungen seiner
 * Maske selbst — je weniger wir daran drehen, desto weniger geht bei einem
 * Keycloak-Update kaputt.
 *
 * Die Werte spiegeln die Tokens aus @saims/ui. Sie stehen hier doppelt, weil
 * Keycloak ein eigener Dienst ist und unsere Tokens nicht kennt; beim
 * Instanz-Aufbau werden beide aus derselben Konfiguration erzeugt.
 */

:root {
  --saims-accent: #1b4f8a;
  --saims-chrome: #16223a;
  --saims-surface: #ffffff;
  --saims-sunken: #f5f6f8;
  --saims-border: #d8dde6;
  --saims-radius: 6px;
}

body {
  background: var(--saims-sunken);
}

/* Der Kopfbereich traegt die Bildmarke statt des Realm-Namens. */
#kc-header,
.login-pf-page-header {
  text-align: center;
}

#kc-header-wrapper {
  display: block;
  padding: 0;
  overflow: hidden;
  text-indent: -999em;
  white-space: nowrap;
  background: url('../img/marke.svg') no-repeat center / contain;
  height: 56px;
  margin-bottom: 1.5rem;
}

.card-pf,
.login-pf-page .card-pf {
  border: 1px solid var(--saims-border);
  border-radius: calc(var(--saims-radius) * 2);
  box-shadow:
    0 1px 2px rgb(22 34 58 / 8%),
    0 4px 12px rgb(22 34 58 / 6%);
}

.pf-c-button.pf-m-primary,
input[type='submit'].pf-c-button,
#kc-login {
  background: var(--saims-accent);
  border-color: var(--saims-accent);
  border-radius: var(--saims-radius);
}

.pf-c-form-control:focus,
input:focus {
  outline: 2px solid var(--saims-accent);
  outline-offset: 1px;
}

/* Der Fuss mit dem Weg zu Impressum und Datenschutz.
   Ruhig: Er gehoert nicht zum Anmelden, er steht nur staendig zur Verfuegung
   (§ 5 DDG). */
.saims-rechtsverweise {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  text-align: center;
}

.saims-rechtsverweise a {
  font-size: 0.8125rem;
  opacity: 0.75;
}