body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

form {
  max-width: 20rem;
}

label {
  display: block;
  margin-bottom: 0.25rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #888;
  border-radius: 0.25rem;
}

.hint {
  font-size: 0.875rem;
  color: #555;
}

/* :user-valid / :user-invalid statt :valid / :invalid — reagieren erst NACH
   echter Nutzer-Interaktion (Tippen + Blur), nicht schon beim Laden der
   leeren Pflichtfeld-Seite. 92%+ global (caniuse), Lücke: ältere Safari. */
input:user-invalid {
  border-color: #c62828;
}

input:user-valid {
  border-color: #1a6b3a;
}