/* form.css — Anmeldeformular-Karte (einladung/_form_card.php). Eigenständig, damit es sowohl auf
   /anmeldung/ als auch in der Einladungs-Sektion der Startseite geladen werden kann (ohne die
   globalen Resets von einladung.css). */

:root { --hd-green: #007854; }

.inv-signup__card .btn {
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease, color .15s ease, transform .15s ease, filter .15s ease;
}
.inv-signup__card {
  width: 100%;
  max-width: 560px;
  justify-self: end;
  background: #fff;
  color: #14221d;
  border-radius: 14px;
  padding: clamp(24px, 3.4vw, 40px);
}
.inv-signup__card h3 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--hd-green);
}
.inv-done:focus { outline: none; }
.inv-done__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--hd-green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.inv-signup__done-text { margin: 10px 0 22px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.inv-signup__card label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.inv-signup__card input[type="text"],
.inv-signup__card input[type="email"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;       /* 16px verhindert das Zoomen auf dem iPhone */
  padding: 13px 14px;
  border: 1.5px solid #b9c7c1;
  border-radius: 10px;
  background: #fff;
  color: #14221d;
}
.inv-signup__card input:focus-visible { outline: 3px solid rgba(0,120,84,.35); border-color: var(--hd-green); }
.inv-signup__card input[aria-invalid="true"] { border-color: #b3261e; }
.inv-err { color: #b3261e; font-size: 14px; font-weight: 500; min-height: 1.4em; margin: 5px 0 6px; }
.inv-err--form { margin-top: 12px; }
.inv-legal { font-size: 13px; line-height: 1.45; color: #4b5a54; margin: 6px 0 18px; }
.inv-legal a { color: var(--hd-green); }
.inv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inv-signup__card .btn { display: block; width: 100%; padding: 15px 22px; font-size: 17px; border-radius: 999px; border: 1.5px solid transparent; }
.btn--green { background: var(--hd-green); border-color: var(--hd-green); color: #fff; }
.btn--green:hover { background: #00664a; border-color: #00664a; }
.btn--green:disabled { opacity: .6; cursor: default; }
.inv-summary {
  background: #eef5f1;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  display: grid;
  row-gap: 8px;
  color: #14221d;
}
.inv-summary__row { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.35; font-weight: 500; }
.inv-summary__what, .inv-summary__when { font-weight: 600; }
.inv-summary__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--hd-green); }
.inv-summary sup { font-size: .5em; line-height: 0; vertical-align: .82em; margin: 0 .06em 0 .03em; }
.inv-signup__card .btn--icon { display: flex; align-items: center; justify-content: center; gap: .55em; padding-left: 14px; padding-right: 14px; white-space: nowrap; font-size: clamp(15px, 4.4vw, 18px); }
.btn__icon { flex: none; width: 20px; height: 20px; }
.inv-signup__card .btn:focus-visible { outline: 3px solid rgba(0,120,84,.45); outline-offset: 3px; }