.elementor-31752 .elementor-element.elementor-element-2b00cd0{--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:flex-start;--flex-wrap:wrap;--align-content:flex-start;border-style:none;--border-style:none;--border-radius:25px 25px 25px 25px;--margin-top:40px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-31752 .elementor-element.elementor-element-2b00cd0:not(.elementor-motion-effects-element-type-background), .elementor-31752 .elementor-element.elementor-element-2b00cd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2b27354 );}.elementor-31752 .elementor-element.elementor-element-0626cdd{width:100%;max-width:100%;margin:-21px -14px calc(var(--kit-widget-spacing, 0px) + 0px) 14px;padding:0px 0px 0px 0px;z-index:1;}.elementor-31752 .elementor-element.elementor-element-0626cdd .elementor-icon-wrapper{text-align:end;}.elementor-31752 .elementor-element.elementor-element-0626cdd.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-c450c25 );}.elementor-31752 .elementor-element.elementor-element-0626cdd.elementor-view-framed .elementor-icon, .elementor-31752 .elementor-element.elementor-element-0626cdd.elementor-view-default .elementor-icon{color:var( --e-global-color-c450c25 );border-color:var( --e-global-color-c450c25 );}.elementor-31752 .elementor-element.elementor-element-0626cdd.elementor-view-framed .elementor-icon, .elementor-31752 .elementor-element.elementor-element-0626cdd.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-c450c25 );}.elementor-31752 .elementor-element.elementor-element-0626cdd .elementor-icon{font-size:38px;}.elementor-31752 .elementor-element.elementor-element-0626cdd .elementor-icon svg{height:38px;}.elementor-31752 .elementor-element.elementor-element-0626cdd .elementor-icon i, .elementor-31752 .elementor-element.elementor-element-0626cdd .elementor-icon svg{transform:rotate(34deg);}.elementor-31752 .elementor-element.elementor-element-7977dde{width:var( --container-widget-width, 45% );max-width:45%;padding:20px 20px 20px 20px;--container-widget-width:45%;--container-widget-flex-grow:0;text-align:start;}.elementor-31752 .elementor-element.elementor-element-7977dde img{max-width:171px;}.elementor-31752 .elementor-element.elementor-element-cf2a80a{width:var( --container-widget-width, 45% );max-width:45%;--container-widget-width:45%;--container-widget-flex-grow:0;text-align:center;}.elementor-31752 .elementor-element.elementor-element-cf2a80a.elementor-element{--align-self:center;}.elementor-31752 .elementor-element.elementor-element-618b3d4{width:100%;max-width:100%;}.elementor-31752 .elementor-element.elementor-element-618b3d4 > .elementor-widget-container{padding:54px 54px 54px 54px;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__label{text-align:left;font-size:16px;font-weight:500;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__desc{text-align:left;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__fields-group{gap:0.7em 0.7em;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__field-wrap.checkradio-wrap span{gap:8px;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__field:not(.checkradio-field):not(.range-field):not(.jet-form-builder-repeater):not(.wysiwyg-field):not([role="switch"]){background-color:var( --e-global-color-2b27354 );padding:15px 15px 15px 15px;margin:5px 0px 20px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#A2A2A2;border-radius:8px 8px 8px 8px;box-shadow:0px 0px 10px 0px rgba(166.6, 166.6, 166.6, 0.38);}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder input{color-scheme:normal;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder-repeater__row-remove{align-self:flex-start;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__action-button{background-color:var( --e-global-color-c450c25 );color:var( --e-global-color-2b27354 );transition:all 0.3s;padding:15px 15px 15px 15px;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__next-page-wrap{text-align:left;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder__next-page{padding:15px 15px 15px 15px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:10px 10px 10px 10px;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder-message--success{text-align:center;}.elementor-31752 .elementor-element.elementor-element-618b3d4 .jet-form-builder-message--error{text-align:center;}.elementor-31752 .elementor-element.elementor-element-da06493{padding:50px 0px 100px 0px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-31752 .elementor-element.elementor-element-da06493 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-31752 .elementor-element.elementor-element-da06493 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-31752 .elementor-element.elementor-element-da06493 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-31752 .elementor-element.elementor-element-da06493 .elementor-icon-list-item > a{font-size:14px;}.elementor-31752 .elementor-element.elementor-element-da06493 .elementor-icon-list-text{transition:color 0.3s;}#elementor-popup-modal-31752 .dialog-widget-content{background-color:#FFFFFF00;border-radius:0px 0px 0px 0px;margin:0px 0px 0px 30px;}#elementor-popup-modal-31752{background-color:var( --e-global-color-2b27354 );justify-content:flex-start;align-items:center;pointer-events:all;}#elementor-popup-modal-31752 .dialog-message{width:100vw;height:99vh;align-items:flex-start;}#elementor-popup-modal-31752 .dialog-close-button{display:flex;}@media(max-width:767px){.elementor-31752 .elementor-element.elementor-element-0626cdd{margin:-17px -11px calc(var(--kit-widget-spacing, 0px) + -14px) 0px;}.elementor-31752 .elementor-element.elementor-element-7977dde{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:47%;--container-widget-flex-grow:0;width:var( --container-widget-width, 47% );max-width:47%;}.elementor-31752 .elementor-element.elementor-element-7977dde img{max-width:100%;}.elementor-31752 .elementor-element.elementor-element-cf2a80a{--container-widget-width:45%;--container-widget-flex-grow:0;width:var( --container-widget-width, 45% );max-width:45%;}.elementor-31752 .elementor-element.elementor-element-cf2a80a .elementor-heading-title{font-size:19px;}.elementor-31752 .elementor-element.elementor-element-da06493{width:100%;max-width:100%;padding:50px 0px 50px 0px;}.elementor-31752 .elementor-element.elementor-element-da06493.elementor-element{--align-self:center;}}@media(min-width:768px){.elementor-31752 .elementor-element.elementor-element-2b00cd0{--content-width:100%;}}/* Start custom CSS for container, class: .elementor-element-2b00cd0 */.jet-form-builder-progress-pages__item--wrapper[data-page="2"] {
    display: none !important;
}
.jet-form-builder-progress-pages__item--circle {
    display: none !important;
}
/* Macht den harten Sprung im JetFormBuilder weich */
.jet-form-builder-page {
    animation: jfb-smooth-step 0.8s ease-in-out forwards;
}

/* Definition der Animation: Weiches Einblenden von leicht unten */
@keyframes jfb-smooth-step {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}/* End custom CSS */
/* Start custom CSS */#elementor-popup-modal-31752 {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 1. Container als Grid-Layout (Karten nebeneinander platzieren) */
.jet-form-builder__fields-group.checkradio-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* 2. Das Label zur anklickbaren Karte machen */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio {
    display: flex;
    flex-direction: column;
    border: 2px solid #e5e7eb; /* Heller Standard-Rahmen */
    border-radius: 12px;
    padding: 30px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ffffff;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

/* 3. Hover-Effekt (beim Drüberfahren mit der Maus) */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio:hover {
    border-color: #d0d9de; /* Die blaue Farbe an dein Design anpassen */
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.20);
    border-width: 2px;
    
}

/* 4. Den echten System-Radio-Button unsichtbar machen */
.jet-form-builder__field-wrap.radio-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 5. Den Standard-JetFormBuilder "Fake"-Radiopunkt ausblenden */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio span::before {
    display: none !important;
}

/* 6. Styling, wenn die Karte AUSGEWÄHLT ist (Checked-Status) */
/* Nutzt die CSS :has() Funktion, um das Eltern-Label zu stylen */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio:has(input[type="radio"]:checked) {
    border-color: #0056b3; /* Blauer Rahmen */
    background-color: #f0f7ff; /* Sehr heller blauer Hintergrund */
}

/* 7. Den Text in der Karte stylen (z.B. "Beratungstermin") */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio span {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333333;
}

/* 1. Hauptkarte anpassen: Padding oben entfernen und Ecken für das Bild abschneiden */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio {
    padding: 0 0 20px 0; /* Oben 0, unten 20px */
    overflow: hidden; /* Wichtig: Schneidet das eckige Bild an den runden Kanten der Karte ab */
    justify-content: flex-start; /* Inhalt rutscht nach oben */
}

/* 2. Dem Container, der jetzt den Text hält, wieder etwas Luft geben */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio > span {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Abstand zwischen Titel und Untertitel */
}

/* 3. Styling für den Haupttitel */
.hg-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827; /* Sehr dunkles Grau/Schwarz */
}

/* 4. Styling für den Untertitel */


/* Grundgerüst für den Bild-Platzhalter ganz oben in der Karte */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio::before {
    content: "";
    display: block;
    width: 100%;
    height: 160px; /* Höhe der Bilder - je nach Geschmack anpassen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px; /* Abstand zwischen Bild und Text */
    background-color: #f3f4f6; /* Platzhalter-Farbe, falls das Bild lädt */
}

/* --- HIER KOMMEN DEINE BILDER REIN --- */

/* Bild für den Wert "beratungstermin" (Beachte: Der Wert muss exakt mit dem im JetFormBuilder übereinstimmen) */
.jet-form-builder__field-label.for-radio:has(input[value="beratungstermin"])::before {
    background-image: url('/wp-content/uploads/2025/01/Facebook-head20261.jpg');
}

/* Bild für den Wert "angebot" */
.jet-form-builder__field-label.for-radio:has(input[value="angebot"])::before {
    background-image: url('/wp-content/uploads/2026/02/form-service.webp');
}

/* Kopiere diesen Block einfach für weitere Werte (z.B. value="service", value="gehoerschutz") */


/* 1. WICHTIG: Die Karte muss 'position: relative' haben, damit wir das Icon darin frei platzieren können */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio {
    position: relative;
}

/* 2. Das Häkchen-Icon einblenden, wenn die Karte ausgewählt ist */
.jet-form-builder__field-wrap.radio-wrap .jet-form-builder__field-label.for-radio:has(input[type="radio"]:checked)::after {
    content: "";
    position: absolute;
    top: 15px;    /* Abstand von oben */
    right: 15px;  /* Abstand von rechts */
    width: 28px;  /* Größe des Kreises */
    height: 28px;
    background-color: #0d6efd; /* Das Blau an dein Theme anpassen (hier ein Standard-Blau) */
    border-radius: 50%; /* Macht das Element rund */
    
    /* Das weiße Häkchen als SVG-Hintergrundbild (direkt im Code integriert) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 18px; /* Größe des weißen Häkchens im Kreis */
    background-position: center;
    background-repeat: no-repeat;
    
    /* Optional: Ein leichter Schatten, damit es sich besser vom Bild abhebt */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* 1. Dem Button die relative Position geben */
button.amparex-dit-slot {
    position: relative;
    /* overflow: visible !important;  <-- Nur aktivieren, falls das Häkchen abgeschnitten wird */
}

/* 2. Das Häkchen-Icon einblenden, wenn der Button aktiv ist */
button.amparex-dit-slot.is-active::after {
    content: "";
    position: absolute;
    top: -8px;    /* Leicht nach oben aus dem Button herausgerückt */
    right: -8px;  /* Leicht nach rechts aus dem Button herausgerückt */
    width: 20px;  /* Etwas kleiner als bei den großen Karten */
    height: 20px;
    background-color: #0d6efd; /* Dein Blau - bei Bedarf anpassen */
    border-radius: 50%; 
    
    /* Das weiße SVG-Häkchen */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 12px; /* Entsprechend kleineres Häkchen */
    background-position: center;
    background-repeat: no-repeat;
    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

span.hg-sub {
    
    font-size: 16px!important;
}/* End custom CSS */