/* =============================================================================
   HeldinTrans – Elementor-Formular-Styles portiert auf WPForms
   Version 5  ·  Zeilen-Layout, Textarea, DSGVO-Checkbox
   -----------------------------------------------------------------------------
   Quelle: https://heldintrans.de/  (Elementor Kit "elementor-kit-6",
           Formular-Widgets 45d96da / dc06157 / ea96b2e)

   VARIANTEN
     .ht-form--hero   Hero-Kurzformular       weisse Felder, 1px Rahmen, Radius 2
     .ht-form--main   grosses Anfrageformular weisse Felder, randlos, Radius 0
     .ht-form--dark   dunkler Grund           transparente Felder, Unterstrich

   VERWENDUNG
     Klasse setzen an EINER dieser Stellen – alle drei funktionieren:
       · WPForms-Builder → Einstellungen → Allgemein → "Formular-CSS-Klasse"
       · am .wpforms-container
       · am Elementor-Widget, das den Shortcode enthaelt   ← aktuell im Einsatz

         ht-form ht-form--main

   ZUSATZKLASSEN (optional, frei kombinierbar)
     ht-form--btn-center     Button zentrieren
     ht-form--btn-right      Button rechtsbuendig
     ht-form--btn-stretch    Button ueber die volle Breite
     ht-form--keep-sizes     WPForms-Feldgroessen (klein/mittel/gross) beibehalten
                             statt alle Felder auf Spaltenbreite zu ziehen
     ht-form--labels-hidden  Labels visuell ausblenden, nur Placeholder zeigen
   ============================================================================= */


/* =============================================================================
   0. ZWEI BUGS, DIE HIER BEHOBEN WERDEN
   -----------------------------------------------------------------------------
   A) TEXT BEIM FOKUSSIEREN UNSICHTBAR
      Der Elementor-Kit setzt global (post-6.css):

          .elementor-kit-6 input:focus:not([type="button"]):not([type="submit"])
              background-color: var(--e-global-color-primary)   =  #24333F

      Feldhintergrund wird dunkelblau, Textfarbe bleibt #24333F → Text weg.
      Die Elementor-Formulare merkt das nicht, weil deren Widget-Regeln
      spezifischer sind. WPForms-Felder trifft es voll. → Abschnitt 5.

      Optional an der Wurzel: Elementor → Website-Einstellungen → Theme Style
      → Formularfelder → Fokus → Hintergrundfarbe leeren.

   B) FELDER MOBIL NICHT AUF VOLLER BREITE
      Zwei Ursachen, beide in Abschnitt 3 behoben:

      1. WPForms laedt bei schmalen Formularen layout-screen-small.min.css:
             .wpforms-layout-column { width: 100%; padding-right: 0 }
         Die Zeile behaelt aber ihr  margin: 0 -10px.  Dadurch sind die
         Spalten links um 10px eingerueckt und haengen rechts 10px ueber –
         die Felder wirken schmaler und verschoben.

      2. Version 2 hat Elementors Feldraster nachgebaut
         (.wpforms-field-container als Flex-Zeile, align-items:center auf
         .wpforms-field). WPForms-Felder sind aber Block-Elemente; als
         Flex-Items ohne flex-basis schrumpfen sie auf Inhaltsbreite,
         und align-items:center verhindert das Strecken in den Spalten.

      Konsequenz fuer v3: WPForms bringt sein eigenes Raster mit
      (.wpforms-field-layout + .wpforms-layout-column mit Prozentbreiten und
      Umbruch ab schmaler Breite). Das wird NICHT mehr nachgebaut, sondern
      nur noch eingefaerbt und im Abstand korrigiert. Das ist zugleich die
      Voraussetzung dafuer, dass die Styles fuer die kommenden Formulare
      (mehrseitig, Checkbox-Gruppen, Textarea, Datum/Zeit) tragen.
   ============================================================================= */


