var flow; function checkFlowParameter() { var currentUrl = new URL(window.location.href); var allowedFlows = [ 'zz_all_sf', 'zz_all_sf_nl', 'zz_all_sf_nl_vc', 'zz_all_sf_koop_msd', 'zz_all_sf_koop_un', 'zz_all_sf_vc', 'zz_all_sf_child', 'zz_all_sf_child_nl', 'zz_all_sf_child_pm', 'zz_all_sf_child_pm_vc', 'zz_all_sf_child_vc', 'zz_all_sf_child_nl_vc', 'zz_all_sf_vc_koop_kl', 'zz_all_sf_pm_vc', 'zz_all_sf_pm' ]; var flowParam = currentUrl.searchParams.get('flow'); if (!flowParam) { return new Promise(function (resolve, reject) { var checkInterval = setInterval(function () { if (window.tyrionParams && window.tyrionParams.flow && allowedFlows.includes(window.tyrionParams.flow)) { clearInterval(checkInterval); flow = window.tyrionParams.flow; resolve(true); } }, 100); setTimeout(function () { clearInterval(checkInterval); resolve(false); }, 5000); }); } else { flow = flowParam; return Promise.resolve(allowedFlows.includes(flowParam)); } } function isStyleIncluded() { var stylesheets = document.styleSheets; for (var i = 0; i < stylesheets.length; i++) { if (stylesheets[i].href && stylesheets[i].href.includes('cro_dentech.css')) { return true; } } return false; } function includeStyle() { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'https://www.da-direkt.de/-/media/Project/DADirekt/Website/css/cro_dentech.css?v3'; head.appendChild(link); } checkFlowParameter().then(function (result) { if (result) { if (!isStyleIncluded()) { includeStyle(); } //FORM APPEARED function checkForShadowRoot() { var rootElement = document.querySelector("#root"); if (rootElement && rootElement.shadowRoot) { clearInterval(intervalRoot); //FORM APPEARED function checkForFormElement() { var formElement = rootElement.shadowRoot.querySelector('form[data-page-id]'); if (formElement) { clearInterval(intervalForm); runCodeForStep(); } } var intervalForm = setInterval(checkForFormElement, 100); //ATTRIBUTE CHANGED function checkFormAttribute(mutationsList, observerFormAttribute) { const formElement = rootElement.shadowRoot.querySelector('form[data-page-id]'); if (formElement) { runCodeForStep(); } } const observerFormAttribute = new MutationObserver(checkFormAttribute); observerFormAttribute.observe(rootElement.shadowRoot, { attributes: true, attributeFilter: ['data-page-id'], subtree: true }); } } var intervalRoot = setInterval(checkForShadowRoot, 100); } }); function setupSitecoreModalLinks() { const rootElement = document.querySelector('#root'); const shadow = rootElement.shadowRoot; const modalTriggers = shadow.querySelectorAll('.open-sitecore-modal'); const footer = document.querySelector('footer'); modalTriggers.forEach((trigger, idx) => { const url = trigger.getAttribute('data-modal-url'); if (!url) return; const linkId = `external-link-trigger-${btoa(url).replace(/[^a-zA-Z0-9]/g, '')}`; if (!document.getElementById(linkId)) { const link = document.createElement('a'); link.style.display = 'none'; link.classList.add('js-overlay__external-link-trigger'); link.href = url; link.id = linkId; footer.appendChild(link); } trigger.addEventListener('click', () => { const link = document.getElementById(linkId); if (link) link.click(); }, { once: false }); }); } function removeCustomClassBody() { document.body.classList.remove('remove-bg'); } function addCustomClassBody() { document.body.classList.add('remove-bg'); } function removeRoot100() { if (document.querySelector('#root.root-100')) { document.querySelector('#root').classList.remove('root-100'); } } function addRoot100() { document.querySelector('#root').classList.add('root-100'); } function partnerCSS() { if (window.location.href.includes('kaufland')) { //CSS HEAD function checkForCSS() { var stylesheets = document.styleSheets; for (var i = 0; i < stylesheets.length; i++) { if (stylesheets[i].href && stylesheets[i].href.includes('kaufland_dentech.css')) { return true; } } return false; } function includeKauflandCSS() { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'https://www.da-direkt.de/-/media/Project/DADirekt/Website/css/kaufland_dentech.css?v1'; head.appendChild(link); } if (!checkForCSS()) { includeKauflandCSS() } //CSS SHADOW const rootElement = document.querySelector("#root"); if (!rootElement.shadowRoot.querySelector('style[title="kaufland-css"]')) { insertKauflandCSS(); } function insertKauflandCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'kaufland-css'); stylesheet.textContent = ` div > div[role="main"] *:focus-visible:not(input[type="radio"]):not(#phone_phone_number):not(#email_email):not(button[type="button"]):not(input#select_breed_breed_id) { outline: 2px solid #E10915; outline-offset: 2px; } /*PROGRESS BAR*/ div[role="main"] .progress-bar .step .step-name { font-family: Kaufland, sans-serif; font-weight: 700; color: #747474; } div[role="main"] .progress-bar .step.active .step-name, div[role="main"] .progress-bar .step.completed .step-name { color: #237916; } div[role="main"] .progress-bar .step .step-circle a { border: 2px solid #f5f5f5; background: #f5f5f5; font-family: Kaufland, sans-serif; font-weight: 700; color: #747474; } div[role="main"] .progress-bar .step.active .step-circle a { border: 2px solid #237916; background: #237916; color: #fff; } div[role="main"] .progress-bar .step.completed .step-circle a { border: 2px solid #237916; background: #fff; color: #237916; } div[role="main"] .progress-bar .step.completed .step-circle a:before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6.00003 10.8L3.20003 8L2.26669 8.93333L6.00003 12.6667L14 4.66667L13.0667 3.73333L6.00003 10.8Z' fill='%23237916'%3E%3C/path%3E%3C/svg%3E"); font-size: 14px; } div[role="main"] .progress-bar .step .step-circle:after, div[role="main"] .progress-bar .step .step-circle:before { background: #c2c2c2; } div[role="main"] .progress-bar .step.active .step-circle:before, div[role="main"] .progress-bar .step.completed .step-circle:after, div[role="main"] .progress-bar .step.completed .step-circle:before { background: #237916; } /*GENERAL*/ div[role="main"] button[type="submit"] { font-size: 16px; line-height: 22px; height: 44px; padding: 0 11px; min-width: 240px; } div[role="main"] button[type="submit"]:hover { background-color: #70d159; opacity: 1; } div[role="main"] label { font-size: 16px; line-height: 22px; margin-bottom: 11px; } div[role=main] .start-label-area label, div[role="main"] form[data-page-id="tier-daten"] div[aria-labelledby="radio_pet_gender"] label { margin: 0 0 0 11px; } div[role="main"] form[data-page-id="tier-daten"] div[aria-labelledby="radio_pet_gender"] { gap: 11px; } div[role=main] form[data-page-id="start"] .start-label-area>div:nth-of-type(2)>div { margin: 11px 0 0 0; } div[role="main"] input[type="text"] { padding: 0 11px; } div[role="main"] p { max-width: 938px; } div[role="main"] #datepicker_date_of_birth, div[role="main"] form[data-page-id="start"] input[type="text"], div[role="main"] form[data-page-id="tier-daten"] .MuiAutocomplete-root { width: 100%; max-width: 938px; } div[role="main"] form[data-page-id="tier-daten"] .MuiAutocomplete-inputRoot { font-family: Kaufland, sans-serif; font-weight: 400; padding: 0 44px 0 11px; } div[role="main"] form[data-page-id="tier-daten"] .MuiAutocomplete-inputRoot input { padding: 0; } div[role=main] .start-label-area p.legal-text { font-family: Kaufland, sans-serif; font-weight: 400; color: #424242; } div[role=main] #datepicker_date_of_birth input[name="month"] { margin: 0 11px !important; } div[role=main] #datepicker_date_of_birth select { padding: 0 44px 0 11px; } /*LEAD*/ div[role=main] form[data-page-id="kontaktdaten"] > div:not(.has-input-field):not(.progress-bar) { max-width: 938px; } div[role=main] form[data-page-id="kontaktdaten"]>div:nth-child(4)>div>div>div>svg path, div[role=main] form[data-page-id="kontaktdaten"]>div:nth-child(4)>div>div>div>svg rect { stroke: unset !important; } /*DATA*/ div[role="main"] form[data-page-id="persoenliche-daten"] h2 { word-break: break-word; font-family: Kaufland, sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 2.375rem; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="persoenliche-daten"] label:not(.MuiFormControlLabel-root,label[for="radio_address_of_insured_person_same"], label[for="radio_address_of_insured_person_different"], label[for="radio_address_of_insured_person"], label[for="starting_date_starting_at"], label[for="radio_customer_gender"],label[for="radio_insured_person_gender"], label[for="radio_radio_customer_gender_female"], label[for="radio_radio_customer_gender_male"], label[for="radio_radio_insured_person_gender_female"], label[for="radio_radio_insured_person_gender_male"], label[for="datepicker_date_of_birth"]){ font-family: Kaufland, sans-serif; font-weight: 400; transform: translate(11px, 11px); } div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_contract_accept_initial_information_text"]{ display: none !important; } div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_radio_contract_accept_initial_information_text_yes"]{ position: relative; transition: none; transform: none !important; margin-left: 11px; } div[role="main"] form[data-page-id="persoenliche-daten"] div[aria-labelledby="radio_contract_accept_initial_information_text"] > div { display: flex; } div[role="main"] form[data-page-id="persoenliche-daten"] input[id="radio_radio_contract_accept_initial_information_text_yes"] { position: relative; width: 22px; height: 22px; z-index: 2; } div[role="main"] form[data-page-id="persoenliche-daten"] input[id="radio_radio_contract_accept_initial_information_text_yes"]:focus-visible + svg { border-radius: 0; outline: rgb(225, 9, 21) solid 2px; outline-offset: 2px; box-shadow: none; } div[role="main"] form[data-page-id="persoenliche-daten"] input[id="radio_radio_contract_accept_initial_information_text_yes"]:after, div[role="main"] form[data-page-id="persoenliche-daten"] input[id="radio_radio_contract_accept_initial_information_text_yes"]:checked:after{ position: absolute; top: 0; left: 0; content: ''; } div[role="main"] form[data-page-id="persoenliche-daten"] input[id="radio_radio_contract_accept_initial_information_text_yes"]:after { background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%20rx%3D%220%22%20stroke%3D%22%23949494%22%20stroke-width%3D%222%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; width: 22px; height: 22px; } div[role="main"] form[data-page-id="persoenliche-daten"] input[id="radio_radio_contract_accept_initial_information_text_yes"]:checked:after { background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20rx%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%20stroke%3D%22%23949494%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M8.85586%2016.075L4.13086%2011.35L4.87461%2010.6063L8.85586%2014.5875L17.1684%206.27502L17.9121%207.01877L8.85586%2016.075Z%22%20fill%3D%22%23424242%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; width: 22px; height: 22px; } div[role="main"] form[data-page-id="persoenliche-daten"] div[aria-labelledby="radio_contract_accept_initial_information_text"] svg { position: absolute; z-index: 1; } @supports (not (-ms-ime-align:auto)) { div[role="main"] form[data-page-id="persoenliche-daten"] input:focus + label, div[role="main"] form[data-page-id="persoenliche-daten"] input.has-value + label { font-family: Kaufland, sans-serif; font-weight: 700; transform: translate(11px, 2px); } } div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_radio_customer_gender_male"], div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_radio_customer_gender_female"], div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_radio_insured_person_gender_male"], div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_radio_insured_person_gender_female"], div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_address_of_insured_person_same"], div[role="main"] form[data-page-id="persoenliche-daten"] label[for="radio_address_of_insured_person_different"] { margin: 6px 0 6px 11px; } div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field.input-field-50-right, div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field.input-field-50-left{ width: calc(50% - 5.5px); max-width: calc((938px / 2) - 5.5px); } div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field.input-field-50-right { margin: 0 0 0 5.5px; } div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field.input-field-50-left { margin: 0 5.5px 0 0; } div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field { margin: 11px 0; max-width: 938px; } div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field > div:not(.MuiFormGroup-root) { gap: 11px; } div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field > div:not(.MuiFormGroup-root), div[role="main"] form[data-page-id="persoenliche-daten"] .has-input-field > div:not(.MuiFormGroup-root) > div { box-sizing: border-box; position: relative; } div[role="main"] form[data-page-id="persoenliche-daten"] input[type="text"], div[role="main"] form[data-page-id="persoenliche-daten"] input[type="email"], div[role="main"] form[data-page-id="persoenliche-daten"] input[type="tel"] { padding: 14px 11px 0 !important; border-width: 2px; } div[role="main"] form[data-page-id="persoenliche-daten"] #datepicker_date_of_birth input[name="month"] { margin: 0!important; } div[role="main"] form[data-page-id="persoenliche-daten"] #datepicker_date_of_birth { gap: 11px; } div[role="main"] form[data-page-id="persoenliche-daten"] #insured_person_birthday { border: 2px solid rgb(141, 141, 141); border-radius: 0px; width: calc(50% - 5.5px); background-color:#f5f5f5; font-family: Kaufland, sans-serif; font-weight: 400; color: rgb(66, 66, 66); height: auto; } div[role="main"] form[data-page-id="persoenliche-daten"] > div:not(.has-input-field):not(.progress-bar) { max-width: 938px; } div[role="main"] form[data-page-id="persoenliche-daten"] #document-area p, div[role="main"] form[data-page-id="persoenliche-daten"] #document-area strong { font-family: Kaufland, sans-serif !important; font-weight: 400 !important; color: rgb(66, 66, 66) !important; } div[role="main"] form[data-page-id="persoenliche-daten"] h2 { padding: 0; margin: 44px 0 22px 0; } div[role="main"] form[data-page-id="persoenliche-daten"] .kauflandcard-info { font-family: 'Kaufland'; font-weight: 400; text-decoration: none; color: rgb(66, 66, 66); font-size: 22px; position: absolute; right: 11px; top: 6px; cursor: pointer; } div[role="main"] form[data-page-id="persoenliche-daten"] .kauflandcard-info:hover { color: #70d159; } /*OFFER*/ div[role="main"] form[data-page-id="angebot"] h1 { margin: 0px 0px 22px; word-break: break-word; font-family: Kaufland, sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 2.375rem; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="angebot"] ul.benefits { margin: 0 0 44px 0; gap: 11px; font-family: Kaufland, sans-serif; font-weight: 400; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="angebot"] ul.benefits li { background: url('data:image/svg+xml,'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 0px; padding: 0 0 0 44px; } div[role="main"] form[data-page-id="angebot"] #product-overview { gap: 22px; } div[role="main"] form[data-page-id="angebot"] .product { flex-grow: 1; padding: 22px 11px; border-radius: 11px; border: 1px solid #e5e5e5; -webkit-box-shadow: rgba(0, 0, 0, 0.11) 0px 5.5px 11px 0px; box-shadow: rgba(0, 0, 0, 0.11) 0px 5.5px 11px 0px; gap: 22px; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="angebot"] .product.highlight { border: 2px solid rgb(66, 66, 66); } div[role="main"] form[data-page-id="angebot"] .product.highlight:before { font-family: Kaufland, sans-serif; font-weight: 700; text-transform: uppercase; background-color: rgb(66, 66, 66); border-radius: 5.5px; padding: 2px 11px; } div[role="main"] form[data-page-id="angebot"] .product-head { gap: 11px; } div[role="main"] form[data-page-id="angebot"] .product-name { font-family: Kaufland, sans-serif; font-weight: 700; font-size: 24px; line-height: 30px; } div[role="main"] form[data-page-id="angebot"] .price-section { font-family: Kaufland, sans-serif; font-weight: 700; } div[role="main"] form[data-page-id="angebot"] .tag-section { display: flex; gap: 11px; margin-left: -11px; } div[role="main"] form[data-page-id="angebot"] .tag-section .tag { display: inline-flex; gap: 5.5px; border-radius: 0 5.5px 5.5px 0; padding: 0 11px; font-family: Kaufland, sans-serif; font-weight: 700; font-size: 14px; line-height: 24px; color: #fff; text-transform: uppercase; background-color: #E10915; } div[role="main"] form[data-page-id="angebot"] .tag-section.promo-section .tag { background-color: #f0f0f0; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="angebot"] .tag-section.promo-section .tag strong { display: none; } div[role="main"] form[data-page-id="angebot"] .service-name { font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; } div[role="main"] form[data-page-id="angebot"] ul.services li { gap: 11px; padding: 11px 0; margin-left: 0px; border-bottom: 1px solid #E5E5E5; } div[role="main"] form[data-page-id="angebot"] ul.services li:last-of-type { border-bottom: none; } div[role="main"] form[data-page-id="angebot"] .notification { padding: 11px; margin: 0 0 44px 0; border: none; border-radius: 0; font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; background-color: #f0f0f0; } div[role="main"] form[data-page-id="angebot"] .notification a:hover { /*color: #70d159;*/ } div[role="main"] form[data-page-id="angebot"] ul.services li .coverage-box { gap: 5.5px; padding: 0 11px; min-width: 55px; font-family: Kaufland, sans-serif; font-weight: 700; border-radius: 5.5px; background-color: #F0F0F0; } div[role="main"] form[data-page-id="angebot"] .button-area .btn { font-family: Kaufland, sans-serif; font-weight: 700; font-size: 16px; line-height: 22px; height: 44px; padding: 0 11px; } div[role="main"] form[data-page-id="angebot"] .button-area .btn-primary { font-family: Kaufland, sans-serif; font-weight: 400; background-color: #E10915; border: none; border-radius: 0px; outline: none; text-decoration: none; } div[role="main"] form[data-page-id="angebot"] .button-area .btn-primary:hover { background-color: #70d159; opacity: 1; } div[role="main"] form[data-page-id="angebot"] .button-area .tariff-details { font-family: Kaufland, sans-serif; font-weight: 700; text-decoration: underline; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="angebot"] .button-area .tariff-details:hover { color: #70d159; } div[role="main"] form[data-page-id="angebot"] .button-area .helper { font-family: Kaufland, sans-serif; font-weight: 700; color: #237916; } /*PAYMENT*/ div[role="main"] form[data-page-id="zahlung"] .btn-helper { font-family: Kaufland, sans-serif; font-weight: 700; color: #237916; margin: 11px 0 0 0; } div[role="main"] form[data-page-id="zahlung"] .blue-notification { padding: 11px; margin: 0 0 44px 0; border: none; border-radius: 0; font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; background-color: #f0f0f0; gap: 0; } div[role="main"] form[data-page-id="zahlung"] #elm1 { box-sizing: border-box; max-width: 938px; padding: 11px; border-radius: 0px; border: 2px solid rgb(66, 66, 66); } div[role="main"] form[data-page-id="zahlung"] #input1 input, div[role="main"] form[data-page-id="zahlung"] #input2 input, div[role="main"] form[data-page-id="zahlung"] #input3 select { padding: 11px 11px 0 11px; } div[role="main"] form[data-page-id="zahlung"] #input1 label, div[role="main"] form[data-page-id="zahlung"] #input2 label, div[role="main"] form[data-page-id="zahlung"] #input3 label { font-family: Kaufland, sans-serif; font-weight: 700; color: #767676; top: 6px; left: 11px; } div[role="main"] form[data-page-id="zahlung"] #elm1 .radio-button { border: 2px solid rgb(141, 141, 141); } div[role="main"] form[data-page-id="zahlung"] #elm1 .radio-button:after { background: rgb(66, 66, 66); } div[role="main"] form[data-page-id="zahlung"] #elm1 .payment-head span:nth-of-type(2) { font-family: Kaufland, sans-serif; font-weight: 700; color: rgb(66, 66, 66); font-size: 16px; line-height: 22px; margin: 0 0 0 11px; } div[role="main"] form[data-page-id="zahlung"] #elm1 .payment-detail .details, div[role="main"] form[data-page-id="zahlung"] #elm1 .payment-detail .legal a { font-family: Kaufland, sans-serif; font-weight: 400; color: rgb(66, 66, 66); font-size: 16px; line-height: 22px; } div[role="main"] form[data-page-id="zahlung"] #elm1 .payment-detail .details strong { font-family: Kaufland, sans-serif; font-weight: 700; } /*OVERVIEW*/ div[role="main"] form[data-page-id="uebersicht"] .quick-overview { max-width: 938px; box-sizing: border-box; font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; margin: 0 0 22px 0; padding: 11px; border-radius: 0; box-shadow: none; color: rgb(66,66,66); border: none; background: #EFEFEE; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview-price > div:nth-child(1), div[role="main"] form[data-page-id="uebersicht"] .quick-overview-price > div:nth-child(1) > span { font-family: Kaufland, sans-serif; font-weight: 700; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview-price > div:nth-child(1) > span { font-weight: 400; font-size: 16px; line-height: 22px; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview .price-total, div[role="main"] form[data-page-id="uebersicht"] .quick-overview-price > div:nth-child(1) { font-family: Kaufland, sans-serif; font-weight: 700; font-size: 24px; line-height: 24px; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview .price { gap: 5.5px; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview .price .tag { border-radius: 5.5px; padding: 0 11px; font-family: Kaufland, sans-serif; font-weight: 700; font-size: 14px; line-height: 24px; text-transform: uppercase; background-color: #f0f0f0; color: rgb(66, 66, 66); } div[role="main"] form[data-page-id="uebersicht"] .quick-overview ul li svg > path { fill: rgb(66,66,66); } div[role="main"] form[data-page-id="uebersicht"] .quick-overview ul li svg > g > path { stroke: rgb(66,66,66); } div[role="main"] form[data-page-id="uebersicht"] .quick-overview button { background-color: rgb(66,66,66); border: 0; border-radius: 0; color: #fff; cursor: pointer; font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; height: 44px; justify-content: center; padding: 0 11px; text-align: center; -webkit-text-decoration: none; text-decoration: none; transition: all .15s ease-out 0s; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview button:hover { background-color: #70d159; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview button > span { font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; } div[role="main"] form[data-page-id="uebersicht"] .btn-helper, div[role="main"] form[data-page-id="uebersicht"] .btn-helper a { font-family: Kaufland, sans-serif; font-weight: 700; color: #237916; margin: 11px 0 0 0; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview ul { margin: 0 0 11px 0; padding: 0 0 11px 0; border-bottom: 1px solid #E5E5E5; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview-price { padding: 0 0 11px 0; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox { box-sizing: border-box; max-width: 938px; margin: 0 0 22px 0; background: #ffffff; border: 2px solid rgb(66,66,66); padding: 11px; box-shadow: none; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox input[type="text"]:read-only { padding: 0 44px; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox > div:nth-child(1), div[role="main"] form[data-page-id="uebersicht"] .voucherbox > div:nth-child(2) { margin: 0; padding: 0; background: transparent; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox > div:nth-child(1) { padding: 0 0 11px 0; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox > div:nth-child(1) > img { display: none; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div > span { font-family: Kaufland, sans-serif; font-weight: 700; font-size: 14px; line-height: 17.5px; color: #237916; } div[role="main"] form[data-page-id="uebersicht"] button { font-family: Kaufland, sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle { max-width: 938px; margin-top: 2px; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionSummary-root { padding: 0 0 0 11px; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionSummary-root.Mui-expanded { background: #70d159; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionSummary-root.Mui-expanded h3, div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionSummary-root.Mui-expanded p { color: #fff; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionSummary-root.Mui-expanded svg > path { fill: #fff; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionDetails-root li { padding: 0 11px; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordionDetails-root li:before { content: unset; } div[role="main"] form[data-page-id="uebersicht"] > .btn-toggle .MuiAccordion-region .MuiAccordionDetails-root > div > div { margin: 0; padding: 0 11px; } div[role="main"] form[data-page-id="uebersicht"] .document-send p { margin-bottom: 22px !important; font-size: 14px !important; line-height: 17.5px !important; font-family: Kaufland, sans-serif !important; font-weight: 400 !important; color: rgb(66, 66, 66) !important; max-width: 938px; } @media (min-width: 769px) { div[role="main"] form[data-page-id="angebot"] .product { padding: 22px; } div[role="main"] form[data-page-id="uebersicht"] .voucherbox { padding: 22px; } div[role="main"] form[data-page-id="angebot"] .notification, div[role="main"] form[data-page-id="zahlung"] .blue-notification, div[role="main"] form[data-page-id="zahlung"] #elm1, div[role="main"] form[data-page-id="uebersicht"] .quick-overview { padding: 22px; } div[role="main"] form[data-page-id="angebot"] .tag-section { margin-left: -22px; } } @media (min-width: 1020px) { div[role="main"] form[data-page-id="uebersicht"] .quick-overview ul { margin: 0 22px 0 0; padding: 0 22px 0 0; border-right: 1px solid #E5E5E5; border-bottom: unset; } div[role="main"] form[data-page-id="uebersicht"] .quick-overview .btn-container { margin: 0 0 0 22px; padding: 0 0 0 22px; border-left: 1px solid #E5E5E5; } } @media (min-width: 1440px) { div[role="main"] form[data-page-id="angebot"] #product-overview { gap: 44px; } } `; rootElement.shadowRoot.prepend(stylesheet); } } } function progressBar() { const rootElement = document.querySelector("#root"); if (!rootElement.shadowRoot.querySelector('style[title="progressbar-css"]')) { insertProgressBarCSS(); } function insertProgressBarCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'progressbar-css'); stylesheet.textContent = `div[role="main"] *:focus-visible:not(input[type="radio"]):not(#phone_phone_number):not(#email_email):not(button[type="button"]){outline: rgb(251, 77, 24) solid 2px;outline-offset: 2px;}.progress-bar{position:relative;display:flex;align-items:flex-end;width:100%;margin-bottom:32px}.progress-bar .step{position:relative;display:flex;flex-direction:column;flex-grow:2;flex-basis:min-content;justify-content:center;align-items:center}.progress-bar .step .step-name{margin:0 0 4px;font-family:CentraNo2-Medium,fallback-font,sans-serif;font-size:12px;line-height:16px;color:#595959}.progress-bar .step.active .step-name,.progress-bar .step.completed .step-name{color:#fb4d18}.progress-bar .step .step-circle{display:flex;width:100%;justify-content:center;align-items:center}.progress-bar .step .step-circle a{position:relative;display:flex;flex-shrink:0;width:32px;height:32px;border-radius:20px;border:2px solid #595959;background:#fff;align-items:center;justify-content:center;pointer-events:none;font-family:CentraNo2-Medium,fallback-font,sans-serif;font-size:14px;line-height:14px;color:#767676;text-decoration:none}.progress-bar .step.active .step-circle a{border:2px solid #fb4d18;background:#fb4d18;color:#fff}.progress-bar .step.completed .step-circle a{border:2px solid #fb4d18;background:#fff;pointer-events:auto;color:#fb4d18;font-size:0}.progress-bar .step.completed .step-circle a:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6.00003 10.8L3.20003 8L2.26669 8.93333L6.00003 12.6667L14 4.66667L13.0667 3.73333L6.00003 10.8Z' fill='%23FF5E2E'%3E%3C/path%3E%3C/svg%3E");font-size:14px}.progress-bar .step .step-circle:after,.progress-bar .step .step-circle:before{content:'';height:2px;width:100%;background:#595959}.progress-bar .step:first-child{align-items:flex-start;flex-grow:1;}.progress-bar .step:first-child .step-circle:before,.progress-bar .step:last-of-type .step-circle:after{width:0}.progress-bar .step:last-of-type{align-items:flex-end;text-align:right;flex-grow:1;}.progress-bar .step.active .step-circle:before,.progress-bar .step.completed .step-circle:after,.progress-bar .step.completed .step-circle:before{background:#fb4d18}@media only screen and (min-width:992px){.progress-bar .step .step-name{font-size:14px}.progress-bar .step .step-circle a{font-size:16px;line-height:16px}}`; rootElement.shadowRoot.prepend(stylesheet); } function insertProgressBar() { const formElement = rootElement.shadowRoot.querySelector('form[data-page-id]'); const dataPageId = formElement.getAttribute('data-page-id'); //STATUS function updateStatus() { const step1 = rootElement.shadowRoot.querySelector('.progress-bar .step:nth-child(1)'); const step2 = rootElement.shadowRoot.querySelector('.progress-bar .step:nth-child(2)'); const step3 = rootElement.shadowRoot.querySelector('.progress-bar .step:nth-child(3)'); if (flow === 'zz_all_sf_nl' || flow === 'zz_all_sf_child_nl' || flow === 'zz_all_sf_nl_vc' || flow === 'zz_all_sf_child_nl_vc') { //NO LEAD FLOW if (dataPageId === 'start') { step1.className = 'step active'; step2.className = 'step'; } else if (dataPageId === 'angebot') { step1.className = 'step completed'; step2.className = 'step active'; } else if (dataPageId === 'persoenliche-daten') { step1.className = 'step active'; step2.className = 'step'; step3.className = 'step'; } else if (dataPageId === 'zahlung') { step1.className = 'step completed'; step2.className = 'step active'; step3.className = 'step'; } else if (dataPageId === 'uebersicht') { step1.className = 'step completed'; step2.className = 'step completed'; step3.className = 'step active'; } } else { if (dataPageId === 'start' || dataPageId === 'persoenliche-daten') { step1.className = 'step active'; step2.className = 'step'; step3.className = 'step'; } else if (dataPageId === 'kontaktdaten' || dataPageId === 'zahlung') { step1.className = 'step completed'; step2.className = 'step active'; step3.className = 'step'; } else if (dataPageId === 'angebot' || dataPageId === 'uebersicht') { step1.className = 'step completed'; step2.className = 'step completed'; step3.className = 'step active'; } } } //HTML if (dataPageId === 'start' || dataPageId === 'kontaktdaten' || dataPageId === 'angebot') { if (rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2) > div') && !rootElement.shadowRoot.querySelector('.progress-bar')) { if (flow === 'zz_all_sf_child') { //CHILD FUNNEL const progressBar = rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2)'); progressBar.setAttribute('class', 'progress-bar'); progressBar.innerHTML = `

Kind

Kontakt

Tarife & Beitrag

`; } else if (flow === 'zz_all_sf_nl' || flow === 'zz_all_sf_nl_vc') { //NO LEAD FUNNEL const progressBar = rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2)'); progressBar.setAttribute('class', 'progress-bar'); progressBar.innerHTML = `

Person

Tarife & Beitrag

`; } else if (flow === 'zz_all_sf_child_nl' || flow === 'zz_all_sf_child_nl_vc') { //NO LEAD FUNNEL CHILD const progressBar = rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2)'); progressBar.setAttribute('class', 'progress-bar'); progressBar.innerHTML = `

Kind

Tarife & Beitrag

`; } else { //GENERAL FUNNEL const progressBar = rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2)'); progressBar.setAttribute('class', 'progress-bar'); progressBar.innerHTML = `

Person

Kontakt

Tarife & Beitrag

`; } updateStatus(); } } else if (dataPageId === 'persoenliche-daten' || dataPageId === 'zahlung' || dataPageId === 'uebersicht') { if (rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2) > div') && !rootElement.shadowRoot.querySelector('.progress-bar')) { const progressBar = rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2)'); progressBar.setAttribute('class', 'progress-bar'); progressBar.innerHTML = `

Persönliche Daten

Zahlart

Übersicht

`; updateStatus(); } } } if (rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2) > div')) { insertProgressBar(); function checkForProgressbar(mutationsList, observerProgressbar) { if (rootElement && rootElement.shadowRoot) { const progressBar = rootElement.shadowRoot.querySelector('form[data-page-id] > div:nth-child(2) > div'); if (progressBar) { insertProgressBar(); } } } const observerProgressbar = new MutationObserver(checkForProgressbar); observerProgressbar.observe(rootElement.shadowRoot, { childList: true, subtree: true }); } } function startPage() { const rootElement = document.querySelector("#root"); //CSS if (!rootElement.shadowRoot.querySelector('style[title="start-css"]')) { insertStartPageCSS(); } var styleTags = rootElement.shadowRoot.querySelectorAll('style[scoped]'); styleTags.forEach(function (styleTag) { if (styleTag.getAttribute('title') !== 'start-css' && styleTag.getAttribute('title') !== 'progressbar-css') { styleTag.remove(); } }); function insertStartPageCSS() { if (flow === 'zz_all_sf_child' || flow === 'zz_all_sf_child_vc' || flow === 'zz_all_sf_child_nl_vc' || flow === 'zz_all_sf_child_pm_vc' || flow === 'zz_all_sf_child_pm') { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'start-css'); stylesheet.textContent = `div:has(> label[for="input_insured_person_first_name"]){margin: 0 !important;} label[for="input_insured_person_first_name"]{display: none;} div:has(> label[for="radio_contract_insured_legally"]){display: none;} .legal-text{font-family:CentraNo2-Medium,fallback-font,sans-serif;font-size:.875em;line-height:1.5em;color:#595959;margin:14px 0 0} #datepicker_date_of_birth {justify-content: flex-start;} @media only screen and (min-width: 992px){ #datepicker_date_of_birth{width: 60%; !important} } @media only screen and (min-width:992px){div[role=main] .start-headline{margin:3em 0 1.5em}}`; rootElement.shadowRoot.prepend(stylesheet); } else { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'start-css'); stylesheet.textContent = `div[role=main] .start-label-area>label{display:none;}div[role=main] .start-label-area>div:nth-of-type(1)>div:first-of-type,div[role=main] .start-label-area>div:nth-of-type(1)>div>div:first-of-type{margin:0}div[role=main] .start-label-area>div:nth-of-type(1)>div{margin:8px 0 0}div[role=main] .start-label-area label{cursor:pointer}div[role=main] .start-label-area svg>circle:first-of-type{fill:rgb(255,255,255)!important}div[role=main] .start-label-area .legal-text{font-family:CentraNo2-Medium,fallback-font,sans-serif;font-size:.875em;line-height:1.5em;color:#595959;margin:14px 0 0} #datepicker_date_of_birth {justify-content: flex-start;} @media only screen and (min-width: 992px){ #datepicker_date_of_birth{width: 60%; !important} } @media only screen and (min-width:992px){div[role=main] .start-headline{margin:3em 0 1.5em}}`; rootElement.shadowRoot.prepend(stylesheet); } } if (flow === 'zz_all_sf_child' || flow === 'zz_all_sf_child_vc' || flow === 'zz_all_sf_child_nl_vc' || flow === 'zz_all_sf_child_pm_vc' || flow === 'zz_all_sf_child_pm') { const observerChild = new MutationObserver(() => { const targetElement = rootElement.shadowRoot.querySelector('#input_insured_person_first_name'); if (targetElement) { //ADD LEGAL if (!rootElement.shadowRoot.querySelector('p.legal-text')) { const legalText = document.createElement('p'); legalText.setAttribute('class', 'legal-text'); legalText.textContent = 'Ihr Kind muss gesetzlich krankenversichert sein'; rootElement.shadowRoot.querySelector('#input_insured_person_first_name').parentElement.append(legalText); observerChild.disconnect(); } } }); observerChild.observe(rootElement.shadowRoot, { childList: true, subtree: true }); } else { if (rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(3) > div > h1') && rootElement.shadowRoot.querySelector('label[for="radio_radio_contract_insurance_for_me"]') && rootElement.shadowRoot.querySelector('label[for="radio_radio_contract_insurance_for_another"]') && rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(4) > div:nth-of-type(1)') && rootElement.shadowRoot.querySelector('label[for="radio_contract_insured_legally"]')) { //HEADLINE rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(3) > div > h1').innerHTML = 'Wen möchten Sie versichern?'; rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(3)').classList.add('start-headline'); //LABEL DIRECTION rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(4) > div:nth-of-type(1)').style.flexDirection = "column"; rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(4)').classList.add('start-label-area'); //RENAME LABEL rootElement.shadowRoot.querySelector('label[for="radio_radio_contract_insurance_for_me"]').innerHTML = 'Mich selbst'; rootElement.shadowRoot.querySelector('label[for="radio_radio_contract_insurance_for_another"]').innerHTML = 'Ein Familienmitglied ¹'; //ADD LEGAL const legalText = document.createElement('p'); legalText.setAttribute('class', 'legal-text'); legalText.textContent = 'Die Person muss gesetzlich krankenversichert sein'; if (!rootElement.shadowRoot.querySelector('.legal-text')) { rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(4)').append(legalText); } //HIDE CONTRACT INSURED LEGALLY rootElement.shadowRoot.querySelector('label[for="radio_contract_insured_legally"]').parentElement.style.display = "none"; //PARAGRAPH var pTags = rootElement.shadowRoot.querySelectorAll('p'); for (var i = 0; i < pTags.length; i++) { var paragraphContent = pTags[i].textContent || pTags[i].innerText; if (paragraphContent.includes('¹ Diese Option wählen Sie beispielsweise, wenn Sie Ihr minderjähriges Kind bei uns versichern möchten.')) { pTags[i].innerHTML = '¹ Ehepartner, eingetragene Lebenspartner, Adoptiv- oder leibliche Kinder, Eltern (einschließlich Schwiegereltern), Großeltern, Enkelkinder oder Geschwister'; } } } } if (rootElement.shadowRoot.querySelector('label[for="datepicker_date_of_birth"]')) { rootElement.shadowRoot.querySelector('label[for="datepicker_date_of_birth"]').innerHTML = 'Geburtsdatum *'; } } function leadPage() { const rootElement = document.querySelector("#root"); //CSS if (!rootElement.shadowRoot.querySelector('style[title="lead-css"]')) { insertLeadPageCSS(); } var styleTags = rootElement.shadowRoot.querySelectorAll('style[scoped]'); styleTags.forEach(function (styleTag) { if (styleTag.getAttribute('title') !== 'lead-css' && styleTag.getAttribute('title') !== 'progressbar-css') { styleTag.remove(); } }); function insertLeadPageCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'lead-css'); stylesheet.textContent = `div[role=main]>div>form>div:nth-child(3)>div>div>p sup{font-size:small}div[role=main]>div>form>div:nth-child(4)>div>div>div,div[role=main]>div>form>div:nth-child(5)>div>div{background-color:#fff!important;border-right: none;}div[role=main]>div>form>div:nth-child(4)>div>div>div>svg path,div[role=main]>div>form>div:nth-child(4)>div>div>div>svg rect{stroke:rgb(0,50,100)!important}#email_email,#phone_phone_number{border-left:none;padding-left:0}#email_email:autofill,#email_email:focus,#phone_phone_number:autofill,#phone_phone_number:focus{border:none;background-color:#fff!important}`; rootElement.shadowRoot.prepend(stylesheet); } if (rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(3) > div > h1') && rootElement.shadowRoot.querySelector('label[for="email_email"]') && rootElement.shadowRoot.querySelector('label[for="phone_phone_number"]') && rootElement.shadowRoot.querySelector('button[type="submit"] span')) { //HEADLINE rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(3) > div > h1').innerHTML = 'Wie möchten Sie weitere Informationen erhalten? ¹'; //E-MAIL rootElement.shadowRoot.querySelector('label[for="email_email"]').innerHTML = 'E-Mail'; rootElement.shadowRoot.querySelector('#email_email').placeholder = 'max@mustermann.de'; //PHONE rootElement.shadowRoot.querySelector('label[for="phone_phone_number"]').innerHTML = 'Telefon'; //BUTTON rootElement.shadowRoot.querySelector('button[type="submit"] span').innerHTML = 'Weiter zu den Tarifen'; } } function offerPageProductMin() { const rootElement = document.querySelector("#root"); addRoot100(); let uuidSession; if (document.URL.includes('uuid=')) { const uuidMatch = document.URL.match(/uuid=([a-zA-Z0-9-]+)/); const extractedUUID = uuidMatch ? uuidMatch[1] : null; uuidSession = extractedUUID; } else { uuidSession = JSON.parse(sessionStorage.offlineLeadData).uuid; } //CSS if (!rootElement.shadowRoot.querySelector('style[title="offerpageProduct-css"]')) { insertOfferPageCSS(); } var styleTags = rootElement.shadowRoot.querySelectorAll('style[scoped]'); styleTags.forEach(function (styleTag) { if (styleTag.getAttribute('title') !== 'offerpageProduct-css' && styleTag.getAttribute('title') !== 'progressbar-css') { styleTag.remove(); } }); function insertOfferPageCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'offerpageProduct-css'); stylesheet.textContent = ` h1, h2, h3, h4, h5, h6 { font-family: CentraNo2-Medium, fallback-font, sans-serif; } h1 { font-size: 24px; line-height: 28px; margin: 0 0 32px 0; } ul.benefits { display: flex; flex-direction: column; padding: 0; margin: 0 0 32px 0; gap: 8px; list-style-type: none; font-family: CentraNo2-Medium, fallback-font, sans-serif; } ul.benefits li { padding: 0 0 0 32px; background: url(https://www.da-direkt.de/-/media/Project/DADirekt/Website/icons/icon-check-orange.svg); background-size: 24px 24px; background-repeat: no-repeat; background-position: 0px; } .notification { padding: 16px; margin: 0 0 40px 0; border-radius: 8px; border: 1px solid #0071C8; background-color: #E3F3FD; font-family: CentraNo2-Medium, fallback-font, sans-serif; font-size: 16px; font-weight: 400; line-height: 21px; } .notification a { text-decoration: underline; cursor: pointer; color: var(--color-primary-100); } #tarif-selection { color: var(--color-primary-100); } #product-overview { display: flex; flex-direction: column; gap: 32px; } .product { display: flex; flex-direction: column; position: relative; box-sizing: border-box; border-radius: 16px; padding: 16px; text-align: left; border: none; background-color: #fff; -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1); gap: 24px; } .product.highlight { border: 3px solid var(--color-visual-brand-orange); padding: 24px 16px 16px 16px; } .product.highlight:before { font-family: CentraNo2-Medium, fallback-font, sans-serif; position: absolute; content: 'Kundenfavorit'; background-color: var(--color-visual-brand-orange); padding: 4px 8px; color: #fff; border-radius: 4px; font-size: 14px; top: -15px; } .product.hidden { display: none; } .product.Komfort.preselected, .product.Premium.preselected, .product.Premium-Plus.preselected { order: 0; } .product.Komfort { order: 2; } .product.Premium { order: 1; } .product.Premium-Plus { order: 3; } .product-head { display: flex; flex-direction: column; gap: 8px; } .product-name{ display: flex; flex-grow: 1; font-family: CentraNo2-Medium, fallback-font, sans-serif; font-size: 24px; line-height: 30px; } .price-section { font-family: CentraNo2-Medium, fallback-font, sans-serif; display: flex; flex-direction: column; text-align: right; font-size: 12px; line-height: 16px; } .price-section .price { font-size: 24px; line-height: 24px; } .product-head > div:nth-child(1) { display: flex; } .tag-section { display: flex; gap: 8px; } .tag-section.promo-section { flex-direction: column; } .promo-section .tag { width: fit-content; } .tag-section .tag { display: inline-flex; gap: 4px; border-radius: 4px; padding: 4px 8px; font-family: CentraNo2-Medium, fallback-font, sans-serif; font-size: 14px; line-height: 19px; color: #fff; background-color: var(--color-primary-100); } .tag-section .tag-yellow { background-color: var(--color-visual-brand-yellow); color: var(--color-primary-100); } ul.services { font-family: CentraNo2-Medium, fallback-font, sans-serif; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } ul.services li { display: flex; align-items: center; gap: 8px; padding: 8px 0; min-height: 43px; border-bottom: 1px solid var(--color-primary-5); } ul.services li:last-of-type { border-bottom: none; } ul.services li .icon { font-size: 24px; line-height: 24px; } ul.services li .service-name { flex-grow: 1; font-size: 16px; line-height: 21px; } ul.services li .coverage-box { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: 0 8px; min-height: 42px; min-width: 45px; font-size: 12px; line-height: 12px; border-radius: 8px; background-color: var(--color-primary-5); } ul.services li .coverage-box .coverage { font-family: CentraNo2-Bold, fallback-font, sans-serif; font-size: 16px; } .helper { font-family: CentraNo2-Bold, fallback-font, sans-serif; font-size: 14px; color: var(--color-visual-brand-orange); } .button-area { display: flex; gap: 16px; flex-direction: column; } .button-area > * { text-align: center; } .button-area .tariff-details { font-family: CentraNo2-Bold, fallback-font, sans-serif; line-height: 24px; text-decoration: none; color: #0071C8; } .button-area .btn { display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 8px; font-family: CentraNo2-Bold, fallback-font, sans-serif; font-size: 19px; line-height: 1.25rem; font-weight: 600; color: rgb(255, 255, 255); text-decoration: none; background-color: var(--color-visual-brand-orange); border: 2px solid var(--color-visual-brand-orange); border-radius: 4px; text-align: center; cursor: pointer; transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; } .button-area .btn-primary { flex-grow: 1; } .button-area .btn-outline { color: var(--color-primary-100); background-color: transparent; border: 2px solid var(--color-primary-100); } @media only screen and (min-width: 992px) { h1 { font-size: 32px; line-height: 39px; } #product-overview { flex-direction: row; gap: 16px; } .opp1 .product { width: 45%; } .opp2 .product { width: 40%; } .product { padding: 24px 16px 16px 16px; } .product.Komfort, .product.preselected{ order: 1; } .product.Premium, .product.Premium.preselected{ order: 2; } .product.Premium-Plus, .product.Premium-Plus.preselected{ order: 3; } ul.services li { gap: 16px; } } `; rootElement.shadowRoot.prepend(stylesheet); } //CHECK FOR OPP function getURLParameter(name) { return new URLSearchParams(window.location.search).get(name); } function handleOppParameter() { const opp = getURLParameter('opp'); const mapping = { s: '#product-overview > .product.Komfort', m: '#product-overview > .product.Premium', l: '#product-overview > .product.Premium-Plus' }; const tarifSelection = rootElement.shadowRoot.getElementById('tarif-selection'); if (opp) { const oppSet = new Set([...opp]); Object.values(mapping).forEach(selector => { rootElement.shadowRoot.querySelectorAll(selector).forEach(element => { element.classList.add('hidden'); }); }); oppSet.forEach(value => { if (mapping[value]) { rootElement.shadowRoot.querySelectorAll(mapping[value]).forEach(element => { element.classList.remove('hidden'); }); } }); const currentUrl = window.location.href; let childName = 'Ihr Kind'; if (currentUrl.includes('kinder')) { childName = JSON.parse(sessionStorage?.offlineLeadData || '{}')?.contract?.insured_person?.first_name ?? 'Ihr Kind'; } let notificationText = ''; if (oppSet.has('l') && oppSet.size === 1) { notificationText = null; } else if (oppSet.has('s') && oppSet.has('m') && oppSet.has('l')) { notificationText = 'Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung in den Tarifen Komfort und Premium auf bis zu 100 %. '; } else if (oppSet.has('s') && oppSet.has('m')) { notificationText = 'Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung in den Tarifen Komfort und Premium auf bis zu 100 %. '; } else if (oppSet.has('s') && oppSet.has('l')) { notificationText = 'Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung in dem Tarif Komfort auf bis zu 100 %. '; } else if (oppSet.has('m') && oppSet.has('l')) { notificationText = 'Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung in dem Tarif Premium auf bis zu 100 %. '; } else if (oppSet.has('s')) { notificationText = 'Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung auf bis zu 100 %. '; } else if (oppSet.has('m')) { notificationText = 'Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung auf bis zu 100 %. '; } const notificationElement = rootElement.shadowRoot.querySelector('#tarif-selection .notification'); if (notificationElement) { if (notificationText) { notificationElement.innerHTML = notificationText; } else { notificationElement.remove(); } } const heading = rootElement.shadowRoot.querySelector('#tarif-selection h1'); if (oppSet.size === 1) { tarifSelection.className = 'opp1'; if (currentUrl.includes('kinder')) { heading.innerHTML = 'Der perfekte Tarif für ' + childName; } else { heading.innerHTML = 'Der perfekte Tarif für Ihre Bedürfnisse'; } } else if (oppSet.size === 2) { tarifSelection.className = 'opp2'; if (currentUrl.includes('kinder')) { heading.innerHTML = 'Passenden Tarif für ' + childName + ' auswählen'; } } else { tarifSelection.className = ''; } setupSitecoreModalLinks(); } } const tarifData = [ { name: 'Komfort', nameClass: 'Komfort', extraClass: '', tags: [ { text: '👌 Einstiegstarif', class: 'tag-darkblue' } ], services: [ { name: 'Zahnbehandlung', icon: '💉', coverage: '75 %' }, { name: 'Zahnersatz', icon: '🦷', coverage: '75 %' }, { name: 'Zahnprophylaxe (2 x pro Jahr)', icon: '🪥', coverage: '75 €' }, { name: 'Keine Kieferorthopädie', icon: '⚠️' }, { name: 'Zahnschäden durch Unfall', icon: '🚑', coverage: '100 %' } ], modalURL: '/overlays/tarifdetails/zz/overlay---zz---tarifdetails---komfort---full' }, { name: 'Premium', nameClass: 'Premium', extraClass: '', tags: [ { text: '⭐ Preis-Leistungs-Sieger', class: 'tag-darkblue' }, ], services: [ { name: 'Zahnbehandlung', icon: '💉', coverage: '90 %' }, { name: 'Zahnersatz', icon: '🦷', coverage: '90 %' }, { name: 'Zahnprophylaxe (2 x pro Jahr)', icon: '🪥', coverage: '90 €' }, { name: 'Kieferorthopädie', icon: '🌟️', coverage: '90 %' }, { name: 'Zahnschäden durch Unfall', icon: '🚑', coverage: '100 %' } ], modalURL: '/overlays/tarifdetails/zz/overlay---zz---tarifdetails---premium---full' }, { name: 'Premium Plus', nameClass: 'Premium-Plus', extraClass: 'highlight', tags: [ { text: '🏆 Testsieger Stiftung Warentest', class: 'tag-darkblue' } ], services: [ { name: 'Zahnbehandlung', icon: '💉', coverage: '100 %' }, { name: 'Zahnersatz', icon: '🦷', coverage: '100 %' }, { name: 'Zahnprophylaxe (2 x pro Jahr)', icon: '🪥', coverage: '100 €' }, { name: 'Kieferorthopädie', icon: '🌟️', coverage: '100 %' }, { name: 'Zahnschäden durch Unfall', icon: '🚑', coverage: '100 %' } ], modalURL: '/overlays/tarifdetails/zz/overlay---zz---tarifdetails---premium-plus---full' } ]; function generateProductCarts(tarifs) { return tarifs.map(tarif => `

${tarif.name}

... €

pro Monat

${tarif.tags.map(tag => `

${tag.text}

`).join('')}

${service.icon}

${service.name}
${service.coverage ? `
${service.coverageMode ? `
${service.coverageMode}
` : ''}
${service.coverage}

` : ''}

Zum Online-Antrag Ohne Risiko - Monatlich kündbar

`).join(''); } //PRICE let priceKomfort = null; let pricePremium = null; let pricePremiumPlus = null; const fetchPrice = async (policyCategory, cssClass) => { const url = `https://api.zurich.de/faircare/api/v1/price?policy_category=${policyCategory}&uuid=${uuidSession}`; const response = await fetch(url, { method: "GET", headers: { "KeyId": "a4c046f5-d0ae-481d-a9e5-fc9e7ac610a8" } }); const data = await response.json(); const price = data.policy_price; if (policyCategory === 9) { priceKomfort = price; } else if (policyCategory === 10) { pricePremium = price; } else if (policyCategory === 11) { pricePremiumPlus = price; } document.querySelector('#root').shadowRoot.querySelector(cssClass).innerHTML = `${price.toFixed(2).replace('.', ',')} €`; }; const getPriceKomfort = () => fetchPrice(9, '.product.Komfort .price'); const getPricePremium = () => fetchPrice(10, '.product.Premium .price'); const getPricePremiumPlus = () => fetchPrice(11, '.product.Premium-Plus .price'); //BUTTON URL function buttonURL() { const browserURL = window.location.href; const tariffs = ['komfort', 'premium', 'premium-plus']; const selectors = ['.Komfort a.btn-primary', '.Premium a.btn-primary', '.Premium-Plus a.btn-primary']; tariffs.forEach((tarif, index) => { let newURL; if (/premium-plus|premium|komfort/.test(browserURL)) { newURL = browserURL.replace(/premium-plus|premium|komfort/g, tarif); } else { const urlParts = browserURL.split('#'); const basePath = urlParts[0]; const anchor = urlParts[1] ? `#${urlParts[1]}` : ''; const queryParts = basePath.split('?'); const path = queryParts[0]; const queryParams = queryParts[1] ? `?${queryParts[1]}` : ''; newURL = `${path}/${tarif}${queryParams}${anchor}`; } newURL = newURL.replace('#angebot', '#persoenliche-daten'); const button = rootElement.shadowRoot.querySelector(selectors[index]); if (button) button.href = newURL; }); } //HIDE if (rootElement.shadowRoot.querySelector('button[type="submit"]')) { rootElement.shadowRoot.querySelector('#price_price_display').parentNode.style.display = 'none'; rootElement.shadowRoot.querySelector('button[type="submit"]').parentNode.style.display = 'none'; } if (rootElement.shadowRoot.querySelector('form[data-page-id="angebot"] > button[type="button"]')) { rootElement.shadowRoot.querySelector('form[data-page-id="angebot"] > button[type="button"]').style.display = 'none'; } //OFFERPAGE function insertOfferPage() { if (!rootElement.shadowRoot.querySelector('#tarif-selection')) { rootElement.shadowRoot.querySelector('div[role="main"] > div > form > ul').style.display = 'none'; rootElement.shadowRoot.querySelector('div[role="main"] > div > form > div:nth-child(3) > div:nth-child(1)').style.display = 'none'; //HTML const tableSelection = document.createElement('div'); tableSelection.setAttribute('id', 'tarif-selection'); tableSelection.innerHTML = `

Passenden Tarif auswählen

Keine Gesundheitsfragen
Keine Wartezeit - ab Tag 1 versichert
Monatlich kündbar

Tipp: Nutzen Sie unser Zahnarzt-Netzwerk und erhöhen Sie Ihre Erstattung in den Tarifen Komfort und Premium auf bis zu 100 %.

${generateProductCarts(tarifData)}

`; rootElement.shadowRoot.querySelector('div[role=main] > div > form > div:nth-child(3)').append(tableSelection); //CHILD const currentUrl = window.location.href; if (currentUrl.includes('kinder')) { const childName = JSON.parse(sessionStorage?.offlineLeadData || '{}')?.contract?.insured_person?.first_name ?? 'Ihr Kind'; rootElement.shadowRoot.querySelector('#tarif-selection h1').innerHTML = 'Passenden Tarif für ' + childName + ' auswählen'; } } } //PRESELECT function tariffPreselect() { const url = window.location.href; const match = url.match(/\/tarifrechner\/(komfort|premium-plus|premium)/i); if (!match || !match[1]) return; const tarif = match[1] .split('-') .map(part => part.charAt(0).toUpperCase() + part.slice(1)) .join('-'); const allProducts = rootElement.shadowRoot.querySelectorAll('#product-overview .product'); allProducts.forEach(p => p.classList.remove('preselected')); for (const product of allProducts) { const classes = Array.from(product.classList); if (classes.includes(tarif)) { product.classList.add('preselected'); break; } } } insertOfferPage(); generateProductCarts(tarifData); tariffPreselect(); setupSitecoreModalLinks(); handleOppParameter(); getPriceKomfort(); getPricePremium(); getPricePremiumPlus(); buttonURL(); //PROBEMONAT+VOUCHER const urlParams = new URLSearchParams(window.location.search); const hasTrialMonth = urlParams.has("policy_addons") && urlParams.get("policy_addons") === "trial_month"; const voucherCode = urlParams.get("voucher_code"); rootElement?.shadowRoot?.querySelectorAll(".tag-section").forEach(tagSection => { if (hasTrialMonth || voucherCode) { const newTagSection = document.createElement("div"); newTagSection.className = "tag-section promo-section"; if (hasTrialMonth) { const trialTag = document.createElement("div"); trialTag.className = "tag tag-yellow"; trialTag.innerHTML = "Aktion: 1. Monat gratis¹"; newTagSection.appendChild(trialTag); } if (voucherCode === "Zahn15" || voucherCode === "Zahn30") { const voucherTag = document.createElement("div"); voucherTag.className = "tag tag-yellow"; voucherTag.innerHTML = `Aktion: ${voucherCode === "Zahn15" ? "15 €" : "30 €"} Amazon-Gutschein²`; newTagSection.appendChild(voucherTag); } tagSection.parentNode.insertBefore(newTagSection, tagSection.nextSibling); } }); //LEAD const buttons = rootElement.shadowRoot.querySelectorAll('.product a.btn-primary'); let policyCategory = null; let policyPrice = null; let policyName = null; buttons.forEach(button => { button.addEventListener('click', (event) => { if (event.target.closest('.Komfort')) { policyCategory = 9; policyPrice = priceKomfort; policyName = window.location.href.includes('policy_addons=trial_month') ? 'Zahnschutz Komfort und Probemonat' : 'Zahnschutz Komfort'; } else if (event.target.closest('.Premium')) { policyCategory = 10; policyPrice = pricePremium; policyName = window.location.href.includes('policy_addons=trial_month') ? 'Zahnschutz Premium und Probemonat' : 'Zahnschutz Premium'; } else if (event.target.closest('.Premium-Plus')) { policyCategory = 11; policyPrice = pricePremiumPlus; policyName = window.location.href.includes('policy_addons=trial_month') ? 'Zahnschutz Premium Plus und Probemonat' : 'Zahnschutz Premium Plus'; } //CONTACT let contact = ""; var emailOffer = JSON.parse(sessionStorage.offlineLeadData).communication_list.email_offer_zurich ? true : false; var telephoneOffer = JSON.parse(sessionStorage.offlineLeadData).communication_list.telephone_offer_zurich ? true : false; if (emailOffer && telephoneOffer) { contact = "email und telefon"; } else if (emailOffer) { contact = "email"; } else if (telephoneOffer) { contact = "telefon"; } //AGE let age = (() => { let birthDateString = JSON.parse(sessionStorage.offlineLeadData).contract.insured_person.date_of_birth; if (!birthDateString) { return ''; } let birthDate = new Date(birthDateString); if (isNaN(birthDate)) { return ''; } let today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); let monthDifference = today.getMonth() - birthDate.getMonth(); if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; })(); // FETCH function firstDayOfNextMonth() { var today = new Date(); var nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1); var year = nextMonth.getFullYear(); var month = (nextMonth.getMonth() + 1).toString().padStart(2, '0'); var day = nextMonth.getDate().toString().padStart(2, '0'); var firstDay = year + '-' + month + '-' + day; return firstDay; } var firstOfNextMonth = firstDayOfNextMonth(); if (policyCategory) { fetch('https://api.zurich.de/faircare/api/v1/leads/' + uuidSession, { method: "PUT", body: JSON.stringify({ "page_id": "angebot", "contract": { "policy_category": policyCategory, "starting_at": firstOfNextMonth }, "actions": ["mktg_signup_api_activecampaign_review"], "additional": { "survey_id": flow, "webhook_ids": { "mktg_signup_api_activecampaign_review": "3hsfzy4" }, "source": "zzinputstage" }, }), headers: { "KeyId": "a4c046f5-d0ae-481d-a9e5-fc9e7ac610a8", "content-type": "application/json" } }) .then((response) => response.json()); } // DATALAYER dataLayer.push({ event: "zz-tracking-step", ecommerce: { checkout: { actionField: { step: 4, stepName: "persoenliche-daten", }, products: [{ ageAddInsurant: "", ageInsurant: age, breedId: "", breedName: "", category: "zahnzusatz", contact: contact, debit: "", id: "1", inceptionDate: firstOfNextMonth, name: "zahnzusatzversicherung", optin: "", paymentMethod: "sepa lastschriftmandat", paymentPeriod: "monatlich", price: policyPrice ? `${policyPrice.toFixed(2)}` : "", priceExtra: "0", priceStandard: policyPrice ? `${policyPrice.toFixed(2)}` : "", priceStandardYearly: policyPrice ? `${(policyPrice * 12).toFixed(2)}` : "", priceYearly: policyPrice ? `${(policyPrice * 12).toFixed(2)}` : "", quantity: 1, situation: JSON.parse(sessionStorage.offlineLeadData)?.contract?.insurance_for ? (JSON.parse(sessionStorage.offlineLeadData).contract.insurance_for === "me" ? 'Ich selbst' : 'Eine andere Person') : '', variant: policyName }] } } }); }); }); } function personalData() { addCustomClassBody(); const rootElement = document.querySelector("#root"); var insuranceFor = JSON.parse(sessionStorage.offlineLeadData)?.contract?.insurance_for ? (JSON.parse(sessionStorage.offlineLeadData).contract.insurance_for === "me" ? 'me' : 'another') : ''; if (!rootElement.shadowRoot.querySelector('style[title="data-css"]')) { insertDataCSS(); } var styleTags = rootElement.shadowRoot.querySelectorAll('style[scoped]'); styleTags.forEach(function (styleTag) { if (styleTag.getAttribute('title') !== 'data-css' && styleTag.getAttribute('title') !== 'progressbar-css') { styleTag.remove(); } }); function insertDataCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'data-css'); stylesheet.textContent = ` h1, h2, h3, h4 ,h5, h6 { font-family: CentraNo2-Medium, fallback-font, sans-serif; } h2 { font-size: 24px; line-height: 28px; color: rgb(0, 50, 100); padding: 16px 0 0 0; } form[data-page-id="persoenliche-daten"] > div:nth-of-type(3) > h2 { padding: 0; } form[data-page-id="persoenliche-daten"] > h4 { display: none; } form > div { position: relative; } form .has-input-field { margin: 14px 0; } form .input-field-50-left { display: inline-flex; width: calc(50% - 7px); margin: 0 7px 0 0; } form .input-field-50-right { display: inline-flex; width: calc(50% - 7px); margin: 0 0 0 7px; } form .has-input-field.toggle-area, button[type="submit"]{ margin: 3em 0 0 0; } form .has-input-field > div:not(.MuiFormGroup-root) { gap: 14px; } div[aria-labelledby="radio_address_of_insured_person"]{ flex-direction: column; gap: 8px !important; margin: 24px 0 0 0; } div[aria-labelledby="radio_address_of_insured_person"] div:nth-child(2){ margin-left: 0; } #input-street-address, #input-house-number, #input-postal_code_input, #input-city_input, #input-date, #input-month, #input-year { position: relative; display: flex; } #input-street-address input, #input-house-number input, #input-postal_code_input input, #input-city_input input, #input-date input, #input-month input, #input-year input { width: 100%; margin: 0; } #input-street-address, #input-city_input { flex-grow: 1; } input[type="text"], input[type="email"], input[type="tel"] { padding: 0.75em 1em 0 !important; } #insured_person_birthday { box-sizing: border-box; width: 100%; height: 3.5em; margin: 0px; padding: 0.5em; font-size: 1em; font-weight: 300; color: rgb(89, 89, 89); background-color: rgb(222, 222, 222); border: 1px solid rgb(89, 89, 89); border-radius: 4px; appearance: none; font-family: CentraNo2-Medium, fallback-font, sans-serif; } label[for="insured_person_birthday"] { color: rgb(89, 89, 89) !important; } #input-postal_code_input, #input-house-number, #input-year{ max-width: 120px; } #input-date, #input-month { max-width: 94px; } #email_email, #phone_phone_number { border-radius: 4px; } div[aria-labelledby="radio_customer_gender"] svg > circle:nth-child(1), div[aria-labelledby="radio_insured_person_gender"] svg > circle:nth-child(1), div[aria-labelledby="radio_address_of_insured_person"] svg > circle:nth-child(1) { fill: #fff; } #datepicker_date_of_birth { gap: 8px; justify-content: flex-start; } label:not(.MuiFormControlLabel-root, label[for="radio_address_of_insured_person_same"], label[for="radio_address_of_insured_person_different"], label[for="radio_address_of_insured_person"], label[for="starting_date_starting_at"], label[for="radio_customer_gender"],label[for="radio_insured_person_gender"], label[for="radio_radio_customer_gender_female"], label[for="radio_radio_customer_gender_male"], label[for="radio_radio_insured_person_gender_female"], label[for="radio_radio_insured_person_gender_male"], label[for="datepicker_date_of_birth"]) { position: absolute; display: flex; top: 0; left: 0; transform: translate(1rem, 1rem); font-family: CentraNo2-Medium, fallback-font, sans-serif; font-weight: 400; color: #767676; z-index: 10; margin: 0; } label p { margin: 0; } label[for="radio_address_of_insured_person"], label[for="street_number_street_name"], label[for="postalcode_city_postalcode_city"], label[for="radio_customer_gender"], label[for="radio_insured_person_gender"], #datepicker_date_of_birth code { display: none !important; } @supports (not (-ms-ime-align:auto)) { label:not(.MuiFormControlLabel-root,label[for="radio_address_of_insured_person_same"], label[for="radio_address_of_insured_person_different"], label[for="radio_address_of_insured_person"], label[for="starting_date_starting_at"], label[for="radio_customer_gender"], label[for="radio_insured_person_gender"], label[for="radio_radio_customer_gender_female"], label[for="radio_radio_customer_gender_male"], label[for="radio_radio_insured_person_gender_female"], label[for="radio_radio_insured_person_gender_male"], label[for="datepicker_date_of_birth"]) { font-size: 16px; transform: translate(1rem, 1rem); transition: all 0.2s ease-out; pointer-events: none; } input:focus + label, input.has-value + label { font-size: 12px; line-height: 24px; transform: translate(1rem, 0.2rem); } } form[data-page-id="persoenliche-daten"] .MuiFormControlLabel-label { margin: 0; } @media only screen and (max-width:430px){ #input-year{ max-width: none; flex-grow: 1; } #input-postal_code_input, #input-house-number { max-width: 94px; } } @media only screen and (min-width: 680px) { h2 { padding: 32px 0 0 0; } #insured_person_birthday { width: calc(50% - 7px); } } `; rootElement.shadowRoot.prepend(stylesheet); } //HEADLINES const queryAndInsert = (selector, parentSelector, text) => { const element = rootElement.shadowRoot.querySelector(selector); if (element) { const parentElement = parentSelector ? element.closest(parentSelector) : element.parentElement; parentElement.insertBefore( Object.assign(document.createElement('h2'), { textContent: text }), parentElement.firstChild ); } }; const insuredPersonText = document.URL.includes('fuer-kinder') ? 'Daten Ihres Kindes' : 'Wen möchten Sie versichern?'; queryAndInsert('div[aria-labelledby="radio_insured_person_gender"]', null, insuredPersonText); const customerText = insuranceFor === "another" ? 'Ihre Daten (Antragsteller)' : 'Persönliche Daten'; queryAndInsert('div[aria-labelledby="radio_customer_gender"]', null, customerText); const startingDateLabel = rootElement.shadowRoot.querySelector('label[for="starting_date_starting_at"]'); if (startingDateLabel) { const newElement = document.createElement('h2'); if (window.location.href.includes('policy_addons=trial_month')) { newElement.innerHTML = 'Startdatum Gratismonat²'; } else { newElement.textContent = 'Versicherungsbeginn'; } startingDateLabel.replaceWith(newElement); } const kauflandcard = rootElement.shadowRoot.querySelector('#input_partnerData'); if (kauflandcard && kauflandcard.parentElement?.parentElement) { const grandParent = kauflandcard.parentElement.parentElement; grandParent.insertBefore( Object.assign(document.createElement('h2'), { textContent: 'Kaufland Card Nummer' }), grandParent.firstChild ); } const fistInfo = rootElement.shadowRoot.querySelector('div[aria-labelledby="radio_contract_accept_initial_information_text"]'); if (fistInfo) { queryAndInsert('div[aria-labelledby="radio_contract_accept_initial_information_text"]', null, 'Gesetzliche Erstinformation'); } queryAndInsert('.MuiFormGroup-root', null, 'Aktuelle Angebote & Informationen¹'); if (rootElement.shadowRoot.querySelector('button[type="submit"]')) { //BDAY ANOTHER if (insuranceFor === "another") { const checkForAddress = new MutationObserver((mutations) => { const targetElement = rootElement.shadowRoot.querySelector('div[aria-labelledby="radio_address_of_insured_person"]'); if (targetElement) { const rawDate = JSON.parse(sessionStorage.offlineLeadData).contract.insured_person.date_of_birth; const formattedDate = rawDate.split('-').reverse().join('.'); const parentElement = targetElement.parentElement; if (!parentElement.querySelector('#insured_person_birthday')) { const newDiv = document.createElement('div'); const input = document.createElement('input'); input.type = 'text'; input.value = formattedDate; input.id = 'insured_person_birthday'; input.disabled = true; const label = document.createElement('label'); label.textContent = 'Geburtsdatum'; label.setAttribute('for', 'insured_person_birthday'); newDiv.appendChild(input); newDiv.appendChild(label); parentElement.prepend(newDiv); } checkForAddress.disconnect(); } }); checkForAddress.observe( rootElement.shadowRoot.querySelector('form[data-page-id="persoenliche-daten"]'), { childList: true, subtree: true } ); } //LABEL POSITION const labels = rootElement.shadowRoot.querySelectorAll('label'); labels.forEach(label => { const inputId = label.getAttribute('for'); if (inputId) { const input = rootElement.shadowRoot.getElementById(inputId); if (input && (input.type === 'text' || input.type === 'email' || input.type === 'tel')) { input.parentNode.insertBefore(label, input.nextSibling); } } }); //HIDE PLACEHOLDER function inputPlaceholder() { var inputfields = rootElement.shadowRoot.querySelectorAll('form[data-page-id="persoenliche-daten"] input[type="text"], form[data-page-id="persoenliche-daten"] input[type="tel"], form[data-page-id="persoenliche-daten"] input[type="email"]'); inputfields.forEach(function (input) { input.removeAttribute('placeholder'); }); function updateInputClasses() { inputfields.forEach(function (input) { if (input.value.trim() != '') { input.classList.add('has-value'); } else { input.classList.remove('has-value'); } }); } inputfields.forEach(function (input) { input.addEventListener('input', updateInputClasses); input.addEventListener('blur', updateInputClasses); }); updateInputClasses(); } inputPlaceholder(); function wrapInput() { // WRAP INPUT AND CREATE LABEL const inputNames = [ 'street-address', 'house-number', 'postal_code_input', 'city_input', 'date', 'month', 'year' ]; const labelNames = { 'street-address': 'Straße', 'house-number': 'Nr.', 'postal_code_input': 'PLZ', 'city_input': 'Stadt', 'date': 'Tag', 'month': 'Monat', 'year': 'Jahr' }; inputNames.forEach(name => { const inputElements = rootElement.shadowRoot.querySelectorAll(`form[data-page-id="persoenliche-daten"] input[name="${name}"]`); inputElements.forEach(inputElement => { const existingWrapper = inputElement.closest('div[id^="input-"]'); if (!existingWrapper) { const wrapperDiv = document.createElement('div'); wrapperDiv.id = `input-${name}`; inputElement.parentNode.insertBefore(wrapperDiv, inputElement); wrapperDiv.appendChild(inputElement); const label = wrapperDiv.querySelector(`label[for="${name}"]`); if (!label) { const label = document.createElement('label'); label.setAttribute('for', name); label.innerHTML = `${labelNames[name]} *`; wrapperDiv.appendChild(label); } } }); }); } wrapInput(); //ADD CLASS function addClass() { const form = rootElement.shadowRoot.querySelector('form[data-page-id="persoenliche-daten"]'); if (form) { const divs = Array.from(form.children).filter(child => child.tagName === 'DIV'); divs.forEach(div => { if (div.querySelector('input')) { div.classList.add('has-input-field'); } }); } } addClass(); //INFO-I const labelKauflandCard = rootElement.shadowRoot.querySelector('label[for="input_partnerData"]'); if (labelKauflandCard) { const parent = labelKauflandCard.parentElement; const existingLink = parent.querySelector('a.open-sitecore-modal[data-modal-url="/overlays/tarifrechner/allgemein/overlay---kaufland-card"]'); if (!existingLink) { const a = document.createElement('a'); a.className = 'open-sitecore-modal kauflandcard-info'; a.setAttribute('data-modal-url', '/overlays/tarifrechner/allgemein/overlay---kaufland-card'); a.setAttribute('aria-label', 'Mehr Informationen anzeigen'); a.href = 'javascript:void(0)'; a.innerHTML = 'ⓘ'; parent.appendChild(a); } setupSitecoreModalLinks(); } //CLASSES const inputClasses = [ { ids: ['input_insured_person_first_name', 'input_first_name'], className: 'input-field-50-left' }, { ids: ['input_insured_person_last_name', 'input_last_name'], className: 'input-field-50-right' } ]; function addClassToParent(inputIDs, className) { inputIDs.forEach(id => { const element = rootElement.shadowRoot.getElementById(id); if (element) { const parent = element.closest('.has-input-field'); if (parent) { parent.classList.add(className); } } }); } inputClasses.forEach(inputClass => { addClassToParent(inputClass.ids, inputClass.className); }); //HIDE rootElement.shadowRoot.getElementById('email_email').parentElement.querySelector('div').style.display = 'none'; rootElement.shadowRoot.getElementById('phone_phone_number').parentElement.querySelector('div').style.display = 'none'; const checkForInputs = new MutationObserver((mutations) => { const newInputs = []; mutations.forEach(mutation => { // Überprüfen, ob Knoten hinzugefügt wurden if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { mutation.addedNodes.forEach(node => { // Wenn der direkte Knoten ein INPUT ist if (node.tagName === 'INPUT' && (node.type === 'text' || node.type === 'tel' || node.type === 'email')) { newInputs.push(node); } // Wenn der Knoten ein Container ist, nach INPUTs durchsuchen else if (node.nodeType === 1) { // 1 = Element-Knoten const nestedInputs = node.querySelectorAll('input[type="text"], input[type="tel"], input[type="email"]'); nestedInputs.forEach(input => newInputs.push(input)); } }); } }); if (newInputs.length > 0) { addClass(); inputPlaceholder(); wrapInput(); } }); // Observer initialisieren checkForInputs.observe(rootElement.shadowRoot.querySelector('form[data-page-id="persoenliche-daten"]'), { childList: true, subtree: true }); } } function paymentPage() { const rootElement = document.querySelector("#root"); if (!rootElement.shadowRoot.querySelector('style[title="payment-css"]')) { insertPaymentCSS(); } var styleTags = rootElement.shadowRoot.querySelectorAll('style[scoped]'); styleTags.forEach(function (styleTag) { if (styleTag.getAttribute('title') !== 'payment-css' && styleTag.getAttribute('title') !== 'progressbar-css') { styleTag.remove(); } }); function insertPaymentCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'payment-css'); stylesheet.textContent = `.blue-notification{display: flex; flex-direction: column; gap: 8px; padding: 16px; margin: 0 0 16px 0; border-radius: 8px; border: 1px solid #0071C8; background-color: #E3F3FD;font-family: CentraNo2-Medium, fallback-font, sans-serif; font-size: 16px; font-weight: 400; line-height: 21px;}#elm1 {font-family: CentraNo2-Medium, fallback-font, sans-serif;}#elm1 .payment-head span:nth-of-type(2),#input1 input{font-family:CentraNo2-Medium,fallback-font,sans-serif}#elm1 .radio-button,#input1,#input2,.btn-helper{position:relative}#document-area h3,#document-area p{color:#7c95ae!important}#document-area h3{font-size:.875em!important;line-height:1.25em!important;margin-bottom:0}#document-area p{margin-top:0}#elm1{background:#fff;padding:16px;margin:0!important;border-radius:8px;border:2px solid #fb4d18}#elm1 .payment-head{display:flex;align-items:center;margin:0 0 16px}#elm1 .radio-button{height:18px;width:18px;border-radius:12px;border:2px solid #fb4d18}#elm1 .radio-button:after{position:absolute;content:'';width:12px;height:12px;top:3px;left:3px;border-radius:7px;background:#fb4d18}#elm1 .payment-head span:nth-of-type(2){flex-grow:1;margin:0 0 0 8px;font-size:18px;color:#003264}#elm1 .payment-detail .details{padding:16px 0;color:#003264}#elm1 .payment-detail .details strong{position:relative;display:inline-block;width:130px}#elm1 .payment-detail .legal a{font-size:.875em;line-height:1.25em;font-weight:300;color:#0071C8;text-decoration:underline;cursor:pointer}#input1{display:flex;flex-direction:column;margin:0 0 8px}#input1 input{box-sizing:border-box;width:100%;height:3em;margin:0;font-size:1em;font-weight:300;color:#767676;background-color:#f2f5f7;border:1px solid #7c95ae;border-radius:4px;appearance:none}#input1 input,#input2 input{padding:.75em 0 0 .5em}#input1 label,#input2 label{position:absolute;top:6px;left:9px;font-size:12px;line-height:1.25em;font-weight:300;color:#767676;pointer-events:none}.btn-helper{margin:8px 0 0;font-family:CentraNo2-Bold,fallback-font,sans-serif;font-size:.875em;line-height:1.25em;color:#fb4d18;text-align:left}@media only screen and (min-width:992px){#input1 input,#input2 input{width:75%}#input2 input{padding:.75em 0 0 .5em}}`; rootElement.shadowRoot.prepend(stylesheet); } //HEADLINE if (rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-child(3) > div > h1')) { rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-child(3) > div > h1').innerHTML = 'Zahlart'; } //HIDE if (rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-child(3) > div > p')) { rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-child(3) > div > p').style.display = "none"; } if (rootElement.shadowRoot.querySelector('label[for="bank_account_iban"]')) { rootElement.shadowRoot.querySelector('label[for="bank_account_iban"]').style.display = "none"; } if (rootElement.shadowRoot.querySelector('label[for="sepa_mandate_checkbox"]')) { rootElement.shadowRoot.querySelector('label[for="sepa_mandate_checkbox"]').style.display = "none"; } //STYLE if (rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(4)') && rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(5)')) { rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(4)').setAttribute('id', 'elm1'); rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(5)').style.display = "none"; //NOTIFICATION var paymentNotification = document.createElement('span'); paymentNotification.classList.add('blue-notification'); paymentNotification.innerHTML = 'Warum bieten wir nur SEPA-Lastschrift an? Mit SEPA-Lastschrift stellen wir sicher, dass Erstattungen schnell und ohne zusätzliche Kosten direkt auf Ihr Bankkonto überwiesen werden können.'; var notificationSection = rootElement.shadowRoot.querySelector('h2'); notificationSection.appendChild(paymentNotification, notificationSection); //HEAD var paymentHeader = document.createElement('div'); paymentHeader.setAttribute('class', 'payment-head'); paymentHeader.innerHTML = 'SEPA-Lastschrift SEPA Logo

'; rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(4').prepend(paymentHeader); //LABEL rootElement.shadowRoot.querySelector('#bank_account_iban').parentElement.setAttribute('id', 'input2'); var paymentLabel = document.createElement('label'); paymentLabel.innerHTML = 'IBAN *'; rootElement.shadowRoot.querySelector('#input2').prepend(paymentLabel); //PLACEHOLDER rootElement.shadowRoot.querySelector('#bank_account_iban').placeholder = 'DE__ ____ ____ ____ ____ __'; //DETAIL if (window.location.href.includes('policy_addons=trial_month')) { var paymentDetail = document.createElement('div'); paymentDetail.setAttribute('class', 'payment-detail'); paymentDetail.innerHTML = '

Zahlweise:monatlich
Ab 2. Monat:

'; rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(4').append(paymentDetail); } else { var paymentDetail = document.createElement('div'); paymentDetail.setAttribute('class', 'payment-detail'); paymentDetail.innerHTML = '

Zahlweise:monatlich
Beitrag:

'; rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] > div:nth-of-type(4').append(paymentDetail); } setupSitecoreModalLinks(); //PRICE if (JSON.parse(sessionStorage?.DA_dataLayer)?.checkout?.products[0]?.price != '') { const price = JSON.parse(sessionStorage?.DA_dataLayer)?.checkout?.products[0]?.price; rootElement.shadowRoot.querySelector('#price').innerHTML = parseFloat(price).toFixed(2).replace(".", ",") + " €"; } else { let uuidSession; if (document.URL.includes('uuid=')) { const uuidMatch = document.URL.match(/uuid=([a-fA-F0-9]+)/); const extractedUUID = uuidMatch ? uuidMatch[1] : null; uuidSession = extractedUUID; } else { uuidSession = JSON.parse(sessionStorage.offlineLeadData).uuid; } const urlKomfort = 'https://api.zurich.de/faircare/api/v1/price?policy_category=9&uuid=' + uuidSession + ''; const getPriceKomfort = async () => { let price1; await fetch(urlKomfort, { method: "GET", headers: { "KeyId": "a4c046f5-d0ae-481d-a9e5-fc9e7ac610a8" } }) .then(result => result.json()) .then(data => { price1 = data.policy_price; rootElement.shadowRoot.querySelector('#price').innerHTML = '' + price1.toFixed(2).replace('.', ',') + ' €'; }); }; const urlPremium = 'https://api.zurich.de/faircare/api/v1/price?policy_category=10&uuid=' + uuidSession + ''; const getPricePremium = async () => { let price2; await fetch(urlPremium, { method: "GET", headers: { "KeyId": "a4c046f5-d0ae-481d-a9e5-fc9e7ac610a8" } }) .then(result => result.json()) .then(data => { price2 = data.policy_price; rootElement.shadowRoot.querySelector('#price').innerHTML = '' + price2.toFixed(2).replace('.', ',') + ' €'; }); }; const urlPremiumPlus = 'https://api.zurich.de/faircare/api/v1/price?policy_category=11&uuid=' + uuidSession + ''; const getPricePremiumPlus = async () => { let price3; await fetch(urlPremiumPlus, { method: "GET", headers: { "KeyId": "a4c046f5-d0ae-481d-a9e5-fc9e7ac610a8" } }) .then(result => result.json()) .then(data => { price3 = data.policy_price; rootElement.shadowRoot.querySelector('#price').innerHTML = '' + price3.toFixed(2).replace('.', ',') + ' €'; }); }; if (document.URL.includes('komfort')) { getPriceKomfort(); } else if (document.URL.includes('premium')) { if (document.URL.includes('premium-plus')) { getPricePremiumPlus(); } else { getPricePremium(); } } } } //BTN HELPER TEXT if (rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] button[type="submit"]')) { var buttonHelper = document.createElement('div'); buttonHelper.setAttribute('class', 'btn-helper'); buttonHelper.innerHTML = 'Keine Sorge - Mit diesem Klick müssen Sie noch nichts bezahlen!'; rootElement.shadowRoot.querySelector('form[data-page-id="zahlung"] button[type="submit"]').parentElement.append(buttonHelper); } } function overviewPage() { const rootElement = document.querySelector("#root"); var styleTags = rootElement.shadowRoot.querySelectorAll('style[scoped]'); styleTags.forEach(function (styleTag) { if (styleTag.getAttribute('title') !== 'overview-css' && styleTag.getAttribute('title') !== 'progressbar-css') { styleTag.remove(); } }); if (!rootElement.shadowRoot.querySelector('style[title="overview-css"]')) { insertOverviewCSS(); } function insertOverviewCSS() { const stylesheet = document.createElement('style'); stylesheet.setAttribute('scoped', ''); stylesheet.setAttribute('title', 'overview-css'); stylesheet.textContent = ` .quick-overview { font-family: CentraNo2-Medium, fallback-font, sans-serif; display: flex; flex-direction: column; flex-grow: 1; background-color: #fff; margin: 0 0 24px 0; padding: 16px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 50, 100, .1); color: var(--color-primary-100, #003264); } .quick-overview ul { display: flex; flex-grow: 1; flex-direction: column; list-style-type: none; margin: 0 0 16px 0; padding: 0 0 16px 0; border-bottom: 1px solid var(--color-primary-25, #bfccd8); } .quick-overview ul li { position: relative; display: flex; align-items: flex-start; margin: 8px 0 0 0; padding: 2px 0 0 33px; } .quick-overview ul li:first-of-type { margin: 0; } .quick-overview ul li svg { position: absolute; top: 0; left: 0; } .quick-overview-price { display: flex; flex-grow: 1; padding: 0 0 16px 0; text-align: left; align-items: start; } .quick-overview-price > div:nth-child(1) { flex-grow: 1; font-family: CentraNo2-Bold, fallback-font, sans-serif; font-size: 20px; line-height: 20px; } .quick-overview .price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .quick-overview .price .tag { display: none; font-family: CentraNo2-Medium, fallback-font, sans-serif; font-weight: 700; font-size: 10px; text-transform: uppercase; color: var(--color-primary-100, #003264); background: var(--color-visual-brand-yellow, #ffe45e); letter-spacing: 0; padding: 4px; border-radius: 4px; } .quick-overview .price .trial, .quick-overview .price .trial-price { display: none; } .quick-overview.trial-month .price .tag, .quick-overview.trial-month .price .trial-price, .quick-overview.trial-month .price .trial { display: inline-flex; } .quick-overview.trial-month .price-total, .quick-overview.trial-month .price .trial { font-family: CentraNo2-Medium, fallback-font, sans-serif; font-size: 20px; line-height: 20px; } .quick-overview.trial-month .price-total { font-family: CentraNo2-Bold, fallback-font, sans-serif; } .quick-overview.trial-month .price-total > span { font-family: CentraNo2-Book, fallback-font, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.5em; } .quick-overview .price-total, .quick-overview .price .trial-price { font-family: CentraNo2-Bold, fallback-font, sans-serif; font-size: 20px; line-height: 20px; } .quick-overview .price .trial-price { color: #fb4d18; } .quick-overview-price > div:nth-child(1) > span { font-family: CentraNo2-Medium, fallback-font, sans-serif; font-size: 14px; line-height: 16px; } .quick-overview button { box-sizing: border-box; display: block; height: 3.5em; font-size: 1em; font-weight: 600; font-family: CentraNo2-Medium, fallback-font, sans-serif; color: rgb(255, 255, 255); background-color: #fb4d18; border: 2px solid #fb4d18; border-radius: 4px; text-decoration: none; text-align: center; hyphens: auto; cursor: pointer; transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; } .quick-overview button > span { font-size: 19px; line-height: 24px; font-weight: 600; } .btn-container { display: flex; flex-direction: column; flex-grow: 1; } .btn-helper { margin: 16px 0 0; font-family: CentraNo2-Bold, fallback-font, sans-serif; font-size: .875em; line-height: 1.25em; //color: #fb4d18; text-align: left; } .btn-helper a { text-decoration: underline; cursor: pointer; color: rgb(0, 50, 100); } .MuiAccordionSummary-content > div > div:nth-of-type(1), .MuiAccordionSummary-content > div > div:nth-of-type(2) > p { display: none; } form > .btn-toggle { margin-top: 4px; } form .btn-toggle > div, form .MuiAccordion-root{ border-radius: 0; } form[data-page-id="uebersicht"] .MuiAccordionSummary-root { min-height: unset; } form > .btn-toggle > section ul li { align-items: start; } form > .btn-toggle > section > button { border-radius: 0; } button[type="button"] > div > div > div:nth-of-type(2) > div:nth-of-type(1) { font-weight: 400; } form[data-page-id="uebersicht"] .voucherbox { margin: 0 0 4px 0; background-color: #fff; border-radius: 0px; box-shadow: 0 10px 25px rgba(0, 50, 100, .1); } form[data-page-id="uebersicht"] .voucherbox img { display: none; } form[data-page-id="uebersicht"] .voucherbox > div:nth-child(1) > div:nth-child(2) { font-size: 1rem; font-weight: 700; } form[data-page-id="uebersicht"] .voucherbox > div:nth-child(2) { padding: 8px; background-color: #f2f5f7; border-radius: 8px; } @media only screen and (min-width: 1021px) { .quick-overview { flex-direction: row; align-items: center; } [data-page-id="uebersicht"] div:nth-of-type(4) .quick-overview .btn-container { display: none; } .quick-overview .btn-container { margin: 0 0 0 16px; padding: 0 0 0 16px; border-left: 1px solid var(--color-primary-25, #bfccd8); } .trial-month .quick-overview-price { align-items: center; } .quick-overview ul { margin: 0 16px 0 0; padding: 0 16px 0 0; border-right: 1px solid var(--color-primary-25, #bfccd8); border-bottom: none; } .quick-overview-price { padding: 0; } } `; rootElement.shadowRoot.prepend(stylesheet); } //VARIABLES const petName = JSON.parse(sessionStorage?.offlineLeadData || '{}')?.contract?.insured_pet?.name ?? 'Ihren Hund'; const protectIcon = ''; const dateIcon = ''; //QUICK OVERVIEW if (rootElement.shadowRoot.querySelector('form > div:nth-of-type(4)')) { rootElement.shadowRoot.querySelector('form > div:nth-of-type(4)').innerHTML = `

