/* ==========================================================================
   px/forms.css — Formulare & Dialoge (Team forms, Premium 2610)
   Ergänzt premium.css §8 (Basis-Eingabefelder). Die Plugin-spezifischen Stile
   (Wizard, Kontaktformular, Konfigurator, Cookie-Banner, Lena, forms-pro) liegen
   in den Plugins selbst; hier stehen nur übergreifende Bausteine, die auch andere
   Teams verwenden dürfen:  .mx-form  .mx-field  .mx-label  .mx-help  .mx-status
   .mx-choice  .mx-check  .mx-spinner  .mx-progress  .mx-modal
   ========================================================================== */

/* ---------- Basis-Ergänzungen --------------------------------------------------------- */
/* Platzhaltertext mit ausreichendem Kontrast (4.5:1 auf Weiß) */
input::placeholder, textarea::placeholder { color: #6b7686; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--mx-bg-alt, #f4f4f1); color: var(--mx-text-2, #55606f); cursor: not-allowed; }
input[readonly]:not([type=checkbox]):not([type=radio]) { background: var(--mx-bg-alt, #f4f4f1); }
input:hover:not(:disabled):not(:focus):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: #b4bbc5; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--mx-ink, #0f1b2d); -webkit-box-shadow: 0 0 0 1000px #fff inset; caret-color: var(--mx-ink, #0f1b2d);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--mx-err, #a3261f); box-shadow: inset 0 0 0 1px var(--mx-err, #a3261f); }
input[type=file] { min-height: 0; padding: .7rem 1rem; line-height: 1.4; }
input[type=file]::file-selector-button {
  margin-right: 1rem; padding: .55rem 1rem; min-height: 40px; cursor: pointer;
  font: 500 .875rem/1 var(--mx-font); color: var(--mx-ink, #0f1b2d); background: #fff;
  border: 1px solid rgba(15, 27, 45, .4); border-radius: var(--mx-radius, 3px); transition: border-color var(--mx-dur, .3s);
}
input[type=file]::file-selector-button:hover { border-color: var(--mx-ink, #0f1b2d); }

/* ---------- Bausteine ---------------------------------------------------------------- */
.mx-form { display: grid; gap: 1.15rem; max-width: 760px; }
.mx-form--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; }
.mx-form--cols .mx-field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .mx-form--cols { grid-template-columns: 1fr; } }
.mx-field { display: block; margin: 0; }
.mx-label { display: block; margin: 0 0 .4rem; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--mx-ink, #0f1b2d); }
.mx-label small { font-weight: 400; color: var(--mx-text-2, #55606f); }
.mx-help { margin: .4rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mx-text-2, #55606f); }
.mx-error { margin: .4rem 0 0; font-size: .8125rem; font-weight: 500; color: var(--mx-err, #a3261f); }

/* Rückmeldung (Erfolg/Fehler/Hinweis) */
.mx-status { padding: .9rem 1.1rem; border: 1px solid var(--mx-line, #dcdfe4); border-left: 3px solid var(--mx-ink, #0f1b2d); border-radius: var(--mx-radius, 3px); background: var(--mx-bg-alt, #f4f4f1); font-size: .9375rem; line-height: 1.55; color: var(--mx-ink, #0f1b2d); }
.mx-status--ok { background: #f0f7f3; border-color: #c5ded2; border-left-color: var(--mx-ok, #1f7a4d); }
.mx-status--err { background: #fdf3f2; border-color: #e8c4c1; border-left-color: var(--mx-err, #a3261f); color: var(--mx-err, #a3261f); font-weight: 500; }
.mx-status--warn { background: var(--mx-warn-bg, #fff6dc); border-color: #efd9a0; border-left-color: var(--mx-warm, #f2b84b); }
.mx-status:empty { display: none; }

/* Auswahlkarten (Radio/Checkbox als Kachel): <label class="mx-choice"><input …><span>Text</span></label> */
.mx-choice {
  position: relative; display: flex; align-items: center; gap: .85rem; min-height: 58px; margin: 0; padding: .8rem 1.1rem;
  background: #fff; border: 1px solid var(--mx-line, #dcdfe4); border-radius: var(--mx-radius, 3px);
  font-size: 1rem; font-weight: 400; color: var(--mx-ink, #0f1b2d); cursor: pointer;
  transition: border-color var(--mx-dur, .3s) var(--mx-ease), background var(--mx-dur, .3s) var(--mx-ease);
}
.mx-choice:hover { border-color: var(--mx-ink, #0f1b2d); }
.mx-choice:has(input:checked) { border-color: var(--mx-ink, #0f1b2d); box-shadow: inset 0 0 0 1px var(--mx-ink, #0f1b2d); background: var(--mx-bg-alt, #f4f4f1); }
.mx-choice:has(input:focus-visible) { outline: 2px solid var(--mx-accent, #2a6fdb); outline-offset: 2px; }

/* Eigene Häkchen/Radios (nur innerhalb der Bausteine — fremde Plugins bleiben unberührt) */
:is(.mx-form, .mx-choice, .mx-check) input[type=checkbox],
:is(.mx-form, .mx-choice, .mx-check) input[type=radio] {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  background: #fff center / 14px no-repeat; border: 1px solid #8b95a3; cursor: pointer;
  transition: background-color var(--mx-dur, .3s) var(--mx-ease), border-color var(--mx-dur, .3s) var(--mx-ease);
}
:is(.mx-form, .mx-choice, .mx-check) input[type=checkbox] { border-radius: 2px; }
:is(.mx-form, .mx-choice, .mx-check) input[type=radio] { border-radius: 50%; }
:is(.mx-form, .mx-choice, .mx-check) input[type=checkbox]:checked {
  background-color: var(--mx-ink, #0f1b2d); border-color: var(--mx-ink, #0f1b2d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.mx-form, .mx-choice, .mx-check) input[type=radio]:checked { background-color: var(--mx-ink, #0f1b2d); border-color: var(--mx-ink, #0f1b2d); box-shadow: inset 0 0 0 4px #fff; }
:is(.mx-form, .mx-choice, .mx-check) input[type=checkbox]:focus-visible,
:is(.mx-form, .mx-choice, .mx-check) input[type=radio]:focus-visible { outline: 2px solid var(--mx-accent, #2a6fdb); outline-offset: 2px; }
.mx-check { position: relative; display: block; padding-left: 2rem; font-size: .875rem; font-weight: 400; line-height: 1.55; color: var(--mx-text-2, #55606f); cursor: pointer; }
.mx-check input { position: absolute; left: 0; top: 2px; margin: 0; }
.mx-check a { color: var(--mx-accent-strong, #0a4a8f); text-decoration: underline; text-underline-offset: 3px; }

/* Fortschrittslinie: <div class="mx-progress"><span style="width:40%"></span></div> */
.mx-progress { height: 2px; background: var(--mx-line, #dcdfe4); overflow: hidden; }
.mx-progress>span { display: block; height: 100%; background: var(--mx-ink, #0f1b2d); transition: width .5s var(--mx-ease); }

/* Ladeanzeige */
.mx-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mxSpin .8s linear infinite; vertical-align: -4px; }
@keyframes mxSpin { to { transform: rotate(360deg); } }

/* Dialog / Modal: <div class="mx-modal" role="dialog" aria-modal="true"><div class="mx-modal__panel">…</div></div> */
.mx-modal { position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(11, 18, 32, .6); }
.mx-modal.is-open, .mx-modal[open] { display: flex; }
.mx-modal__panel {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; color: var(--mx-ink, #0f1b2d);
  border: 1px solid var(--mx-line, #dcdfe4); border-radius: var(--mx-radius, 3px);
}
.mx-modal__close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: none; border: 0;
  border-radius: var(--mx-radius, 3px); color: var(--mx-ink, #0f1b2d); font-size: 1.75rem; font-weight: 300; line-height: 1; cursor: pointer;
}
.mx-modal__close:hover { background: var(--mx-bg-alt, #f4f4f1); }
dialog.mx-modal::backdrop { background: rgba(11, 18, 32, .6); }

/* ---------- Startseite: Kontaktband mit Wizard ---------------------------------------- */
.mx-contact__form .mfm-wizard { max-width: 820px; }

/* ---------- Fremd-Formulare (Altbestand): gleiche Anmutung ----------------------------- */
.wpcf7-form input[type=submit], .wpforms-container .wpforms-submit, .wpforms-submit-container button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 2rem;
  background: var(--mx-ink, #0f1b2d); color: #fff; border: 1px solid var(--mx-ink, #0f1b2d); border-radius: var(--mx-radius, 3px);
  font: 500 .9375rem/1 var(--mx-font); cursor: pointer; box-shadow: none; transition: background var(--mx-dur, .3s);
}
.wpcf7-form input[type=submit]:hover, .wpforms-container .wpforms-submit:hover { background: #25334a; }
.wpcf7-not-valid-tip, .wpforms-error { font-size: .8125rem; font-weight: 500; color: var(--mx-err, #a3261f); }
.wpcf7-response-output { margin: 1.25rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--mx-line, #dcdfe4) !important; border-left: 3px solid var(--mx-ink, #0f1b2d) !important; border-radius: var(--mx-radius, 3px); }