/* =============================================================================
   HINWEIS ZUR SCHREIBWEISE  .ht-form.ht-form
   -----------------------------------------------------------------------------
   Die doppelte Klasse ist Absicht. Sie hebt die Spezifitaet um eine Stufe an,
   damit die Regeln zuverlaessig gegen
     · wpforms-base.min.css          (Feld- und Fehlerstyles)
     · layout.min.css                (0,4,1) und layout-screen-small.min.css
     · post-6.css                    (Elementor-Kit-Globalstyles)
   gewinnen – unabhaengig von der Ladereihenfolge, die Caching-Plugins gern
   umsortieren. Ohne den Trick gaebe es Gleichstaende.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
.ht-form.wpforms-form,
.ht-form .wpforms-form {
  --ht-font:            Roboto, sans-serif;
  --ht-primary:         #24333F;   /* --e-global-color-primary   */
  --ht-secondary:       #E4DED6;   /* --e-global-color-secondary */
  --ht-white:           #FFFFFF;   /* --e-global-color-419a51f   */
  --ht-field-border:    #69727D;

  /* Raster */
  --ht-gutter:          20px;      /* Spaltenabstand ab Tablet   */
  --ht-gutter-mobile:   14px;      /* Spaltenabstand mobil       */
  --ht-row-gap:         14px;      /* Abstand zwischen Feldern   */

  /* Felder */
  --ht-field-bg:        var(--ht-white);
  --ht-field-color:     var(--ht-primary);
  --ht-field-radius:    2px;
  --ht-field-bw:        1px;
  --ht-field-bc:        var(--ht-field-border);
  --ht-field-pad:       10px;
  --ht-field-minh:      33px;      /* Elementor-Wert             */
  --ht-field-fs:        16px;      /* < 16px loest iOS-Zoom aus  */
  --ht-field-lh:        1.4;
  --ht-textarea-minh:   120px;
  --ht-placeholder-op:  .6;

  /* Fokus – bewusst OHNE Hintergrundwechsel */
  --ht-focus-bg:        var(--ht-field-bg);
  --ht-focus-color:     var(--ht-field-color);
  --ht-focus-bc:        var(--ht-field-bc);
  --ht-focus-ring:      0 0 0 2px rgba(36, 51, 63, .25);

  /* Autofill */
  --ht-autofill-bg:     var(--ht-field-bg);
  --ht-autofill-color:  var(--ht-field-color);

  --ht-select-arrow:    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2324333F' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");

  /* Beschriftungen */
  --ht-label-color:     var(--ht-primary);
  --ht-label-fs:        15px;
  --ht-group-label-gap: 15px;      /* Abstand unter Layout-Ueberschriften */
  --ht-accent:          var(--ht-primary);

  /* Meldungen */
  --ht-error:           #B32D2E;
  --ht-error-bc:        #B32D2E;
  --ht-error-bg:        rgba(179, 45, 46, .08);
  --ht-error-bw:        1px;
  --ht-error-ring:      0 0 0 2px rgba(179, 45, 46, .30);
  --ht-success:         #1E7B4C;
  --ht-success-bg:      rgba(30, 123, 76, .10);

  /* Button */
  --ht-btn-fs:          17px;
  --ht-btn-fw:          500;
  --ht-btn-bw:          1px;
  --ht-btn-radius:      1px;
  --ht-btn-pad:         15px 30px;
  --ht-btn-minh:        47px;
  --ht-btn-bg:          var(--ht-secondary);
  --ht-btn-color:       var(--ht-primary);
  --ht-btn-bc:          var(--ht-primary);
  --ht-btn-bg-hover:    rgba(36, 51, 63, 0);
  --ht-btn-color-hover: var(--ht-white);
  --ht-btn-bc-hover:    var(--ht-white);
  /* Elementor aendert den Button auf Mobil nicht - dort heisst er aber auch
     nur "Senden" bzw. "Anfrage senden". "Rueckrufservice anfordern!" ist bei
     20px rund 134px breit und passt mit 40px Seitenpolsterung auf keinem
     Telefon in eine Zeile; WPForms hat es dann mitten im Wort zerlegt
     ("Rueckrufservi / ce"). Darum mobil volle Breite und schmalere
     Seitenpolsterung - Schriftgroesse und vertikale Polsterung bleiben.
     Fuer Elementor-identisches Verhalten:  --ht-btn-mobile-w: auto  und
     --ht-btn-pad-mobile: var(--ht-btn-pad). */
  --ht-btn-mobile-w:    100%;
  --ht-btn-pad-mobile:  15px 14px;
  --ht-btn-fs-mobile:   var(--ht-btn-fs);
}