Gesamtpreis
pro Monat

Gratismonat₁

Ohne Risiko - Vertrag 14 Tage !

`; } //CHECK PRICE AND UPDATE PRICE function totalPrice() { if (JSON.parse(sessionStorage?.DA_dataLayer)?.checkout?.products[0]?.price != '') { const price = JSON.parse(sessionStorage?.DA_dataLayer)?.checkout?.products[0]?.price; rootElement.shadowRoot.querySelectorAll('.price-total').forEach(function (priceElement) { priceElement.innerHTML = parseFloat(price).toFixed(2).replace(".", ",") + " €"; }); } else { let uuidSession; if (document.URL.includes('uuid=')) { const uuidMatch = document.URL.match(/uuid=([a-fA-F0-9]+)/); const extractedUUID = uuidMatch ? uuidMatch[1] : null; uuidSession = extractedUUID; } else { uuidSession = JSON.parse(sessionStorage.offlineLeadData).uuid; } const fetchPrice = async (policyCategory) => { const url = `https://api.zurich.de/faircare/api/v1/price?policy_category=${policyCategory}&uuid=${uuidSession}`; const response = await fetch(url, { method: "GET", headers: { "KeyId": "a4c046f5-d0ae-481d-a9e5-fc9e7ac610a8" } }); const data = await response.json(); const price = data.policy_price; rootElement.shadowRoot.querySelectorAll('.price-total').forEach(function (priceElement) { priceElement.innerHTML = parseFloat(price).toFixed(2).replace(".", ",") + " €"; }); }; const getPriceKomfort = () => fetchPrice(9); const getPricePremium = () => fetchPrice(10); const getPricePremiumPlus = () => fetchPrice(11); if (document.URL.includes('komfort')) { getPriceKomfort(); } else if (document.URL.includes('premium')) { if (document.URL.includes('premium-plus')) { getPricePremiumPlus(); } else { getPricePremium(); } } } } if (rootElement.shadowRoot.querySelector('button[type="submit"]')) { const submitButton = rootElement.shadowRoot.querySelector('button[type="submit"]'); submitButton.style.display = 'none'; const quickOverview = document.createElement('div'); quickOverview.classList.add('quick-overview'); quickOverview.innerHTML = `

