/* ============================================================
   GEFÜHRTES ANFRAGEFORMULAR (Fluent Forms)

   Zwei echte Schritte. Gebaut wird die Schrittfolge von
   assets/js/anfrage-formular.js, das die Feldgruppen in zwei Hüllen
   (.berg-ff-panel) umräumt und die Fortschrittsanzeige davorsetzt.
   Hier steht nur das Aussehen.

   Alles ist auf .berg-anfrage-formular beschränkt. Diese Klasse setzt
   inc/anfrage-formular.php über den Filter fluentform/form_wrapper_classes
   an die Hülle jedes Formulars, dessen ID in berg_anfrage_form_ids()
   steht. Damit hängt die Gestaltung nicht mehr an einer einzelnen
   Formular-ID (früher .fluentform_wrapper_3), und ein zweites Formular
   mit derselben Feldstruktur, etwa ein Testformular, wird einfach in
   diese Liste eingetragen. Formulare, die nicht in der Liste stehen,
   sehen davon nichts.

   Ohne JavaScript bleibt das Formular eine durchgehende Seite: Dafür
   ist Abschnitt 2 standardmäßig sichtbar. Läuft JavaScript, setzt
   inc/anfrage-formular.php früh die Marke .berg-js am <html>, und ab
   da steuert Fluent Forms die Sichtbarkeit wieder selbst.

   Diese Datei wird aus inc/anfrage-formular.php geladen, abhängig von
   style.css und deshalb nach den Stilen von Fluent Forms. Sie steht
   bewusst außerhalb der style.css, damit das Formular ohne einen
   Eingriff in die Haupt-Stildatei übertragen werden kann.

   Farben, Rundungen, Schatten und Knopfform kommen aus dem Theme:
   --berg-blue für alles Aktive, 12px/0 2px 12px wie .berg-specs-card,
   6px und .berg-btn für die Schaltflächen.
   ============================================================ */

/* ---------- Karte ---------- */

.berg-anfrage-formular {
  /* Fluent Forms setzt sein Fehlerrot auf :root. #f56c6c schafft auf
     Weiß keine 4,5:1, deshalb hier ein dunkleres Rot für dieses Formular. */
  --fluentform-danger: #B3261E;

  max-width: 760px;
  margin-inline: auto;
  padding: 40px 44px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ---------- Fortschrittsanzeige ---------- */

.berg-anfrage-formular .berg-ff-fortschritt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

/* Nach dem Absenden blendet Fluent Forms das Formular aus. Dann geht die
   Anzeige mit, sonst stünde eine Fortschrittsleiste ohne Formular da.
   display:grid oben schlägt die Browser-Regel für [hidden], deshalb hier
   noch einmal ausdrücklich. */
.berg-anfrage-formular .berg-ff-fortschritt[hidden] {
  display: none;
}

.berg-anfrage-formular .berg-ff-fortschritt__station {
  margin: 0;
}

.berg-anfrage-formular .berg-ff-fortschritt__knopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 4px 0;
  background: none;
  border: 0;
  border-top: 3px solid var(--gray-200);
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gray-500);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.berg-anfrage-formular .berg-ff-fortschritt__knopf:hover {
  color: var(--berg-blue);
}

.berg-anfrage-formular .berg-ff-fortschritt__knopf:focus-visible {
  outline: 2px solid var(--berg-blue);
  outline-offset: 2px;
}

.berg-anfrage-formular .berg-ff-fortschritt__marke {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  /* Grau 700 statt Grau 500: Die Ziffer steht auf Grau 100 und käme
     mit Grau 500 nur auf 4,1:1. */
  color: var(--gray-700);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Laufender Schritt */
.berg-anfrage-formular .berg-ff-fortschritt__station.is-aktiv .berg-ff-fortschritt__knopf {
  border-top-color: var(--berg-blue);
  color: var(--gray-900);
}

.berg-anfrage-formular .berg-ff-fortschritt__station.is-aktiv .berg-ff-fortschritt__marke {
  background: var(--berg-blue);
  color: var(--white);
}

/* Erledigter Schritt: Haken statt Nummer, Blau statt Grau. */
.berg-anfrage-formular .berg-ff-fortschritt__station.is-erledigt .berg-ff-fortschritt__knopf {
  border-top-color: var(--berg-blue-light);
  color: var(--berg-blue-dark);
}

.berg-anfrage-formular .berg-ff-fortschritt__station.is-erledigt .berg-ff-fortschritt__marke {
  background: var(--berg-blue-pale);
  color: var(--berg-blue-darker);
  font-size: 0;
}

.berg-anfrage-formular .berg-ff-fortschritt__station.is-erledigt .berg-ff-fortschritt__marke::before {
  content: "\2713";
  font-size: 0.95rem;
  line-height: 1;
}

/* ---------- Schritt-Hüllen und Überschriften ---------- */

.berg-anfrage-formular .berg-ff-panel[hidden] {
  display: none;
}

.berg-anfrage-formular .berg-ff-schritt {
  margin-bottom: 4px;
}

.berg-anfrage-formular .berg-ff-schritt__nummer {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--berg-blue);
}