/* -----------------------------------------------------------------------------
   2. Grundlage
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) {
  font-family: var(--ht-font);
}

/* WPForms-Raster NICHT nachbauen – Felder bleiben Block-Elemente.
   Gesteuert wird hier nur der vertikale Rhythmus. */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field-container {
  display: block;
  margin: 0;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: var(--ht-row-gap);
}


/* -----------------------------------------------------------------------------
   3. Spalten-Layout – WPForms-Raster nur korrigieren
   -----------------------------------------------------------------------------
   Spezifitaet dieser Regeln (0,5,0) gegen WPForms' (0,4,1). Die Prozent-
   breiten und der Umbruch auf schmalen Schirmen bleiben unangetastet –
   korrigiert wird ausschliesslich der asymmetrische Innenabstand, der
   die Felder mobil eingerueckt und verkuerzt hat.
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-field-layout :is(.wpforms-field-layout-columns, .wpforms-layout-row) {
  display: flex;
  flex-wrap: wrap;                 /* statt nowrap: sauberer Umbruch */
  margin-left: calc(var(--ht-gutter) / -2);
  margin-right: calc(var(--ht-gutter) / -2);
  /* Auf dieser Seite gilt global  * { max-width: 100% }  (Elementor/Theme).
     Ohne die naechsten zwei Zeilen wuerden die negativen Margins die Zeile
     nur nach links verschieben statt sie zu verbreitern - genau das hat die
     Felder mobil eingerueckt und rechts verkuerzt aussehen lassen. */
  width: auto;
  max-width: none;
  /* Sobald WPForms die Spalten umbricht (schmales Formular), traegt row-gap
     den vertikalen Abstand - exakt der Wert, den auch die Elementor-Formulare
     zwischen ihren Feldgruppen haben. Liegen die Spalten nebeneinander,
     wirkt row-gap nicht. Damit stimmt der Rhythmus in beiden Faellen, ohne
     Breakpoint-Raterei: WPForms entscheidet nach FORMULARbreite, nicht nach
     Viewport. */
  row-gap: var(--ht-row-gap);
  column-gap: 0;
}

/* WPForms kennt zwei Layout-Modi: den aelteren "Spalten"-Modus
   (.wpforms-field-layout-columns) und den neueren "Zeilen"-Modus
   (.wpforms-field-layout-rows > .wpforms-layout-row). Das grosse
   Umzugsformular nutzt den Zeilen-Modus. Auf schmalen Schirmen stellt
   WPForms die Zeile auf  flex-direction: column  - ohne row-gap standen
   die gestapelten Spalten dort komplett ohne Abstand aufeinander.
   Mehrere Zeilen innerhalb eines Layout-Feldes brauchen denselben Abstand: */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-layout-row + .wpforms-layout-row {
  margin-top: var(--ht-row-gap);
}

/* Ueberschrift eines Layout-Blocks ("Ihre Angaben"). WPForms setzt hier
   15px; als Gruppenueberschrift ist das gewollt mehr Luft als zwischen
   zwei Feldern - ueber das Token anpassbar. */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-field-layout > .wpforms-field-label {
  margin-bottom: var(--ht-group-label-gap);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-field-layout .wpforms-layout-column {
  padding-left: calc(var(--ht-gutter) / 2);
  padding-right: calc(var(--ht-gutter) / 2);   /* WPForms setzt hier mobil 0 */
  align-items: stretch;
  margin-bottom: 0;                            /* Abstand kommt aus row-gap */
}

/* Letztes Feld einer Spalte erzeugt keinen Ueberhang */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-layout-column > .wpforms-field:last-child {
  margin-bottom: 0;
}

/* Felder fuellen ihre Spalte – wie in den Elementor-Formularen.
   WPForms deckelt sonst je nach Feldgroesse auf 25% / 60%.
   Mit .ht-form--keep-sizes bleiben die WPForms-Groessen erhalten. */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form):not(.ht-form--keep-sizes)
