/*
 * Offerten-Formular: Overrides fuer Forminator.
 *
 * Wird nur auf Angebotsseiten geladen, siehe rh_angebot_styles()
 * in angebot-functions.php.
 *
 * Alles ist auf .offerte-formular gescoped, damit die uebrigen Formulare der
 * Webseite unberuehrt bleiben. Es wird nicht in Forminator-Dateien eingegriffen.
 *
 * ---------------------------------------------------------------------------
 * Forminator-Klassennamen, geprueft gegen Forminator 1.55.1 (Free).
 * Bei einem Plugin-Update hier zuerst nachziehen.
 *
 *   .forminator-custom-form         Formular-Wurzel, hier die weisse Karte
 *   .forminator-pagination          Container eines Schritts, nur der
 *                                   aktuelle ist sichtbar
 *   .forminator-pagination--content Innencontainer eines Schritts
 *   .forminator-pagination-steps    Fortschrittsanzeige oben
 *   .forminator-step                einzelner Schrittmarker
 *   .forminator-step-1 ... -n       Marker des n-ten Schritts
 *   .forminator-current             am aktuell aktiven Schrittmarker
 *   .forminator-step-dot            Punkt im Schrittmarker
 *   .forminator-step-label          Beschriftung im Schrittmarker
 *   .forminator-break               Verbindungsstrich zwischen zwei Markern
 *   .forminator-pagination-footer   Navigationsleiste mit Zurueck und Weiter
 *   .forminator-button-back/-next   die beiden Navigationsknoepfe
 *   .forminator-row / .forminator-col   Raster, col-6 ist die halbe Breite
 *   .forminator-field               Feldwrapper
 *   .forminator-label               Feldbeschriftung
 *   .forminator-input / -textarea   Eingabefelder
 *   .forminator-description         Kleintext unter einem Feld
 *   .forminator-error-message       Fehlermeldung unter einem Feld
 *   .forminator-field-upload        Upload-Feld, hier die Dropzone
 *   .forminator-multi-upload        Container des Mehrfach-Uploads
 *   .forminator-uploaded-files      Liste der bereits gewaehlten Dateien
 *
 * Zwei Eigenheiten, beide im Plugin-Quelltext nachgelesen und im Browser
 * gegengeprueft:
 *
 * 1. Der Stepper wird erst clientseitig gebaut, PHP liefert nur ein leeres
 *    <div class="forminator-pagination-steps">. Im erzeugten Markup steht das
 *    Label VOR dem Punkt (front.pagination.js:461), im Entwurf ist es
 *    umgekehrt. Das dreht hier order, ohne Eingriff ins Plugin.
 *
 * 2. Forminator kennt keine Klasse fuer bereits erledigte Schritte, nur
 *    .forminator-current fuer den aktuellen. Dafuer braucht es aber weder
 *    :has() noch Zusatz-JS: was vor dem aktuellen liegt, ist erledigt, was
 *    danach kommt, erreicht man ueber den Geschwister-Selektor
 *    .forminator-current ~ .forminator-step. Die Ziffern liefert ein
 *    CSS-Counter, den Haken auf erledigten Schritten eine Maske.
 *
 * Zur Spezifitaet, das ist hier der Knackpunkt: der globale Formular-Skin in
 * style.css ab Zeile 22 schreibt mit vier Klassen und !important, etwa
 *
 *   .forminator-ui.forminator-custom-form .forminator-field .forminator-label
 *       { display: none !important; }
 *
 * Ein blosses .offerte-formular .forminator-label traegt nur zwei Klassen und
 * verliert deshalb auch mit !important, denn bei gleichem !important entscheidet
 * die Spezifitaet. Die Regeln unten wiederholen die volle Kette aus style.css
 * und stellen .offerte-formular davor. Das ergibt fuenf Klassen und gewinnt
 * unabhaengig von der Ladereihenfolge. Wo unten also eine lange Selektorkette
 * steht, ist sie kein Zufall und darf nicht gekuerzt werden.
 * ---------------------------------------------------------------------------
 */

