innerhalb des Labels. Als Block-Element erzwingt es einen Umbruch vor dem ::after – daher inline. */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock label p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock label p { display: inline !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock div label::after { content: " *" !important; display: inline !important; order: 0 !important; margin: 0 0 0 4px !important; color: #c0392b !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- C4) SCHUTZREGEL MOBILE + TABLET – versteckte Felder bleiben versteckt MUSS die letzte Regel der gesamten Datei bleiben. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [hidden], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .hidden, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="hidden"] { display: none !important; } body:is([data-elementor-device-mode="widescreen"]) .marketingForm div {min-width: 750px !important; } /* ############################################################################ TEIL E – FORMULAR IM ANMELDE-MODAL (helle Variante) ############################################################################ */ .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form { margin: 0 !important; width: 100%; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form > .elementor-widget-container { padding: 0 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .elementor-widget-container > div, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .elementor-widget-container > div > main, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form form.marketingForm, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form form.marketingForm > div, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .emptyContainer, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .wrap-section, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .columnContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .textFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .optionSetFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .lookupFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .phoneFormFieldBlock { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm input[type="text"], .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm input[type="email"], .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm input[type="tel"], .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #dfe3e8 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 16px !important; color: #1f2a36 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm input:focus, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm select:focus { outline: none !important; border-bottom-color: #004070 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm label { color: #004070 !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .submitButtonWrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin-top: 32px !important; text-align: center !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm button.submitButton { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 16px 30px !important; height: auto !important; background: #73d636 !important; border: 1px solid #73d636 !important; border-radius: 0 !important; color: #fff !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm button.submitButton span { font-size: 14px !important; font-weight: 600 !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm button.submitButton:hover { background: #5fb82a !important; border-color: #5fb82a !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm *:not(input[type="checkbox"]):not(input[type="radio"]) { min-width: 0 !important; max-width: 100% !important; } .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm .notification-container, .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm div[class$="FormFieldBlock"], .elementor-79290 .elementor-element.elementor-element-7e796219.gws-wc-form .marketingForm div[class*="FormFieldBlock "] { width: 100% !important; padding-right: 0 !important; box-sizing: border-box !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ec5e5af *//* ============ GWS Anmelde-Modal (Webcasts) ============ */ .elementor-79290 .elementor-element.elementor-element-ec5e5af.gws-modal { position: fixed !important; inset: 0; z-index: 100000; display: flex !important; align-items: center; justify-content: center; padding: 24px !important; margin: 0 !important; width: 100% !important; max-width: none !important; background: rgba(0, 32, 64, .72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } .elementor-79290 .elementor-element.elementor-element-ec5e5af.gws-modal.is-open, .elementor-79290 .elementor-element.elementor-element-ec5e5af.gws-modal:target { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__dialog { position: relative; display: block !important; width: 100% !important; max-width: 560px !important; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 56px 56px 48px !important; box-sizing: border-box; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; transform: translateY(12px); transition: transform .2s ease; } .elementor-79290 .elementor-element.elementor-element-ec5e5af.gws-modal.is-open .gws-modal__dialog, .elementor-79290 .elementor-element.elementor-element-ec5e5af.gws-modal:target .gws-modal__dialog { transform: none; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__dialog > .elementor-element { margin: 0; width: 100%; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__close { position: absolute; top: 20px; right: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #004070 !important; font-size: 30px; line-height: 1; text-decoration: none !important; background: none; border: 0; cursor: pointer; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__close:hover { color: #3ec1f0 !important; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__close:focus-visible { outline: 2px solid #3ec1f0; outline-offset: 2px; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__label { margin: 0 0 12px; color: #1c9fd6; font-size: 16px; font-weight: 700; line-height: 1.3; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__title { margin: 0 0 16px; color: #004070; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__meta { margin: 0; padding-bottom: 32px; border-bottom: 1px solid #dfe3e8; color: #6b7178; font-size: 15px; line-height: 1.5; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__privacy { margin-top: 24px !important; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__privacy p { margin: 0; color: #6b7178; font-size: 12px; line-height: 1.6; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__privacy a { color: #004070; text-decoration: none; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__privacy a:hover { text-decoration: underline; } body.gws-modal-open { overflow: hidden; } @media (max-width: 767px) { .elementor-79290 .elementor-element.elementor-element-ec5e5af.gws-modal { padding: 12px !important; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__dialog { padding: 48px 20px 28px !important; max-height: calc(100dvh - 24px); } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__close { top: 10px; right: 10px; } .elementor-79290 .elementor-element.elementor-element-ec5e5af .gws-modal__title { font-size: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0cfeeee *//* ============================================================================ D365 MARKETING-FORMULAR – GESAMT-CSS VEO-Newsletter Anmeldung | gws.ms/veo-news Ersetzt den kompletten bisherigen Inhalt des CSS-Felds. Teil A = Basis-Styling (unveraendert, alle Aufloesungen) Teil A2 = Breiten-Normalisierung gegen seitliches Ueberlaufen (alle Aufloesungen) Teil B = Anpassungen fuer Desktop UND Widescreen. Tablet und Mobile behalten sonst ihr bisheriges Styling. HINWEIS zu Elementor: Es wird keine zusaetzliche CSS-Klasse mehr benoetigt. Die Klassen "outer" und "gws-veo-form" koennen an Container und Widget entfernt werden. Der rechte Abstand steckt in B2, B6 und B7 (jeweils 40px). ============================================================================ */ /* ############################################################################ TEIL A – BASIS (alle Aufloesungen) ############################################################################ */ table, td, th { border: 0px solid !important; margin-bottom: 0px; padding: 0px !important; } .textFormFieldBlock label, .phoneFormFieldBlock label, .dateTimeFormFieldBlock label, .lookupFormFieldBlock label, .twoOptionFormFieldBlock label.block-label, .optionSetFormFieldBlock label.block-label, .multiOptionSetFormFieldBlock label.block-label, div[data-editorblocktype="Captcha"] label[id^="wlspispHipInstructionContainer"] { flex: 0 1 auto !important; width: auto !important; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; } .textFormFieldBlock, .phoneFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock { gap: 1px !important; } table.outer { width: 100% !important; display: table !important; margin-bottom: 0px; } [data-layout="true"] { max-width: 100% !important; } .optionSetFormFieldBlock select, .textFormFieldBlock input, .phoneFormFieldBlock input, .dateTimeFormFieldBlock input, .lookupFormFieldBlock input, .marketingForm textarea, div[data-editorblocktype="Captcha"] input { border-bottom: 1px solid #004070 !important; border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } [data-editorblocktype="SubmitButton"] { padding: 0px 0% !important; } table.multi .textFormFieldBlock, table.multi .dateTimeFormFieldBlock, table.multi .twoOptionFormFieldBlock, table.multi .optionSetFormFieldBlock, table.multi .multiOptionSetFormFieldBlock, table.multi .lookupFormFieldBlock { padding: 20px 0px !important; } th[class^='columnContainer'] { padding-left: 0px !important; } .twoOptionFormFieldBlock div.twooption_checkbox div, .consentBlock div { margin-top: 40px !important; } .textFormFieldBlock textarea { height: 50px !important; } .textFormFieldBlock, .phoneFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock { padding: 20px 0px !important; display: flex; flex-direction: row; gap: 0px !important; } .twoOptionFormFieldBlock { margin-top: -60px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; align-items: center; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label > * { line-height: 19px !important; order: 2 !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label > * { line-height: 19px !important; order: 2 !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock div.twooption_checkbox div input { align-self: start !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock div.twooption_checkbox div input { align-self: start !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label { display: flex !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label { display: flex !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label::after, .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 1 !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label::after, .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 1 !important; } .phoneFormFieldBlock .phoneCountryCode { border: 0px !important; padding-left: 20px; } .marketingForm th.inner { padding: 0px !important; } th.inner { padding: 0px !important; } .textFormFieldBlock label * { display: flex !important; flex-direction: row; flex-wrap: wrap; align-content: space-around !important; } .twoOptionFormFieldBlock div.twooption_checkbox div label { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; align-items: center; } .twooption_checkbox { padding: 20px !important; } /* ############################################################################ TEIL A2 – BREITEN-NORMALISIERUNG (alle Aufloesungen) D365 schreibt auf die Spalten-Container feste Pixelbreiten (z. B. 580px) bzw. flex: 0 0 580px. Ist die Elementor-Spalte schmaler als dieser Wert, laeuft das Formular seitlich heraus – im Tablet-Hochformat sichtbar. Diese Regeln binden alle Layout-Ebenen an die tatsaechliche Spaltenbreite. Falls Mobile davon ausgenommen werden soll: die Regeln in body:not([data-elementor-device-mode="mobile"]) einschliessen. ############################################################################ */ .marketingForm, .marketingForm table, .marketingForm [data-layout="true"], .marketingForm [data-container="true"], .marketingForm [class^="columnContainer"], .marketingForm [class*=" columnContainer"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-basis: auto !important; } .marketingForm [class^="columnContainer"], .marketingForm [class*=" columnContainer"] { flex-grow: 1 !important; flex-shrink: 1 !important; } /* ############################################################################ TEIL B – DESKTOP + WIDESCREEN ############################################################################ */ /* --------------------------------------------------------------------------- B1) BOX-MODELL UND BREITEN Der rechte Abstand von 40px wird NICHT hier gesetzt, sondern direkt an den Feldbloecken (B2), am Einwilligungsblock (B6) und am Button-Block (B7). Nur dort wird er vom Formular zuverlaessig uebernommen. Zum Aendern: die drei 40px-Werte an diesen Stellen gemeinsam anpassen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm * { box-sizing: border-box !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-layout="true"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* --------------------------------------------------------------------------- B2) FELDBLÖCKE – Sternchen und Feldtext in einer Zeile Das Label enthaelt hier nur das Pflichtfeld-Sternchen; der sichtbare Feldtext ist der Platzhalter im Eingabefeld. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .multiOptionSetFormFieldBlock { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 14px 40px 14px 0 !important; gap: 8px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .multiOptionSetFormFieldBlock > label.block-label { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock > label *, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock > label * { display: inline !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- B3) ABSTÄNDE ZWISCHEN DEN FELDERN VEREINHEITLICHEN Die Feldpaare liegen in getrennten Layout-Tabellen; deren Eigenabstaende erzeugen sonst groessere Luecken an den Tabellengrenzen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm tbody, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm tr { margin: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm th[class^="columnContainer"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm th.inner, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm td { padding: 0 !important; margin: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .textFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .optionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .lookupFormFieldBlock { padding: 14px 40px 14px 0 !important; } /* --------------------------------------------------------------------------- B4) EINGABEFELDER – Unterstrich-Styling, fuellen die Zeile --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock select, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm div[data-editorblocktype="Captcha"] input { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 12px 0 !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #004070 !important; border-radius: 0 !important; outline: none !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 12px 0 !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #004070 !important; border-radius: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock select:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea:focus { border-bottom: 2px solid #009fe3 !important; padding-bottom: 11px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock .phoneCountryCode { border: 0 !important; flex: 0 0 auto !important; width: auto !important; } /* --------------------------------------------------------------------------- B5) TYPOGRAFIE – erbt Schrift, Groesse und Farbe vom Elementor-Container Falls die Vererbung nicht greift, die inherit-Werte durch feste ersetzen: font-family: "Open Sans", sans-serif !important; font-size: 16px !important; --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm div, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm span, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label *, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm select, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm a { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1.6 !important; color: inherit !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lp-required { color: #c0392b !important; margin-left: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm a { color: #009fe3 !important; text-decoration: underline !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm ::placeholder { color: inherit !important; opacity: 0.75 !important; } /* --------------------------------------------------------------------------- B6) DATENSCHUTZHINWEIS / EINWILLIGUNG --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock { margin-top: 0 !important; padding: 20px 40px 24px 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock div { margin-top: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock label { margin: 0 !important; align-items: center !important; cursor: pointer !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="checkbox"] { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border-bottom: 0 !important; accent-color: #004070 !important; } /* --------------------------------------------------------------------------- B7) ABSENDEN-BUTTON --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-editorblocktype="SubmitButton"] { display: block !important; width: 100% !important; text-align: center !important; padding: 16px 40px 0 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-editorblocktype="SubmitButton"] > div { width: 100% !important; text-align: center !important; float: none !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="submit"] { display: inline-block !important; float: none !important; width: auto !important; min-width: 340px !important; max-width: 100% !important; margin: 0 auto !important; padding: 20px 56px !important; font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #ffffff !important; background-color: #73D636 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; transition: background-color .2s ease-in-out !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button:hover, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton:hover, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="submit"]:hover { background-color: #5FB82A !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button:focus-visible, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton:focus-visible { outline: 3px solid #004070 !important; outline-offset: 2px !important; } /* --------------------------------------------------------------------------- B8) SCHUTZREGEL – versteckte Felder bleiben versteckt MUSS die letzte Regel bleiben (gleiche Spezifitaet: spaetere gewinnt). --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [hidden], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .hidden, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="hidden"] { display: none !important; } /* ############################################################################ TEIL C – MOBILE + TABLET Auf Mobile und Tablet griff bisher nur Teil A. Dadurch stand das Pflichtfeld- Sternchen in einer eigenen Zeile unter dem Feld, und der Einwilligungsblock war eingerueckt, schmal und mit Umbruechen mitten im Wort. ############################################################################ */ /* --------------------------------------------------------------------------- C1) FELDBLÖCKE – Sternchen und Feldtext in einer Zeile --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .textFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .optionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .lookupFormFieldBlock { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 12px 0 !important; gap: 8px !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .multiOptionSetFormFieldBlock > label.block-label { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; align-content: center !important; order: 0 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock > label *, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock > label * { display: inline !important; order: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock select { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 0 !important; } /* --------------------------------------------------------------------------- C2) EINWILLIGUNG – volle Breite, buendig zu den Feldern Die Checkbox wird absolut positioniert, damit der Text als normaler Fliesstext umbricht statt als Flex-Items zu zerfallen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock { display: block !important; width: 100% !important; margin: 0 !important; padding: 8px 0 16px !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock div { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock label { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding-left: 28px !important; text-align: left !important; line-height: 1.5 !important; cursor: pointer !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label > *, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label > * { display: inline !important; order: 0 !important; line-height: 1.5 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label::after, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 0 !important; color: #c0392b !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock input[type="checkbox"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock input[type="checkbox"] { position: absolute !important; left: 0 !important; top: 3px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 !important; padding: 0 !important; align-self: auto !important; accent-color: #004070 !important; } /* --------------------------------------------------------------------------- C3) ABSENDEN-BUTTON – groesser und zentriert Keine feste Mindestbreite wie auf Desktop, damit der Button auf schmalen Screens nicht ueber den Rand laeuft. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [data-editorblocktype="SubmitButton"] { display: block !important; width: 100% !important; text-align: center !important; padding: 8px 0 0 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [data-editorblocktype="SubmitButton"] > div { width: 100% !important; text-align: center !important; float: none !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm button, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .submitButton, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="submit"] { display: inline-block !important; float: none !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; margin: 0 auto !important; padding: 18px 24px !important; font-family: inherit !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #ffffff !important; background-color: #73D636 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; } /* ############################################################################ TEIL D – PFLICHTFELD-STERNCHEN IM EINWILLIGUNGSTEXT Gilt fuer Desktop, Widescreen, Tablet und Mobile. Das Sternchen steckt in einem eigenen, sonst leeren label.block-label und belegt dadurch eine komplette Zeile. Es wird ausgeblendet und stattdessen per ::after direkt an den Einwilligungstext gehaengt. ############################################################################ */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock > label.block-label { display: none !important; } /* Der Einwilligungstext steckt in einem
innerhalb des Labels. Als Block-Element erzwingt es einen Umbruch vor dem ::after – daher inline. */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock label p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock label p { display: inline !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock div label::after { content: " *" !important; display: inline !important; order: 0 !important; margin: 0 0 0 4px !important; color: #c0392b !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- C4) SCHUTZREGEL MOBILE + TABLET – versteckte Felder bleiben versteckt MUSS die letzte Regel der gesamten Datei bleiben. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [hidden], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .hidden, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="hidden"] { display: none !important; } body:is([data-elementor-device-mode="widescreen"]) .marketingForm div {min-width: 750px !important; } /* ############################################################################ TEIL E – FORMULAR IM ANMELDE-MODAL (helle Variante) ############################################################################ */ .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form { margin: 0 !important; width: 100%; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form > .elementor-widget-container { padding: 0 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .elementor-widget-container > div, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .elementor-widget-container > div > main, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form form.marketingForm, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form form.marketingForm > div, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .emptyContainer, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .wrap-section, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .columnContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .textFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .optionSetFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .lookupFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .phoneFormFieldBlock { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm input[type="text"], .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm input[type="email"], .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm input[type="tel"], .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #dfe3e8 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 16px !important; color: #1f2a36 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm input:focus, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm select:focus { outline: none !important; border-bottom-color: #004070 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm label { color: #004070 !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .submitButtonWrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin-top: 32px !important; text-align: center !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm button.submitButton { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 16px 30px !important; height: auto !important; background: #73d636 !important; border: 1px solid #73d636 !important; border-radius: 0 !important; color: #fff !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm button.submitButton span { font-size: 14px !important; font-weight: 600 !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm button.submitButton:hover { background: #5fb82a !important; border-color: #5fb82a !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm *:not(input[type="checkbox"]):not(input[type="radio"]) { min-width: 0 !important; max-width: 100% !important; } .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm .notification-container, .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm div[class$="FormFieldBlock"], .elementor-79290 .elementor-element.elementor-element-0cfeeee.gws-wc-form .marketingForm div[class*="FormFieldBlock "] { width: 100% !important; padding-right: 0 !important; box-sizing: border-box !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e42604a *//* ============ GWS Anmelde-Modal (Webcasts) ============ */ .elementor-79290 .elementor-element.elementor-element-e42604a.gws-modal { position: fixed !important; inset: 0; z-index: 100000; display: flex !important; align-items: center; justify-content: center; padding: 24px !important; margin: 0 !important; width: 100% !important; max-width: none !important; background: rgba(0, 32, 64, .72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } .elementor-79290 .elementor-element.elementor-element-e42604a.gws-modal.is-open, .elementor-79290 .elementor-element.elementor-element-e42604a.gws-modal:target { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__dialog { position: relative; display: block !important; width: 100% !important; max-width: 560px !important; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 56px 56px 48px !important; box-sizing: border-box; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; transform: translateY(12px); transition: transform .2s ease; } .elementor-79290 .elementor-element.elementor-element-e42604a.gws-modal.is-open .gws-modal__dialog, .elementor-79290 .elementor-element.elementor-element-e42604a.gws-modal:target .gws-modal__dialog { transform: none; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__dialog > .elementor-element { margin: 0; width: 100%; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__close { position: absolute; top: 20px; right: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #004070 !important; font-size: 30px; line-height: 1; text-decoration: none !important; background: none; border: 0; cursor: pointer; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__close:hover { color: #3ec1f0 !important; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__close:focus-visible { outline: 2px solid #3ec1f0; outline-offset: 2px; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__label { margin: 0 0 12px; color: #1c9fd6; font-size: 16px; font-weight: 700; line-height: 1.3; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__title { margin: 0 0 16px; color: #004070; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__meta { margin: 0; padding-bottom: 32px; border-bottom: 1px solid #dfe3e8; color: #6b7178; font-size: 15px; line-height: 1.5; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__privacy { margin-top: 24px !important; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__privacy p { margin: 0; color: #6b7178; font-size: 12px; line-height: 1.6; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__privacy a { color: #004070; text-decoration: none; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__privacy a:hover { text-decoration: underline; } body.gws-modal-open { overflow: hidden; } @media (max-width: 767px) { .elementor-79290 .elementor-element.elementor-element-e42604a.gws-modal { padding: 12px !important; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__dialog { padding: 48px 20px 28px !important; max-height: calc(100dvh - 24px); } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__close { top: 10px; right: 10px; } .elementor-79290 .elementor-element.elementor-element-e42604a .gws-modal__title { font-size: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e83357f *//* ============================================================================ D365 MARKETING-FORMULAR – GESAMT-CSS VEO-Newsletter Anmeldung | gws.ms/veo-news Ersetzt den kompletten bisherigen Inhalt des CSS-Felds. Teil A = Basis-Styling (unveraendert, alle Aufloesungen) Teil A2 = Breiten-Normalisierung gegen seitliches Ueberlaufen (alle Aufloesungen) Teil B = Anpassungen fuer Desktop UND Widescreen. Tablet und Mobile behalten sonst ihr bisheriges Styling. HINWEIS zu Elementor: Es wird keine zusaetzliche CSS-Klasse mehr benoetigt. Die Klassen "outer" und "gws-veo-form" koennen an Container und Widget entfernt werden. Der rechte Abstand steckt in B2, B6 und B7 (jeweils 40px). ============================================================================ */ /* ############################################################################ TEIL A – BASIS (alle Aufloesungen) ############################################################################ */ table, td, th { border: 0px solid !important; margin-bottom: 0px; padding: 0px !important; } .textFormFieldBlock label, .phoneFormFieldBlock label, .dateTimeFormFieldBlock label, .lookupFormFieldBlock label, .twoOptionFormFieldBlock label.block-label, .optionSetFormFieldBlock label.block-label, .multiOptionSetFormFieldBlock label.block-label, div[data-editorblocktype="Captcha"] label[id^="wlspispHipInstructionContainer"] { flex: 0 1 auto !important; width: auto !important; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; } .textFormFieldBlock, .phoneFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock { gap: 1px !important; } table.outer { width: 100% !important; display: table !important; margin-bottom: 0px; } [data-layout="true"] { max-width: 100% !important; } .optionSetFormFieldBlock select, .textFormFieldBlock input, .phoneFormFieldBlock input, .dateTimeFormFieldBlock input, .lookupFormFieldBlock input, .marketingForm textarea, div[data-editorblocktype="Captcha"] input { border-bottom: 1px solid #004070 !important; border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } [data-editorblocktype="SubmitButton"] { padding: 0px 0% !important; } table.multi .textFormFieldBlock, table.multi .dateTimeFormFieldBlock, table.multi .twoOptionFormFieldBlock, table.multi .optionSetFormFieldBlock, table.multi .multiOptionSetFormFieldBlock, table.multi .lookupFormFieldBlock { padding: 20px 0px !important; } th[class^='columnContainer'] { padding-left: 0px !important; } .twoOptionFormFieldBlock div.twooption_checkbox div, .consentBlock div { margin-top: 40px !important; } .textFormFieldBlock textarea { height: 50px !important; } .textFormFieldBlock, .phoneFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock { padding: 20px 0px !important; display: flex; flex-direction: row; gap: 0px !important; } .twoOptionFormFieldBlock { margin-top: -60px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; align-items: center; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label > * { line-height: 19px !important; order: 2 !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label > * { line-height: 19px !important; order: 2 !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock div.twooption_checkbox div input { align-self: start !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock div.twooption_checkbox div input { align-self: start !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label { display: flex !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label { display: flex !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label::after, .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 1 !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label::after, .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 1 !important; } .phoneFormFieldBlock .phoneCountryCode { border: 0px !important; padding-left: 20px; } .marketingForm th.inner { padding: 0px !important; } th.inner { padding: 0px !important; } .textFormFieldBlock label * { display: flex !important; flex-direction: row; flex-wrap: wrap; align-content: space-around !important; } .twoOptionFormFieldBlock div.twooption_checkbox div label { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; align-items: center; } .twooption_checkbox { padding: 20px !important; } /* ############################################################################ TEIL A2 – BREITEN-NORMALISIERUNG (alle Aufloesungen) D365 schreibt auf die Spalten-Container feste Pixelbreiten (z. B. 580px) bzw. flex: 0 0 580px. Ist die Elementor-Spalte schmaler als dieser Wert, laeuft das Formular seitlich heraus – im Tablet-Hochformat sichtbar. Diese Regeln binden alle Layout-Ebenen an die tatsaechliche Spaltenbreite. Falls Mobile davon ausgenommen werden soll: die Regeln in body:not([data-elementor-device-mode="mobile"]) einschliessen. ############################################################################ */ .marketingForm, .marketingForm table, .marketingForm [data-layout="true"], .marketingForm [data-container="true"], .marketingForm [class^="columnContainer"], .marketingForm [class*=" columnContainer"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-basis: auto !important; } .marketingForm [class^="columnContainer"], .marketingForm [class*=" columnContainer"] { flex-grow: 1 !important; flex-shrink: 1 !important; } /* ############################################################################ TEIL B – DESKTOP + WIDESCREEN ############################################################################ */ /* --------------------------------------------------------------------------- B1) BOX-MODELL UND BREITEN Der rechte Abstand von 40px wird NICHT hier gesetzt, sondern direkt an den Feldbloecken (B2), am Einwilligungsblock (B6) und am Button-Block (B7). Nur dort wird er vom Formular zuverlaessig uebernommen. Zum Aendern: die drei 40px-Werte an diesen Stellen gemeinsam anpassen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm * { box-sizing: border-box !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-layout="true"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* --------------------------------------------------------------------------- B2) FELDBLÖCKE – Sternchen und Feldtext in einer Zeile Das Label enthaelt hier nur das Pflichtfeld-Sternchen; der sichtbare Feldtext ist der Platzhalter im Eingabefeld. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .multiOptionSetFormFieldBlock { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 14px 40px 14px 0 !important; gap: 8px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .multiOptionSetFormFieldBlock > label.block-label { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock > label *, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock > label * { display: inline !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- B3) ABSTÄNDE ZWISCHEN DEN FELDERN VEREINHEITLICHEN Die Feldpaare liegen in getrennten Layout-Tabellen; deren Eigenabstaende erzeugen sonst groessere Luecken an den Tabellengrenzen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm tbody, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm tr { margin: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm th[class^="columnContainer"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm th.inner, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm td { padding: 0 !important; margin: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .textFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .optionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .lookupFormFieldBlock { padding: 14px 40px 14px 0 !important; } /* --------------------------------------------------------------------------- B4) EINGABEFELDER – Unterstrich-Styling, fuellen die Zeile --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock select, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm div[data-editorblocktype="Captcha"] input { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 12px 0 !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #004070 !important; border-radius: 0 !important; outline: none !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 12px 0 !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #004070 !important; border-radius: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock select:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea:focus { border-bottom: 2px solid #009fe3 !important; padding-bottom: 11px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock .phoneCountryCode { border: 0 !important; flex: 0 0 auto !important; width: auto !important; } /* --------------------------------------------------------------------------- B5) TYPOGRAFIE – erbt Schrift, Groesse und Farbe vom Elementor-Container Falls die Vererbung nicht greift, die inherit-Werte durch feste ersetzen: font-family: "Open Sans", sans-serif !important; font-size: 16px !important; --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm div, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm span, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label *, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm select, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm a { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1.6 !important; color: inherit !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lp-required { color: #c0392b !important; margin-left: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm a { color: #009fe3 !important; text-decoration: underline !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm ::placeholder { color: inherit !important; opacity: 0.75 !important; } /* --------------------------------------------------------------------------- B6) DATENSCHUTZHINWEIS / EINWILLIGUNG --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock { margin-top: 0 !important; padding: 20px 40px 24px 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock div { margin-top: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock label { margin: 0 !important; align-items: center !important; cursor: pointer !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="checkbox"] { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border-bottom: 0 !important; accent-color: #004070 !important; } /* --------------------------------------------------------------------------- B7) ABSENDEN-BUTTON --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-editorblocktype="SubmitButton"] { display: block !important; width: 100% !important; text-align: center !important; padding: 16px 40px 0 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-editorblocktype="SubmitButton"] > div { width: 100% !important; text-align: center !important; float: none !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="submit"] { display: inline-block !important; float: none !important; width: auto !important; min-width: 340px !important; max-width: 100% !important; margin: 0 auto !important; padding: 20px 56px !important; font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #ffffff !important; background-color: #73D636 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; transition: background-color .2s ease-in-out !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button:hover, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton:hover, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="submit"]:hover { background-color: #5FB82A !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button:focus-visible, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton:focus-visible { outline: 3px solid #004070 !important; outline-offset: 2px !important; } /* --------------------------------------------------------------------------- B8) SCHUTZREGEL – versteckte Felder bleiben versteckt MUSS die letzte Regel bleiben (gleiche Spezifitaet: spaetere gewinnt). --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [hidden], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .hidden, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="hidden"] { display: none !important; } /* ############################################################################ TEIL C – MOBILE + TABLET Auf Mobile und Tablet griff bisher nur Teil A. Dadurch stand das Pflichtfeld- Sternchen in einer eigenen Zeile unter dem Feld, und der Einwilligungsblock war eingerueckt, schmal und mit Umbruechen mitten im Wort. ############################################################################ */ /* --------------------------------------------------------------------------- C1) FELDBLÖCKE – Sternchen und Feldtext in einer Zeile --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .textFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .optionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .lookupFormFieldBlock { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 12px 0 !important; gap: 8px !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .multiOptionSetFormFieldBlock > label.block-label { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; align-content: center !important; order: 0 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock > label *, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock > label * { display: inline !important; order: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock select { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 0 !important; } /* --------------------------------------------------------------------------- C2) EINWILLIGUNG – volle Breite, buendig zu den Feldern Die Checkbox wird absolut positioniert, damit der Text als normaler Fliesstext umbricht statt als Flex-Items zu zerfallen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock { display: block !important; width: 100% !important; margin: 0 !important; padding: 8px 0 16px !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock div { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock label { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding-left: 28px !important; text-align: left !important; line-height: 1.5 !important; cursor: pointer !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label > *, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label > * { display: inline !important; order: 0 !important; line-height: 1.5 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label::after, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 0 !important; color: #c0392b !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock input[type="checkbox"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock input[type="checkbox"] { position: absolute !important; left: 0 !important; top: 3px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 !important; padding: 0 !important; align-self: auto !important; accent-color: #004070 !important; } /* --------------------------------------------------------------------------- C3) ABSENDEN-BUTTON – groesser und zentriert Keine feste Mindestbreite wie auf Desktop, damit der Button auf schmalen Screens nicht ueber den Rand laeuft. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [data-editorblocktype="SubmitButton"] { display: block !important; width: 100% !important; text-align: center !important; padding: 8px 0 0 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [data-editorblocktype="SubmitButton"] > div { width: 100% !important; text-align: center !important; float: none !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm button, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .submitButton, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="submit"] { display: inline-block !important; float: none !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; margin: 0 auto !important; padding: 18px 24px !important; font-family: inherit !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #ffffff !important; background-color: #73D636 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; } /* ############################################################################ TEIL D – PFLICHTFELD-STERNCHEN IM EINWILLIGUNGSTEXT Gilt fuer Desktop, Widescreen, Tablet und Mobile. Das Sternchen steckt in einem eigenen, sonst leeren label.block-label und belegt dadurch eine komplette Zeile. Es wird ausgeblendet und stattdessen per ::after direkt an den Einwilligungstext gehaengt. ############################################################################ */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock > label.block-label { display: none !important; } /* Der Einwilligungstext steckt in einem
innerhalb des Labels. Als Block-Element erzwingt es einen Umbruch vor dem ::after – daher inline. */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock label p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock label p { display: inline !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock div label::after { content: " *" !important; display: inline !important; order: 0 !important; margin: 0 0 0 4px !important; color: #c0392b !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- C4) SCHUTZREGEL MOBILE + TABLET – versteckte Felder bleiben versteckt MUSS die letzte Regel der gesamten Datei bleiben. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [hidden], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .hidden, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="hidden"] { display: none !important; } body:is([data-elementor-device-mode="widescreen"]) .marketingForm div {min-width: 750px !important; } /* ############################################################################ TEIL E – FORMULAR IM ANMELDE-MODAL (helle Variante) ############################################################################ */ .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form { margin: 0 !important; width: 100%; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form > .elementor-widget-container { padding: 0 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .elementor-widget-container > div, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .elementor-widget-container > div > main, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form form.marketingForm, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form form.marketingForm > div, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .emptyContainer, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .wrap-section, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .columnContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .textFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .optionSetFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .lookupFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .phoneFormFieldBlock { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm input[type="text"], .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm input[type="email"], .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm input[type="tel"], .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #dfe3e8 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 16px !important; color: #1f2a36 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm input:focus, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm select:focus { outline: none !important; border-bottom-color: #004070 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm label { color: #004070 !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .submitButtonWrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin-top: 32px !important; text-align: center !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm button.submitButton { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 16px 30px !important; height: auto !important; background: #73d636 !important; border: 1px solid #73d636 !important; border-radius: 0 !important; color: #fff !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm button.submitButton span { font-size: 14px !important; font-weight: 600 !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm button.submitButton:hover { background: #5fb82a !important; border-color: #5fb82a !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm *:not(input[type="checkbox"]):not(input[type="radio"]) { min-width: 0 !important; max-width: 100% !important; } .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm .notification-container, .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm div[class$="FormFieldBlock"], .elementor-79290 .elementor-element.elementor-element-e83357f.gws-wc-form .marketingForm div[class*="FormFieldBlock "] { width: 100% !important; padding-right: 0 !important; box-sizing: border-box !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-be706a9 *//* ============ GWS Anmelde-Modal (Webcasts) ============ */ .elementor-79290 .elementor-element.elementor-element-be706a9.gws-modal { position: fixed !important; inset: 0; z-index: 100000; display: flex !important; align-items: center; justify-content: center; padding: 24px !important; margin: 0 !important; width: 100% !important; max-width: none !important; background: rgba(0, 32, 64, .72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } .elementor-79290 .elementor-element.elementor-element-be706a9.gws-modal.is-open, .elementor-79290 .elementor-element.elementor-element-be706a9.gws-modal:target { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__dialog { position: relative; display: block !important; width: 100% !important; max-width: 560px !important; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 56px 56px 48px !important; box-sizing: border-box; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; transform: translateY(12px); transition: transform .2s ease; } .elementor-79290 .elementor-element.elementor-element-be706a9.gws-modal.is-open .gws-modal__dialog, .elementor-79290 .elementor-element.elementor-element-be706a9.gws-modal:target .gws-modal__dialog { transform: none; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__dialog > .elementor-element { margin: 0; width: 100%; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__close { position: absolute; top: 20px; right: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #004070 !important; font-size: 30px; line-height: 1; text-decoration: none !important; background: none; border: 0; cursor: pointer; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__close:hover { color: #3ec1f0 !important; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__close:focus-visible { outline: 2px solid #3ec1f0; outline-offset: 2px; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__label { margin: 0 0 12px; color: #1c9fd6; font-size: 16px; font-weight: 700; line-height: 1.3; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__title { margin: 0 0 16px; color: #004070; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__meta { margin: 0; padding-bottom: 32px; border-bottom: 1px solid #dfe3e8; color: #6b7178; font-size: 15px; line-height: 1.5; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__privacy { margin-top: 24px !important; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__privacy p { margin: 0; color: #6b7178; font-size: 12px; line-height: 1.6; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__privacy a { color: #004070; text-decoration: none; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__privacy a:hover { text-decoration: underline; } body.gws-modal-open { overflow: hidden; } @media (max-width: 767px) { .elementor-79290 .elementor-element.elementor-element-be706a9.gws-modal { padding: 12px !important; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__dialog { padding: 48px 20px 28px !important; max-height: calc(100dvh - 24px); } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__close { top: 10px; right: 10px; } .elementor-79290 .elementor-element.elementor-element-be706a9 .gws-modal__title { font-size: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-8bf1e5e *//* ============================================================================ D365 MARKETING-FORMULAR – GESAMT-CSS VEO-Newsletter Anmeldung | gws.ms/veo-news Ersetzt den kompletten bisherigen Inhalt des CSS-Felds. Teil A = Basis-Styling (unveraendert, alle Aufloesungen) Teil A2 = Breiten-Normalisierung gegen seitliches Ueberlaufen (alle Aufloesungen) Teil B = Anpassungen fuer Desktop UND Widescreen. Tablet und Mobile behalten sonst ihr bisheriges Styling. HINWEIS zu Elementor: Es wird keine zusaetzliche CSS-Klasse mehr benoetigt. Die Klassen "outer" und "gws-veo-form" koennen an Container und Widget entfernt werden. Der rechte Abstand steckt in B2, B6 und B7 (jeweils 40px). ============================================================================ */ /* ############################################################################ TEIL A – BASIS (alle Aufloesungen) ############################################################################ */ table, td, th { border: 0px solid !important; margin-bottom: 0px; padding: 0px !important; } .textFormFieldBlock label, .phoneFormFieldBlock label, .dateTimeFormFieldBlock label, .lookupFormFieldBlock label, .twoOptionFormFieldBlock label.block-label, .optionSetFormFieldBlock label.block-label, .multiOptionSetFormFieldBlock label.block-label, div[data-editorblocktype="Captcha"] label[id^="wlspispHipInstructionContainer"] { flex: 0 1 auto !important; width: auto !important; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; } .textFormFieldBlock, .phoneFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock { gap: 1px !important; } table.outer { width: 100% !important; display: table !important; margin-bottom: 0px; } [data-layout="true"] { max-width: 100% !important; } .optionSetFormFieldBlock select, .textFormFieldBlock input, .phoneFormFieldBlock input, .dateTimeFormFieldBlock input, .lookupFormFieldBlock input, .marketingForm textarea, div[data-editorblocktype="Captcha"] input { border-bottom: 1px solid #004070 !important; border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } [data-editorblocktype="SubmitButton"] { padding: 0px 0% !important; } table.multi .textFormFieldBlock, table.multi .dateTimeFormFieldBlock, table.multi .twoOptionFormFieldBlock, table.multi .optionSetFormFieldBlock, table.multi .multiOptionSetFormFieldBlock, table.multi .lookupFormFieldBlock { padding: 20px 0px !important; } th[class^='columnContainer'] { padding-left: 0px !important; } .twoOptionFormFieldBlock div.twooption_checkbox div, .consentBlock div { margin-top: 40px !important; } .textFormFieldBlock textarea { height: 50px !important; } .textFormFieldBlock, .phoneFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock { padding: 20px 0px !important; display: flex; flex-direction: row; gap: 0px !important; } .twoOptionFormFieldBlock { margin-top: -60px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; align-items: center; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label > * { line-height: 19px !important; order: 2 !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label > * { line-height: 19px !important; order: 2 !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock div.twooption_checkbox div input { align-self: start !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock div.twooption_checkbox div input { align-self: start !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label { display: flex !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label { display: flex !important; } body[data-elementor-device-mode="mobile"] .twoOptionFormFieldBlock label.block-label::after, .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 1 !important; } body[data-elementor-device-mode="tablet"] .twoOptionFormFieldBlock label.block-label::after, .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 1 !important; } .phoneFormFieldBlock .phoneCountryCode { border: 0px !important; padding-left: 20px; } .marketingForm th.inner { padding: 0px !important; } th.inner { padding: 0px !important; } .textFormFieldBlock label * { display: flex !important; flex-direction: row; flex-wrap: wrap; align-content: space-around !important; } .twoOptionFormFieldBlock div.twooption_checkbox div label { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; align-items: center; } .twooption_checkbox { padding: 20px !important; } /* ############################################################################ TEIL A2 – BREITEN-NORMALISIERUNG (alle Aufloesungen) D365 schreibt auf die Spalten-Container feste Pixelbreiten (z. B. 580px) bzw. flex: 0 0 580px. Ist die Elementor-Spalte schmaler als dieser Wert, laeuft das Formular seitlich heraus – im Tablet-Hochformat sichtbar. Diese Regeln binden alle Layout-Ebenen an die tatsaechliche Spaltenbreite. Falls Mobile davon ausgenommen werden soll: die Regeln in body:not([data-elementor-device-mode="mobile"]) einschliessen. ############################################################################ */ .marketingForm, .marketingForm table, .marketingForm [data-layout="true"], .marketingForm [data-container="true"], .marketingForm [class^="columnContainer"], .marketingForm [class*=" columnContainer"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-basis: auto !important; } .marketingForm [class^="columnContainer"], .marketingForm [class*=" columnContainer"] { flex-grow: 1 !important; flex-shrink: 1 !important; } /* ############################################################################ TEIL B – DESKTOP + WIDESCREEN ############################################################################ */ /* --------------------------------------------------------------------------- B1) BOX-MODELL UND BREITEN Der rechte Abstand von 40px wird NICHT hier gesetzt, sondern direkt an den Feldbloecken (B2), am Einwilligungsblock (B6) und am Button-Block (B7). Nur dort wird er vom Formular zuverlaessig uebernommen. Zum Aendern: die drei 40px-Werte an diesen Stellen gemeinsam anpassen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm * { box-sizing: border-box !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-layout="true"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* --------------------------------------------------------------------------- B2) FELDBLÖCKE – Sternchen und Feldtext in einer Zeile Das Label enthaelt hier nur das Pflichtfeld-Sternchen; der sichtbare Feldtext ist der Platzhalter im Eingabefeld. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .multiOptionSetFormFieldBlock { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 14px 40px 14px 0 !important; gap: 8px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock > label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .multiOptionSetFormFieldBlock > label.block-label { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock > label *, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock > label * { display: inline !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- B3) ABSTÄNDE ZWISCHEN DEN FELDERN VEREINHEITLICHEN Die Feldpaare liegen in getrennten Layout-Tabellen; deren Eigenabstaende erzeugen sonst groessere Luecken an den Tabellengrenzen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm tbody, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm tr { margin: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm th[class^="columnContainer"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm th.inner, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm td { padding: 0 !important; margin: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .textFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .optionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm table.multi .lookupFormFieldBlock { padding: 14px 40px 14px 0 !important; } /* --------------------------------------------------------------------------- B4) EINGABEFELDER – Unterstrich-Styling, fuellen die Zeile --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock select, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm div[data-editorblocktype="Captcha"] input { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 12px 0 !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #004070 !important; border-radius: 0 !important; outline: none !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 12px 0 !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #004070 !important; border-radius: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .textFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .dateTimeFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lookupFormFieldBlock input:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .optionSetFormFieldBlock select:focus, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea:focus { border-bottom: 2px solid #009fe3 !important; padding-bottom: 11px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .phoneFormFieldBlock .phoneCountryCode { border: 0 !important; flex: 0 0 auto !important; width: auto !important; } /* --------------------------------------------------------------------------- B5) TYPOGRAFIE – erbt Schrift, Groesse und Farbe vom Elementor-Container Falls die Vererbung nicht greift, die inherit-Werte durch feste ersetzen: font-family: "Open Sans", sans-serif !important; font-size: 16px !important; --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm div, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm span, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label *, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm select, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm textarea, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm a { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1.6 !important; color: inherit !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .lp-required { color: #c0392b !important; margin-left: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm a { color: #009fe3 !important; text-decoration: underline !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm ::placeholder { color: inherit !important; opacity: 0.75 !important; } /* --------------------------------------------------------------------------- B6) DATENSCHUTZHINWEIS / EINWILLIGUNG --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock { margin-top: 0 !important; padding: 20px 40px 24px 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock div { margin-top: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .twoOptionFormFieldBlock label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .consentBlock label { margin: 0 !important; align-items: center !important; cursor: pointer !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="checkbox"] { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border-bottom: 0 !important; accent-color: #004070 !important; } /* --------------------------------------------------------------------------- B7) ABSENDEN-BUTTON --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-editorblocktype="SubmitButton"] { display: block !important; width: 100% !important; text-align: center !important; padding: 16px 40px 0 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [data-editorblocktype="SubmitButton"] > div { width: 100% !important; text-align: center !important; float: none !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="submit"] { display: inline-block !important; float: none !important; width: auto !important; min-width: 340px !important; max-width: 100% !important; margin: 0 auto !important; padding: 20px 56px !important; font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #ffffff !important; background-color: #73D636 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; transition: background-color .2s ease-in-out !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button:hover, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton:hover, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="submit"]:hover { background-color: #5FB82A !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm button:focus-visible, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .submitButton:focus-visible { outline: 3px solid #004070 !important; outline-offset: 2px !important; } /* --------------------------------------------------------------------------- B8) SCHUTZREGEL – versteckte Felder bleiben versteckt MUSS die letzte Regel bleiben (gleiche Spezifitaet: spaetere gewinnt). --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm [hidden], body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm .hidden, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"]) .marketingForm input[type="hidden"] { display: none !important; } /* ############################################################################ TEIL C – MOBILE + TABLET Auf Mobile und Tablet griff bisher nur Teil A. Dadurch stand das Pflichtfeld- Sternchen in einer eigenen Zeile unter dem Feld, und der Einwilligungsblock war eingerueckt, schmal und mit Umbruechen mitten im Wort. ############################################################################ */ /* --------------------------------------------------------------------------- C1) FELDBLÖCKE – Sternchen und Feldtext in einer Zeile --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .textFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .dateTimeFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .optionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .multiOptionSetFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm table.multi .lookupFormFieldBlock { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 12px 0 !important; gap: 8px !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock > label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .multiOptionSetFormFieldBlock > label.block-label { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; align-content: center !important; order: 0 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock > label *, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock > label * { display: inline !important; order: 0 !important; white-space: nowrap !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .textFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .phoneFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .dateTimeFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .lookupFormFieldBlock input, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .optionSetFormFieldBlock select { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 0 !important; } /* --------------------------------------------------------------------------- C2) EINWILLIGUNG – volle Breite, buendig zu den Feldern Die Checkbox wird absolut positioniert, damit der Text als normaler Fliesstext umbricht statt als Flex-Items zu zerfallen. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock { display: block !important; width: 100% !important; margin: 0 !important; padding: 8px 0 16px !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock div { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock label { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding-left: 28px !important; text-align: left !important; line-height: 1.5 !important; cursor: pointer !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label > *, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label > * { display: inline !important; order: 0 !important; line-height: 1.5 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock label.block-label::after, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox label::after { order: 0 !important; color: #c0392b !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .twoOptionFormFieldBlock input[type="checkbox"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .consentBlock input[type="checkbox"] { position: absolute !important; left: 0 !important; top: 3px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 !important; padding: 0 !important; align-self: auto !important; accent-color: #004070 !important; } /* --------------------------------------------------------------------------- C3) ABSENDEN-BUTTON – groesser und zentriert Keine feste Mindestbreite wie auf Desktop, damit der Button auf schmalen Screens nicht ueber den Rand laeuft. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [data-editorblocktype="SubmitButton"] { display: block !important; width: 100% !important; text-align: center !important; padding: 8px 0 0 !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [data-editorblocktype="SubmitButton"] > div { width: 100% !important; text-align: center !important; float: none !important; } body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm button, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .submitButton, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="submit"] { display: inline-block !important; float: none !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; margin: 0 auto !important; padding: 18px 24px !important; font-family: inherit !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #ffffff !important; background-color: #73D636 !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; } /* ############################################################################ TEIL D – PFLICHTFELD-STERNCHEN IM EINWILLIGUNGSTEXT Gilt fuer Desktop, Widescreen, Tablet und Mobile. Das Sternchen steckt in einem eigenen, sonst leeren label.block-label und belegt dadurch eine komplette Zeile. Es wird ausgeblendet und stattdessen per ::after direkt an den Einwilligungstext gehaengt. ############################################################################ */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock > label.block-label, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock > label.block-label { display: none !important; } /* Der Einwilligungstext steckt in einem
innerhalb des Labels. Als Block-Element erzwingt es einen Umbruch vor dem ::after – daher inline. */ body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock label p, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock label p { display: inline !important; margin: 0 !important; padding: 0 !important; } body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .twoOptionFormFieldBlock div.twooption_checkbox div label::after, body:is([data-elementor-device-mode="desktop"],[data-elementor-device-mode="widescreen"],[data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .marketingForm .consentBlock div label::after { content: " *" !important; display: inline !important; order: 0 !important; margin: 0 0 0 4px !important; color: #c0392b !important; white-space: nowrap !important; } /* --------------------------------------------------------------------------- C4) SCHUTZREGEL MOBILE + TABLET – versteckte Felder bleiben versteckt MUSS die letzte Regel der gesamten Datei bleiben. --------------------------------------------------------------------------- */ body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display:none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [style*="display: none"], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm [hidden], body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm .hidden, body:is([data-elementor-device-mode="mobile"],[data-elementor-device-mode="tablet"]) .marketingForm input[type="hidden"] { display: none !important; } body:is([data-elementor-device-mode="widescreen"]) .marketingForm div {min-width: 750px !important; } /* ############################################################################ TEIL E – FORMULAR IM ANMELDE-MODAL (helle Variante) ############################################################################ */ .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form { margin: 0 !important; width: 100%; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form > .elementor-widget-container { padding: 0 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .elementor-widget-container > div, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .elementor-widget-container > div > main, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form form.marketingForm, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form form.marketingForm > div, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .emptyContainer, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .wrap-section, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .columnContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .textFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .optionSetFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .lookupFormFieldBlock, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .phoneFormFieldBlock { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm input[type="text"], .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm input[type="email"], .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm input[type="tel"], .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #dfe3e8 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 16px !important; color: #1f2a36 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm input:focus, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm select:focus { outline: none !important; border-bottom-color: #004070 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm label { color: #004070 !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .submitButtonWrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin-top: 32px !important; text-align: center !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm button.submitButton { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 16px 30px !important; height: auto !important; background: #73d636 !important; border: 1px solid #73d636 !important; border-radius: 0 !important; color: #fff !important; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm button.submitButton span { font-size: 14px !important; font-weight: 600 !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm button.submitButton:hover { background: #5fb82a !important; border-color: #5fb82a !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm *:not(input[type="checkbox"]):not(input[type="radio"]) { min-width: 0 !important; max-width: 100% !important; } .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm .notification-container, .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm div[class$="FormFieldBlock"], .elementor-79290 .elementor-element.elementor-element-8bf1e5e.gws-wc-form .marketingForm div[class*="FormFieldBlock "] { width: 100% !important; padding-right: 0 !important; box-sizing: border-box !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7b61370 *//* ============ GWS Anmelde-Modal (Webcasts) ============ */ .elementor-79290 .elementor-element.elementor-element-7b61370.gws-modal { position: fixed !important; inset: 0; z-index: 100000; display: flex !important; align-items: center; justify-content: center; padding: 24px !important; margin: 0 !important; width: 100% !important; max-width: none !important; background: rgba(0, 32, 64, .72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } .elementor-79290 .elementor-element.elementor-element-7b61370.gws-modal.is-open, .elementor-79290 .elementor-element.elementor-element-7b61370.gws-modal:target { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__dialog { position: relative; display: block !important; width: 100% !important; max-width: 560px !important; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 56px 56px 48px !important; box-sizing: border-box; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; transform: translateY(12px); transition: transform .2s ease; } .elementor-79290 .elementor-element.elementor-element-7b61370.gws-modal.is-open .gws-modal__dialog, .elementor-79290 .elementor-element.elementor-element-7b61370.gws-modal:target .gws-modal__dialog { transform: none; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__dialog > .elementor-element { margin: 0; width: 100%; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__close { position: absolute; top: 20px; right: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #004070 !important; font-size: 30px; line-height: 1; text-decoration: none !important; background: none; border: 0; cursor: pointer; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__close:hover { color: #3ec1f0 !important; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__close:focus-visible { outline: 2px solid #3ec1f0; outline-offset: 2px; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__label { margin: 0 0 12px; color: #1c9fd6; font-size: 16px; font-weight: 700; line-height: 1.3; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__title { margin: 0 0 16px; color: #004070; font-family: "Open Sans","Segoe UI",Helvetica,Arial,sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__meta { margin: 0; padding-bottom: 32px; border-bottom: 1px solid #dfe3e8; color: #6b7178; font-size: 15px; line-height: 1.5; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__privacy { margin-top: 24px !important; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__privacy p { margin: 0; color: #6b7178; font-size: 12px; line-height: 1.6; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__privacy a { color: #004070; text-decoration: none; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__privacy a:hover { text-decoration: underline; } body.gws-modal-open { overflow: hidden; } @media (max-width: 767px) { .elementor-79290 .elementor-element.elementor-element-7b61370.gws-modal { padding: 12px !important; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__dialog { padding: 48px 20px 28px !important; max-height: calc(100dvh - 24px); } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__close { top: 10px; right: 10px; } .elementor-79290 .elementor-element.elementor-element-7b61370 .gws-modal__title { font-size: 19px; } }/* End custom CSS */ /* Start custom CSS *//* Anmelde-Buttons in den Karten auf gleiche Höhe */ .elementor-79290 .elementor-element.elementor-element-09a5535 .e-con > .elementor-widget-button.elementor-widget-button { margin-top: auto !important; }/* End custom CSS */