:is(input, select, textarea):is(.wpforms-field-small, .wpforms-field-medium, .wpforms-field-large),
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form:not(.ht-form--keep-sizes))
:is(input, select, textarea):is(.wpforms-field-small, .wpforms-field-medium, .wpforms-field-large) {
  max-width: 100%;
  width: 100%;
}

/* Unterzeilen zusammengesetzter Felder (Name, Adresse, Kreditkarte).
   WPForms loest die bewusst selbst - je nach Version per Float oder per
   Flexbox. Hier wird deshalb nur der vertikale Abstand gesetzt, das
   horizontale Raster bleibt unangetastet. Gestapelt wird mobil in
   Abschnitt 9. */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field-row {
  margin-bottom: var(--ht-row-gap);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field-row:last-child {
  margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   4. Labels, Sublabels, Beschreibungen
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field-label {
  font-family: var(--ht-font);
  font-size: var(--ht-label-fs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ht-label-color);
  cursor: pointer;
  display: block;
  margin: 0 0 6px;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(.wpforms-field-sublabel, .wpforms-field-description, .wpforms-field-limit-text) {
  font-family: var(--ht-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ht-label-color);
  opacity: .75;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-required-label {
  color: inherit;
  font-weight: inherit;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field-label-inline {
  display: inline-block;
  font-family: var(--ht-font);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ht-label-color);
}

/* Freie HTML-/Content-Bloecke – in den Elementor-Formularen die
   Zwischenueberschriften ("UMZUG VON:" usw.) */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(.wpforms-field-html, .wpforms-field-content) {
  font-family: var(--ht-html-font, var(--ht-font));
  font-size: var(--ht-html-fs, 16px);
  font-weight: 400;
  color: var(--ht-label-color);
  text-transform: var(--ht-html-transform, none);
}

/* Labels nur optisch verstecken (Placeholder-Optik wie im Hero-Formular) */
.ht-form--labels-hidden .wpforms-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -----------------------------------------------------------------------------
   5. Felder  +  FOCUS-FIX
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="password"], input[type="date"],
    input[type="time"], input[type="search"], select, textarea) {
  font-family: var(--ht-font);
  font-size: var(--ht-field-fs);
  font-weight: 400;
  line-height: var(--ht-field-lh);
  color: var(--ht-field-color);
  background-color: var(--ht-field-bg);
  border-style: solid;
  border-width: var(--ht-field-bw);
  border-color: var(--ht-field-bc);
  border-radius: var(--ht-field-radius);
  padding: var(--ht-field-pad);
  height: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* min-height getrennt, sonst gewinnt die Feld-Grundregel oben gegen eine
   eigene textarea-Regel und die Textarea bleibt auf Einzeilerhoehe. */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="password"], input[type="date"],
    input[type="time"], input[type="search"], select) {
  min-height: var(--ht-field-minh);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) textarea {
  min-height: var(--ht-textarea-minh);
  resize: vertical;
}

/* --- DER FOCUS-FIX -----------------------------------------------------------
   Spezifitaet:  diese Regel (0,7,1)   ·   Elementor-Kit-Fokus (0,4,1)
   Hintergrund und Textfarbe bleiben stehen; sichtbar wird nur der Ring.
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="password"], input[type="date"],
    input[type="time"], input[type="search"], select, textarea):focus:not([type="button"]):not([type="submit"]) {
  background-color: var(--ht-focus-bg);
  color: var(--ht-focus-color);
  -webkit-text-fill-color: var(--ht-focus-color);
  caret-color: var(--ht-focus-color);
  border-color: var(--ht-focus-bc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), var(--ht-focus-ring);
  outline: 0;
}

/* Placeholder – Elementor: color:inherit; opacity:.6 */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input, textarea)::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: var(--ht-placeholder-op);
}

/* Browser-Autofill */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus) {
  -webkit-text-fill-color: var(--ht-autofill-color);
  -webkit-box-shadow: 0 0 0 1000px var(--ht-autofill-bg) inset;
  box-shadow: 0 0 0 1000px var(--ht-autofill-bg) inset;
  caret-color: var(--ht-autofill-color);
}

