/* Gesamter Formularbereich */
.heart-formular-bereich {
  width: 100%;
  padding: 70px 20px 90px;
  background: #000000;
}

/* Inhalt auf großen Bildschirmen begrenzen */
.heart-formular-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Überschrift */
.heart-formular-container h1 {
  margin: 0 0 16px;
  color: #e60076;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* Einleitungstext */
.heart-formular-intro {
  max-width: 560px;
  margin: 0 auto 42px;
  color: #555555;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

/* Einzelnes Feld */
.heart-formular-feld {
  margin-bottom: 24px;
}

/* Beschriftungen */
.heart-formular label {
  display: block;
  margin-bottom: 8px;
  color: #e60076;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Eingabefelder */
.heart-formular input[type="text"],
.heart-formular input[type="email"],
.heart-formular input[type="tel"],
.heart-formular input[type="date"],
.heart-formular textarea {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #cfcfcf;
  border-radius: 0;
  background-color: #eeeeee;
  color: #111111;
  font: inherit;
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Adressfeld */
.heart-formular textarea {
  min-height: 120px;
  resize: vertical;
}

/* Fokuszustand */
.heart-formular input:focus,
.heart-formular textarea:focus {
  outline: none;
  border-color: #111111;
  background-color: #f7f7f7;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12);
}

/* Datenschutz-Checkbox */
.heart-formular .heart-formular-datenschutz {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 32px 0;
  color: #e60076;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.heart-formular-datenschutz input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.heart-formular-datenschutz a {
  color: #e60076;
  text-decoration: underline;
}

/* Absende-Button */
.heart-formular button {
  display: block;
  width: 100%;
  padding: 16px 22px;
  border: 1px solid #111111;
  border-radius: 0;
  background: #e60076;
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.heart-formular button:hover {
  background: #ffffff;
  color: #111111;
}

/* Honeypot unsichtbar machen */
.heart-formular-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Darstellung auf kleinen Bildschirmen */
@media (max-width: 600px) {
  .heart-formular-bereich {
    padding: 48px 16px 64px;
  }

  .heart-formular-container h1 {
    font-size: 2.4rem;
  }

  .heart-formular-intro {
    margin-bottom: 32px;
  }
}