.offerte-formular {
    /* Ohne Pendant in angebot-sektionen.css, Werte aus dem Frame. */
    --formular-karte-radius: var(--angebot-radius-xl, 24px);
    --formular-feld-radius: var(--angebot-radius-xl, 24px);
    --formular-punkt: 28px;              /* Schrittmarker, Kantenlaenge */
    --formular-strich: 48px;             /* Verbindung zwischen zwei Markern */
    --formular-erledigt: var(--e-global-color-804d1cd, #c8e3aa);  /* Accent/Primary-3, Kit-Token gegen post-7.css geprueft */
    --formular-textarea: 96px;           /* Feld Bemerkung, Hoehe aus dem Frame */
    --formular-loeschen: 28px;           /* Loeschknopf an einer hochgeladenen Datei */
    --formular-fehler: #c9372d;
}

/*============ Layout ============*/
/* Das Spaltenlayout der Sektion liegt in angebot-sektionen.css, zusammen mit
   allen anderen Sektionen und den Design-Tokens. Diese Datei kuemmert sich
   ausschliesslich um das Innere des Forminator-Markups. */

/*============ Karte ============*/
/*
 * Bewusst ohne gap. Forminator laesst die beiden gerade nicht sichtbaren
 * Schritte als leere Flex-Kinder mit Hoehe 0 stehen, statt sie auszublenden.
 * Ein gap am Formular wuerde deshalb fuer jeden dieser Blindgaenger 24px
 * erzeugen, gemessen waren es 48px tote Hoehe zwischen Stepper und Inhalt.
 * Die Abstaende sitzen deshalb an den sichtbaren Teilen selbst: unten am
 * Stepper, oben an der Navigation.
 */
.offerte-formular .forminator-ui.forminator-custom-form { display: flex; flex-direction: column; margin: 0 !important; padding: var(--angebot-space-32) !important; background: var(--angebot-bg-lift-solid); border-radius: var(--formular-karte-radius);}

/* Die Sammelmeldung steht als erstes Kind im Formular und belegt auch leer
   Hoehe. Sie erscheint erst, wenn Forminator sie befuellt. */
.offerte-formular .forminator-ui.forminator-custom-form .forminator-response-message:empty { display: none;}

/*============ Stepper ============*/
/* counter-reset traegt die Nummerierung, damit die Punkte ihre Ziffer ohne
   Markup bekommen. */
.offerte-formular .forminator-pagination-steps { display: flex; align-items: center; gap: var(--angebot-space-12); width: 100%; counter-reset: schritt; padding-bottom: var(--angebot-space-24); margin-bottom: var(--angebot-space-24); border-bottom: 1px solid var(--angebot-border-subtle);}
.offerte-formular .forminator-break { flex: 0 0 var(--formular-strich); width: var(--formular-strich); height: 1px; background: var(--angebot-border-subtle);}
/* Forminator setzt vier Striche fuer drei Schritte: einen vor dem ersten und
   einen hinter dem letzten. Beide haengen ueber und fallen weg. */
.offerte-formular .forminator-break:first-child,
.offerte-formular .forminator-break:last-child { display: none;}

.offerte-formular .forminator-step { display: inline-flex; align-items: center; gap: var(--angebot-space-12); counter-increment: schritt; margin: 0; padding: 0; background: none; border: 0; cursor: pointer;}
/* Im Markup steht das Label vor dem Punkt, der Entwurf zeigt es dahinter. */
.offerte-formular .forminator-step-dot { order: 1;}
.offerte-formular .forminator-step-label { order: 2;}

.offerte-formular .forminator-step-dot { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--formular-punkt); width: var(--formular-punkt); height: var(--formular-punkt); border-radius: 50%; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line);}
.offerte-formular .forminator-step-dot::before { content: counter(schritt);}
.offerte-formular .forminator-step-label { font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); white-space: nowrap;}

/* Erledigt: alles, was nicht der aktuelle Schritt ist und nicht dahinter
   liegt. Der Haken ersetzt die Ziffer. */
.offerte-formular .forminator-step .forminator-step-dot { background: var(--formular-erledigt); color: transparent;}
.offerte-formular .forminator-step .forminator-step-dot::before { content: ""; width: 16px; height: 16px; background-color: var(--angebot-text-heading); -webkit-mask: var(--formular-haken) center / 16px 16px no-repeat; mask: var(--formular-haken) center / 16px 16px no-repeat;}
.offerte-formular .forminator-step .forminator-step-label { color: var(--angebot-text-heading);}