/* Select */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 30px;
  background-image: var(--ht-select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px 8px;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) select option {
  color: #24333F;
  background-color: #FFFFFF;
}


/* -----------------------------------------------------------------------------
   6. Weitere Feldtypen – fuer die noch folgenden Formulare
   -------------------------------------------------------------------------- */

/* Checkbox- und Radio-Gruppen */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(.wpforms-field-radio, .wpforms-field-checkbox, .wpforms-field-gdpr-checkbox,
    .wpforms-field-payment-multiple, .wpforms-field-payment-checkbox) ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(.wpforms-field-radio, .wpforms-field-checkbox).wpforms-list-inline ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 18px;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
  /* Ohne .wpforms-field-gdpr-checkbox landet die Einwilligungs-Checkbox in
     einer eigenen Zeile ueber dem Text statt daneben. */
:is(.wpforms-field-radio, .wpforms-field-checkbox, .wpforms-field-gdpr-checkbox,
    .wpforms-field-payment-multiple, .wpforms-field-payment-checkbox) ul li {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ht-accent);
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 2px 0 0;
  flex: none;
}

/* Modernes Dropdown (Choices.js) an die Feldoptik angleichen */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .choices__inner {
  font-family: var(--ht-font);
  font-size: var(--ht-field-fs);
  color: var(--ht-field-color);
  background-color: var(--ht-field-bg);
  border-style: solid;
  border-width: var(--ht-field-bw);
  border-color: var(--ht-field-bc);
  border-radius: var(--ht-field-radius);
  padding: var(--ht-field-pad);
  min-height: var(--ht-field-minh);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .choices__list--dropdown {
  font-family: var(--ht-font);
  color: #24333F;
  background-color: #FFFFFF;
  border-color: var(--ht-field-bc);
  border-radius: var(--ht-field-radius);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--ht-secondary);
  color: #24333F;
}

/* Telefonfeld mit Laendervorwahl (intl-tel-input) */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .iti {
  width: 100%;
  display: block;
}

/* Datei-Upload, moderner Modus */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-uploader {
  font-family: var(--ht-font);
  color: var(--ht-label-color);
  background-color: var(--ht-field-bg);
  border: 2px dashed var(--ht-field-bc);
  border-radius: var(--ht-field-radius);
}

/* Datums-/Zeitwaehler (flatpickr) – nur Grundfarben, Rest bleibt Plugin-Default */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
  background: #24333F;
  border-color: #24333F;
}


