/* ===========================================================================
   Anmeldung, Konto und Verwaltung.
   Ergänzt style.css; Farben, Schriften und Schaltflächen kommen von dort.

   Dieselbe Bildsprache wie die Firmenseite: weiße Karte mit blauer Oberkante
   auf hellgrauem Grund, Poppins in den Überschriften, orange Akzente.
   =========================================================================== */

/* Kopfleiste oben, Karte darunter mittig: die Leiste ist ein Geschwister
   der Karte, deshalb Spalte statt Reihe. */
body.konto {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--page);
}

.konto__karte {
  width: 100%;
  max-width: 440px;
  margin: 48px auto 64px;
  padding: 32px 34px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--blau);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Die Verwaltung braucht Platz für die Benutzertabelle. */
body.konto--breit .konto__karte { max-width: 1080px; }

.konto__kopf {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
body.konto--breit .konto__kopf { text-align: left; }

.konto__kopf .logo {
  height: 44px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}
body.konto--breit .konto__kopf .logo { margin-left: 0; }

.konto__kopf h1 { margin: 0; font-size: 22px; }

.konto__lead {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--muted);
}

.konto__hinweis {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.konto__zusatz {
  margin-top: 18px;
  font-size: 15px;
}
.konto__zusatz--klein { font-size: 14px; color: var(--muted); }

.konto__karte h2 {
  margin: 34px 0 4px;
  font-size: 18px;
}

/* Die Schaltfläche im Anmeldeformular trägt die Seite - volle Breite. */
.konto__karte form > .knopf--primaer,
.konto__karte form > button.knopf--primaer { width: 100%; text-align: center; }

body.konto--breit .konto__karte form > .knopf--primaer,
body.konto--breit .konto__karte form > button.knopf--primaer { width: auto; }

.konto__fuss {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}
.konto__fuss p { margin: 4px 0; }
.konto__fuss a { color: var(--blau); }

@media (max-width: 560px) {
  .konto__karte { margin: 24px 14px 40px; padding: 24px 20px; }
}