.app-scope form {
  display: flex;
  flex-direction: column;
  gap: 8px; /* optimaler Abstand zwischen Feldern */
  position: relative;
}

.app-scope .field {
  position: relative;
  width: 100%;
}

.app-scope .field input,
.app-scope .field textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 8px;
  border: none;
  background-color: #f1f3f6;
  font-size: 15px;
  color: #333;
  transition: box-shadow 0.2s ease;
  box-shadow: inset 0 0 0 2px transparent;
}

.app-scope .field input:focus,
.app-scope .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #008080;
  background-color: #ffffff;
}

.app-scope .field label {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--font-body);
  font-weight: 500;
  color: #888;
  pointer-events: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.app-scope .field input:not(:placeholder-shown) + label,
.app-scope .field input:focus + label,
.app-scope .field textarea:not(:placeholder-shown) + label,
.app-scope .field textarea:focus + label {
  top: -7px;
  left: 14px;
  font-size: 12px;
  color: #008080;
  background: #ffffff;
  padding: 0 4px;
  font-weight: 500;
}

.app-scope form .button {
  margin-top: 14px;
}