/* -----------------------------------------------------------------------------
   7. Meldungen – Fehler, Sammelbox, Bestaetigung
   -----------------------------------------------------------------------------
   WPForms setzt per Default #990000 (Text) und #CC0000 (Rahmen). Auf dem
   dunklen Blau #24333F ergibt das ca. 1,5:1 Kontrast – praktisch unlesbar.
   Die Varianten fuer dunkle Hintergruende nutzen #FF8A80 (ca. 6:1).
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(label.wpforms-error, em.wpforms-error, .wpforms-error-message) {
  display: block;
  font-family: var(--ht-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ht-error);
  margin-top: 6px;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input, select, textarea):is(.wpforms-error, .user-invalid) {
  border-style: solid;
  border-width: var(--ht-error-bw);
  border-color: var(--ht-error-bc);
  background-color: var(--ht-error-bg);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(input, select, textarea):is(.wpforms-error, .user-invalid):focus {
  border-color: var(--ht-error-bc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), var(--ht-error-ring);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-error-container,
.ht-form.ht-form .wpforms-error-container {
  font-family: var(--ht-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ht-error);
  background-color: var(--ht-error-bg);
  border: 1px solid var(--ht-error-bc);
  border-radius: var(--ht-field-radius);
  padding: 12px 16px;
  margin-bottom: var(--ht-row-gap);
}

.ht-form.ht-form .wpforms-confirmation-container-full,
.ht-form.ht-form.wpforms-confirmation-container-full,
.ht-form.ht-form + .wpforms-confirmation-container-full {
  font-family: var(--ht-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ht-success);
  background-color: var(--ht-success-bg);
  border: 1px solid var(--ht-success);
  border-radius: var(--ht-field-radius);
  padding: 16px 20px;
}


/* -----------------------------------------------------------------------------
   8. Button und mehrseitige Formulare
   -------------------------------------------------------------------------- */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-submit-container {
  padding: 0;
  /* kein margin-top: das vorangehende Feld bringt bereits --ht-row-gap mit.
     Beides zusammen ergaebe den doppelten Abstand vor dem Button. */
  margin-top: 0;
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(button[type="submit"], input[type="submit"], .wpforms-page-button) {
  font-family: var(--ht-font);
  font-size: var(--ht-btn-fs);
  font-weight: var(--ht-btn-fw);
  line-height: 1;
  text-align: center;
  background-color: var(--ht-btn-bg);
  color: var(--ht-btn-color);
  border-style: solid;
  border-width: var(--ht-btn-bw);
  border-color: var(--ht-btn-bc);
  border-radius: var(--ht-btn-radius);
  padding: var(--ht-btn-pad);
  min-height: var(--ht-btn-minh);
  transition: .3s;
  cursor: pointer;
}

/* Schlaegt u. a. die Theme-Regel  button:hover { background:#3f4047 } */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(button[type="submit"], input[type="submit"], .wpforms-page-button):is(:hover, :focus, :active) {
  background-color: var(--ht-btn-bg-hover);
  color: var(--ht-btn-color-hover);
  border-color: var(--ht-btn-bc-hover);
  outline: 0;
}

/* Waehrend des Absendens nicht grau ausbleichen */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(button[type="submit"], input[type="submit"]):is([disabled], .wpforms-disabled) {
  background-color: var(--ht-btn-bg);
  color: var(--ht-btn-color);
  border-color: var(--ht-btn-bc);
  opacity: .55;
  cursor: not-allowed;
}

/* Seitenwechsel-Buttons nebeneinander */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-page-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--ht-row-gap);
}

/* Fortschrittsanzeige */
:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
:is(.wpforms-page-indicator, .wpforms-page-indicator-page-title,
    .wpforms-page-indicator-steps) {
  font-family: var(--ht-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ht-label-color);
  margin-bottom: var(--ht-row-gap);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
  background-color: var(--ht-accent);
}

:is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
.wpforms-page-indicator.circles .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
  background-color: var(--ht-accent);
}

.ht-form--btn-center  .wpforms-submit-container { text-align: center; }
.ht-form--btn-right   .wpforms-submit-container { text-align: right; }
.ht-form--btn-stretch .wpforms-submit-container button[type="submit"] { width: 100%; }


/* -----------------------------------------------------------------------------
   9. Responsive
   -----------------------------------------------------------------------------
   WPForms bricht das Spalten-Layout selbst um (layout-screen-small.min.css,
   greift ab ca. 600px Formularbreite). Hier wird nur nachjustiert, was
   davon nicht abgedeckt ist.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ht-form.wpforms-form,
  .ht-form .wpforms-form {
    --ht-gutter: var(--ht-gutter-mobile);
  }

  /* Schriftgroesse und vertikale Polsterung bleiben wie auf dem Desktop,
     nur Breite und Seitenpolsterung weichen ab - siehe Kommentar bei den
     Tokens in Abschnitt 1. */
  :is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form)
  :is(button[type="submit"], input[type="submit"], .wpforms-page-button) {
    width: var(--ht-btn-mobile-w);
    font-size: var(--ht-btn-fs-mobile);
    padding: var(--ht-btn-pad-mobile);
    min-height: var(--ht-btn-minh);
    line-height: 1.25;
    /* WPForms vererbt word-break:break-word aus dem Spalten-Layout. Damit
       zerlegt es lange Woerter mitten drin ("Rueckrufservi / ce anfordern").
       Umbruch nur an Leerzeichen, notfalls sauber getrennt (lang="de"). */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
  }

  /* Nebeneinanderliegende Teilfelder (Name, Adresse) stapeln */
  :is(.ht-form.ht-form.wpforms-form, .ht-form.ht-form .wpforms-form) .wpforms-field-row-block {
    width: 100%;
    float: none;
  }
}