/* Aktuell */
.offerte-formular .forminator-step.forminator-current .forminator-step-dot { background: var(--angebot-text-heading); color: var(--angebot-text-invers-strong);}
.offerte-formular .forminator-step.forminator-current .forminator-step-dot::before { content: counter(schritt); width: auto; height: auto; background: none; -webkit-mask: none; mask: none;}
.offerte-formular .forminator-step.forminator-current .forminator-step-label { font-family: var(--angebot-font-bold); color: var(--angebot-text-heading);}

/* Noch offen: alle Geschwister hinter dem aktuellen Schritt. */
.offerte-formular .forminator-current ~ .forminator-step .forminator-step-dot { background: none; border: 1px solid var(--angebot-border-subtle); color: var(--angebot-text-subtle);}
.offerte-formular .forminator-current ~ .forminator-step .forminator-step-dot::before { content: counter(schritt); width: auto; height: auto; background: none; -webkit-mask: none; mask: none;}
.offerte-formular .forminator-current ~ .forminator-step .forminator-step-label { font-family: var(--angebot-font-body); color: var(--angebot-text-subtle);}

/*
 * Hover der Schrittmarker.
 *
 * Forminator baut die Marker als <button>, und das Elementor-Kit faerbt jeden
 * Button der Webseite bei Hover und Fokus schwarz:
 *
 *   .elementor-kit-7 button:hover, .elementor-kit-7 button:focus
 *       { background-color: var(--e-global-color-5c1d8c2); color: ...; }
 *
 * Ueber CSS.getMatchedStylesForNode im Browser ermittelt. Der Ruhezustand war
 * bereits ueberschrieben, der Hover nicht, deshalb sprang der ganze Marker auf
 * Schwarz um. Die Regel unten nimmt Hintergrund und Textfarbe zurueck.
 *
 * Ein Hover ist trotzdem sinnvoll: die Marker sind anklickbar, handle_step()
 * in front.pagination.js:495 springt auch vorwaerts, sofern die Schritte davor
 * gueltig sind. Statt der Flaeche reagiert deshalb nur die Beschriftung.
 */
.offerte-formular .forminator-step:hover,
.offerte-formular .forminator-step:focus { background: none; color: inherit; box-shadow: none;}
.offerte-formular .forminator-step:hover .forminator-step-label,
.offerte-formular .forminator-step:focus .forminator-step-label { color: var(--angebot-text-heading);}
.offerte-formular .forminator-current ~ .forminator-step:hover .forminator-step-dot,
.offerte-formular .forminator-current ~ .forminator-step:focus .forminator-step-dot { border-color: var(--angebot-text-medium); color: var(--angebot-text-heading);}

