/* Nur der öffentliche Login. Passwort-setzen und die angemeldete App behalten ihre Gestaltung. */
#login-view {
  --login-tinte: #2a211a;
  --login-ruhig: #60564e;
  --login-rahmen: #807064;
  --login-akzent: #b74315;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 4vh, 40px) 16px;
  color: var(--login-tinte);
  font-size: 16px;
}

#login-view .login-zurueck {
  width: 100%;
  max-width: 440px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--login-ruhig);
  text-decoration: none;
}

#login-view .login-karte {
  width: 100%;
  max-width: 440px;
  min-width: 0;
  gap: 18px;
  padding: 28px;
  border: 1px solid #dfd5ca;
  border-top: 4px solid var(--login-akzent);
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 10px 30px -16px rgba(42, 33, 26, .3);
}

#login-view .login-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

#login-view .login-marke img { flex: none; }
#login-view .login-kopf h1 { text-align: left; font-size: 30px; line-height: 1.15; }
#login-view .login-kopf .untertitel { margin-top: 6px; text-align: left; font-size: 16px; color: var(--login-ruhig); }
#login-view .login-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#login-view .login-karte label { font-size: 16px; line-height: 1.4; color: var(--login-tinte); }

#login-view .login-feld input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px;
  border: 2px solid var(--login-rahmen);
  border-radius: 8px;
  background: #fff;
  color: var(--login-tinte);
  font-family: inherit;
  font-size: 16px;
  box-shadow: none;
}

#login-view .login-feld input::placeholder { color: #72675d; opacity: 1; }
#login-view .login-passwort-gruppe { display: flex; min-width: 0; border: 2px solid var(--login-rahmen); border-radius: 8px; background: #fff; }
#login-view .login-passwort-gruppe input { flex: 1; width: 0; border: 0; min-height: 48px; }
#login-view .login-passwort-gruppe button {
  flex: none;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-left: 1px solid #dfd5ca;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: var(--login-tinte);
  font: inherit;
  font-weight: 600;
  box-shadow: none;
}
#login-view .login-passwort-gruppe button[aria-pressed="true"] { background: #f6e7dc; }
#login-view .login-passwort-gruppe:focus-within { outline: 3px solid var(--login-akzent); outline-offset: 3px; }
#login-view .login-passwort-gruppe input:focus { outline: none; box-shadow: none; }
#login-view .login-feld input[aria-invalid="true"] { border-color: #a52722; }

#login-view .login-hinweis { margin: 0; font-size: 14px; line-height: 1.45; color: var(--login-ruhig); }
#login-view .login-merken .check-zeile { display: flex; align-items: center; min-height: 36px; gap: 9px; }
#login-view .login-merken input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--login-akzent); }
#login-view .login-merken .login-hinweis { margin: 3px 0 0 29px; }
#login-view .login-button { min-height: 52px; background: var(--login-akzent); color: #fff; font-size: 17px; font-weight: 700; box-shadow: none; }
#login-view .login-button:hover:not(:disabled) { background: #973510; }
#login-view .schlicht { min-height: 44px; margin: -8px 0; padding: 10px 0; color: var(--login-akzent); font-size: 16px; }
#login-view :where(button, a, input, summary):focus-visible { outline: 3px solid var(--login-akzent); outline-offset: 3px; }
#login-view .login-button:focus-visible { outline-color: var(--login-tinte); }
#login-view a { overflow-wrap: anywhere; color: var(--login-akzent); text-underline-offset: 3px; }
#login-view a:hover { text-decoration: underline; }

#login-view #login-fehler,
#login-view #login-status { margin: 0; padding: 12px; border-radius: 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
#login-view #login-fehler { color: #86211d; border: 1px solid #c77c72; background: #fff1ed; }
#login-view #login-status { color: #25502f; border: 1px solid #89a68c; background: #f0f7ef; }
#login-view .login-hilfe { border-top: 1px solid #dfd5ca; border-bottom: 1px solid #dfd5ca; padding: 3px 0; }
#login-view .login-hilfe summary { min-height: 44px; padding: 11px 0; font-size: 15px; font-weight: 600; cursor: pointer; }
#login-view .login-hilfe p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--login-ruhig); }
#login-view .login-registrieren { margin: 0; font-size: 15px; line-height: 1.7; }
#login-view .login-registrieren a { display: inline-block; padding: 4px 0; font-weight: 700; }
#login-view .hilfe-zeichen { color: var(--login-ruhig); font-size: 14px; }

@media (max-width: 380px) {
  #login-view { padding-inline: 12px; }
  #login-view .login-karte { padding: 22px 18px; }
  #login-view .login-passwort-gruppe button { padding-inline: 9px; }
}