.form-container {
  width: 100%;
}
.newsletter-form {
  margin: 1em auto;
  width: 50%;
}
.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}
.form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #121212;
}
.form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="number"] {
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.newsletter-anmelde-btn {
  width: 50%;
  margin: 2em 1em 2em 0em;
  padding: 1em;
  border: 0.1em solid var(--color-main-8);
  border-radius: 2em;
  text-transform: uppercase;
}
.form-check {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1em;
}
.newsletter-anmelde-btn:hover {
  background-color: var(--color-main-8);
  color: white;
  cursor: pointer;
}
.newsletter-abmelde-btn {
  width: 25%;
  margin: 2em 1em 2em 0em;
  padding: 1em;
  border: 0.1em solid var(--color-main-1);
  border-radius: 2em;
  text-transform: uppercase;
}
.newsletter-abmelde-btn:hover {
  background-color: var(--color-main-1);
  color: white;
  cursor: pointer;
}

.anzeige-misserfolg {
  color: red;
}
.form-group input.input-error {
  border: 2px solid red;
  background-color: #ffe6e6;
}


/* Mobile Portrait: untereinander */
@media (max-width: 768px) {
  .newsletter-form {
    width: 90%;
  }
  .newsletter-abmelde-btn {
    width: 80%;
    margin: 2em 1em 2em 0em;
    padding: 1em;
    border: 0.1em solid var(--color-main-1);
    border-radius: 2em;
    text-transform: uppercase;
  }

}