/* Anmeldeseite des BSD-Portals.

   HERKUNFT DER FARBEN: dieselben Werte wie das Blatt dahinter, ausgelesen
   aus der Live-Website des Kunden (globals.css, Block @theme). Nichts hier
   ist erfunden. Wer sie aendert, aendert sie dort zuerst.

   WARUM DIE SCHRIFTEN AUS DEM SYSTEM KOMMEN: diese Seite laedt VOR der
   Anmeldung, also fuer jeden, der die Adresse kennt. Dorthin gehoeren keine
   300 KB Schriftdaten. Das Blatt dahinter bringt seine Schriften selbst mit,
   eingebettet, ohne Abruf bei einem Dritten.

   WARUM SO WENIG DARAUF STEHT: wer hier landet, hat eine Mail mit dem
   Zugang bekommen. Er braucht zwei Felder und einen Knopf. Jeder weitere
   Satz erklaert ein Problem, das er nicht hat. */

:root {
  --primary: #e2001a;
  --primary-dark: #b80015;
  --ink: #161614;
  --paper: #f4f2ee;
  --surface: #ffffff;
  --text: #232320;
  --muted: #6e6b66;
  --line: #dcd9d3;
  --radius-sm: 4px;
  --radius-md: 6px;
  --schatten: 0 18px 40px -18px rgba(22, 22, 20, .28);
}

* { box-sizing: border-box; }

.login-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--schatten);
  padding: 34px 30px 28px;
}

/* Die Schmuckzeile in Versalien und weitem Sperrsatz: dieselbe Rolle wie
   die Kicker-Zeile auf dem Blatt, damit beide Seiten erkennbar zusammen
   gehoeren, auch ohne dass die Markenschrift geladen wird. */
.brand {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
}

h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 10px 0 22px;
}

.field { margin-bottom: 15px; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(226, 0, 26, .16);
}

button {
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}

button:hover { background: var(--primary-dark); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Die Fehlermeldung sagt nie, ob der Benutzername oder das Passwort falsch
   war. Wer beides raten muss, hat es doppelt so schwer. */
.error {
  margin: 0 0 18px;
  padding: 11px 13px;
  font-size: 14px;
  background: #fdf0f1;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--primary-dark);
}

.hinweis-klein {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}