/* Anmeldeseite - bewusst eigenstaendig, ohne die Kopfleiste der Anwendung. */
*{box-sizing:border-box}
body.anmeldeseite{
  margin:0;min-height:100vh;
  font:15px/1.55 -apple-system,Segoe UI,Roboto,sans-serif;color:#1b2126;
  display:flex;align-items:center;justify-content:center;padding:24px;
  /* Blechgrau mit einem Anflug von Blau, wie das Zeichen selbst */
  background-color:#171e24;
  background-image:
    radial-gradient(1100px 620px at 18% -10%, #2f3c48 0%, transparent 62%),
    radial-gradient(900px 560px at 108% 108%, #2b4463 0%, transparent 60%),
    linear-gradient(160deg,#161d23 0%,#1e262e 48%,#141a20 100%);
}

.anmeldung{width:100%;max-width:390px}

.karte{
  background:#fff;border-radius:14px;padding:34px 32px 30px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
}
.zeichen{width:70px;height:auto;align-self:center;margin-bottom:16px}

.karte h1{
  margin:0;text-align:center;font-size:25px;font-weight:600;letter-spacing:.01em;
  color:#1b2126;
}
.karte h1 span{color:#4c7fb8;font-weight:400;margin-left:7px;font-size:17px;
  text-transform:uppercase;letter-spacing:.1em;vertical-align:2px}
.unterzeile{margin:6px 0 26px;text-align:center;font-size:12.5px;color:#7a828a;
  letter-spacing:.03em}

.karte label{font-size:13px;color:#4e565e;margin-bottom:5px}
.karte input{
  padding:11px 13px;border:1px solid #ccd3da;border-radius:8px;
  font-family:inherit;font-size:15px;margin-bottom:16px;background:#fbfcfd;
}
.karte input:focus{outline:none;border-color:#2563a8;background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,168,.15)}

.karte button{
  margin-top:4px;padding:12px 16px;border:0;border-radius:8px;
  background:#2563a8;color:#fff;font-family:inherit;font-size:15px;font-weight:500;
  cursor:pointer;transition:background .15s;
}
.karte button:hover:not(:disabled){background:#1d4f88}
.karte button:disabled{opacity:.6;cursor:default}

.fehler{margin:14px 0 0;padding:9px 12px;border-radius:7px;
  background:#f6e4e1;color:#8c2b2b;font-size:13.5px}

@media(max-width:420px){
  .karte{padding:28px 22px 24px}
}

/* Fassung ganz unten - auf dunklem Grund entsprechend heller.

   Dieselben drei Teile wie ueberall (stil.css), nur ohne die Trennlinie: Auf
   einem dunklen Verlauf waere sie ein Strich, der aussieht wie ein Fehler.

   Die Flex-Angaben muessen hier WIEDERHOLT werden, weil diese Regel die aus
   stil.css ueberschreibt. Vergisst man sie, klebt der Name an der Version -
   genau so stand es beim ersten Messen da. */
.fassungszeile{position:fixed;left:0;right:0;bottom:0;
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:2px 12px;margin:0;border-top:0;
  padding:11px 14px;font-size:11.5px;letter-spacing:.04em;color:#6b7783}
.fassungszeile b{color:#9aa6b2;font-weight:600}

/* Fehlerseite - dieselbe Karte wie die Anmeldung, nur mit anderem Inhalt. */
.fehlerkarte{text-align:center}
.kennzahl{margin:6px 0 0;font-size:54px;font-weight:600;line-height:1;
  color:#c8d0d8;letter-spacing:-.02em}
.fehlertitel{margin:10px 0 8px;font-size:18px;font-weight:600;color:#1b2126}
.fehlertext{margin:0 0 24px;font-size:13.5px;color:#6b7480;line-height:1.6}
.fehlertext code{background:#f2f5f7;border-radius:4px;padding:1px 6px;
  font-size:12.5px;word-break:break-all}
.knopfartig{display:block;padding:12px 16px;border-radius:8px;background:#2563a8;
  color:#fff;text-decoration:none;font-size:15px;font-weight:500;transition:background .15s}
.knopfartig:hover{background:#1d4f88}
/* Die Karte faerbt jeden Knopf blau - der Ruckweg soll aber nur ein Hinweis
   sein, kein zweites Angebot. Deshalb hier eine Stufe genauer. */
.karte button.zurueck{margin-top:8px;background:none;border:0;color:#6b7480;
  font-family:inherit;font-size:13px;cursor:pointer;padding:8px;font-weight:400}
.karte button.zurueck:hover{background:none;color:#2563a8;text-decoration:underline}

/* Das Kennzeichen einer Instanz, die nicht das Livesystem ist.

   Dieselbe Regel wie in stil.css, weil die Anmeldeseite mit Absicht ohne die
   Modulleiste und ohne deren Stilblatt auskommt. Gerade hier muss es stehen:
   Die Anmeldung ist der Augenblick, in dem man sich entscheidet, wo man
   arbeitet. */
.kennzeichenband{position:fixed;top:0;left:0;right:0;z-index:9999;
  background:repeating-linear-gradient(135deg,#8a5a0b,#8a5a0b 14px,#a06c12 14px,#a06c12 28px);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  text-align:center;padding:5px 12px;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}