/* Die Seiten, die NUTZER sehen: Login, Registrierung, Passwort, Profil.
 *
 * **Diese Gestaltung ist nicht neu erfunden.** Sie stand bereits inline in
 * `passwort_web.html` und `email_wechsel_web.html` - gebaut gegen die
 * Prototypen aus dem Login-Brief. Hier ist sie herausgeloest, damit die
 * uebrigen Seiten dasselbe zeigen und nicht jede ihre eigene Fassung
 * bekommt.
 *
 * Der Verwaltungsbereich bleibt unberuehrt: Er ist ein internes Werkzeug.
 * Wer ihn benutzt, kennt ihn; wer hier landet, hat die App erwartet.
 */

.konto-seite {
  margin: 0;
  min-height: 100vh;
  background: var(--v3-flaeche);
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--v3-schwarz);
}

.konto-rahmen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 40px 24px;
}

.konto-marke {
  width: 48px;
  height: 48px;
  border-radius: var(--v3-radius-marke);
  display: block;
}

.konto-karte {
  margin-top: 28px;
  width: 100%;
  max-width: 440px;
  background: var(--color-white);
  border-radius: var(--v3-radius-karte);
  padding: 36px;
}

/* Das Profil traegt mehrere Abschnitte und braucht mehr Breite. */
.konto-karte--breit {
  max-width: 640px;
}

.konto-karte h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.4px;
}

.konto-karte h2 {
  margin: 32px 0 0 0;
  font-size: 18px;
  font-weight: 600;
}

.konto-unterzeile {
  margin: 10px 0 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v3-grau-text);
}

.konto-karte label {
  display: block;
  margin: 24px 0 8px 0;
  font-size: 14px;
  font-weight: 500;
}

.konto-karte input[type="text"],
.konto-karte input[type="email"],
.konto-karte input[type="password"],
.konto-karte select {
  width: 100%;
  height: var(--v3-feldhoehe);
  padding: 0 16px;
  border: 1px solid var(--v3-grau-rand);
  border-radius: var(--v3-radius-feld);
  font-family: inherit;
  font-size: 15px;
  color: var(--v3-schwarz);
  background: var(--color-white);
}

.konto-karte input:focus,
.konto-karte select:focus {
  outline: none;
  border-color: var(--v3-orange);
}

.konto-karte input::placeholder {
  color: var(--v3-grau-platzhalter);
}

.konto-karte input:disabled {
  background: var(--color-bg-secondary);
  color: var(--v3-grau-text);
}

.konto-knopf {
  margin-top: 24px;
  width: 100%;
  height: var(--v3-feldhoehe);
  border: none;
  border-radius: var(--v3-radius-feld);
  background: var(--v3-orange);
  color: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.konto-knopf:hover {
  background: var(--color-primary-hover);
}

.konto-knopf--leise {
  background: var(--color-white);
  color: var(--v3-schwarz);
  border: 1px solid var(--v3-grau-rand);
}

.konto-knopf--gefahr {
  background: var(--v3-rot);
  color: var(--color-white);
}

.konto-links {
  margin: 20px 0 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--v3-grau-text);
}

.konto-links a {
  color: var(--v3-orange);
  text-decoration: none;
  font-weight: 500;
}

.konto-links a:hover {
  text-decoration: underline;
}

/* Meldungen. Bewusst flaechig statt mit Rahmen: Die App kennt keine
 * umrandeten Kaesten, und ein Fehler soll ruhig aussehen, nicht laut. */
.konto-meldung {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--v3-radius-feld);
  font-size: 14px;
  line-height: 1.5;
}

.konto-meldung--fehler {
  background: var(--color-bg-pastel-red);
  color: var(--v3-rot);
}

.konto-meldung--erfolg {
  background: var(--color-bg-pastel-green);
  color: var(--v3-gruen);
}

.konto-meldung--hinweis {
  background: var(--v3-orange-hell);
  color: var(--v3-schwarz);
}

.konto-abschnitt {
  margin-top: 8px;
  padding-top: 8px;
}

.konto-abschnitt + .konto-abschnitt {
  border-top: 1px solid var(--v3-grau-rand);
  margin-top: 28px;
  padding-top: 20px;
}

.konto-fuss {
  margin-top: 28px;
  font-size: 13px;
  color: var(--v3-grau-text);
  text-align: center;
}

.konto-fuss a {
  color: var(--v3-grau-text);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .konto-rahmen {
    padding: 40px 16px 32px 16px;
  }

  .konto-karte {
    padding: 28px 22px;
  }
}

/* Zustimmung: Kaestchen und Text nebeneinander, oben ausgerichtet -
 * der Text laeuft ueber zwei Zeilen, das Kaestchen soll bei der ersten
 * bleiben. */
.konto-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.konto-zustimmung input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  accent-color: var(--v3-orange);
  flex-shrink: 0;
}

.konto-zustimmung a {
  color: var(--v3-orange);
}

/* Wird beim Tippen gesetzt, wenn die Passwoerter auseinanderlaufen. */
.konto-feld--fehler {
  border-color: var(--v3-rot);
}

/* Ein Link, der wie der Knopf aussieht. Eigene Klasse, weil ein <a>
 * weder Hoehe noch Zentrierung von selbst mitbringt. */
.konto-knopf--link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Knoepfe ohne Klasse. Die aus dem Login-Brief uebernommenen Seiten
 * setzen `<button type="submit">` ohne Klassennamen - statt sie alle
 * anzufassen, gilt der Knopf-Stil in der Karte auch dort. */
.konto-karte button[type="submit"] {
  margin-top: 24px;
  width: 100%;
  height: var(--v3-feldhoehe);
  border: none;
  border-radius: var(--v3-radius-feld);
  background: var(--v3-orange);
  color: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.konto-karte button[type="submit"]:hover {
  background: var(--color-primary-hover);
}

/* Die neue Adresse auf „E-Mail geaendert" - hervorgehoben, weil sie das
 * Einzige ist, was auf der Seite gepruft werden soll. `word-break`, weil
 * lange Adressen sonst aus der Karte laufen. */
.konto-adresse {
  margin: 20px 0 0 0;
  padding: 16px 18px;
  background: var(--v3-orange-hell);
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-all;
}

/* Der Loeschbereich. Abgesetzt, aber nicht rot geschrien: Wer hier
 * landet, sucht ihn - erschrecken muss man ihn nicht, nur bremsen. */
.konto-abschnitt--gefahr {
  margin-top: 32px;
  padding: 20px;
  border: 1px solid var(--v3-grau-rand);
  border-radius: 18px;
  background: var(--color-bg-secondary);
}

.konto-abschnitt--gefahr h2 {
  margin-top: 0;
}

.konto-abschnitt--gefahr .konto-knopf--gefahr:hover {
  background: var(--color-danger-dark);
}