/* Die Anmeldeseite. Eigener Code, Aussehen 1:1 wie zuvor.
   Alle Masse am gespiegelten Original abgemessen:
     Kopfzeile 65 px, Spalte 600 px zentriert, Knopf 40 px hoch,
     Radius 4 px, Akzent rgb(0,152,255), Schrift Suisse Int'l 16 px.
   Die Felder sind der Material-Stil mit schwebender Beschriftung -- deshalb
   steht die Beschriftung IM Rahmen und wandert beim Tippen nach oben. */

:root {
  --a-blau: #0098FF;
  --a-text: #333333;
  --a-grau: #9F9F9F;
  --a-rand: #E0E0E0;
  --a-hell: #F5F5F5;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #fff; color: var(--a-text);
  font-family: 'Suisse Intl', "Suisse Int'l", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

.a-kopf {
  height: 65px; display: flex; align-items: center; padding: 0 24px;
  border-bottom: 1px solid var(--a-rand);
}
.a-marke {
  font-size: 20px; font-weight: 600; color: var(--a-blau); text-decoration: none;
}
.a-sprache { margin-left: auto; position: relative; }
.a-sprachknopf {
  display: flex; align-items: center; gap: 6px;
  background: var(--a-hell); border: none; border-radius: 4px;
  padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--a-text);
}
.a-sprachknopf:hover { background: #ECECEC; }
.a-sprachliste {
  position: absolute; right: 0; top: 44px; background: #fff; border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); padding: 4px 0; min-width: 132px; z-index: 10;
}
.a-sprachliste button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; color: var(--a-text);
}
.a-sprachliste button:hover { background: var(--a-hell); }

.a-mitte { max-width: 600px; margin: 0 auto; padding: 150px 0 40px; }
.a-titel { font-size: 40px; font-weight: 400; text-align: center; margin: 0 0 54px; }

/* Feld im Material-Stil: der Rahmen hat oben eine Lücke für die
   Beschriftung. Gebaut mit einer Legende im Feldsatz -- so bleibt die
   Lücke genau so breit wie der Text, ohne Rechnerei in JavaScript. */
.a-feld { position: relative; margin-bottom: 26px; }
.a-feld fieldset {
  position: absolute; inset: -5px 0 0; margin: 0; padding: 0 8px;
  border: 1px solid var(--a-rand); border-radius: 4px; pointer-events: none;
}
.a-feld legend {
  padding: 0 5px; font-size: 12px; color: var(--a-grau);
  max-width: 0.01px; visibility: hidden; white-space: nowrap;
}
.a-feld.gefuellt legend, .a-feld:focus-within legend { max-width: 100%; }
.a-feld:focus-within fieldset { border-color: var(--a-blau); border-width: 2px; }
.a-feld.fehlerhaft fieldset { border-color: #FB472E; }

.a-feld input {
  position: relative; z-index: 1; width: 100%; border: none; outline: none;
  background: transparent; font: inherit; font-size: 16px; color: var(--a-text);
  padding: 18px 16px;
}
.a-feld input::placeholder { color: #C4C4C4; }
.a-feld .a-marke-text {
  position: absolute; left: 13px; top: 18px; font-size: 16px; color: var(--a-grau);
  pointer-events: none; transition: all .12s ease-out; z-index: 2; background: #fff; padding: 0 3px;
}
.a-feld.gefuellt .a-marke-text, .a-feld:focus-within .a-marke-text {
  top: -8px; font-size: 12px; color: var(--a-blau);
}
.a-feld.fehlerhaft .a-marke-text { color: #FB472E; }
.a-auge {
  position: absolute; right: 8px; top: 12px; z-index: 3;
  border: none; background: none; cursor: pointer; color: var(--a-grau);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
}
.a-feldfehler { color: #FB472E; font-size: 12px; margin-top: 5px; padding-left: 2px; }

.a-merken { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 14px; }
.a-merken input { width: 18px; height: 18px; accent-color: var(--a-blau); margin: 0; }
.a-merken .a-hinweiszeichen { color: var(--a-grau); display: inline-flex; }

.a-knopf {
  width: 100%; height: 40px; border: none; border-radius: 4px;
  font: inherit; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.a-knopf.haupt { background: var(--a-blau); color: #fff; margin-bottom: 10px; }
.a-knopf.haupt:hover { background: #0089E6; }
.a-knopf.haupt[disabled] { background: #9ED8FF; cursor: default; }
.a-knopf.leise { background: var(--a-hell); color: var(--a-text); }
.a-knopf.leise:hover { background: #ECECEC; }

.a-vergessen { text-align: center; margin-top: 22px; }
.a-vergessen a { color: var(--a-blau); font-size: 14px; text-decoration: none; }
.a-vergessen a:hover { text-decoration: underline; }

.a-fehler {
  background: #FDECEA; color: #B3261E; border-radius: 4px;
  padding: 12px 14px; font-size: 14px; margin-bottom: 22px;
  display: flex; align-items: flex-start; gap: 10px;
}

.a-fuss { text-align: center; color: var(--a-grau); font-size: 10px; padding: 60px 0 24px; }

/* Zweiter Schritt */
.a-zurueck {
  background: none; border: none; color: var(--a-blau); font: inherit; font-size: 14px;
  cursor: pointer; padding: 0; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 6px;
}
.a-erklaerung { text-align: center; color: var(--a-text); font-size: 14px; margin: -34px 0 34px; }