.offerte-formular { --formular-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.33 8.5 6.33 11.5 12.67 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/*============ Schritte und Zeilen ============*/
/* Die Raender muessen weg: Forminator gibt jedem Schritt einen unteren Rand,
   und da die beiden inaktiven Schritte als leere Elemente stehen bleiben,
   summierte sich das zu 40px toter Hoehe zwischen Stepper und Inhalt. */
.offerte-formular .forminator-pagination--content,
.offerte-formular .forminator-pagination { display: flex; flex-direction: column; gap: var(--angebot-space-24); margin: 0 !important;}
.offerte-formular .offerte-formular__schritt-titel { margin: 0; font-family: var(--angebot-font-bold); font-size: var(--angebot-b1-size); line-height: var(--angebot-b1-line); color: var(--angebot-text-heading);}

/* Die Randkorrektur aus style.css wird hier zurueckgenommen, das Raster laeuft
   ueber gap statt ueber negative Raender. Die lange Kette spiegelt den
   Gegenspieler in style.css Zeile 23 bis 27, samt Attributselektor. */
.offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row { display: flex; flex-wrap: wrap; gap: var(--angebot-space-24); margin: 0 !important;}
.offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-col { flex: 1 1 100%; min-width: 0; padding: 0 !important;}
/* col-md-6 kommt aus dem geteilten Namensfeld: Forminator baut dessen beide
   Haelften mit einer eigenen Klasse, nicht mit col-6 des aeusseren Rasters.

   flex-basis 0 statt 50%: bei 50% ergeben zwei Spalten zusammen mit dem
   Abstand mehr als die Zeilenbreite, sie brechen um und stehen untereinander.
   Mit Basis 0 und flex-grow teilen sich beide den Platz nach Abzug des
   Abstands, unabhaengig davon, wie gross der Abstand ist. Das setzt voraus,
   dass eine Zeile genau zwei halbe Spalten enthaelt, und genau so ist das
   Formular gebaut.

   Das !important ist hier noetig und nicht vorsorglich: ohne es blieb der
   berechnete flex-basis bei 50%, obwohl diese Regel geladen war und der
   Selektor nachweislich traf. Welche Regel gewinnt, liess sich ueber
   document.styleSheets nicht ermitteln, ein Inline-Stil war es nicht. Wer das
   !important entfernt, muss die Spaltenbreiten nachmessen: 384px bei 1440px
   Fensterbreite sind richtig, 396px bedeuten, der Umbruch ist zurueck. */
.offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-col-6,
.offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-col-md-6 { flex: 1 1 0 !important; min-width: 0;}
/* Das geteilte Namensfeld federt Forminator mit einem Paar aus zwei Raendern
   ab: minus 30px am Wrapper .forminator-no-margin, plus 30px an den beiden
   Haelften darin. Beides steht in forminator-grid.open.min.css unter
   @media (min-width: 783px).

   Die Regel weiter oben nimmt jedem .forminator-row den Rand, und der Wrapper
   ist selbst ein .forminator-row. Damit faellt die negative Haelfte des Paars
   weg, die positive bleibt stehen, und die Namenszeile wird genau 30px hoeher
   als jede andere Zeile. Gemessen im Schritt "Kontaktdaten": Namenszeile 100px,
   E-Mail- und Firmenzeile je 70px, bei ueberall gleichen 24px Abstand.

   Deshalb faellt hier auch die zweite Haelfte weg. Den Abstand macht ohnehin
   das gap des Wrappers, sobald die beiden Haelften umbrechen. Das ist dieselbe
   Linie wie im Kommentar oben: Raster ueber gap statt ueber Raender.

   Die Medienabfrage ist die von Forminator, damit unterhalb von 783px alles
   bleibt, wie es war. */
@media (min-width: 783px) {
    .offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-no-margin .forminator-col { margin-bottom: 0 !important;}
}

/* Falls das Raster einmal nicht auf open steht, greift wenigstens das Layout. */
.offerte-formular .forminator-row { display: flex; flex-wrap: wrap; gap: var(--angebot-space-24);}

/*============ Felder ============*/
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field { display: flex; flex-direction: column; gap: var(--angebot-space-8);}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-label { display: block !important; margin: 0 !important; padding: 0 !important; font-family: var(--angebot-font-body) !important; font-size: var(--angebot-label-size) !important; line-height: var(--angebot-label-line) !important; color: var(--angebot-text-medium) !important;}
/* Der Stern haengt an Pflichtfeldern und uebernimmt die Farbe der Beschriftung. */
.offerte-formular .forminator-required { color: inherit;}

.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-input,
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-textarea,
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field select.forminator-select--field { width: 100% !important; height: auto !important; margin: 0 !important; padding: var(--angebot-space-12) var(--angebot-space-16) !important; font-family: var(--angebot-font-body) !important; font-size: var(--angebot-b2-size) !important; line-height: var(--angebot-b2-line) !important; color: var(--angebot-text-heading) !important; background: var(--angebot-bg-base) !important; border: 1px solid transparent !important; border-radius: var(--formular-feld-radius) !important; box-shadow: none !important; outline: none !important; appearance: none; transition: border-color 0.3s ease-in-out;}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-textarea { height: var(--formular-textarea) !important; resize: none !important;}

/* Das native Auswahlfeld braucht einen eigenen Pfeil, appearance: none nimmt
   den vom Betriebssystem weg. */
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field select.forminator-select--field { padding-right: calc(var(--angebot-space-16) * 2 + 12px) !important; background-image: var(--formular-pfeil) !important; background-repeat: no-repeat !important; background-position: right var(--angebot-space-16) center !important; background-size: 12px 12px !important;}
.offerte-formular { --formular-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23080808' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

.offerte-formular .forminator-input::placeholder,
.offerte-formular .forminator-textarea::placeholder { color: var(--angebot-text-subtle); opacity: 1;}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-input:focus,
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-textarea:focus,
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field select.forminator-select--field:focus { border-color: var(--angebot-border-subtle) !important;}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error .forminator-input,
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error .forminator-textarea,
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field.forminator-has_error select.forminator-select--field { border-color: var(--formular-fehler) !important;}

.offerte-formular .forminator-description { margin: 0 !important; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle);}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field .forminator-error-message { margin: 0 !important; padding: 0 !important; font-family: var(--angebot-font-body) !important; font-size: var(--angebot-b3-size) !important; line-height: var(--angebot-b3-line) !important; color: var(--formular-fehler) !important; background: none !important;}

/*============ Upload als Dropzone ============*/
/*
 * Forminator liefert beim Mehrfach-Upload nur ein nacktes Dateifeld, die
 * Dropzone aus dem Frame gibt es im Plugin nicht. Sie entsteht deshalb hier
 * aus den vorhandenen Teilen: der Feldwrapper wird zur gestrichelten Flaeche,
 * die Beschriftung zur Ueberschrift, der Kleintext zur Zeile darunter, und der
 * Knopf "Datei auswaehlen" kommt als Pseudo-Element. Das Dateifeld selbst legt
 * sich unsichtbar ueber die ganze Flaeche, damit Klick und Ablegen ueberall
 * funktionieren.
 */
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field-upload .forminator-field { position: relative; align-items: center; gap: var(--angebot-space-8); padding: var(--angebot-space-24); text-align: center; background: var(--angebot-bg-base); border: 1px dashed var(--angebot-text-medium); border-radius: var(--angebot-radius);}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field-upload .forminator-field::before { content: ""; order: 1; width: 26px; height: 26px; background-color: var(--angebot-text-heading); -webkit-mask: var(--formular-wolke) center / 26px 26px no-repeat; mask: var(--formular-wolke) center / 26px 26px no-repeat;}
.offerte-formular .forminator-ui.forminator-custom-form .forminator-field-upload .forminator-field .forminator-label { order: 2; font-family: var(--angebot-font-bold) !important; font-size: var(--angebot-b2-size) !important; line-height: var(--angebot-b2-line) !important; color: var(--angebot-text-heading) !important;}
.offerte-formular .forminator-field-upload .forminator-description { order: 3;}
.offerte-formular .forminator-field-upload .forminator-multi-upload { order: 4;}
.offerte-formular .forminator-field-upload .forminator-error-message { order: 6;}

/* Der Knopf ist Zierde, geklickt wird das darueberliegende Dateifeld. */
.offerte-formular .forminator-multi-upload { position: static;}
.offerte-formular .forminator-multi-upload::before { content: "Datei auswählen"; display: inline-flex; align-items: center; justify-content: center; padding: var(--angebot-space-12) var(--angebot-space-16); font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-btn-secondary-text); background: var(--angebot-btn-secondary-bg); border-radius: var(--angebot-btn-radius);}
.offerte-formular .forminator-multi-upload .forminator-input-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.offerte-formular .forminator-multi-upload .forminator-upload--remove { display: none !important;}