/* =============================================================================
   10. Variante A — HERO   (Elementor 45d96da, "Anfrage senden")
        Weisse Felder mit Rahmen auf dunklem Hero-Overlay rgba(36,51,63,.88)
   ============================================================================= */
.ht-form--hero.wpforms-form,
.ht-form--hero .wpforms-form {
  --ht-btn-pad-mobile:  15px 14px;
  --ht-gutter:          11px;
  --ht-gutter-mobile:   11px;
  --ht-row-gap:         14px;

  --ht-field-bg:        #FFFFFF;
  --ht-field-color:     #24333F;
  --ht-field-bw:        1px;
  --ht-field-bc:        #69727D;
  --ht-field-radius:    2px;
  --ht-field-pad:       10px;
  --ht-field-minh:      33px;
  --ht-field-fs:        16px;

  --ht-focus-bg:        #FFFFFF;
  --ht-focus-color:     #24333F;
  --ht-focus-bc:        #24333F;
  --ht-focus-ring:      0 0 0 2px rgba(228, 222, 214, .55);

  --ht-label-color:     #FFFFFF;
  --ht-label-fs:        15px;
  --ht-accent:          #E4DED6;

  --ht-error:           #FF8A80;
  --ht-error-bc:        #FF8A80;
  --ht-error-bg:        #FFFFFF;
  --ht-error-bw:        2px;
  --ht-error-ring:      0 0 0 2px rgba(255, 138, 128, .40);
  --ht-success:         #A8E6C1;
  --ht-success-bg:      rgba(168, 230, 193, .12);

  --ht-btn-fs:          17px;
  --ht-btn-bw:          1px;
  --ht-btn-radius:      1px;
  --ht-btn-pad:         15px 30px;
  --ht-btn-minh:        47px;
  --ht-btn-bg:          #E4DED6;
  --ht-btn-color:       #24333F;
  --ht-btn-bc:          #24333F;
  --ht-btn-bg-hover:    rgba(36, 51, 63, 0);
  --ht-btn-color-hover: #FFFFFF;
  --ht-btn-bc-hover:    #FFFFFF;
}


/* =============================================================================
   11. Variante B — MAIN   (Elementor dc06157, "Senden")
        Weisse randlose Felder auf dunklem Blau  ·  auch fuer BLITZANFRAGE
   ============================================================================= */
.ht-form--main.wpforms-form,
.ht-form--main .wpforms-form {
  --ht-btn-pad-mobile:  20px 14px;
  --ht-gutter:          13px;
  --ht-gutter-mobile:   13px;
  --ht-row-gap:         11px;

  --ht-field-bg:        #FFFFFF;
  --ht-field-color:     #24333F;
  --ht-field-bw:        0;
  --ht-field-bc:        transparent;
  --ht-field-radius:    0;
  --ht-field-pad:       10px;
  --ht-field-minh:      40px;
  --ht-field-fs:        16px;

  --ht-focus-bg:        #FFFFFF;
  --ht-focus-color:     #24333F;
  --ht-focus-bc:        transparent;
  --ht-focus-ring:      0 0 0 2px rgba(228, 222, 214, .65);

  --ht-label-color:     #FFFFFF;
  --ht-accent:          #E4DED6;

  /* Zwischenueberschriften: Arial 16px, Versalien (Elementor HTML-Feld) */
  --ht-html-font:       Arial, sans-serif;
  --ht-html-fs:         16px;
  --ht-html-transform:  uppercase;

  /* Feld bleibt weiss, den Fehler traegt der Rahmen */
  --ht-error:           #FF8A80;
  --ht-error-bc:        #FF8A80;
  --ht-error-bg:        #FFFFFF;
  --ht-error-bw:        2px;
  --ht-error-ring:      0 0 0 2px rgba(255, 138, 128, .40);
  --ht-success:         #A8E6C1;
  --ht-success-bg:      rgba(168, 230, 193, .12);

  --ht-btn-fs:          20px;
  --ht-btn-bw:          3px;
  --ht-btn-radius:      0;
  --ht-btn-pad:         20px 40px;
  --ht-btn-minh:        59px;
  --ht-btn-bg:          #E4DED6;
  --ht-btn-color:       #24333F;
  --ht-btn-bc:          #24333F;
  --ht-btn-bg-hover:    rgba(36, 51, 63, .74);
  --ht-btn-color-hover: #E4DED6;
  --ht-btn-bc-hover:    #E4DED6;
}


