/* ==========================================================================
   Nispa 2026 – Ergänzungen für WordPress (Fluent Forms, ältere Contact-Form-7-Regeln für den Rückweg)
   Übernimmt das Aussehen der Formulare aus der freigegebenen Vorschau.
   ========================================================================== */

/* ---------- Gemeinsam ---------- */
.formular .screen-reader-response { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="date"],
.formular input[type="number"], .formular textarea, .formular select {
  width: 100%; font: inherit; color: var(--tinte); background: var(--creme); border: 1.5px solid var(--feld-rand);
  border-radius: 12px; padding: .75rem .9rem; min-height: 3rem; box-shadow: none;
}
.formular textarea { min-height: 7rem; resize: vertical; }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: 3px solid var(--fokus); outline-offset: 2px; border-color: var(--wald); }
.formular input[type="checkbox"], .formular input[type="radio"] { width: 1.35rem; height: 1.35rem; accent-color: var(--wald); margin: .15rem 0 0; flex-shrink: 0; }

/* ---------- Contact Form 7 (Kontakt) ---------- */
.formular-kontakt .wpcf7 { margin: 0; }
.formular-kontakt .wpcf7-form-control-wrap { display: block; }
.formular-kontakt .wpcf7-not-valid { border-color: #8A2E12 !important; }
.formular-kontakt .wpcf7-not-valid-tip { color: #8A2E12; font-weight: 700; font-size: .92rem; margin-top: .35rem; display: block; }
.formular-kontakt .wpcf7-submit { /* nutzt .btn .btn-primary aus dem Formular */ }
.formular-kontakt .wpcf7-spinner { margin: 0 0 0 .75rem; vertical-align: middle; }
.formular-kontakt .wpcf7-response-output { margin: 1rem 0 0 !important; padding: 1rem 1.25rem !important; border-radius: var(--radius-klein); border: 0 !important; }
.formular-kontakt .wpcf7-form.sent .wpcf7-response-output { background: var(--salbei); color: var(--wald); }
.formular-kontakt .wpcf7-form.invalid .wpcf7-response-output,
.formular-kontakt .wpcf7-form.unaccepted .wpcf7-response-output,
.formular-kontakt .wpcf7-form.failed .wpcf7-response-output,
.formular-kontakt .wpcf7-form.spam .wpcf7-response-output { background: var(--butter); color: #5A4300; }

/* ---------- Fluent Forms (Anmeldung und Kontakt) ---------- */
.formular .fluentform { font: inherit; color: var(--tinte); }
.formular .fluentform .ff-el-group { margin-bottom: 1.1rem; }
.formular .fluentform .ff-el-input--label { margin-bottom: .35rem; }
.formular .fluentform .ff-el-input--label label { font-weight: 700; color: var(--wald); font-size: 1rem; }
.formular .fluentform .ff-el-is-required.asterisk-right label::after { color: #8A2E12; margin-left: .2em; }
.formular .fluentform .ff-el-form-control { width: 100%; font: inherit; color: var(--tinte); background: var(--creme); border: 1.5px solid var(--feld-rand); border-radius: 12px; padding: .75rem .9rem; min-height: 3rem; box-shadow: none; }
.formular .fluentform .ff-el-form-control:focus { outline: 3px solid var(--fokus); outline-offset: 2px; border-color: var(--wald); }
.formular .fluentform .ff-el-form-check { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .6rem; }
.formular .fluentform .ff-el-form-check-label { display: flex; gap: .75rem; align-items: flex-start; font-weight: 500; cursor: pointer; }
.formular .fluentform .ff-el-form-check-input { width: 1.35rem; height: 1.35rem; accent-color: var(--wald); margin: .15rem 0 0; flex-shrink: 0; }
.formular .fluentform .ff-el-help-message { color: var(--grau); font-size: .9rem; margin-top: .3rem; font-style: normal; }
.formular .fluentform .ff-el-is-error .ff-el-form-control { border-color: #8A2E12; }
.formular .fluentform .error.text-danger, .formular .fluentform .ff-el-is-error .text-danger { color: #8A2E12; font-weight: 700; font-size: .92rem; margin-top: .35rem; }
.formular .fluentform .ff-el-section-break { margin: 1.5rem 0 .75rem; }
.formular .fluentform .ff-el-section-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--wald); margin: 0 0 .5rem; }
.formular .fluentform hr { border: 0; border-top: 1px solid var(--salbei-linie); }
.formular .fluentform .ff-btn-submit, .formular .fluentform .ff-btn.ff-btn-submit {
  display: inline-flex; align-items: center; gap: .5em; min-height: 3rem; padding: .7rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
  background: var(--wald) !important; color: var(--creme) !important; border: 2px solid transparent; box-shadow: var(--schatten-klein); cursor: pointer; font-family: inherit;
}
.formular .fluentform .ff-btn-submit:hover { background: var(--wald-2) !important; }
.formular .fluentform .ff-btn-submit:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.formular .ff-message-success { background: var(--salbei); color: var(--wald); border: 0; border-radius: var(--radius-klein); padding: 1rem 1.25rem; box-shadow: none; }
.formular .ff-errors-in-stack { margin-top: 1rem; }
.formular .fluentform .ff-errors-in-stack .error { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; background: var(--butter); color: #5A4300; border-radius: var(--radius-klein); padding: 1rem 1.25rem; font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
.formular .fluentform .ff-errors-in-stack .error a { color: inherit; text-decoration: underline; }
.formular .fluentform .ff-errors-in-stack .error-clear { cursor: pointer; font-size: 1.4rem; line-height: 1; }
@media (min-width: 48em) {
  .formular .fluentform .ff-t-container { gap: 1.5rem; }
}

/* ---------- WordPress-Werkzeugleiste (nur eingeloggt) ---------- */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* Abschnittsüberschriften im Anmeldeformular (wie die Legenden der Vorschau) */
.formular .fluentform .ff-legende { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--wald); margin: 1.25rem 0 .75rem; }
.formular .fluentform .ff-custom_html:first-of-type .ff-legende { margin-top: 0; }
.formular .fluentform .ff-el-input--content .ff-el-help-message { margin-top: .35rem; }
.formular .fluentform .ff_list_inline .ff-el-form-check { display: inline-flex; margin-right: 1.25rem; }
/* Kontaktformular: Hinweis unter der Beschriftung */
.formular-kontakt .feld .hinweis { display: block; color: var(--grau); font-size: .9rem; margin: .1rem 0 .35rem; }