/* Die Dateiliste muss ueber dem unsichtbaren Dateifeld liegen, sonst sind ihre
   Knoepfe nicht erreichbar. */
.offerte-formular .forminator-uploaded-files { position: relative; z-index: 2; order: 5; width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--angebot-space-8);}
.offerte-formular .forminator-uploaded-file { padding: var(--angebot-space-8) var(--angebot-space-12); background: var(--angebot-bg-lift-solid); border-radius: var(--angebot-radius);}
/* Die Zeile selbst ist der Inhaltscontainer, nicht das li: Forminator setzt
   Vorschau, Text und Loeschknopf in ein eigenes div, siehe
   front.multifile.js:390. */
.offerte-formular .forminator-uploaded-file--content { display: flex; align-items: center; gap: var(--angebot-space-12); text-align: left;}
.offerte-formular .forminator-uploaded-file--preview { flex: 0 0 auto; display: flex; align-items: center; color: var(--angebot-text-medium);}
.offerte-formular .forminator-uploaded-file--text { flex: 1 1 auto; min-width: 0;}
.offerte-formular .forminator-uploaded-file--title { margin: 0; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.offerte-formular .forminator-uploaded-file--size { margin: 0; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle);}

/*
 * Der Loeschknopf ist ebenfalls ein <button> und erbt damit dieselbe Gestaltung
 * aus dem Elementor-Kit wie die Schrittmarker: gemessen padding 16px 24px,
 * border-radius 52px und ein Grundton. Fuer ein Kreuz von 16px ergibt das eine
 * ausgewachsene Pille. Hier wird er auf ein quadratisches Icon zurueckgesetzt.
 */
