/* PLAN.md Abschnitt 7: Das Kontaktformular kommt aus Fluent Forms. Diese Datei neutralisiert die
   zusätzlichen Hüllen des Plugins und dessen Eigenoptik, damit die Regeln aus css/style.css
   (.form, .form label, .form input …) unverändert greifen. css/style.css wird nicht angefasst.
   Geladen nur auf der Kontaktseite, nach den Stilen des Plugins. */

/* Hüllen des Plugins aus dem Raster nehmen: die Felder werden direkte Rasterkinder von .form */
.form .fluentform,
.form .frm-fluent-form,
.form .frm-fluent-form > fieldset { display: contents !important; }
.form .ff_screen_reader_title { position: absolute !important; left: -9999px; }
.form .ff-errors-in-stack:empty { display: none; }

/* Zweispaltige Zeilen wie .form__row */
.form .ff-t-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; width: auto; margin: 0; }
@media (max-width: 560px) { .form .ff-t-container { grid-template-columns: 1fr; } }
.form .ff-t-cell { display: block; flex: none; width: auto; min-width: 0; padding: 0 !important; margin: 0; }

/* Feldgruppen ohne eigene Abstände – den Abstand macht das Raster (gap) */
.form .ff-el-group { margin: 0 !important; padding: 0; }
.form .ff-el-input--label { display: block; margin: 0; padding: 0; line-height: inherit; }
.form .ff-el-input--content { margin: 0; padding: 0; }

/* Beschriftungen: Werte aus .form label; Pflicht-Sternchen wie im Original (braun, mit Leerzeichen davor) */
.form .ff-el-input--label label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0 0 0.45rem; padding: 0; line-height: inherit; }
.form .ff-el-input--label.ff-el-is-required.asterisk-right label::after { content: " *"; color: var(--braun); margin: 0; font-size: inherit; font-weight: inherit; white-space: pre; }

/* Felder: Eigenoptik des Plugins zurücksetzen, Werte aus css/style.css */
.form .ff-el-form-control {
  width: 100%; max-width: none; height: auto; margin: 0; font: inherit; font-size: 1rem; line-height: inherit; color: var(--ink);
  background: var(--feld-faf9f7); border: 1px solid var(--rahmen-e6e2db); border-radius: 4px; box-shadow: none;
  padding: 0.8rem 1rem;
  transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
.form .ff-el-form-control:focus { outline: none; border-color: var(--braun); background: var(--weiss); box-shadow: 0 0 0 3px rgba(168, 151, 123, 0.18); color: var(--ink); }
/* Im Original sind die Felder inline-block; beim Textbereich entsteht dadurch die Unterlänge der Textzeile unter dem Feld */
.form input.ff-el-form-control, .form select.ff-el-form-control, .form textarea.ff-el-form-control { display: inline-block; vertical-align: baseline; }
.form textarea.ff-el-form-control { min-height: 160px; resize: vertical; }

/* Einwilligung wie .form .consent: das Plugin baut hier eine Tabelle (table/table-row/table-cell), das Original ein Flex-Paar
   aus Kästchen und Text. Die Zwischenhülle des Kästchens wird aufgelöst, damit es wie im Original direktes Flex-Kind ist. */
.form .ff-el-group.consent { display: block !important; font-size: 0.9rem; color: var(--text-soft); }
.form .consent .ff-el-form-check { display: block !important; width: auto; margin: 0; padding: 0; }
.form .consent .ff_tc_label { display: flex !important; gap: 0.7rem; align-items: flex-start; font-size: inherit; font-weight: 400; margin: 0; padding: 0; color: var(--text-soft); line-height: inherit; cursor: auto; }
.form .consent .ff_tc_checkbox { display: contents !important; }
.form .consent .ff_tc_checkbox input { display: block; position: static; margin: 0.3rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.form .consent .ff_t_c { display: block !important; width: auto; margin: 0; padding: 0; font-size: inherit; }
.form .consent .ff_t_c::after { content: " *"; color: var(--braun); white-space: pre; }

/* Button: Aussehen kommt aus .btn / .btn--solid */
.form .ff_submit_btn_wrapper { text-align: left; }
.form .ff-custom_html { outline: none; }
.form .form__note { margin: 0; }

/* Rückmeldungen des Plugins in der Optik von .form-status--ok / .form-status--error aus css/style.css */
/* Das Original zeigt die Meldung oben im Formular (.form-status ist erstes Kind); das Plugin hängt sie unten an → per order nach oben */
.form .ff-message-success, .form .ff-errors-in-stack:not(:empty) { order: -1; }
.form .ff-message-success { margin: 0; padding: 1rem 1.2rem; font-size: 0.95rem; background: #eef3ea; border: 1px solid #c9d8bd; border-radius: 0; box-shadow: none; color: #3d5230; }
.form .ff-message-success p { margin: 0; color: inherit; }
.form .ff-errors-in-stack:not(:empty) { margin: 0; padding: 1rem 1.2rem; font-size: 0.95rem; background: #f7ecea; border: 1px solid #e0c5c0; color: #7a3b32; }
.form .ff-el-is-error .text-danger, .form .error.text-danger { margin: 0.35rem 0 0; font-size: 0.85rem; color: #7a3b32; }
.form .ff-el-is-error .ff-el-form-control { border-color: #e0c5c0; }