/* =====================================================================
   ProVital – Fluent Forms, seitenweit
   ---------------------------------------------------------------------
   Zieht den unformatierten blauen Standard-Button von Fluent Forms auf den
   ProVital-Pill. Betrifft aktuell /beratungstermin/ (Form 12), gilt aber
   fuer jedes Formular ausserhalb des Funnels.

   Bewusst getrennt von fluentform-provital.css: Diese Datei laedt
   seitenweit, jene nur im Funnel. Wer das zurueckdrehen will, haengt
   allein diese Datei aus.

   .provital-form ist ausgenommen – dort gilt die dunkle Variante.
   ===================================================================== */

.fluentform .ff-btn-submit,
.fluentform button[type=submit]{
  position:relative;display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;padding:0 60px 0 25px;
  background:#1c1d21;color:#fff;
  border:none;border-radius:100px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:400;font-size:15px;line-height:1.25;letter-spacing:normal;
  cursor:pointer;transition:background .25s;
}

.fluentform .ff-btn-submit::after,
.fluentform button[type=submit]::after{
  content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:#fff no-repeat center/12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1d21' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .35s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type=submit]:hover{background:#000}
.fluentform .ff-btn-submit:hover::after,
.fluentform button[type=submit]:hover::after{transform:translateY(-50%) translateX(3px)}
.fluentform .ff-btn-submit:focus-visible,
.fluentform button[type=submit]:focus-visible{outline:2px solid #eec863;outline-offset:3px}

/* Der Funnel bringt seine eigene helle Variante mit. Sie ueberschreibt
   diese Regeln in fluentform-provital.css ueber die Spezifitaet
   (.provital-form .fluentform …), nicht ueber die Ladereihenfolge. */

@media (max-width:478px){
  .fluentform .ff-btn-submit,
  .fluentform button[type=submit]{padding-block:10px;line-height:1.3}
}