.berg-anfrage-formular .berg-ff-schritt__titel {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gray-900);
}

/* Der Fokus springt beim Schrittwechsel hierher. Sichtbar wird er nur
   für Tastaturnutzer, sonst wäre der Rahmen bei jedem Klick da. */
.berg-anfrage-formular .berg-ff-schritt__titel:focus {
  outline: none;
}

.berg-anfrage-formular .berg-ff-schritt__titel:focus-visible {
  outline: 2px solid var(--berg-blue);
  outline-offset: 4px;
  border-radius: 2px;
}

.berg-anfrage-formular .berg-ff-schritt__hinweis {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-500);
}

/* ---------- Felder allgemein ---------- */

.berg-anfrage-formular .ff-el-group {
  margin-bottom: 22px;
}

.berg-anfrage-formular .ff-el-group:last-child {
  margin-bottom: 0;
}

.berg-anfrage-formular .ff-el-input--label label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gray-900);
}

.berg-anfrage-formular .ff-el-input--label {
  margin-bottom: 8px;
}

.berg-anfrage-formular .ff-el-tooltip svg {
  fill: var(--gray-500);
}

.berg-anfrage-formular .ff-el-form-control {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-900);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.berg-anfrage-formular select.ff-el-form-control {
  cursor: pointer;
}

.berg-anfrage-formular .ff-el-form-control:hover:not(:disabled) {
  border-color: var(--gray-500);
}

.berg-anfrage-formular .ff-el-form-control:focus {
  border-color: var(--berg-blue);
  box-shadow: 0 0 0 3px rgba(30, 110, 187, 0.18);
  outline: none;
}

/* Deaktiviert heißt nicht unlesbar: In der Anwendungsliste steht hier der
   Hinweis, dass zuerst ein Gas dran ist. */
.berg-anfrage-formular .ff-el-form-control:disabled {
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: not-allowed;
}

.berg-anfrage-formular .ff-el-form-control::placeholder {
  color: var(--gray-500);
  opacity: 1;
}

.berg-anfrage-formular textarea.ff-el-form-control {
  min-height: 120px;
  resize: vertical;
}

/* Einheiten-Anhang (%, Nm³/h, bar) umbruchfest an das Feld anschließen. */
.berg-anfrage-formular .ff_input-group {
  display: flex;
  align-items: stretch;
}

.berg-anfrage-formular .ff_input-group .ff-el-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.berg-anfrage-formular .ff_input-group:has(.ff-el-form-control:focus) {
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(30, 110, 187, 0.18);
}

.berg-anfrage-formular .ff_input-group:has(.ff-el-form-control:focus) .ff-el-form-control {
  box-shadow: none;
}

.berg-anfrage-formular .ff_input-group:has(.ff-el-form-control:focus) .ff_input-group-text {
  border-color: var(--berg-blue);
}

.berg-anfrage-formular .ff_input-group-text {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gray-700);
  white-space: nowrap;
}

/* ---------- Gasauswahl als Kacheln ---------- */

.berg-anfrage-formular .berg-ff-gas .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.berg-anfrage-formular .berg-ff-gas .ff-el-form-check {
  margin: 0;
  padding: 0;
}

.berg-anfrage-formular .berg-ff-gas .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 16px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gray-900);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.berg-anfrage-formular .berg-ff-gas .ff-el-form-check-label:hover {
  border-color: var(--berg-blue-light);
  background: var(--off-white);
}

/* Gewählte Kachel: blauer Rahmen plus blasser Blauton, nicht nur ein Punkt. */
.berg-anfrage-formular .berg-ff-gas .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  border-color: var(--berg-blue);
  background: var(--berg-blue-pale);
  box-shadow: inset 0 0 0 1px var(--berg-blue);
  color: var(--berg-blue-darker);
}

.berg-anfrage-formular .berg-ff-gas .ff-el-form-check-label:has(input:focus-visible) {
  outline: 2px solid var(--berg-blue);
  outline-offset: 2px;
}

.berg-anfrage-formular .berg-ff-gas .ff-el-form-check-input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--berg-blue);
}

/* ---------- Reinheitsempfehlung ---------- */

/* Ruhiger Hinweis direkt unter dem Reinheitsfeld, kein Warnkasten.
   Sichtbar nur, wenn in inc/anfrage-formular.php ein belegter Wert
   für die gewählte Anwendung hinterlegt ist. */
.berg-anfrage-formular .berg-ff-reinheit-hinweis {
  margin-top: -12px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gray-500);
}