.offerte-formular .forminator-uploaded-file--delete { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--formular-loeschen); height: var(--formular-loeschen); margin: 0; padding: 0; font-size: var(--angebot-b3-size); line-height: 1; color: var(--angebot-text-medium); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.offerte-formular .forminator-uploaded-file--delete:hover,
.offerte-formular .forminator-uploaded-file--delete:focus { color: var(--formular-fehler); background: var(--angebot-bg-base);}

.offerte-formular { --formular-wolke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V8m0 0L9 11m3-3 3 3M6.5 18a4.5 4.5 0 0 1-.42-8.98 6 6 0 0 1 11.66-1.02A4.5 4.5 0 0 1 17.5 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/*============ Formen-Hinweis ============*/
.offerte-formular .offerte-formular__formen-hinweis { display: flex; align-items: center; justify-content: space-between; gap: var(--angebot-space-16);}
.offerte-formular .offerte-formular__formen-titel { margin: 0; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-heading);}
.offerte-formular .offerte-formular__formen-sub { margin: 0; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle);}
.offerte-formular .offerte-formular__formen-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: var(--angebot-space-12) var(--angebot-space-16); font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-btn-secondary-text); text-decoration: none; background: var(--angebot-btn-secondary-bg); border-radius: var(--angebot-btn-radius); transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.offerte-formular .offerte-formular__formen-btn:hover { color: var(--angebot-btn-primary-text); background: var(--angebot-btn-primary-bg);}

/*============ Einwilligungshinweis ============*/
.offerte-formular .offerte-formular__einwilligung { margin: 0; font-family: var(--angebot-font-body); font-size: var(--angebot-b3-size); line-height: var(--angebot-b3-line); color: var(--angebot-text-subtle);}

/*============ Navigation ============*/
/* Forminator setzt justify-content per Inline-Stil, auf den ersten Seiten
   flex-end, auf der letzten space-between. Das Ergebnis waere ein Formular,
   bei dem die Knoepfe im letzten Schritt auseinanderspringen. Gegen einen
   Inline-Stil hilft nur !important. */
/* Die Trennlinie ueber der Navigation steht im Frame von Schritt 1
   (Node 3438:2651) und gibt der Karte ihre Gliederung: oben der Fortschritt,
   in der Mitte die Eingaben, unten die Navigation. Sie laeuft hier bewusst in
   allen drei Schritten, nicht nur im ersten. Der Frame zeichnet sie zwar nur
   dort, ein Strich, der beim Weiterklicken verschwindet, wirkt aber wie ein
   Fehler. */
