.elementor-1818 .elementor-element.elementor-element-2308d196{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:90px;--padding-bottom:90px;--padding-left:20px;--padding-right:20px;}.elementor-1818 .elementor-element.elementor-element-2308d196:not(.elementor-motion-effects-element-type-background), .elementor-1818 .elementor-element.elementor-element-2308d196 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#203158;}.elementor-1818 .elementor-element.elementor-element-57b18357{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-1818 .elementor-element.elementor-element-57b18357:not(.elementor-motion-effects-element-type-background), .elementor-1818 .elementor-element.elementor-element-57b18357 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-global .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-global .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-global .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-global .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-global .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-1818 .elementor-element.elementor-global-771 .elementor-icon-list-icon i{color:#15C50F;transition:color 0.3s;}.elementor-1818 .elementor-element.elementor-global-771 .elementor-icon-list-icon svg{fill:#15C50F;transition:fill 0.3s;}.elementor-1818 .elementor-element.elementor-global-771{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-1818 .elementor-element.elementor-global-771 .elementor-icon-list-text{transition:color 0.3s;}.elementor-widget-global .elementor-field-group > label, .elementor-widget-global .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-global .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-global .elementor-field-group .elementor-field, .elementor-widget-global .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-global .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-global .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-global .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-global .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .e-form__indicators__indicator, .elementor-widget-global .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-global{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-global .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group{padding-right:calc( 12px/2 );padding-left:calc( 12px/2 );margin-bottom:11px;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-form-fields-wrapper{margin-left:calc( -12px/2 );margin-right:calc( -12px/2 );margin-bottom:-11px;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-1818 .elementor-element.elementor-global-2714 .elementor-labels-inline .elementor-field-group > label{padding-left:15px;}body:not(.rtl) .elementor-1818 .elementor-element.elementor-global-2714 .elementor-labels-inline .elementor-field-group > label{padding-right:15px;}body .elementor-1818 .elementor-element.elementor-global-2714 .elementor-labels-above .elementor-field-group > label{padding-bottom:15px;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group > label, .elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-subgroup label{color:var( --e-global-color-e2b3dad );}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group > label{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-type-html{color:#070707;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group .elementor-field{color:#080808;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FCFAF8;border-color:#DADADA;border-width:1px 1px 1px 1px;border-radius:10px 10px 10px 10px;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group .elementor-select-wrapper select{background-color:#FCFAF8;border-color:#DADADA;border-width:1px 1px 1px 1px;border-radius:10px 10px 10px 10px;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group .elementor-select-wrapper::before{color:#DADADA;}.elementor-1818 .elementor-element.elementor-global-2714 .e-form__buttons__wrapper__button-next{background-color:#F97415;color:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-button[type="submit"]{background-color:#F97415;color:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .e-form__buttons__wrapper__button-previous{background-color:#FF9E59;color:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .e-form__buttons__wrapper__button-next:hover{background-color:#CF5E0D;color:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-button[type="submit"]:hover{background-color:#CF5E0D;color:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .e-form__buttons__wrapper__button-previous:hover{background-color:#CF5E0D;color:#ffffff;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-button{border-radius:10px 10px 10px 10px;}.elementor-1818 .elementor-element.elementor-global-2714{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-widget-global .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1818 .elementor-element.elementor-global-2670{text-align:center;}.elementor-1818 .elementor-element.elementor-global-2670 .elementor-heading-title{color:var( --e-global-color-e2b3dad );}.elementor-1818 .elementor-element.elementor-global-2670 .elementor-heading-title a:hover, .elementor-1818 .elementor-element.elementor-global-2670 .elementor-heading-title a:focus{color:var( --e-global-color-accent );}.elementor-1818 .elementor-element.elementor-global-2670 .elementor-heading-title a{transition-duration:0.3s;}body.elementor-page-1818:not(.elementor-motion-effects-element-type-background), body.elementor-page-1818 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-1818 .elementor-element.elementor-element-57b18357{--width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1818 .elementor-element.elementor-element-57b18357{--width:100%;}}@media(max-width:1024px){.elementor-1818 .elementor-element.elementor-element-2308d196{--padding-top:90px;--padding-bottom:90px;--padding-left:20px;--padding-right:20px;}.elementor-1818 .elementor-element.elementor-element-57b18357{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-widget-global .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-1818 .elementor-element.elementor-element-57b18357{--padding-top:30px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-1818 .elementor-element.elementor-global-2714 .elementor-field-group > label{font-size:14px;}.elementor-1818 .elementor-element.elementor-global-2714{--e-form-steps-indicators-spacing:13px;--e-form-steps-indicator-padding:23px;--e-form-steps-divider-width:0px;--e-form-steps-divider-gap:0px;}.elementor-widget-global .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}/* Start custom CSS for global, class: .elementor-global-2714 *//* ============================================================ FORM STYLES - LOKALE PROFIS (DACHDECKER) Field IDs verified from actual HTML source ============================================================ */ /* --- 1. GLOBAL LAYOUT & GRID --- */ .custom-grid-radio .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; width: 100% !important; margin-top: -50px !important; } .custom-grid-radio .elementor-field-option input[type="radio"] { display: none !important; } /* --- 2. GLOBAL BUTTON STYLE --- */ .custom-grid-radio .elementor-field-option label { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 15px !important; padding: 10px 10px !important; border: 2px solid #e2e8f0 !important; border-radius: 16px !important; cursor: pointer; transition: all 0.3s ease; background: #ffffff !important; font-weight: 500; text-align: center; margin: 0 !important; width: 100% !important; position: relative; } /* --- 3. STATES (Hover & Checked) --- */ .custom-grid-radio .elementor-field-option label:hover { border-color: #ff6b00 !important; background: rgba(255, 107, 0, 0.05) !important; } .custom-grid-radio .elementor-field-option input:checked + label { border-color: #ff6b00 !important; background: rgba(255, 107, 0, 0.1) !important; color: #ff6b00 !important; } /* --- 4. IMAGE ICONS SETUP --- Add every field group that needs icons to BOTH lists below. Use the exact class name from the HTML: elementor-field-group-FIELDID */ .elementor-field-group-help_wanted label::after, .elementor-field-group-step2_building_type label::after, .elementor-field-group-step2_building_type_flachdach label::after, .elementor-field-group-step2_reperatur_option label::after, .elementor-field-group-step2_dachfenster label::after, .elementor-field-group-step3_material label::after, .elementor-field-group-step3_material_dach_neubau label::after, .elementor-field-group-step3_dachdammung label::after, .elementor-field-group-step3_was_planen_sie label::after, .elementor-field-group-step3_um_was_geht_es label::after, .elementor-field-group-step3_zimmererarbeit label::after, .elementor-field-group-step3_dachfenster label::after, .elementor-field-group-step4_dachsanierung label::after, .elementor-field-group-step4_dach_neubau label::after, .elementor-field-group-step4_reparatur label::after, .elementor-field-group-step4_dachdammung label::after, .elementor-field-group-step4_solar label::after, .elementor-field-group-step4_flachdach label::after, .elementor-field-group-step4_zimmerer label::after, .elementor-field-group-step4_dachfenster label::after { content: "" !important; width: 60px; height: 60px; order: -1; display: block !important; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none !important; padding-top: -50px !important; } /* Hide default markers/emojis */ .elementor-field-group-help_wanted label::before, .elementor-field-group-step2_building_type label::before, .elementor-field-group-step2_building_type_flachdach label::before, .elementor-field-group-step2_reperatur_option label::before, .elementor-field-group-step2_dachfenster label::before, .elementor-field-group-step3_material label::before, .elementor-field-group-step3_material_dach_neubau label::before, .elementor-field-group-step3_dachdammung label::before, .elementor-field-group-step3_was_planen_sie label::before, .elementor-field-group-step3_um_was_geht_es label::before, .elementor-field-group-step3_zimmererarbeit label::before, .elementor-field-group-step3_dachfenster label::before, .elementor-field-group-step4_dachsanierung label::before, .elementor-field-group-step4_dach_neubau label::before, .elementor-field-group-step4_reparatur label::before, .elementor-field-group-step4_dachdammung label::before, .elementor-field-group-step4_solar label::before, .elementor-field-group-step4_flachdach label::before, .elementor-field-group-step4_zimmerer label::before, .elementor-field-group-step4_dachfenster label::before { display: none !important; } /* ============================================================ 5. STEP-BY-STEP IMAGE ICONS Replace every "ADD-URL-HERE" with your image URL. ============================================================ */ /* ---------------------------------------------------------- STEP 1: Starten Sie hier Ihr Projekt (help_wanted) Options: Dachsanierung / Dach Neubau / Dachfenster / Sturmschäden Reparatur / Dachdämmung / Solar Photovoltaik / Flachdach Arbeiten / Zimmerer & Holzarbeiten ---------------------------------------------------------- */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Dachsanierung.png'); } /* Dachsanierung */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Dach-Neubau.png'); } /* Dach Neubau */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Dachfenster.png'); } /* Dachfenster */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Reparatur.png'); } /* Sturmschäden / Reparatur */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(5) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Dachdammung.png'); } /* Dachdämmung */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(6) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Solar.png'); } /* Solar / Photovoltaik */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(7) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Flachdach-Steg-4-Dachsanierung-Flachdach-Step-4-Solar-Flachdach.png'); } /* Flachdach Arbeiten */ .elementor-field-group-help_wanted .elementor-field-option:nth-child(8) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Zimmerer.png'); } /* Zimmerer- & Holzarbeiten */ /* ---------------------------------------------------------- STEP 2a: Art des Gebäudes — standard (step2_building_type) Options: Einfamilienhaus / Doppel-Reihenhaus / Mehrfamilienhaus / Gewerbeobjekt ---------------------------------------------------------- */ .elementor-field-group-step2_building_type .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Gebaude-Einfamilienhaus.png'); } /* Einfamilienhaus */ .elementor-field-group-step2_building_type .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Gebaude-Reihenhaus.png'); } /* Doppel-/Reihenhaus */ .elementor-field-group-step2_building_type .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Gebaude-Mehrfamilienhaus.png'); } /* Mehrfamilienhaus */ .elementor-field-group-step2_building_type .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Gebaude-Gewerbeobjekt.png'); } /* Gewerbeobjekt */ .elementor-field-group-step2_building_type .elementor-field-option:nth-child(5) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 2b: Art des Gebäudes — Flachdach (step2_building_type_flachdach) Options: Wohnhaus / Gewerbeobjekt / Garage / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step2_building_type_flachdach .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-2-Flachdach-Wohnhaus.png'); } /* Wohnhaus */ .elementor-field-group-step2_building_type_flachdach .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-2-Flachdach-Gewerbeobjekt.png'); } /* Gewerbeobjekt */ .elementor-field-group-step2_building_type_flachdach .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-2-Flachdach-Garage.png'); } /* Garage */ .elementor-field-group-step2_building_type_flachdach .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 2c: Was ist betroffen? (step2_reperatur_option) Options: Einzelne Dachziegel / Größere Fläche / Dachfenster / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step2_reperatur_option .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-2-Sturmschaden-Einzelne-Dachziegel.png'); } /* Einzelne Dachziegel */ .elementor-field-group-step2_reperatur_option .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-2-Sturmschaden-Grosere-Flache.png'); } /* Größere Fläche */ .elementor-field-group-step2_reperatur_option .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-2-Sturmschaden-Dachfenster.png'); } /* Dachfenster */ .elementor-field-group-step2_reperatur_option .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 2d: Welche Marke? (step2_dachfenster) Options: Velux / Fakro / Roto / Andere / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step2_dachfenster .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/01/velux.jpg'); } /* Velux */ .elementor-field-group-step2_dachfenster .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/01/fakro.jpg'); } /* Fakro */ .elementor-field-group-step2_dachfenster .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/01/roto.jpg'); } /* Roto */ .elementor-field-group-step2_dachfenster .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 3a: Material (step3_material) Options: Ziegel/Pfannen / Metall / Bitumen/Dachpappe / Schieferplatten / Reet / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step3_material .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Ziegel.png'); } /* Ziegel / Pfannen */ .elementor-field-group-step3_material .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Metall.png'); } /* Metall */ .elementor-field-group-step3_material .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Bitumen.png'); } /* Bitumen / Dachpappe */ .elementor-field-group-step3_material .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Schiefer.png'); } /* Schieferplatten */ .elementor-field-group-step3_material .elementor-field-option:nth-child(5) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Reet.png'); } /* Reet */ .elementor-field-group-step3_material .elementor-field-option:nth-child(6) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 3b: Welche Dämmung? (step3_dachdammung) Options: Zwischensparrendämmung / Aufsparrendämmung / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step3_dachdammung .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Dammung-Zwischensparrendammung.png'); } /* Zwischensparrendämmung */ .elementor-field-group-step3_dachdammung .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Dammung-Aufsparrendammung.png'); } /* Aufsparrendämmung */ .elementor-field-group-step3_dachdammung .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 3c: Was planen Sie? Solar (step3_was_planen_sie) Options: Neue PV-Anlage / Dach prüfen lassen / Vorbereitung für Solaranlage / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step3_was_planen_sie .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Solar-Neue-PV-Anlage.png'); } /* Neue PV-Anlage */ .elementor-field-group-step3_was_planen_sie .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Solar-Dach-prufen.png'); } /* Dach prüfen lassen */ .elementor-field-group-step3_was_planen_sie .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Solar-Vorbereitung.png'); } /* Vorbereitung für Solaranlage */ .elementor-field-group-step3_was_planen_sie .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 3d: Um was geht es? Flachdach (step3_um_was_geht_es) Options: Neueindeckung / Sanierung / Reparatur / Begrünung / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step3_um_was_geht_es .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Flachdach-Neueindeckung.png'); } /* Neueindeckung */ .elementor-field-group-step3_um_was_geht_es .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Flachdach-Sanierung.png'); } /* Sanierung */ .elementor-field-group-step3_um_was_geht_es .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Flachdach-Reparatur.png'); } /* Reparatur */ .elementor-field-group-step3_um_was_geht_es .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Flachdach-Begrunung.png'); } /* Begrünung */ .elementor-field-group-step3_um_was_geht_es .elementor-field-option:nth-child(5) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 3e: Zimmererarbeit (step3_zimmererarbeit) Options: Dachstuhl / Carport/Überdachung / Gaube / Fassadenverkleidung / Haus- und Hallenbau / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step3_zimmererarbeit .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Zimmerer-Dachstuhl.png'); } /* Dachstuhl */ .elementor-field-group-step3_zimmererarbeit .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dach-Neubau-Carport-Step-3-Zimmerer.png'); } /* Carport / Überdachung */ .elementor-field-group-step3_zimmererarbeit .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Zimmerer-Gaube.png'); } /* Gaube */ .elementor-field-group-step3_zimmererarbeit .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Zimmerer-Fassadenverkleidung.png'); } /* Fassadenverkleidung */ .elementor-field-group-step3_zimmererarbeit .elementor-field-option:nth-child(5) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Zimmerer-Haus-und-Hallenbau.png'); } /* Haus- und Hallenbau */ .elementor-field-group-step3_zimmererarbeit .elementor-field-option:nth-child(6) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher */ /* ---------------------------------------------------------- STEP 3f: Wie viele Dachfenster? (step3_dachfenster) Options: 1-4 / 5-10 / Mehr als 10 / Mehr als 20 ---------------------------------------------------------- */ .elementor-field-group-step3_dachfenster .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Dachfenster-1.png'); } /* 1-4 */ .elementor-field-group-step3_dachfenster .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Dachfenster-5.png'); } /* 5-10 */ .elementor-field-group-step3_dachfenster .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Dachfenster-10.png'); } /* Mehr als 10 */ .elementor-field-group-step3_dachfenster .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Step-3-Dachfenster-20.png'); } /* Mehr als 20 */ /* ---------------------------------------------------------- STEP 3g: Material (step3_material_dach_neubau) Options: Ziegel/Pfannen / Metall / Bitumen/Dachpappe / Schieferplatten / Reet / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step3_material_dach_neubau .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Ziegel.png'); } /* Ziegel / Pfannen */ .elementor-field-group-step3_material_dach_neubau .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Metall.png'); } /* Metall */ .elementor-field-group-step3_material_dach_neubau .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Bitumen.png'); } /* Bitumen / Dachpappe */ .elementor-field-group-step3_material_dach_neubau .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Schiefer.png'); } /* Schieferplatten */ .elementor-field-group-step3_material_dach_neubau .elementor-field-option:nth-child(5) label::after { background-image: url('/wp-content/uploads/2026/02/Material-Reet.png'); } /* Reet */ .elementor-field-group-step3_material_dach_neubau .elementor-field-option:nth-child(6) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4a: Dachart — Dachsanierung (step4_dachsanierung) Options: Flachdach / Schrägdach / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_dachsanierung .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Flachdach-Steg-4-Dachsanierung-Flachdach-Step-4-Solar-Flachdach.png'); } /* Flachdach */ .elementor-field-group-step4_dachsanierung .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dachsanierung-Spitzdach-Step-4-Solar-Spitzdach.png'); } /* Schrägdach */ .elementor-field-group-step4_dachsanierung .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4b: Worum geht es? — Neubau (step4_dach_neubau) Options: Neubau / Anbau / Carport/Garage / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_dach_neubau .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dach-Neubau-Neubau.png'); } /* Neubau */ .elementor-field-group-step4_dach_neubau .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dach-Neubau-Anbau.png'); } /* Anbau */ .elementor-field-group-step4_dach_neubau .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dach-Neubau-Carport-Step-3-Zimmerer.png'); } /* Carport / Garage */ .elementor-field-group-step4_dach_neubau .elementor-field-option:nth-child(4) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4c: Ist das Dach undicht? — Reparatur (step4_reparatur) Options: Ja dringend / Nein nur Schaden / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_reparatur .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Sturmschaden-Ja-Step-4-Flachdach-Ja.png'); } /* Ja, dringend */ .elementor-field-group-step4_reparatur .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Sturmschaden-Nein-Step-4-Flachdach-Nein.png'); } /* Nein, nur Schaden sichtbar */ .elementor-field-group-step4_reparatur .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4d: Ist das Dach saniert? — Dachdämmung (step4_dachdammung) Options: Ja / Nein / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_dachdammung .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dammung-Ja.png'); } /* Ja */ .elementor-field-group-step4_dachdammung .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dammung-Nein.png'); } /* Nein */ .elementor-field-group-step4_dachdammung .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4e: Dachart — Solar (step4_solar) Options: Flachdach / Spitzdach / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_solar .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-1-Flachdach-Steg-4-Dachsanierung-Flachdach-Step-4-Solar-Flachdach.png'); } /* Flachdach */ .elementor-field-group-step4_solar .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dachsanierung-Spitzdach-Step-4-Solar-Spitzdach.png'); } /* Spitzdach */ .elementor-field-group-step4_solar .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4f: Ist das Dach undicht? — Flachdach (step4_flachdach) Options: Ja dringend / Nein nur Schaden / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_flachdach .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Sturmschaden-Ja-Step-4-Flachdach-Ja.png'); } /* Ja, dringend */ .elementor-field-group-step4_flachdach .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Sturmschaden-Nein-Step-4-Flachdach-Nein.png'); } /* Nein, nur Schaden sichtbar */ .elementor-field-group-step4_flachdach .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4g: Um was handelt es sich? — Zimmerer (step4_zimmerer) Options: Neubau / Sanierung / Nicht sicher ---------------------------------------------------------- */ .elementor-field-group-step4_zimmerer .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Zimmerer-Neubau.png'); } /* Neubau */ .elementor-field-group-step4_zimmerer .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Zimmerer-Sanierung.png'); } /* Sanierung */ .elementor-field-group-step4_zimmerer .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Anders */ /* ---------------------------------------------------------- STEP 4h: Um was handelt es sich? — Dachfenster (step4_dachfenster) Options: Austausch / Neueinbau / Nicht sicher/Beratung ---------------------------------------------------------- */ .elementor-field-group-step4_dachfenster .elementor-field-option:nth-child(1) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dachfenster-Austausch.png'); } /* Austausch */ .elementor-field-group-step4_dachfenster .elementor-field-option:nth-child(2) label::after { background-image: url('/wp-content/uploads/2026/02/Step-4-Dachfenster-Neueinbau.png'); } /* Neueinbau */ .elementor-field-group-step4_dachfenster .elementor-field-option:nth-child(3) label::after { background-image: url('/wp-content/uploads/2026/02/Nicht-sicher.png'); } /* Nicht sicher / Beratung */ /* ============================================================ HOW TO ADD A NEW STEP: 1. Add its field group ID to BOTH ::after and ::before .elementor-1818 .elementor-element.elementor-global-2714 lists in Section 4 above. 2. Copy the template below, change STEP_NAME and fill URLs. ============================================================ .elementor-field-group-STEP_NAME .elementor-field-option:nth-child(1) label::after { background-image: url('ADD-URL-HERE'); } .elementor-field-group-STEP_NAME .elementor-field-option:nth-child(2) label::after { background-image: url('ADD-URL-HERE'); } .elementor-field-group-STEP_NAME .elementor-field-option:nth-child(3) label::after { background-image: url('ADD-URL-HERE'); } */ /* --- 6. MOBILE RESPONSIVENESS --- */ /* --- 6. MOBILE RESPONSIVENESS --- */ @media (max-width: 767px) { .custom-grid-radio .elementor-field-subgroup { grid-template-columns: 1fr !important; } .custom-grid-radio .elementor-field-option label { padding: 30px 10px !important; } /* ↓ Control mobile icon size here */ .custom-grid-radio .elementor-field-option label::after { width: 60px !important; /* ← change this */ height: 60px !important; /* ← and this */ } /* ↓ Control mobile label text size here */ .custom-grid-radio .elementor-field-option label { font-size: 14px !important; /* ← change this */ } } /* 1. Remove the 'No input' text specifically on Step 3 */ .cfef-step-field-text { display: none; }/* End custom CSS */