/* ============================================================
   Forms — replicates the Formidable look: labels above fields,
   red required asterisk, full-width inputs, dark-red submit.
   ============================================================ */

.site-form { max-width: 760px; margin: 30px 0 10px; }

.site-form form .form-group,
.site-form form [class*="form-group"] {
  margin-bottom: 18px;
}

.site-form label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-red);
  margin-bottom: 6px;
}
.site-form label .required {
  color: var(--red);
  margin-left: 2px;
}

.site-form input[type=text],
.site-form input[type=email],
.site-form input[type=tel],
.site-form input[type=number],
.site-form select,
.site-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--heading-color);
  background: var(--white);
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  padding: 10px 12px;
}
.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 0;
  border-color: var(--gold);
}

.site-form .form-input-wrapper { width: 100%; }

/* captcha */
.site-form .basic-captcha-image,
.site-form img[alt="Basic Captcha"] {
  border-radius: 4px;
  margin-bottom: 8px;
  display: block;
}
.site-form input[name*="basic-captcha"] { max-width: 220px; }

/* buttons */
.site-form button[type=submit],
.site-form input[type=submit] {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--btn-font-size);
  text-transform: uppercase;
  padding: 13px 32px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease;
}
.site-form button[type=submit]:hover { background: var(--btn-bg-hover); }

/* validation + status messages */
.form-message,
.site-form .alert {
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
  background: var(--beige);
  color: var(--dark-red);
  font-weight: 700;
}
.form-message.error, .site-form .alert.error { background: #fbe9e9; color: var(--red); }

/* A successful submission leads the page instead of blending into the introduction. */
.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 28px 32px;
  border-radius: 12px;
  scroll-margin-top: 160px;
  text-align: left;
  overflow-wrap: anywhere;
}
.form-feedback--success { background: var(--dark-red); color: var(--white); }
.form-feedback--error { background: var(--beige); color: var(--dark-red); border: 2px solid var(--dark-red); }
.form-feedback__icon { flex: 0 0 32px; margin-top: 2px; }
.form-feedback--success .form-feedback__icon { color: var(--gold); }
.form-feedback__content { min-width: 0; }
.form-feedback .form-feedback__title {
  margin: 0 0 12px;
  color: inherit;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.3;
}
.form-feedback__message { max-width: 68ch; font-size: 18px; line-height: 1.6; }
.form-feedback__message > :first-child { margin-top: 0; }
.form-feedback__message > :last-child { margin-bottom: 0; }
.form-feedback:focus { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (max-width: 700px) {
  .form-feedback { gap: 14px; padding: 22px 20px; margin-bottom: 28px; }
  .form-feedback__message { font-size: 16px; }
}

/* Contact details follow the shop's centered, two-column layout. */
.form-page .site-form { margin-inline: auto; }
.form-page .site-form form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
}
.form-page .site-form form > .form-field { min-width: 0; }

/* Subject, message, captcha and actions use the full form width in both languages. */
.form-page .site-form form > .form-field:has([name="data[betreff]"]),
.form-page .site-form form > .form-field:has([name="data[subject]"]),
.form-page .site-form form > .form-field:has(textarea),
.form-page .site-form form > .form-field:has(.turnstile-container),
.form-page .site-form form > .form-field:has(.basic-captcha),
.form-page .site-form form > .buttons {
  grid-column: 1 / -1;
}
.form-page .site-form .buttons { margin-top: 24px; text-align: center; }

@media (max-width: 700px) {
  .form-page .site-form form { grid-template-columns: 1fr; }
}