Gesamtpreis
pro Monat

Gratismonat₁

Ohne Risiko - Vertrag 14 Tage !

`; submitButton.parentNode.insertBefore(quickOverview, submitButton); if (window.location.href.includes('policy_addons=trial_month')) { const quickOver = rootElement.shadowRoot.querySelectorAll('.quick-overview'); quickOver.forEach(element => { element.classList.add('trial-month'); }); } //CLICK SUBMIT const buttons = rootElement.shadowRoot.querySelectorAll('.quick-overview button'); buttons.forEach(button => { button.addEventListener('click', function () { submitButton.click(); }); }); } totalPrice(); if (rootElement.shadowRoot.querySelector('#modal_form')) { let debounceTimeout; const observer = new MutationObserver((mutationsList, observer) => { clearTimeout(debounceTimeout); debounceTimeout = setTimeout(() => { totalPrice(); }, 300); }); observer.observe(rootElement.shadowRoot.querySelector('#modal_form'), { childList: true, subtree: true }); } var policyCat = JSON.parse(sessionStorage.offlineLeadData)?.contract?.policy_category; if (policyCat === 9) { rootElement.shadowRoot.querySelectorAll('.quick-overview > ul > li:nth-of-type(1)').forEach(function (element) { element.innerHTML = protectIcon + 'Komfort Schutz'; }); } else if (policyCat === 10) { rootElement.shadowRoot.querySelectorAll('.quick-overview > ul > li:nth-of-type(1)').forEach(function (element) { element.innerHTML = protectIcon + 'Premium Schutz'; }); } else if (policyCat === 11) { rootElement.shadowRoot.querySelectorAll('.quick-overview > ul > li:nth-of-type(1)').forEach(function (element) { element.innerHTML = protectIcon + 'Premium Plus Schutz'; }); } //STARTDATE var startDate = JSON.parse(sessionStorage.offlineLeadData)?.contract?.starting_at ? new Date(JSON.parse(sessionStorage.offlineLeadData).contract.starting_at).toLocaleDateString('de-DE') : null; rootElement.shadowRoot.querySelector('.quick-overview > ul > li:nth-of-type(2)').innerHTML = dateIcon + 'Beginn ab ' + startDate; //HIDE if (rootElement.shadowRoot.querySelector('form > div:nth-of-type(5)')) { rootElement.shadowRoot.querySelector('form > div:nth-of-type(5)').style.display = 'none'; } //VOUCHERBOX const observerVoucher = new MutationObserver((mutationsList, observer) => { const voucherInput = rootElement.shadowRoot.querySelector('#input-vc_voucherify'); if (voucherInput) { voucherBox = voucherInput.parentElement.parentElement.parentElement.parentElement; voucherBox.classList.add('voucherbox'); observerVoucher.disconnect(); } }); observerVoucher.observe(rootElement.shadowRoot.querySelector('form[data-page-id="uebersicht"]'), { childList: true, subtree: true }); //TOGGLE if (rootElement.shadowRoot.querySelector('button[type="submit"]')) { //ADD CLASS rootElement.shadowRoot.querySelectorAll('.MuiAccordion-root').forEach(button => { button.closest('div').parentElement.parentElement.classList.add('btn-toggle'); }); } function hideTrialToggle() { const toggle = rootElement.shadowRoot.querySelectorAll('.MuiAccordion-root'); toggle.forEach(div => { const pElement = div.querySelector('h3'); //TRIAL MONTH if (pElement && pElement.textContent.includes("Sondervereinbarung: Probemonat")) { const section = div.closest('div').parentElement.parentElement; section.style.display = 'none'; } }); } hideTrialToggle(); const trialToggleObserver = new MutationObserver(mutations => { for (const m of mutations) { m.addedNodes.forEach(node => { if (node.nodeType !== Node.ELEMENT_NODE) return; if (node.matches && node.matches('.MuiAccordion-root')) { hideTrialToggle(); } else if (node.querySelectorAll) { const found = node.querySelectorAll('.MuiAccordion-root'); if (found.length > 0) { hideTrialToggle(); } } }); } }); trialToggleObserver.observe(rootElement.shadowRoot, { childList: true, subtree: true }); setupSitecoreModalLinks(); } function runCodeForStep() { const rootElement = document.querySelector("#root"); const formElement = rootElement.shadowRoot.querySelector('form[data-page-id]'); const dataPageId = formElement.getAttribute('data-page-id'); //STEPS if (dataPageId === 'start') { addCustomClassBody(); removeRoot100(); startPage(); progressBar(); partnerCSS(); } else if (dataPageId === 'kontaktdaten') { addCustomClassBody(); removeRoot100(); leadPage(); progressBar(); partnerCSS(); } else if (dataPageId === 'angebot') { addCustomClassBody(); offerPageProductMin(); progressBar(); partnerCSS(); } else if (dataPageId === 'persoenliche-daten') { removeCustomClassBody(); removeRoot100(); personalData(); progressBar(); partnerCSS(); } else if (dataPageId === 'zahlung') { addCustomClassBody(); removeRoot100(); paymentPage(); progressBar(); partnerCSS(); } else if (dataPageId === 'uebersicht') { addCustomClassBody(); removeRoot100(); overviewPage(); progressBar(); partnerCSS(); } }