* { box-sizing: border-box; }

body {
  font-family: sans-serif;
  background: linear-gradient(to right, #1f4037, #99f2c8);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  max-width: 400px;
  width: 100%;
}

h2 { text-align: center; margin-bottom: 1.5rem; }

label { display: block; margin-bottom: .5rem; font-weight: bold; }

/* Inputs: email/password/text – einheitlich */
input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: .75rem;
  margin-bottom: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  line-height: 1.2;
  font: inherit;
}

/* Haupt-Button */
button {
  width: 100%;
  padding: .75rem;
  background-color: #1f4037;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .3s ease;
}
button:hover { background-color: #163029; }

@media (max-width: 480px) {
  .login-container { padding: 1.5rem; }
}

.password-field {
  position: relative;
  margin-bottom: 1.2rem;           /* NEU: Abstand gehört hierher */
}

/* Passwortfeld + Toggle + Caps-Warnung */
.password-field { position: relative; }
/* Das Input im Wrapper hat KEIN margin-bottom und Platz rechts fürs Auge */
.password-field input[type="password"],
.password-field input[type="text"] {
  margin-bottom: 0;                 /* WICHTIG: sonst ist der Wrapper höher als das Feld */
  padding-right: 42px;
}

/* Toggle-Button vertikal zentrieren */
.toggle-pw {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);      /* echte Mitte */
  width: auto;
  padding: 6px;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: 6px;
  top: calc(50% - 1px);
}
.toggle-pw:hover { background: rgba(0,0,0,.05); }
.toggle-pw:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
.toggle-pw .icon-hide { display: none; }
.toggle-pw[aria-pressed="true"] .icon-show { display: none; }
.toggle-pw[aria-pressed="true"] .icon-hide { display: inline; }

.caps-warning {
  font-size: 12px; color: #b91c1c;
  margin-top: -.8rem; margin-bottom: 1rem;
  display: none;
}
.caps-warning.show { display: block; }