/* Fluent Forms auf die Gestaltung des Entwurfs abbilden.
   Die Klassen links gehören dem Plugin, die Werte rechts stammen aus style.css.

   Zum !important: Fluent Forms schreibt pro Formular einen Inline-Stilblock mit
   höherer Spezifität (form.fluent_form_3 …). Ohne Vorrangmarkierung gewinnt
   dieser. Beim Absendeknopf war das anders lösbar — er trägt die vom Plugin
   dafür vorgesehene Klasse ff_btn_no_style. */

.fluentform .ff-el-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.15rem; }
.fluentform .ff-el-input--label label { font-size:.875rem !important; font-weight:650 !important; color:var(--ink) !important; margin: 0; }
.fluentform .ff-el-input--label.ff-el-is-required label:after { color:var(--accent) !important; }

.fluentform .ff-el-form-control {
  width:100% !important;
  padding:.85rem 1.05rem !important;
  font: inherit; font-size:.98rem !important;
  color:var(--ink) !important;
  background:var(--paper) !important;
  border:1.5px solid var(--line) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.fluentform textarea.ff-el-form-control { resize: vertical; min-height:130px !important; }
.fluentform .ff-el-form-control:focus {
  outline: none;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* Datenschutz-Haken */
.fluentform .ff-el-form-check { display: flex; align-items: flex-start; gap: .7rem; }
.fluentform .ff-el-form-check-input { width:auto !important; flex: none; margin-top: .3rem; accent-color:var(--accent) !important; }
.fluentform .ff-el-form-check-label { font-size:.875rem !important; color:var(--ink-soft) !important; font-weight:400 !important; }

/* Absendeknopf — entspricht .btn--primary .btn--lg */
.fluentform .ff-btn-submit {
  display: inline-flex; align-items: center; gap: .6rem;
  padding:.95rem 1.9rem !important;
  font: inherit; font-size:1rem !important; font-weight:650 !important;
  color:var(--paper) !important;
  background:var(--accent) !important;
  border:none !important; border-radius:100px !important;
  cursor: pointer;
  box-shadow:var(--shadow-s, 0 2px 10px rgba(30,24,54,.12)) !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.fluentform .ff-btn-submit:hover { transform: translateY(-2px); box-shadow:0 8px 22px rgba(30,24,54,.18) !important; }
.fluentform .ff-btn-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Fehler- und Erfolgsmeldungen */
.fluentform .ff-el-is-error .ff-el-form-control { border-color:var(--c-red) !important; }
.fluentform .error.text-danger, .fluentform .ff-el-is-error .error {
  font-size:.82rem !important; color:var(--c-red) !important; margin-top: .25rem;
}
.ff-message-success {
  padding:1rem 1.2rem !important;
  border-radius:12px !important;
  font-size:.93rem !important; font-weight:600 !important;
  background:color-mix(in srgb, var(--c-green) 13%, transparent) !important;
  color:#2F6B22 !important;
  border:1px solid color-mix(in srgb, var(--c-green) 32%, transparent) !important;
}