Titel
Beschreibung
) Erster Block je Schritt = große Sektions-Überschrift mit farbigem Akzentstrich. Weitere Blöcke = kleine "Pill"-Zwischen- überschrift (wie .subheading im Mockup). ================================================================ */ form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html { margin: 0 0 6px !important; } form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html:not(:first-of-type) { padding-top: 10px !important; border-top: 1px solid #eef2f2; } form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html p:first-child { margin: 0 0 4px !important; } form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html:first-of-type p:first-child { position: relative; padding-left: 16px; color: #173945; font-size: 1rem; font-weight: 720; letter-spacing: -0.02em; line-height: 1.25; } form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html:first-of-type p:first-child::before { content: ""; position: absolute; top: 3px; left: 0; bottom: 3px; width: 4px; border-radius: 4px; background: var(--step-accent, var(--teal)); } form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html:not(:first-of-type) p:first-child { display: inline-flex; padding: 5px 10px; border-radius: 8px; background: var(--step-soft, var(--teal-pale)); color: var(--step-accent, var(--teal-dark)); font-size: 0.8rem; font-weight: 760; letter-spacing: 0.02em; } form.elementor-form[name="Kontaktformular"] .elementor-field-type-html p.form-comment { margin: 0 0 4px !important; color: var(--ink-soft); font-size: 0.8rem; font-weight: 400; line-height: 1.5; } /* ================================================================ 4) FELD-LABELS (z.B. "Role/function", "NDA", "limits:") ================================================================ */ form.elementor-form[name="Kontaktformular"] .elementor-field-group > label.elementor-field-label { margin: 0 0 5px !important; color: #445c65; font-size: 0.8rem; font-weight: 680; } form.elementor-form[name="Kontaktformular"] .elementor-mark-required .elementor-field-label:after { color: var(--danger) !important; } /* ================================================================ 5) TEXT- / E-MAIL- / TEL- / TEXTAREA-FELDER ================================================================ */ form.elementor-form[name="Kontaktformular"] .elementor-field-textual { width: 100% !important; min-width: 0; min-height: 34px; padding: 9px 12px !important; border: 1px solid var(--line-strong) !important; border-radius: 11px !important; background: #fbfdfd !important; color: var(--ink) !important; box-shadow: none !important; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } form.elementor-form[name="Kontaktformular"] textarea.elementor-field-textual { min-height: 96px; padding: 10px 10px !important; line-height: 1.55; } form.elementor-form[name="Kontaktformular"] .elementor-field-textual::placeholder { color: #93a2a6; } form.elementor-form[name="Kontaktformular"] .elementor-field-textual:focus { border-color: var(--step-accent, var(--teal)) !important; outline: none !important; background: #fff !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-accent, var(--teal)) 12%, transparent) !important; } /* ================================================================ 6) CHECKBOX-GRUPPEN ALS "CHOICE-CHIPS" (Pillen), wie im Mockup ================================================================ */ form.elementor-form[name="Kontaktformular"] .elementor-field-subgroup { display: flex !important; flex-wrap: wrap; gap: 8px; } form.elementor-form[name="Kontaktformular"] .elementor-field-option { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 7px 12px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fbfdfd; cursor: pointer; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } form.elementor-form[name="Kontaktformular"] .elementor-field-option:hover { border-color: #8fc4bd; background: #f1faf8; } form.elementor-form[name="Kontaktformular"] .elementor-field-option:has(input:checked) { border-color: var(--step-accent, var(--teal)); background: var(--step-soft, var(--teal-pale)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step-accent, var(--teal)) 15%, transparent); } form.elementor-form[name="Kontaktformular"] .elementor-field-option label { margin: 0 !important; min-width: 0; color: #425760; font-size: 0.85rem; font-weight: 570; line-height: 1.25; cursor: pointer; overflow-wrap: break-word; } form.elementor-form[name="Kontaktformular"] .elementor-field-option:has(input:checked) label { color: var(--step-accent, var(--teal-dark)); } form.elementor-form[name="Kontaktformular"] .elementor-field-option input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; margin: 0 !important; accent-color: var(--step-accent, var(--teal)); cursor: pointer; } /* ================================================================ 7) NDA-QR-BLOCK ("Link to JR standard NDA") ================================================================ */ form.elementor-form[name="Kontaktformular"] .form-qr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 12px 16px; border: 1px solid #cce1de; border-radius: 15px; background: var(--teal-pale); } form.elementor-form[name="Kontaktformular"] .form-qr a { color: var(--teal-dark) !important; font-size: 0.9rem; font-weight: 680; text-decoration: none; } form.elementor-form[name="Kontaktformular"] .form-qr a:hover { text-decoration: underline; } form.elementor-form[name="Kontaktformular"] .form-qr img { width: 62px; height: 62px; border: 5px solid #fff; border-radius: 7px; object-fit: cover; } /* ================================================================ 8) NAVIGATIONS-BUTTONS (Back / Next / Absenden) Next & Submit = kräftig (Primary), Back = zurückhaltend (Quiet) ================================================================ */ form.elementor-form[name="Kontaktformular"] .e-form__buttons { display: flex !important; width: 100% !important; max-width: 100% !important; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px !important; padding-top: 20px; border-top: 1px solid #eef2f2; } /* Wenn nur ein Button in einem Schritt existiert (Schritt 1: nur "Next"), diesen nach rechts schieben */ form.elementor-form[name="Kontaktformular"] .e-form__buttons:has(.e-form__buttons__wrapper__button-next):not(:has(.e-form__buttons__wrapper__button-previous)) { justify-content: flex-end; } form.elementor-form[name="Kontaktformular"] .e-form__buttons__wrapper { width: auto !important; } form.elementor-form[name="Kontaktformular"] .elementor-button { display: inline-flex !important; min-height: 44px !important; height: auto !important; padding: 0 22px !important; align-items: center; justify-content: center; border: 1px solid transparent !important; border-radius: 12px !important; font-size: 0.9rem !important; font-weight: 720 !important; line-height: 1 !important; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } form.elementor-form[name="Kontaktformular"] .elementor-button:hover { transform: translateY(-1px); } /* Next + Absenden = Primary (Teal) */ form.elementor-form[name="Kontaktformular"] .e-form__buttons__wrapper__button-next, form.elementor-form[name="Kontaktformular"] .elementor-field-type-submit .elementor-button { background: var(--teal) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(0, 139, 122, 0.2) !important; } form.elementor-form[name="Kontaktformular"] .e-form__buttons__wrapper__button-next:hover, form.elementor-form[name="Kontaktformular"] .elementor-field-type-submit .elementor-button:hover { background: var(--teal-dark) !important; } /* Back = Quiet (weiß mit Rahmen) */ form.elementor-form[name="Kontaktformular"] .e-form__buttons__wrapper__button-previous { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; box-shadow: none !important; } form.elementor-form[name="Kontaktformular"] .e-form__buttons__wrapper__button-previous:hover { border-color: var(--teal) !important; color: var(--teal-dark) !important; } /* ================================================================ 9) FOKUS-STIL für Tastaturnutzung (Barrierefreiheit) ================================================================ */ form.elementor-form[name="Kontaktformular"] button:focus-visible, form.elementor-form[name="Kontaktformular"] a:focus-visible, form.elementor-form[name="Kontaktformular"] input:focus-visible, form.elementor-form[name="Kontaktformular"] textarea:focus-visible { outline: 3px solid rgba(0, 139, 122, 0.24) !important; outline-offset: 2px; } /* ================================================================ 10) RESPONSIVE ================================================================ */ @media (max-width: 767px) { form.elementor-form[name="Kontaktformular"] { padding: 18px !important; border-radius: 16px; } form.elementor-form[name="Kontaktformular"] .e-form__step .elementor-field-type-html:first-of-type p:first-child { font-size: 1.1rem; } form.elementor-form[name="Kontaktformular"] .e-form__buttons { flex-wrap: wrap; } } /* ================================================================ 11) EINHEITLICHES GRUNDRASTER FÜR ALLE 4 SCHRITTE Jedes Feld/jede Überschrift nimmt standardmäßig die volle Breite des Schritts ein und bekommt einen einheitlichen Abstand nach unten. Das hebt die in Elementor selbst gesetzten Spaltenbreiten (col-20/25/33/40/50 usw.) auf, die sonst zu unschönem, zufälligem Umbruch-Verhalten führen (Felder rutschen halb nebeneinander, halb übereinander). Einzelne Felder werden weiter unten pro Schritt gezielt und kontrolliert nebeneinandergesetzt. :where() hält die Spezifität bei 0, damit die spezifischeren Einzelfeld-Regeln (z.B. .elementor-field-group-field_xxx) weiter unten sie zuverlässig überschreiben können. ================================================================ */ form.elementor-form[name="Kontaktformular"] :where(.elementor-form-fields-wrapper > .e-form__step > .elementor-field-group) { width: 100% !important; max-width: 100% !important; margin: 0 0 18px !important; } /* ================================================================ 12) SCHRITT 1: 3-SPALTEN-LAYOUT Spalte 1 (links): "Contact" + Company/Name/E-Mail/Phone + Role/function Spalte 2 (Mitte): "NDA" + NDA-Link-Box + "Brief Description" + Textarea Spalte 3 (rechts): Inquiry objective / Project status / Desired timeframe (jetzt untereinander, nicht mehr nebeneinander — bei 3 Spalten wäre eine zusätzliche 3er-Unterteilung zu schmal) + "Input provided by customer" Die HTML-Struktur bleibt unverändert. Technik: CSS-MEHRSPALTEN-LAYOUT (column-count), NICHT CSS-Grid. Grund: Bei CSS-Grid teilen sich alle Elemente in derselben Grid-Zeile automatisch dieselbe Zeilenhöhe über ALLE Spalten hinweg — das erzeugt bei unterschiedlich hohen Blöcken unweigerlich große Lücken. Mehrspalten-Layout füllt dagegen Spalte 1 in Quellreihenfolge komplett auf, bevor es in Spalte 2 weitergeht, usw. Zwei erzwungene Spaltenumbrüche (break-after) sorgen dafür, dass Spalte 1 exakt nach "Role/function" und Spalte 2 exakt nach der Beschreibungs-Textarea endet. Hinweis: Die Feld-Klassen (z.B. field_390076c) sind von Elementor automatisch vergeben. Falls du in Elementor Felder in Schritt 1 hinzufügst/entfernst/umsortierst, müssen diese Selektoren entsprechend angepasst werden. ================================================================ */ /* WICHTIG: :not(.elementor-hidden) — sonst überschreibt "display:block" Elementors eigene Logik zum Ausblenden dieses Schritts, wenn man auf "Next" klickt (Elementor fügt dann die Klasse "elementor-hidden" hinzu, die "display:none" setzen soll). Ohne dieses :not() bliebe Schritt 1 nach einem Klick auf "Next" dauerhaft sichtbar. */ form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(1):where(:not(.elementor-hidden)) { display: block !important; column-count: 3; column-gap: 24px; column-fill: auto; /* Spalte 1 zuerst voll auffüllen, dann Spalte 2, dann Spalte 3 */ } /* :where() hält die Spezifität dieser Basis-Regel absichtlich niedrig, damit spezifischere Einzelfeld-Regeln sie bei Bedarf überschreiben können. Bei 3 schmaleren Spalten stehen alle Felder in Schritt 1 jetzt volle Spaltenbreite untereinander (keine 2er/3er-Nebeneinander- Paare mehr — dafür sind die Spalten zu schmal). */ form.elementor-form[name="Kontaktformular"] :where(.e-form__step:nth-of-type(1) > .elementor-field-group) { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 16px !important; width: 100% !important; max-width: 100% !important; } /* Erzwungener Spaltenumbruch 1: Spalte 1 endet nach "Role/function" */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_81c3b4f { break-after: column; -webkit-column-break-after: always; } /* Erzwungener Spaltenumbruch 2: Spalte 2 endet nach der Beschreibungs- Textarea, danach beginnt Spalte 3 mit "Inquiry objective" */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_cb9331b { break-after: column; -webkit-column-break-after: always; } /* --- Trennlinie vor der NDA-Auswahl --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_c1a6a24 { padding-top: 10px !important; border-top: 1px solid #eef2f2; } /* "Fixed deadline" erscheint nur, wenn "fixed deadline" angehakt ist */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-fix_dl { width: 100% !important; } /* --- "Input provided by customer" als hervorgehobene Box --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_5210df2 { padding: 14px !important; border: 1px solid #d9e9e8; border-radius: 14px; background: #f4f8f8; } /* --- Button-Zeile: über die volle Breite unter allen 3 Spalten --- */ form.elementor-form[name="Kontaktformular"] .e-form__step:nth-of-type(1) > .e-form__buttons { column-span: all; width: 100% !important; margin-top: 12px !important; padding-top: 10px; border-top: 1px solid #eef2f2; } /* Unterhalb von ~1100px: nur noch 2 Spalten (sonst werden die Spalten zu schmal für die Checkbox-Chips). Unterhalb von ~900px: 1 Spalte, natürliche Reihenfolge. */ @media (max-width: 1100px) { form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(1) { column-count: 2; } } @media (max-width: 900px) { form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(1) { column-count: 1; } /* Die erzwungenen Spaltenumbrüche (Punkt 12) würden sonst auch bei column-count:1 noch weitere, überlaufende Spalten erzeugen — deshalb hier deaktivieren. */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_81c3b4f, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_cb9331b { break-after: auto; -webkit-column-break-after: auto; } } /* ================================================================ 13) SCHRITT 2 „Application & Structure" — ECHTES 2-SPALTEN-LAYOUT Links: "Application" + Application field + Other + Target function + Other Rechts: "Structure" + Structure source + Structure type + die 3 Maßangaben Gleiche Technik wie Schritt 1 (CSS-Mehrspalten-Layout mit erzwungenem Spaltenumbruch), da CSS-Grid auch hier wieder Zeilenhöhen über beide Spalten hinweg koppeln und Lücken erzeugen würde. ================================================================ */ /* :not(.elementor-hidden) — sonst überschreibt "display:block" Elementors eigene Ausblend-Logik beim Klick auf "Next" (siehe Schritt 1). */ form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(2):where(:not(.elementor-hidden)) { display: block !important; column-count: 2; column-gap: 30px; column-fill: auto; } form.elementor-form[name="Kontaktformular"] :where(.e-form__step:nth-of-type(2) > .elementor-field-group) { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } /* Erzwungener Spaltenumbruch: Spalte 1 endet nach "Target function" / dessen "Other:"-Feld — danach beginnt Spalte 2 mit "Structure". Beide (target + targetother) bekommen den Umbruch, da targetother nur bedingt sichtbar ist — nur das jeweils tatsächlich sichtbare Element löst den Umbruch aus. */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-target, form.elementor-form[name="Kontaktformular"] .elementor-field-group-targetother { break-after: column; -webkit-column-break-after: always; } /* --- Die 3 Maßangaben (Lateral size / Height-depth / active area) als 3er-Reihe innerhalb der rechten Spalte --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_7858533, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_5e37a72, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_c952a06 { display: inline-block; width: calc(33.33% - 11px) !important; vertical-align: top; margin-right: 16px !important; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_c952a06 { margin-right: 0 !important; } /* Die bedingt eingeblendeten "Other:"-Felder (apother/targetother) etwas schmaler, damit sie nicht wie ein Vollbreite-Pflichtfeld wirken */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-apother, form.elementor-form[name="Kontaktformular"] .elementor-field-group-targetother { max-width: 100%; } /* --- Button-Zeile: über die volle Breite unter beiden Spalten --- */ form.elementor-form[name="Kontaktformular"] .e-form__step:nth-of-type(2) > .e-form__buttons { column-span: all; width: 100% !important; margin-top: 12px !important; padding-top: 10px; border-top: 1px solid #eef2f2; } /* Unterhalb von ~900px: zurück auf eine Spalte, natürliche Reihenfolge */ @media (max-width: 900px) { form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(2) { column-count: 1; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-target, form.elementor-form[name="Kontaktformular"] .elementor-field-group-targetother { break-after: auto; -webkit-column-break-after: auto; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_7858533, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_5e37a72, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_c952a06 { display: block; width: 100% !important; margin-right: 0 !important; } } @media(max-width:1024px){ form.elementor-form[name="Kontaktformular"] .e-form__indicators__indicator__separator { display:none; } } /* ================================================================ 14) SCHRITT 3 „Material, Outcome & Verification" — ECHTES 3-SPALTEN-LAYOUT (deckt sich mit den 3 Überschriften in diesem Schritt): Spalte 1: "Material" (Substrate class … Other/quantification) Spalte 2: "Project Outcome" (Outcome-Checkboxen … delivery address) Spalte 3: "Requirements/Tests" (Top priority … Other:) Gleiche Mehrspalten-Technik wie Schritt 1/2. ================================================================ */ form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(3):where(:not(.elementor-hidden)) { display: block !important; column-count: 3; column-gap: 24px; column-fill: auto; } form.elementor-form[name="Kontaktformular"] :where(.e-form__step:nth-of-type(3) > .elementor-field-group) { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } /* Erzwungene Spaltenumbrüche: Spalte 1 endet nach "Other/quantification", Spalte 2 endet nach "delivery address" */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_0f4dcfb, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b260a01 { break-after: column; -webkit-column-break-after: always; } /* --- Spalte 1 „Material": Substrate class + "Other:" rechts daneben --- Bug-Fix: "Feld Other bei substrate class kann kleiner rechts neben customer substrate platziert werden" */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_39b9661 { display: inline-block; width: calc(68% - 8px) !important; vertical-align: top; margin-right: 16px !important; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_688adaa { display: inline-block; width: calc(32% - 8px) !important; vertical-align: top; } /* --- Spalte 2 „Project Outcome": die 4 Mengen-/Format-Felder als 2×2-Reihen (in der schmaleren Spalte ist eine 4er-Reihe zu eng) --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_d9c5a45, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b23c14c { display: inline-block; width: calc(50% - 8px) !important; vertical-align: top; margin-right: 16px !important; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_e3e0b67, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_3500420 { display: inline-block; width: calc(50% - 8px) !important; vertical-align: top; } /* --- Delivery address: optisch höher (3 Zeilen), volle Spaltenbreite --- Bug-Fix: "Feld für delivery adress ist sehr klein, min 3 Zeilen und doppelte Breite". Hinweis: es ist technisch ein einzeiliges Elementor-Textfeld (kein Textarea) — der Text bleibt daher immer einzeilig, das Feld selbst wird aber deutlich größer dargestellt. */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b260a01 .elementor-field-textual { min-height: 92px !important; padding-top: 12px !important; align-items: flex-start; } /* --- Spalte 3 „Requirements/Tests": alles stapelt sauber volle Spaltenbreite untereinander — dadurch landet "Specification" automatisch direkt unter "Application environment" --- Bug-Fix: "unter Requirements/Tests bei Application environment gehört das Feld Specifications darunter" — und da die Spalte selbst schon schmal ist, "spannt" auch "Other:" bei Required tests nicht mehr über die ganze Seite --- Bug-Fix: "other tests ist über die gesamte Breite" */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_834cf1a { max-width: 260px; } /* Unterhalb von ~1100px: nur noch 2 Spalten, unterhalb von ~900px: 1 Spalte, natürliche Reihenfolge */ @media (max-width: 1100px) { form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(3) { column-count: 2; } } @media (max-width: 900px) { form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(3) { column-count: 1; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_0f4dcfb, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b260a01 { break-after: auto; -webkit-column-break-after: auto; } } /* --- Button-Zeile: über die volle Breite unter allen 3 Spalten --- */ form.elementor-form[name="Kontaktformular"] .e-form__step:nth-of-type(3) > .e-form__buttons { column-span: all; width: 100% !important; margin-top: 12px !important; padding-top: 20px; border-top: 1px solid #eef2f2; } /* ================================================================ 15) SCHRITT 4 „Next Steps & Submission" — ECHTES 2-SPALTEN-LAYOUT (CSS Grid statt Floats: Floats erzwingen laut CSS-Spec, dass kein späteres Float höher stehen darf als ein früheres — d.h. weil im HTML die komplette linke Spalte (4 Felder) VOR der rechten Spalte (4 Felder) kommt, wurde die rechte Spalte immer nach unten gedrückt, sobald die linke schon Höhe aufgebaut hatte ("Additional comments" stand dadurch viel zu tief, nicht auf Höhe von "Next Steps"). CSS Grid mit grid-auto-flow:column löst das sauber: die ersten 4 Felder im Quellcode füllen automatisch Spalte 1 (Zeile 1-4), die nächsten 4 Felder Spalte 2 (Zeile 1-4) — beide Spalten starten dadurch garantiert exakt auf derselben Höhe.) Spalte 1: "Next Steps" + Checkbox + Attachments + Datei-Upload Spalte 2: "Additional comments" + Textarea + "How did you hear..." + Other Sources Darunter, volle Breite (grid-column:1/-1): "Ready for review?" + Datei-Upload + Buttons. ================================================================ */ /* WICHTIG: Elementor setzt den Step-Wrapper selbst auf ein Flex-Layout (das ist die Basis für die col-50/col-30/col-33-Prozentbreiten). Das überschreiben wir hier direkt mit einem eigenen Grid-Layout. Jedes Feld bekommt UNTEN explizit seine Spalte + Zeile zugewiesen (statt sich auf grid-auto-flow:column zu verlassen — das hat sich in der Praxis als unzuverlässig erwiesen, siehe die "col-50"- Prozentbreiten von Elementor, die trotz 1fr/1fr-Spalten seltsame Spaltenbreiten erzeugt haben). :where(:not(.elementor-hidden)) sorgt dafür, dass die höhere Spezifität hier nicht die Mobile/ Tablet-Überschreibung weiter unten blockiert (siehe Schritt 1-3, gleiches Muster). */ form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(4):where(:not(.elementor-hidden)) { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: start; } /* --- Explizite Platzierung: Spalte 1 (links) --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b413bf8 { grid-column: 1; grid-row: 1; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_c18361b { grid-column: 1; grid-row: 2; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_feab520 { grid-column: 1; grid-row: 3; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_7d83562 { grid-column: 1; grid-row: 4; } /* --- Explizite Platzierung: Spalte 2 (rechts) --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_5876ded { grid-column: 2; grid-row: 1; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b3e30b7 { grid-column: 2; grid-row: 2; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_689e3f6 { grid-column: 2; grid-row: 3; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_2dd2d8c { grid-column: 2; grid-row: 4; } /* --- Datei-Upload-Felder einheitlich zum restlichen Design stylen (beide: field_7d83562 unter Attachments UND field_0869752 unten bei "Ready for review?") — der native "Datei auswählen"/"Choose File"- Button wird an den Look der anderen Buttons/Inputs angeglichen --- */ form.elementor-form[name="Kontaktformular"] .elementor-upload-field { width: 100% !important; min-height: 44px; padding: 7px 10px !important; border: 1px solid var(--line-strong) !important; border-radius: 11px !important; background: #fbfdfd !important; color: var(--ink-soft) !important; font-size: 0.85rem !important; cursor: pointer; } /* WICHTIG: ::file-.elementor-8640 .elementor-element.elementor-element-4af8400-button (Standard) und das ältere, WebKit-präfigierte ::-webkit-file-upload-button dürfen NICHT in einer gemeinsamen, kommagetrennten Regel stehen. Erkennt ein Browser eine der beiden Pseudo-Elemente nicht, wird laut CSS-Spec die GESAMTE Regel verworfen — nicht nur der unbekannte Teil. Das war vermutlich der Grund, warum der Button auf der Live-Seite komplett ungestylt blieb. Deshalb hier bewusst als zwei getrennte Regeln (auch bei :hover). */ form.elementor-form[name="Kontaktformular"] .elementor-upload-field::file-.elementor-8640 .elementor-element.elementor-element-4af8400-button { margin-right: 12px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--teal-pale); color: var(--teal-dark); font-size: 0.82rem; font-weight: 720; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } form.elementor-form[name="Kontaktformular"] .elementor-upload-field::-webkit-file-upload-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--teal-pale); color: var(--teal-dark); font-size: 0.82rem; font-weight: 720; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } form.elementor-form[name="Kontaktformular"] .elementor-upload-field:hover::file-.elementor-8640 .elementor-element.elementor-element-4af8400-button { background: var(--teal); color: #fff; border-color: var(--teal); } form.elementor-form[name="Kontaktformular"] .elementor-upload-field:hover::-webkit-file-upload-button { background: var(--teal); color: #fff; border-color: var(--teal); } /* --- Rechte Spalte --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_5876ded, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b3e30b7, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_689e3f6, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_2dd2d8c { float: right; clear: right; width: calc(50% - 15px) !important; max-width: calc(50% - 15px) !important; } /* --- Mehr Abstand zwischen "Additional comments"-Textarea und "How did you hear about us?" --- Bug-Fix: "Abstand zwischen Eingabefeld Additional comments und How did you hear about us? ist zu gering" */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_689e3f6 { margin-top: 20px !important; } /* --- Abschluss-Block "Ready for review?" + Datei-Upload + Buttons: brechen bewusst aus den 2 Grid-Spalten aus und stehen über die volle Breite darunter (grid-column:1/-1 = von der ersten bis zur letzten Spalte, das Grid rutscht dafür automatisch eine Zeile weiter) --- */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_58101e6, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_0869752, form.elementor-form[name="Kontaktformular"] .e-form__step:nth-of-type(4) > .e-form__buttons { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_0869752 { max-width: 320px !important; } /* --- Button-Zeile: Abstand/Trennlinie --- */ form.elementor-form[name="Kontaktformular"] .e-form__step:nth-of-type(4) > .e-form__buttons { margin-top: 12px !important; padding-top: 20px; border-top: 1px solid #eef2f2; } /* Unterhalb von ~900px: zurück auf eine Spalte, natürliche Reihenfolge. WICHTIG: :where(:not(.elementor-hidden)) hier NICHT vergessen (wie bei Schritt 1-3) — sonst überschreibt "display:block!important" Elementors eigene .elementor-hidden{display:none!important}-Logik und Schritt 4 bleibt unterhalb 900px dauerhaft sichtbar, auch wenn gerade ein anderer Schritt aktiv ist. */ @media (max-width: 900px) { form.elementor-form[name="Kontaktformular"] .elementor-form-fields-wrapper > .e-form__step:nth-of-type(4):where(:not(.elementor-hidden)) { display: block !important; } form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b413bf8, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_c18361b, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_feab520, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_7d83562, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_5876ded, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b3e30b7, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_689e3f6, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_2dd2d8c { width: 100% !important; max-width: 100% !important; } } /* ================================================================ 16) RESPONSIVE FÜR SCHRITT 2: Nebeneinander-Paar unter ~900px zurück auf volle Breite ================================================================ */ @media (max-width: 900px) { form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_39b9661, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_688adaa, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_d9c5a45, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_e3e0b67, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_b23c14c, form.elementor-form[name="Kontaktformular"] .elementor-field-group-field_3500420 { display: block; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } } form.elementor-form[name="Kontaktformular"] #idl-kontakt-pfeil { position: relative; top: 10px !important; } /* Bug-Fix: Wenn "other" bei Target function angehakt ist, soll der Umbruch erst NACH dem sichtbaren "Other:"-Feld passieren, nicht schon direkt nach "Target function" selbst */ form.elementor-form[name="Kontaktformular"] .elementor-field-group-target:has(+ .elementor-field-group-targetother:not([style*="display: none"])) { break-after: auto !important; -webkit-column-break-after: auto !important; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'JR'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-regular.eot'); src: url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-regular.woff2') format('woff2'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-regular.woff') format('woff'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-regular.ttf') format('truetype'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-regular.svg#JR') format('svg'); } @font-face { font-family: 'JR'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-700.eot'); src: url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-700.woff2') format('woff2'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-700.woff') format('woff'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-700.ttf') format('truetype'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-700.svg#JR') format('svg'); } @font-face { font-family: 'JR'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-900.eot'); src: url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-900.woff2') format('woff2'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-900.woff') format('woff'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-900.ttf') format('truetype'), url('https://www.joanneum.at/materials/wp-content/uploads/sites/6/2023/03/roboto-v30-latin-900.svg#JR') format('svg'); } /* End Custom Fonts CSS */