.offerte-formular .forminator-pagination-footer { display: flex; align-items: center; justify-content: flex-end !important; gap: var(--angebot-space-8); margin-top: var(--angebot-space-24); padding: var(--angebot-space-20) 0 0; border-top: 1px solid var(--angebot-border-subtle);}
.offerte-formular .forminator-pagination-footer .forminator-button { display: inline-flex; align-items: center; justify-content: center; width: auto !important; margin: 0 !important; padding: var(--angebot-btn-padding) !important; font-family: var(--angebot-font-body) !important; font-size: var(--angebot-btn-size) !important; line-height: var(--angebot-btn-line) !important; font-weight: normal !important; border: 0 !important; border-radius: var(--angebot-btn-radius) !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.offerte-formular .forminator-pagination-footer .forminator-button-back { color: var(--angebot-btn-secondary-text) !important; background: var(--angebot-btn-secondary-bg) !important;}
/* Der Absendeknopf im letzten Schritt heisst forminator-button-submit, nicht
   forminator-pagination-submit. Letzterer ist die versteckte Vorlage, aus der
   Forminator ihn baut. */
.offerte-formular .forminator-pagination-footer .forminator-button-next,
.offerte-formular .forminator-pagination-footer .forminator-button-submit { color: var(--angebot-btn-primary-text) !important; background: var(--angebot-btn-primary-bg) !important;}
.offerte-formular .forminator-pagination-footer .forminator-button:hover { color: var(--angebot-btn-primary-text) !important; background: var(--e-global-color-accent, #56a100) !important;}
.offerte-formular .forminator-pagination-footer .forminator-hidden { display: none !important;}

/*============ Rueckmeldung nach dem Absenden ============*/
.offerte-formular .forminator-response-message { margin: 0; padding: var(--angebot-space-16); font-family: var(--angebot-font-body); font-size: var(--angebot-b2-size); line-height: var(--angebot-b2-line); color: var(--angebot-text-heading); background: var(--angebot-bg-base); border-radius: var(--angebot-radius);}

/*============ Tablet und Mobil ============*/
/*
 * Untereinander wird die linke Spalte aufgeteilt statt komplett verschoben.
 *
 * Vorher lag das ganze Intro hinter dem Formular, mit der Begruendung, das
 * Formular sei die Conversion und duerfe nicht nach unten gedrueckt werden.
 * Das stimmt fuer Social Proof und Logos, nicht aber fuer die Ueberschrift:
 * ohne sie beginnt die Sektion mit einem Formular ohne Kontext, und der Titel
 * "Offerte in drei Schritten" ist genau die Erklaerung, die den Aufwand
 * einordnet. Deshalb jetzt Titel und Text davor, Trust dahinter.
 *
 * display: contents loest den Intro-Container auf, damit seine vier Kinder
 * einzeln in die Spalte einsortiert werden koennen. So bleibt das Markup
 * unveraendert und die Desktop-Spalte intakt.
 *
 * Der Breakpoint ist 1024 und nicht 767: darueber greift bereits die
 * Umstellung auf eine Spalte in angebot-sektionen.css. Bei 767 waere die
 * Reihenfolge zwischen Tablet und Handy unterschiedlich.
 */
@media (max-width: 1024px) {
    .offerte-formular .offerte-formular__spalten { flex-direction: column; gap: 24px;}
    .offerte-formular .offerte-formular__intro { display: contents;}
    .offerte-formular .offerte-formular__titel { order: 1;}
    .offerte-formular .offerte-formular__text { order: 2;}
    .offerte-formular .offerte-formular__formular { order: 3;}
    .offerte-formular .offerte-formular__social-proof { order: 4;}
    /* Beschriftung und Logos sind ein Block, deshalb reicht eine Ordnungszahl.
       Der Abstand kommt vom gap der Spalte, der eigene Rand faellt weg. */
    .offerte-formular .offerte-formular__kunden { order: 5; margin-top: 0;}
}

@media (max-width: 767px) {
    /* Ohne gap, aus demselben Grund wie auf Desktop: die leeren Schritte
       wuerden ihn sonst mitnehmen. */
    .offerte-formular .forminator-ui.forminator-custom-form { padding: var(--angebot-space-20) !important;}
    .offerte-formular .forminator-pagination-steps { margin-bottom: var(--angebot-space-20);}
    /* Die drei Beschriftungen nebeneinander passen nicht mehr. Es bleiben die
       Punkte mit ihren Ziffern, beschriftet ist nur der aktuelle Schritt, denn
       nur der sagt, wo man gerade steht. */
    .offerte-formular .forminator-pagination-steps { gap: var(--angebot-space-8); padding-bottom: var(--angebot-space-20);}
    .offerte-formular .forminator-step-label { display: none;}
    .offerte-formular .forminator-step.forminator-current .forminator-step-label { display: inline;}
    .offerte-formular .forminator-break { flex-basis: auto; width: auto; flex-grow: 1;}
    /* Zweispaltige Zeilen brechen um. Auch hier braucht es die volle Kette,
       sonst gewinnt die Desktop-Regel weiter oben. */
    .offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row { gap: var(--angebot-space-16);}
    .offerte-formular .forminator-pagination--content,
    .offerte-formular .forminator-pagination { gap: var(--angebot-space-16);}
    /* Das !important muss hier mitgehen, sonst gewinnt die Desktop-Regel oben,
       die aus dem gleichen Grund eines traegt. */
    .offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-col-6,
    .offerte-formular .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-col-md-6 { flex: 1 1 100% !important;}
    .offerte-formular .offerte-formular__formen-hinweis { flex-direction: column; align-items: flex-start; gap: var(--angebot-space-12);}
    .offerte-formular .offerte-formular__formen-btn { width: 100%;}
    /* Die beiden Knoepfe teilen sich die Zeile, sonst wird Zurueck zum Fitzel. */
    .offerte-formular .forminator-pagination-footer .forminator-button { flex: 1 1 0;}
}