/* ============================================================
 * Bugs-Welle 2026-05-17 (Stracke Drive-Reports BUGS WEBPAGE)
 *
 *   Bug 1: Team-Page iPhone — Köpfe teils abgeschnitten
 *   Bug 2: Mobile Termin-FAB überlagert „Anfrage senden"-Hero-Button
 *   Bug 3: WPForms „Ihr Name"-Feld nicht bündig links zu anderen Inputs
 *   Bug 4: Form-Submission ohne visuelles Loading-Status-Icon
 *
 *   Geladen via functions.php → wp_enqueue_style nach style.css.
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────
 * Bug 1 — Team-Page Profilfoto-Crop
 *
 * Vorgängerfix (Welle 2026-05-13) setzte aspect-ratio auf 4/5 mit
 * object-position 50% 0%. Bei einigen Quellen ist der Kopf trotzdem
 * zu nah am oberen Rand, weshalb der „Anchor oben"-Approach Stirn/
 * Haaransatz wegklippt. Lösung: aspect-ratio auf 3/4 (noch mehr
 * Hochformat-Headroom) UND object-position auf 50% 12% (Kopf-Region
 * leicht unter den oberen Rand verschoben, sodass der vollständige
 * Schädel sichtbar bleibt, auch bei Quellen mit knapper Stirn).
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .pxz-team-card-avatar {
    aspect-ratio: 3 / 4;
  }
  .pxz-team-card-img,
  .pxz-team-card-picture img {
    object-fit: cover;
    object-position: 50% 12%;
  }
}

/* ─────────────────────────────────────────────────────────────
 * Bug 2 / Drive-Report #3 (2026-05-17): Mobile Termin-FAB überlagert
 * "Anfrage senden"-Button.
 *
 * Erster Fix (Lift auf bottom:88px) reichte nicht — die pxz-mobile-cta-Bar
 * ist mit safe-area-inset-bottom auf iPhone effektiv ~140px hoch, der FAB
 * landete trotzdem darin. Finaler Fix: Termin-Funktion wandert IN die
 * mobile-cta-Bar (drei-Button-Layout Anfrage + Termin + 📞), FAB wird auf
 * Mobile komplett ausgeblendet.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pxz-fab {
    display: none !important;
  }
}

/* Drive-Report #3: 3-Button-Mobile-CTA-Bar. */
.pxz-mobile-cta a.termin {
  background: var(--pxz-ink, #0a2540);
  color: #fff;
  flex: 0 0 auto;
  padding: 0.875rem 1.25rem;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
 * Bug 3/4 — WPForms „Ihr Name"-Feld bündig zu den anderen Inputs
 *
 * WPForms-Pro rendert das Name-Feld mit Sub-Inputs (Vorname/Nachname)
 * in einem fieldset>div.wpforms-field-row>div.wpforms-field-row-block.
 * WPForms-Default-CSS gibt jedem Block padding-right (.wpforms-first) bzw.
 * padding-left (zweiter Block), damit zwischen den beiden Spalten ein Gap
 * entsteht. Auf Mobile fällt das Side-by-Side weg, aber das Padding bleibt
 * → Inputs sehen schmaler aus + nicht bündig zu den anderen Single-Inputs.
 *
 * Fix global (alle wpforms-Container im Theme), damit Karriere/Kontakt/
 * Service-Pages konsistent sind. Initialer Welle-Fix war auf .pxz-kar/
 * .pxz-kontakt-wpforms-form gescopt, die Klasse hieß auf /contact-us/
 * aber `pxz-kontakt-form-wpforms` — User-Bug-Report 2026-05-17 #4.
 * ───────────────────────────────────────────────────────────── */
.wpforms-container .wpforms-field-name .wpforms-field-row,
.wpforms-container .wpforms-field-name .wpforms-field-row-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  box-sizing: border-box;
}
.wpforms-container .wpforms-field-name input {
  width: 100% !important;
  box-sizing: border-box;
}
/* Mobile + Tablet: Sub-Inputs vertikal stacken (Vorname über Nachname). */
@media (max-width: 768px) {
  .wpforms-container .wpforms-field-name .wpforms-field-row {
    display: block !important;
  }
  .wpforms-container .wpforms-field-name .wpforms-field-row-block {
    display: block !important;
    margin-bottom: 12px !important;
  }
  .wpforms-container .wpforms-field-name .wpforms-field-row-block:last-child {
    margin-bottom: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * Bug 4/5 — Submit-Loading-Spinner auf allen Formularen
 *
 * Universelle Spinner-Indikator-Klasse `.pxz-is-submitting`. Wird
 * per JS auf den Submit-Button gesetzt, sobald `submit`-Event
 * abgefangen wird. CSS rendert einen rotierenden Kreis rechts
 * neben dem Button-Text, dimmt das Button und verhindert Doppel-
 * Klicks. Button-Text wird per JS auf "Wird gesendet …" gewechselt.
 *
 * Drive-Bug #5: Spinner ist deutlich größer + heller, damit auch auf
 * dunklen/roten Buttons gut sichtbar. Min-Display-Time per JS auf 600ms.
 * ───────────────────────────────────────────────────────────── */
.pxz-svc-form-submit.pxz-is-submitting,
.wpforms-submit.pxz-is-submitting,
button.pxz-is-submitting,
input[type="submit"].pxz-is-submitting {
  position: relative;
  opacity: 0.85;
  cursor: progress;
  pointer-events: none;
}
.pxz-svc-form-submit.pxz-is-submitting::after,
.wpforms-submit.pxz-is-submitting::after,
button.pxz-is-submitting::after,
input[type="submit"].pxz-is-submitting + .pxz-spinner-after {
  content: '';
  width: 18px;
  height: 18px;
  margin-left: 12px;
  display: inline-block;
  vertical-align: -4px;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  border-right-color: transparent;
  border-radius: 50%;
  animation: pxz-spin 0.7s linear infinite;
}
/* Helle Buttons (Outline / Ghost) bekommen einen dunklen Spinner. */
.pxz-btn-ghost.pxz-is-submitting::after,
.pxz-btn-outline.pxz-is-submitting::after,
button[type="submit"].is-light.pxz-is-submitting::after {
  border-color: rgba(10, 37, 64, 0.6);
  border-right-color: transparent;
}
@keyframes pxz-spin {
  to { transform: rotate(360deg); }
}