/* =============================================================================
   12. Variante C — DARK / MEHRSTUFIG   (Elementor ea96b2e, "Nächster")
        Transparente Felder, nur Unterstrich, weisse Schrift
   ============================================================================= */
.ht-form--dark.wpforms-form,
.ht-form--dark .wpforms-form {
  --ht-btn-pad-mobile:  12px 14px;
  --ht-gutter:          59px;
  --ht-gutter-mobile:   20px;      /* 59px waeren mobil unbrauchbar */
  --ht-row-gap:         17px;

  --ht-field-bg:        transparent;
  --ht-field-color:     #FFFFFF;
  --ht-field-bw:        0 0 1px;
  --ht-field-bc:        #FFFFFF;
  --ht-field-radius:    2px;
  --ht-field-pad:       10px;
  --ht-field-minh:      33px;
  --ht-field-fs:        16px;
  --ht-placeholder-op:  .7;

  --ht-focus-bg:        rgba(255, 255, 255, .06);
  --ht-focus-color:     #FFFFFF;
  --ht-focus-bc:        #FFFFFF;
  --ht-focus-ring:      0 2px 0 0 #E4DED6;

  --ht-autofill-bg:     #24333F;
  --ht-autofill-color:  #FFFFFF;

  --ht-select-arrow:    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFFFFF' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");

  --ht-label-color:     #FFFFFF;
  --ht-accent:          #E4DED6;

  --ht-html-font:       Roboto, sans-serif;
  --ht-html-fs:         14px;

  --ht-error:           #FF8A80;
  --ht-error-bc:        #FF8A80;
  --ht-error-bg:        transparent;
  --ht-error-bw:        0 0 2px;
  --ht-error-ring:      0 2px 0 0 #FF8A80;
  --ht-success:         #A8E6C1;
  --ht-success-bg:      rgba(168, 230, 193, .12);

  --ht-btn-fs:          19px;
  --ht-btn-bw:          1px;
  --ht-btn-radius:      1px;
  --ht-btn-pad:         12px 24px;
  --ht-btn-minh:        44px;
  --ht-btn-bg:          #E4DED6;
  --ht-btn-color:       #24333F;
  --ht-btn-bc:          #24333F;
  --ht-btn-bg-hover:    #24333F;
  --ht-btn-color-hover: #FFFFFF;
  --ht-btn-bc-hover:    #FFFFFF;
}

/* Weisses Dropdown-Innenleben auf dunklem Grund */
.ht-form--dark .choices__inner {
  background-color: transparent;
  color: #FFFFFF;
}


/* =============================================================================
   13. Notbremse
   -----------------------------------------------------------------------------
   Sollte ein Caching-/Optimierungs-Plugin die Stylesheets so umsortieren,
   dass Kit- oder WPForms-Regeln doch wieder durchschlagen: einkommentieren.
   ============================================================================= */
/*
.ht-form :is(input, select, textarea):focus:not([type="button"]):not([type="submit"]) {
  background-color: var(--ht-focus-bg) !important;
  color: var(--ht-focus-color) !important;
  -webkit-text-fill-color: var(--ht-focus-color) !important;
}
.ht-form :is(label.wpforms-error, em.wpforms-error) {
  color: var(--ht-error) !important;
}
.ht-form .wpforms-field-layout .wpforms-layout-column {
  padding-right: calc(var(--ht-gutter) / 2) !important;
}
*/

.gw-submit-center .wpforms-submit-container {
  display: flex;
  justify-content: center;
}

.gw-submit-right .wpforms-submit-container {
  display: flex;
  justify-content: flex-end;
}