.berg-anfrage-formular .berg-ff-reinheit-hinweis.is-leer {
  display: none;
}

.berg-anfrage-formular .ff-custom_html:has(.berg-ff-reinheit-hinweis.is-leer) {
  display: none;
}

/* ---------- Ankreuzfelder ---------- */

.berg-anfrage-formular .berg-ff-consent .ff-el-form-check-label,
.berg-anfrage-formular .berg-ff-reinheit-unbekannt .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gray-700);
  cursor: pointer;
}

.berg-anfrage-formular .berg-ff-consent .ff-el-form-check-input,
.berg-anfrage-formular .berg-ff-reinheit-unbekannt .ff-el-form-check-input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--berg-blue);
}

.berg-anfrage-formular .berg-ff-reinheit-unbekannt {
  margin-top: -8px;
}

/* ---------- Abschnitt 2 (Container von Fluent Forms) ---------- */

.berg-anfrage-formular .ff-t-container.berg-ff-abschnitt-2 {
  width: 100%;
  margin: 0;
}

.berg-anfrage-formular .berg-ff-abschnitt-2 > .ff-t-cell {
  width: 100%;
  padding: 0;
}

/* Ohne JavaScript sichtbar, damit das Formular bedienbar bleibt. */
.berg-anfrage-formular .berg-ff-abschnitt-2.has-conditions {
  display: block;
}

/* Mit JavaScript übernimmt wieder die bedingte Logik von Fluent Forms,
   die ihre Sichtbarkeit per style-Attribut setzt. */
.berg-js .berg-anfrage-formular .berg-ff-abschnitt-2.has-conditions {
  display: none;
}

/* ---------- Schaltflächenzeile ---------- */

.berg-anfrage-formular .berg-ff-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}

.berg-anfrage-formular .berg-ff-nav .ff_submit_btn_wrapper {
  margin: 0;
}

.berg-anfrage-formular .berg-ff-nav .berg-btn {
  min-height: 48px;
  justify-content: center;
}

/* Absenden sieht aus wie .berg-btn--primary auf der restlichen Seite.
   Die Klasse selbst lässt sich nicht anhängen, weil Fluent Forms das
   Markup erzeugt, also hier dieselben Werte. */
.berg-anfrage-formular .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  background: var(--berg-blue);
  color: var(--white);
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}

.berg-anfrage-formular form.frm-fluent-form .ff-btn-submit:hover {
  background: var(--berg-blue-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30, 110, 187, 0.35);
}

.berg-anfrage-formular .ff-btn-submit:focus-visible {
  outline: 2px solid var(--berg-blue-darker);
  outline-offset: 2px;
}

/* ---------- Meldungen ---------- */

.berg-anfrage-formular .error.text-danger,
.berg-anfrage-formular .ff-el-is-error .text-danger {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
}

.berg-anfrage-formular .ff-el-is-error .ff-el-form-check-label {
  color: var(--gray-700);
}

.berg-anfrage-formular .ff-message-success {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--berg-blue-pale);
  border-left: 4px solid var(--berg-blue);
  border-radius: 6px;
  color: var(--gray-900);
}

/* Nur für Screenreader, zum Beispiel der Zusatz "erledigt". */
.berg-anfrage-formular .berg-ff-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 600px) {
  .berg-anfrage-formular {
    padding: 24px 20px;
    border-radius: 10px;
  }

  .berg-anfrage-formular .berg-ff-fortschritt {
    gap: 8px;
    margin-bottom: 26px;
  }

  .berg-anfrage-formular .berg-ff-fortschritt__knopf {
    gap: 8px;
    padding: 10px 2px 0;
    font-size: 0.78rem;
  }

  .berg-anfrage-formular .berg-ff-fortschritt__marke {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }

  .berg-anfrage-formular .berg-ff-schritt__titel {
    font-size: 1.15rem;
  }

  .berg-anfrage-formular .berg-ff-gas .ff-el-input--content {
    grid-template-columns: 1fr;
  }

  .berg-anfrage-formular .berg-ff-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .berg-anfrage-formular .berg-ff-nav .ff_submit_btn_wrapper,
  .berg-anfrage-formular .berg-ff-nav .berg-btn {
    width: 100%;
  }

  .berg-anfrage-formular .ff-btn-submit {
    width: 100%;
    white-space: normal;
  }

  /* Zurück steht unter Absenden: die Hauptaktion zuerst. */
  .berg-anfrage-formular .berg-ff-nav .berg-ff-zurueck {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .berg-anfrage-formular .ff-el-form-control,
  .berg-anfrage-formular .ff-btn-submit,
  .berg-anfrage-formular .berg-ff-gas .ff-el-form-check-label,
  .berg-anfrage-formular .berg-ff-fortschritt__knopf {
    transition: none;
  }
}