/* =========================================================
   PNFLOW FORMS
   Globale Formular-Komponente fuer Fluent Forms.

   Gescoped auf .fluentform, den Wrapper, den das Plugin
   selbst ausgibt. Dadurch bekommt jedes Formular auf der
   Seite automatisch das PNflow-Design und braucht keine
   eigene Klasse in Elementor.

   Diese Datei enthaelt nur das Formular selbst.
   Das Layout der Kontaktseite steht in page-contact.css.
========================================================= */


/* =========================================================
   WRAPPER
   Elementor gibt pro Widget eigene Regeln mit hoeherer
   Spezifitaet aus, deshalb hier !important.
========================================================= */

.elementor-widget-fluent-form-widget .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.fluentform,
.fluentform form,
.fluentform fieldset {
  width: 100%;
  margin: 0;
  padding: 0;
}


/* =========================================================
   FELDGRUPPEN
========================================================= */

.fluentform .ff-el-group {
  margin: 0 0 var(--space-md);
  padding: 0;
}

/* Der Namensblock bringt eigene Gruppen mit,
   sonst entstuende der Abstand doppelt. */

.fluentform .ff-name-field-wrapper {
  margin-bottom: 0;
}


/* =========================================================
   ZWEISPALTIGES NAMENSFELD
   Fluent Forms arbeitet hier mit Flex und negativen Raendern.
   Grid ist berechenbarer und kommt ohne Ausgleichswerte aus.
========================================================= */

.fluentform .ff-t-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
}

.fluentform .ff-t-cell {
  width: 100%;
  padding: 0;
}


/* =========================================================
   LABELS
   Klein, versal und leicht gesperrt - dieselbe Sprache wie
   der Kicker. Dadurch treten die Labels hinter die Eingaben
   zurueck und das Formular wirkt ruhiger.
========================================================= */

.fluentform .ff-el-input--label {
  margin: 0 0 var(--space-xs);
  padding: 0;
}

.fluentform .ff-el-input--label label {
  display: block;
  margin: 0;
  color: var(--primary);
  font-family: var(--font-primary);
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pflichtfeld-Stern: Rot waere der Plugin-Standard,
   Gold passt zur Seite und erreicht als --accent-text 4.7:1. */

.fluentform .ff-el-is-required.asterisk-right label::after {
  color: var(--accent-text);
}


/* =========================================================
   FELDER
   Leicht petrolfarben getoent statt reinweiss: auf einer
   weissen Karte bekommen die Felder dadurch eine sichtbare
   Flaeche, ohne dass ein Rahmen laut werden muss. Beim
   Fokus wechselt die Fuellung auf Weiss, das Feld tritt
   nach vorn.

   Selektor bewusst dreiteilig, mit .ff-el-input--content
   dazwischen: Fluent Forms stylt mit
   .fluentform .ff-el-form-control, also gleich spezifisch.
   Ein Glied mehr gewinnt zuverlaessig, ganz ohne !important
   und unabhaengig von der Ladereihenfolge.
========================================================= */

.fluentform .ff-el-input--content .ff-el-form-control {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  color: var(--text);
  background-color: rgba(var(--secondary-rgb), 0.05);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-secondary);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 400;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fluentform .ff-el-input--content textarea.ff-el-form-control {
  min-height: 160px;
  resize: vertical;
}

.fluentform .ff-el-input--content .ff-el-form-control::placeholder {
  color: var(--muted-text);
  opacity: 1;
}

.fluentform .ff-el-input--content .ff-el-form-control:hover {
  border-color: rgba(var(--primary-rgb), var(--alpha-medium));
}

.fluentform .ff-el-input--content .ff-el-form-control:focus {
  background-color: var(--white);
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), var(--alpha-medium));
  outline: none;
}


/* =========================================================
   AUSWAHLFELD
   Der Standardpfeil der Browser ist grau und passt zu
   nichts. Ersetzt durch ein goldenes Chevron als
   eingebettetes SVG - kein zusaetzlicher Request, keine
   Icon-Bibliothek. Die Farbe entspricht --accent-text.
========================================================= */

.fluentform .ff-el-input--content select.ff-el-form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1.5 1.5L7 7l5.5-5.5' stroke='%238f6220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 9px;
  cursor: pointer;
}


/* =========================================================
   DATENSCHUTZ-CHECKBOX
========================================================= */

.fluentform .ff-el-form-check {
  margin: 0;
  padding: 0;
}

.fluentform .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.fluentform .ff_tc_checkbox {
  flex: 0 0 auto;
  padding-top: 3px;
}

.fluentform .ff-el-form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--secondary);
  cursor: pointer;
}

.fluentform .ff_t_c {
  color: var(--text-body);
  font-family: var(--font-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  font-weight: 400;
}


/* =========================================================
   ABSENDE-BUTTON
   Gleiche Optik wie .pnflow-button-primary aus buttons.css.
   Groesse und Gewicht sind bewusst fest: Weiss auf
   --accent-deep ergibt 3.13:1, und diese Schwelle gilt
   erst ab 19px/700.

   !important, weil das Elementor-Widget den Submit-Button
   selbst stylt (Klasse fluentform-widget-submit-button-custom).
========================================================= */

.fluentform .ff_submit_btn_wrapper {
  margin: var(--space-xs) 0 0;
  padding: 0;
}

.fluentform .ff-btn-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: clamp(190px, 16vw, 245px);
  padding: 12px clamp(22px, 2vw, 30px) !important;
  color: var(--white) !important;
  background-color: var(--accent-deep) !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(19px, 1.2vw, 20px) !important;
  line-height: 1.2;
  font-weight: 700 !important;
  text-align: center;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus {
  color: var(--white) !important;
  background-color: var(--deep-blue) !important;
  border-color: var(--deep-blue) !important;
  transform: translateY(-1px);
}

/* Pfeil wie bei den uebrigen Buttons */

.fluentform .ff-btn-submit::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  line-height: 1;
  transition: transform var(--transition-base);
}

.fluentform .ff-btn-submit:hover::after {
  transform: translateX(3px);
}

.fluentform .ff-btn-submit:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--primary) !important;
}


/* =========================================================
   FEHLER UND ERFOLG
========================================================= */

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
  margin-top: var(--space-xs);
  color: var(--error);
  font-family: var(--font-secondary);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.fluentform .ff-el-is-error .ff-el-input--content .ff-el-form-control {
  background-color: rgba(var(--accent-rgb), 0.06);
  border-color: var(--error);
}

/* Goldene Kante links, damit die Erfolgsmeldung zur
   Farbkante der Karte passt. */

.fluentform .ff-message-success {
  margin: 0;
  padding: var(--space-md);
  color: var(--primary);
  background-color: var(--bg-section-green);
  border: 1px solid rgba(var(--secondary-green-rgb), 0.28);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-family: var(--font-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}


/* =========================================================
   MOBILE
   Reduzierte Bewegung ist bereits global in base.css
   geregelt und wird hier bewusst nicht wiederholt.
========================================================= */

@media (max-width: 767px) {

  .fluentform .ff-t-container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fluentform .ff-t-cell {
    margin-bottom: var(--space-md);
  }

  .fluentform .ff-btn-submit {
    width: 100%;
  }
}