{"uuid":"6a0009c4-2639-4c14-b87a-f2683bcdcf87","provider":"wsw-nova","model":"sirius-2","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 {\n font-family: inherit;\n box-sizing: border-box;\n padding: 4rem 1.5rem;\n background: var(--wsw-color-white, #fff);\n position: relative;\n overflow: hidden;\n --snippet-radius: 16px;\n --snippet-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n --snippet-gap: 1.5rem;\n --c-white: var(--wsw-color-white, #ffffff);\n --c-light: var(--wsw-color-light, #36a9e1);\n --c-light-soft: #5fbce8;\n --c-accent: var(--wsw-color-accent, #243c5b);\n --glow-light: rgba(54, 169, 225, 0.25);\n --glow-light-strong: rgba(54, 169, 225, 0.4);\n --glow-accent: rgba(36, 60, 91, 0.2);\n --text-primary: var(--wsw-color-accent, #243c5b);\n --text-muted: rgba(36, 60, 91, 0.65);\n --text-subtle: rgba(36, 60, 91, 0.5);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 *,\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 *::before,\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87::before {\n content: \"\";\n position: absolute;\n top: -15%;\n left: -8%;\n width: 50%;\n height: 50%;\n background: radial-gradient(circle, rgba(54, 169, 225, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87::after {\n content: \"\";\n position: absolute;\n bottom: -15%;\n right: -8%;\n width: 45%;\n height: 45%;\n background: radial-gradient(circle, rgba(36, 60, 91, 0.06) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-container {\n max-width: 1000px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-header h2 {\n color: var(--c-accent);\n margin: 0 0 0.75rem 0;\n letter-spacing: -0.02em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-header .pf-subtitle {\n color: var(--text-muted);\n font-size: 1.1rem;\n font-weight: 300;\n letter-spacing: 0.01em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-header .pf-combo-hint {\n display: inline-block;\n margin-top: 1rem;\n padding: 0.4rem 1rem;\n background: rgba(54, 169, 225, 0.1);\n border: 1px solid rgba(54, 169, 225, 0.3);\n border-radius: 99px;\n font-size: 0.82rem;\n color: var(--c-accent);\n font-weight: 500;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-progress {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 1rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--c-white);\n border: 2px solid rgba(36, 60, 91, 0.15);\n color: var(--text-subtle);\n font-weight: 600;\n font-size: 0.95rem;\n transition: var(--snippet-transition);\n flex-shrink: 0;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-indicator.active {\n background: var(--c-accent);\n border-color: var(--c-accent);\n color: var(--c-white);\n box-shadow: 0 0 0 5px rgba(36, 60, 91, 0.1), 0 8px 24px var(--glow-accent);\n transform: scale(1.1);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-indicator.completed {\n background: var(--c-light);\n border-color: var(--c-light);\n color: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-line {\n width: 70px;\n height: 2px;\n background: rgba(36, 60, 91, 0.12);\n transition: var(--snippet-transition);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-line.completed {\n background: var(--c-light);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-labels {\n display: flex;\n justify-content: space-between;\n max-width: 540px;\n margin: 0.5rem auto 2.5rem;\n padding: 0 0.25rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-label {\n font-size: 0.8rem;\n color: var(--text-subtle);\n text-align: center;\n flex: 1;\n transition: var(--snippet-transition);\n letter-spacing: 0.03em;\n text-transform: uppercase;\n font-weight: 500;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-label.active {\n color: var(--c-accent);\n font-weight: 600;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-steps {\n position: relative;\n min-height: 320px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step {\n display: none;\n animation: pf-fadeIn 0.45s ease-out;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step.active {\n display: block;\n }\n\n @keyframes pf-fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-title {\n text-align: center;\n margin-bottom: 2.5rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-title h3 {\n color: var(--c-accent);\n margin: 0 0 0.5rem 0;\n letter-spacing: -0.01em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-title .pf-hint {\n font-size: 0.95rem;\n color: var(--text-muted);\n font-weight: 300;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-options {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--snippet-gap);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n padding: 2.25rem 1.5rem;\n border-radius: var(--snippet-radius);\n background: var(--c-white);\n border: 2px solid rgba(36, 60, 91, 0.1);\n cursor: pointer;\n transition: var(--snippet-transition);\n text-align: center;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 16px rgba(36, 60, 91, 0.06);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option:hover {\n transform: translateY(-6px);\n border-color: var(--c-accent);\n box-shadow: 0 20px 40px rgba(36, 60, 91, 0.18), 0 0 0 4px rgba(36, 60, 91, 0.05);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option:focus-visible {\n outline: 2px solid var(--c-accent);\n outline-offset: 3px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option.selected {\n background: var(--c-accent);\n border-color: var(--c-accent);\n box-shadow: 0 12px 32px rgba(36, 60, 91, 0.3);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option.selected .pf-option-name {\n color: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option.selected .pf-option-desc {\n color: rgba(255, 255, 255, 0.75);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n flex-shrink: 0;\n transition: var(--snippet-transition);\n position: relative;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option .pf-icon {\n background: var(--c-accent);\n box-shadow: 0 8px 20px rgba(36, 60, 91, 0.25);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option.selected .pf-icon {\n background: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option .pf-icon svg {\n width: 44px;\n height: 44px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option:hover .pf-icon {\n transform: scale(1.08);\n box-shadow: 0 12px 28px rgba(36, 60, 91, 0.35);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card .pf-icon {\n background: linear-gradient(135deg, var(--c-light-soft) 0%, var(--c-light) 100%);\n box-shadow: 0 8px 20px var(--glow-light);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.selected .pf-icon {\n background: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card .pf-icon svg {\n width: 44px;\n height: 44px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card:hover .pf-icon {\n transform: scale(1.08);\n box-shadow: 0 12px 28px var(--glow-light-strong);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option-name {\n font-weight: 600;\n color: var(--c-accent);\n font-size: 1.1rem;\n letter-spacing: -0.01em;\n transition: var(--snippet-transition);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-option-desc {\n font-size: 0.85rem;\n color: var(--text-muted);\n line-height: 1.5;\n font-weight: 300;\n transition: var(--snippet-transition);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--snippet-gap);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n padding: 2.25rem 1.5rem;\n border-radius: var(--snippet-radius);\n background: var(--c-white);\n border: 2px solid rgba(36, 60, 91, 0.1);\n cursor: pointer;\n transition: var(--snippet-transition);\n text-align: center;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 16px rgba(36, 60, 91, 0.06);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card:hover {\n transform: translateY(-6px);\n border-color: var(--c-light);\n box-shadow: 0 20px 40px rgba(36, 60, 91, 0.12), 0 0 0 4px rgba(54, 169, 225, 0.1);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card:focus-visible {\n outline: 2px solid var(--c-light);\n outline-offset: 3px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.selected {\n background: var(--c-accent);\n border-color: var(--c-light);\n box-shadow: 0 12px 32px rgba(36, 60, 91, 0.3), 0 0 0 2px rgba(54, 169, 225, 0.5);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.selected .pf-option-name {\n color: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.selected .pf-option-desc {\n color: rgba(255, 255, 255, 0.85);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.unavailable {\n opacity: 0.35;\n cursor: not-allowed;\n pointer-events: none;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card .pf-unavailable-badge {\n display: none;\n font-size: 0.7rem;\n background: rgba(36, 60, 91, 0.1);\n padding: 0.2rem 0.6rem;\n border-radius: 99px;\n color: var(--text-muted);\n font-weight: 500;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.unavailable .pf-unavailable-badge {\n display: inline-block;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-checkmark {\n position: absolute;\n top: 0.85rem;\n right: 0.85rem;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--c-light);\n color: var(--c-white);\n display: none;\n align-items: center;\n justify-content: center;\n font-size: 0.95rem;\n font-weight: 700;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 2;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-card.selected .pf-checkmark {\n display: flex;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-combo-counter {\n text-align: center;\n margin-top: 1.5rem;\n font-size: 0.9rem;\n color: var(--text-muted);\n font-weight: 500;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-combo-counter strong {\n color: var(--c-light);\n font-weight: 700;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-criteria {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 760px;\n margin: 0 auto;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-criteria-group {\n display: flex;\n flex-direction: column;\n gap: 0.85rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-criteria-label {\n font-weight: 600;\n font-size: 0.85rem;\n color: var(--c-light);\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));\n gap: 0.6rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-btn {\n padding: 0.85rem 0.5rem;\n border: 2px solid rgba(36, 60, 91, 0.12);\n border-radius: 10px;\n background: var(--c-white);\n color: var(--c-accent);\n font-family: inherit;\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--snippet-transition);\n text-align: center;\n box-shadow: 0 2px 8px rgba(36, 60, 91, 0.05);\n min-height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-btn:hover {\n border-color: var(--c-light);\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(36, 60, 91, 0.1);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-btn:focus-visible {\n outline: 2px solid var(--c-light);\n outline-offset: 3px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-btn.selected {\n background: var(--c-accent);\n border-color: var(--c-accent);\n color: var(--c-white);\n box-shadow: 0 8px 20px var(--glow-accent);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-btn.pf-all {\n grid-column: 1 / -1;\n background: rgba(54, 169, 225, 0.08);\n border-color: rgba(54, 169, 225, 0.3);\n color: var(--c-accent);\n font-size: 0.85rem;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-btn.pf-all.selected {\n background: var(--c-light);\n border-color: var(--c-light);\n color: var(--c-white);\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-select-wrap {\n position: relative;\n max-width: 360px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-select-wrap select {\n width: 100%;\n padding: 0.9rem 2.75rem 0.9rem 1.1rem;\n border: 2px solid rgba(36, 60, 91, 0.12);\n border-radius: 10px;\n background: var(--c-white);\n color: var(--c-accent);\n font-size: 0.95rem;\n font-family: inherit;\n appearance: none;\n cursor: pointer;\n transition: var(--snippet-transition);\n box-shadow: 0 2px 8px rgba(36, 60, 91, 0.05);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-select-wrap select option {\n background: var(--c-white);\n color: var(--c-accent);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-select-wrap select:hover {\n border-color: var(--c-light);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-select-wrap select:focus {\n outline: none;\n border-color: var(--c-light);\n box-shadow: 0 0 0 3px rgba(54, 169, 225, 0.2);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-select-wrap::after {\n content: \"▾\";\n position: absolute;\n right: 1.1rem;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--c-light);\n font-size: 0.85rem;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-results {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));\n gap: var(--snippet-gap);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-card {\n background: var(--c-white);\n border: 2px solid rgba(36, 60, 91, 0.08);\n border-radius: var(--snippet-radius);\n overflow: hidden;\n transition: var(--snippet-transition);\n display: flex;\n flex-direction: column;\n position: relative;\n box-shadow: 0 4px 16px rgba(36, 60, 91, 0.08);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-card:hover {\n transform: translateY(-6px);\n border-color: var(--c-light);\n box-shadow: 0 24px 48px rgba(36, 60, 91, 0.15);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-img {\n width: 100%;\n height: 200px;\n background: var(--c-accent);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--c-white);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-img svg {\n width: 80px;\n height: 80px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-img::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 30% 30%, rgba(54, 169, 225, 0.3) 0%, transparent 70%);\n pointer-events: none;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-series {\n position: absolute;\n top: 1rem;\n left: 1rem;\n padding: 0.3rem 0.75rem;\n background: rgba(255, 255, 255, 0.95);\n color: var(--c-accent);\n font-size: 0.7rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n border-radius: 99px;\n z-index: 2;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-body {\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.85rem;\n flex: 1;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-name {\n font-weight: 600;\n font-size: 1.15rem;\n color: var(--c-accent);\n letter-spacing: -0.01em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-features {\n display: flex;\n flex-wrap: wrap;\n gap: 0.4rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.3rem 0.75rem;\n border-radius: 99px;\n font-size: 0.72rem;\n font-weight: 600;\n background: var(--c-light);\n color: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-specs {\n font-size: 0.85rem;\n color: var(--text-muted);\n line-height: 1.55;\n font-weight: 300;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.85rem 1.5rem;\n background: var(--c-accent);\n color: var(--c-white);\n text-decoration: none;\n border-radius: 10px;\n font-weight: 600;\n font-size: 0.92rem;\n transition: var(--snippet-transition);\n margin-top: auto;\n letter-spacing: 0.01em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-link:hover {\n background: var(--c-light);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px var(--glow-light-strong);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-product-link:focus-visible {\n outline: 2px solid var(--c-accent);\n outline-offset: 3px;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-no-results {\n text-align: center;\n padding: 3rem 1rem;\n grid-column: 1 / -1;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-no-results .pf-no-icon {\n width: 64px;\n height: 64px;\n margin: 0 auto 1rem;\n background: rgba(36, 60, 91, 0.08);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-no-results .pf-no-icon svg {\n width: 36px;\n height: 36px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-no-results .pf-no-text {\n color: var(--text-muted);\n font-weight: 300;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-nav {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 2.5rem;\n flex-wrap: wrap;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-btn {\n padding: 0.85rem 2rem;\n border: 2px solid var(--c-accent);\n border-radius: 10px;\n font-family: inherit;\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--snippet-transition);\n background: var(--c-white);\n color: var(--c-accent);\n min-height: 44px;\n letter-spacing: 0.01em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-btn:hover {\n background: var(--c-accent);\n color: var(--c-white);\n transform: translateY(-2px);\n box-shadow: 0 8px 20px var(--glow-accent);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-btn:focus-visible {\n outline: 2px solid var(--c-light);\n outline-offset: 3px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-btn.primary {\n background: var(--c-accent);\n border-color: var(--c-accent);\n color: var(--c-white);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-btn.primary:hover {\n background: var(--c-light);\n border-color: var(--c-light);\n box-shadow: 0 8px 20px var(--glow-light-strong);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n pointer-events: none;\n box-shadow: none;\n }\n\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-summary {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n justify-content: center;\n margin-bottom: 2rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-summary-tag {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n padding: 0.4rem 0.95rem;\n border-radius: 99px;\n background: var(--c-accent);\n color: var(--c-white);\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.01em;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-summary-tag.func {\n background: var(--c-light);\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-summary-tag svg {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 *,\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 *::before,\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-options,\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-function-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-diameter-grid {\n grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-line {\n width: 32px;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-indicator {\n width: 38px;\n height: 38px;\n font-size: 0.85rem;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-labels {\n gap: 0;\n }\n #wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87 .pf-step-label {\n font-size: 0.65rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87\">\n <div class=\"pf-container\">\n\n <div class=\"pf-header\">\n <h2>Produktfinder Wasseraufbereitung</h2>\n <span class=\"pf-subtitle\">In wenigen Schritten zum passenden System für Ihr reines Trinkwasser</span>\n <span class=\"pf-combo-hint\">✦ Funktionen frei kombinierbar — wählen Sie eine oder mehrere</span>\n </div>\n\n <div class=\"pf-progress\">\n <div class=\"pf-step-indicator completed\" data-step=\"1\">1</div>\n <div class=\"pf-step-line completed\" data-line=\"1\"></div>\n <div class=\"pf-step-indicator active\" data-step=\"2\">2</div>\n <div class=\"pf-step-line\" data-line=\"2\"></div>\n <div class=\"pf-step-indicator\" data-step=\"3\">3</div>\n <div class=\"pf-step-line\" data-line=\"3\"></div>\n <div class=\"pf-step-indicator\" data-step=\"4\">4</div>\n </div>\n <div class=\"pf-step-labels\">\n <span class=\"pf-step-label\" data-label=\"1\">Einsatzort</span>\n <span class=\"pf-step-label active\" data-label=\"2\">Funktionen</span>\n <span class=\"pf-step-label\" data-label=\"3\">Details</span>\n <span class=\"pf-step-label\" data-label=\"4\">Ergebnis</span>\n </div>\n\n <div class=\"pf-steps\">\n\n <div class=\"pf-step\" data-pf-step=\"1\">\n <div class=\"pf-step-title\">\n <h3>Wo soll das System eingesetzt werden?</h3>\n <span class=\"pf-hint\">Wählen Sie Ihren Einsatzbereich</span>\n </div>\n <div class=\"pf-options\">\n <div class=\"pf-option\" tabindex=\"0\" role=\"button\" aria-label=\"Ganzes Haus\" data-location=\"haus\">\n <div class=\"pf-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 28L32 8L56 28V54C56 55.1 55.1 56 54 56H10C8.9 56 8 55.1 8 54V28Z\" fill=\"#ffffff\"></path>\n <path d=\"M26 56V38H38V56\" fill=\"#243c5b\" stroke=\"#243c5b\" stroke-width=\"2\"></path>\n <circle cx=\"32\" cy=\"26\" r=\"3\" fill=\"#243c5b\"></circle>\n </svg>\n </div>\n <span class=\"pf-option-name\">Ganzes Haus</span>\n <span class=\"pf-option-desc\">Zentrale Wasseraufbereitung mit Eingriff ins Leitungsnetz — für Eigenheime</span>\n </div>\n <div class=\"pf-option selected\" tabindex=\"0\" role=\"button\" aria-label=\"Wohnung\" data-location=\"wohnung\">\n <div class=\"pf-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"12\" y=\"10\" width=\"40\" height=\"46\" rx=\"2\" fill=\"#ffffff\"></rect>\n <rect x=\"18\" y=\"18\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"29\" y=\"18\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"40\" y=\"18\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"18\" y=\"29\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"29\" y=\"29\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"40\" y=\"29\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"18\" y=\"40\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"40\" y=\"40\" width=\"6\" height=\"6\" fill=\"#243c5b\"></rect>\n <rect x=\"28\" y=\"44\" width=\"8\" height=\"12\" fill=\"#243c5b\"></rect>\n </svg>\n </div>\n <span class=\"pf-option-name\">Wohnung</span>\n <span class=\"pf-option-desc\">Ohne Eingriff ins Leitungsnetz — einfache Montage am Wasserhahn</span>\n </div>\n <div class=\"pf-option\" tabindex=\"0\" role=\"button\" aria-label=\"Standalone-Gerät\" data-location=\"standalone\">\n <div class=\"pf-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M32 8C32 8 14 28 14 40C14 49.9 22.1 58 32 58C41.9 58 50 49.9 50 40C50 28 32 8 32 8Z\" fill=\"#ffffff\"></path>\n <path d=\"M24 36C24 36 22 40 22 44C22 48.4 25.6 52 30 52\" stroke=\"#243c5b\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"></path>\n </svg>\n </div>\n <span class=\"pf-option-name\">Standalone-Gerät</span>\n <span class=\"pf-option-desc\">Unabhängig von Wasserleitungen — flexibel überall einsetzbar</span>\n </div>\n </div>\n </div>\n\n <div class=\"pf-step active\" data-pf-step=\"2\">\n <div class=\"pf-step-title\">\n <h3>Welche Funktionen benötigen Sie?</h3>\n <span class=\"pf-hint\">Wählen Sie eine oder mehrere Funktionen — beliebig kombinierbar</span>\n </div>\n <div class=\"pf-function-grid\">\n <div class=\"pf-function-card unavailable\" tabindex=\"0\" role=\"checkbox\" aria-checked=\"false\" data-function=\"filtern\">\n <div class=\"pf-checkmark\">✓</div>\n <div class=\"pf-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M10 12H54L40 32V52L24 56V32L10 12Z\" fill=\"#ffffff\"></path>\n <circle cx=\"20\" cy=\"20\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n <circle cx=\"28\" cy=\"22\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n <circle cx=\"36\" cy=\"20\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n <circle cx=\"44\" cy=\"22\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n <circle cx=\"24\" cy=\"26\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n <circle cx=\"32\" cy=\"28\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n <circle cx=\"40\" cy=\"26\" r=\"1.5\" fill=\"#36a9e1\"></circle>\n </svg>\n </div>\n <span class=\"pf-option-name\">Filtern</span>\n <span class=\"pf-option-desc\">Entfernt Schadstoffe, Sedimente, Chlor und unerwünschte Partikel aus dem Wasser</span>\n <span class=\"pf-unavailable-badge\">Nicht verfügbar für diesen Einsatzort</span>\n </div>\n <div class=\"pf-function-card\" tabindex=\"0\" role=\"checkbox\" aria-checked=\"false\" data-function=\"uv\">\n <div class=\"pf-checkmark\">✓</div>\n <div class=\"pf-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M32 6L52 14V32C52 44 43 54 32 58C21 54 12 44 12 32V14L32 6Z\" fill=\"#ffffff\"></path>\n <path d=\"M18 32C22 28 26 36 30 32C34 28 38 36 42 32C44.5 29.5 46 31 46 31\" stroke=\"#36a9e1\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"></path>\n <line x1=\"20\" y1=\"20\" x2=\"44\" y2=\"44\" stroke=\"#36a9e1\" stroke-width=\"3\" stroke-linecap=\"round\"></line>\n </svg>\n </div>\n <span class=\"pf-option-name\">UV-Neutralisieren</span>\n <span class=\"pf-option-desc\">Entfernt UV-Belastungen und gespeicherte Informationen aus dem Wasser — damit es nicht schädlich auf den Körper wirkt</span>\n <span class=\"pf-unavailable-badge\">Nicht verfügbar für diesen Einsatzort</span>\n </div>\n <div class=\"pf-function-card\" tabindex=\"0\" role=\"checkbox\" aria-checked=\"false\" data-function=\"energetisieren\">\n <div class=\"pf-checkmark\">✓</div>\n <div class=\"pf-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M32 6L54 18V44L32 56L10 44V18L32 6Z\" fill=\"#ffffff\"></path>\n <path d=\"M32 18L32 46M18 24L46 40M18 40L46 24\" stroke=\"#36a9e1\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n <circle cx=\"32\" cy=\"32\" r=\"4\" fill=\"#36a9e1\"></circle>\n </svg>\n </div>\n <span class=\"pf-option-name\">Strukturieren / Energetisieren</span>\n <span class=\"pf-option-desc\">Strukturiert und vitalisiert das Wasser für optimale Bioverfügbarkeit</span>\n <span class=\"pf-unavailable-badge\">Nicht verfügbar für diesen Einsatzort</span>\n </div>\n </div>\n <div class=\"pf-combo-counter\" data-combo-counter=\"\"></div>\n <div class=\"pf-nav\">\n <button class=\"pf-btn\" data-action=\"back\" type=\"button\">← Zurück</button>\n <button class=\"pf-btn primary\" data-action=\"next-2\" type=\"button\" disabled=\"\">Weiter →</button>\n </div>\n </div>\n\n <div class=\"pf-step\" data-pf-step=\"3\">\n <div class=\"pf-step-title\">\n <h3>Detailauswahl</h3>\n <span class=\"pf-hint\">Verfeinern Sie Ihre Suche</span>\n </div>\n <div class=\"pf-summary\" data-summary=\"\"></div>\n <div class=\"pf-criteria\">\n <div class=\"pf-criteria-group\">\n <span class=\"pf-criteria-label\">Anschlussdurchmesser</span>\n <div class=\"pf-diameter-grid\" data-diameter-grid=\"\">\n <button type=\"button\" class=\"pf-diameter-btn pf-all selected\" data-diameter=\"\">Alle Grössen</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"3/8\">3/8 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"1/2\">1/2 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"3/4\">3/4 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"1\">1 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"5/4\">5/4 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"6/4\">6/4 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"2\">2 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"2.5\">2,5 Zoll</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"M22\">M22</button>\n <button type=\"button\" class=\"pf-diameter-btn\" data-diameter=\"keiner\">Kein Anschluss</button>\n </div>\n </div>\n <div class=\"pf-criteria-group\">\n <span class=\"pf-criteria-label\">Oberflächenbeschichtung</span>\n <div class=\"pf-select-wrap\">\n <select data-criteria=\"beschichtung\">\n <option value=\"\">Alle Ausführungen</option>\n <option value=\"vergoldet\">Vergoldet</option>\n <option value=\"rhodiniert\">Rhodiniert</option>\n <option value=\"lackiert\">Lackiert</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"pf-nav\">\n <button class=\"pf-btn\" data-action=\"back\" type=\"button\">← Zurück</button>\n <button class=\"pf-btn primary\" data-action=\"next-3\" type=\"button\">Ergebnisse anzeigen →</button>\n </div>\n </div>\n\n <div class=\"pf-step\" data-pf-step=\"4\">\n <div class=\"pf-step-title\">\n <h3>Ihre passenden Produkte</h3>\n <span class=\"pf-hint\">Basierend auf Ihrer Auswahl</span>\n </div>\n <div class=\"pf-summary\" data-summary-final=\"\"></div>\n <div class=\"pf-results\" data-results=\"\"></div>\n <div class=\"pf-nav\">\n <button class=\"pf-btn\" data-action=\"back\" type=\"button\">← Zurück</button>\n <button class=\"pf-btn\" data-action=\"restart\" type=\"button\">↺ Neue Suche</button>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-6a0009c4-2639-4c14-b87a-f2683bcdcf87');\n if (!el) return;\n\n /*\n * =====================================================\n * UMH PRODUKTKATALOG\n * =====================================================\n * Bitte die shopUrl-Werte mit den echten Shop-Links austauschen.\n * Schema: https://shop.pureswisswater.io/produkt/[slug]\n * =====================================================\n */\n var products = [\n /* UMH Live — Universalgerät mit M22-Anschluss (Wohnung) */\n {\n id: 'umh-live-gold',\n series: 'Live',\n name: 'UMH Live — Vergoldet',\n locations: ['wohnung'],\n functions: ['energetisieren'],\n durchmesser: ['M22'],\n beschichtung: ['vergoldet'],\n iconType: 'hexagon',\n desc: 'Universalgerät mit M22-Anschluss, vergoldet. Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-live-vergoldet'\n },\n {\n id: 'umh-live-rhodium',\n series: 'Live',\n name: 'UMH Live — Rhodiniert',\n locations: ['wohnung'],\n functions: ['energetisieren'],\n durchmesser: ['M22'],\n beschichtung: ['rhodiniert'],\n iconType: 'hexagon',\n desc: 'Universalgerät mit M22-Anschluss, rhodiniert. Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-live-rhodiniert'\n },\n\n /* UMH Alpha — Universalstandgerät (Standalone) */\n {\n id: 'umh-alpha',\n series: 'Alpha',\n name: 'UMH Alpha',\n locations: ['standalone'],\n functions: ['energetisieren'],\n durchmesser: ['keiner'],\n beschichtung: ['vergoldet'],\n iconType: 'hexagon',\n desc: 'Universalstandgerät, vergoldet. Strukturierung und Energetisierung — kein Anschluss nötig.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-alpha'\n },\n\n /* UMH Delta — Pyramidenstandgerät (Standalone) */\n {\n id: 'umh-delta',\n series: 'Delta',\n name: 'UMH Delta',\n locations: ['standalone'],\n functions: ['uv', 'energetisieren'],\n durchmesser: ['keiner'],\n beschichtung: ['vergoldet'],\n iconType: 'combo',\n desc: 'Pyramidenstandgerät, vergoldet. Master Spektrum & UV-Neutralisierung — Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-delta'\n },\n\n /* UMH Pure — Zusatzgerät 3/8 Zoll (Wohnung) */\n {\n id: 'umh-pure-gold',\n series: 'Pure',\n name: 'UMH Pure — Vergoldet',\n locations: ['wohnung'],\n functions: ['energetisieren'],\n durchmesser: ['3/8'],\n beschichtung: ['vergoldet'],\n iconType: 'hexagon',\n desc: 'Zusatzgerät, vergoldet. Strukturierung und Energetisierung am 3/8 Zoll Anschluss.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-pure-vergoldet'\n },\n {\n id: 'umh-pure-rhodium',\n series: 'Pure',\n name: 'UMH Pure — Rhodiniert',\n locations: ['wohnung'],\n functions: ['energetisieren'],\n durchmesser: ['3/8'],\n beschichtung: ['rhodiniert'],\n iconType: 'hexagon',\n desc: 'Zusatzgerät, rhodiniert — ideal für Osmosewasser. Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-pure-rhodiniert'\n },\n\n /* UMH Pure UV — UV-Strahlen-Neutralisator (Wohnung) */\n {\n id: 'umh-pure-uv',\n series: 'Pure UV',\n name: 'UMH Pure UV',\n locations: ['wohnung'],\n functions: ['uv'],\n durchmesser: ['3/8'],\n beschichtung: ['vergoldet'],\n iconType: 'shield',\n desc: 'UV-Strahlen-Neutralisator, vergoldet. Entfernt UV-Belastungen aus dem Wasser am 3/8 Zoll Anschluss.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-pure-uv'\n },\n\n /* UMH Pure Travel — Universal-Reise-Standgerät (Standalone) */\n {\n id: 'umh-pure-travel',\n series: 'Pure Travel',\n name: 'UMH Pure Travel',\n locations: ['standalone'],\n functions: ['energetisieren'],\n durchmesser: ['keiner'],\n beschichtung: ['lackiert'],\n iconType: 'drop',\n desc: 'Universal-Reise-Standgerät mit Glas- und Kunststofftrichter. Strukturierung und Energetisierung — flexibel überall einsetzbar.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-pure-travel'\n },\n\n /* UMH Hexagon — Spezialgerät 1/2 Zoll (Haus) */\n {\n id: 'umh-hexagon',\n series: 'Hexagon',\n name: 'UMH Hexagon',\n locations: ['haus'],\n functions: ['uv', 'energetisieren'],\n durchmesser: ['1/2'],\n beschichtung: ['vergoldet'],\n iconType: 'combo',\n desc: 'Spezialgerät 1/2 Zoll, vergoldet. Master Spektrum + UV-Neutralisierung — Kombigerät für Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-hexagon'\n },\n\n /* UMH Master — Einbaugeräte (Haus) */\n {\n id: 'umh-master-half-gold',\n series: 'Master',\n name: 'UMH Master 1/2\"',\n locations: ['haus'],\n functions: ['energetisieren'],\n durchmesser: ['1/2'],\n beschichtung: ['vergoldet'],\n iconType: 'hexagon',\n desc: 'Einbaugerät 1/2 Zoll, vergoldet, Master Spektrum. Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-1-2-zoll'\n },\n {\n id: 'umh-master-three-quarter',\n series: 'Master',\n name: 'UMH Master 3/4\"',\n locations: ['haus'],\n functions: ['uv', 'energetisieren'],\n durchmesser: ['3/4'],\n beschichtung: ['lackiert'],\n iconType: 'combo',\n desc: 'Einbaugerät 3/4 Zoll, lackiert. Master Spektrum & UV-Neutralisierung — Kombigerät.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-3-4-zoll'\n },\n {\n id: 'umh-master-one',\n series: 'Master',\n name: 'UMH Master 1\"',\n locations: ['haus'],\n functions: ['energetisieren'],\n durchmesser: ['1'],\n beschichtung: ['lackiert'],\n iconType: 'hexagon',\n desc: 'Einbaugerät 1 Zoll, lackiert, Master Spektrum. Strukturierung und Energetisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-1-zoll'\n },\n {\n id: 'umh-master-five-quarter',\n series: 'Master',\n name: 'UMH Master 5/4\"',\n locations: ['haus'],\n functions: ['uv', 'energetisieren'],\n durchmesser: ['5/4'],\n beschichtung: ['lackiert'],\n iconType: 'combo',\n desc: 'Einbaugerät 5/4 Zoll, lackiert. Master Spektrum & UV-Neutralisierung — Kombigerät.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-5-4-zoll'\n },\n {\n id: 'umh-master-six-quarter',\n series: 'Master',\n name: 'UMH Master 6/4\"',\n locations: ['haus'],\n functions: ['uv', 'energetisieren'],\n durchmesser: ['6/4'],\n beschichtung: ['lackiert'],\n iconType: 'combo',\n desc: 'Einbaugerät 6/4 Zoll, lackiert. Master Spektrum & UV-Neutralisierung — Kombigerät.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-6-4-zoll'\n },\n {\n id: 'umh-master-two',\n series: 'Master',\n name: 'UMH Master 2\"',\n locations: ['haus'],\n functions: ['uv', 'energetisieren'],\n durchmesser: ['2'],\n beschichtung: ['lackiert'],\n iconType: 'combo',\n desc: 'Einbaugerät 2 Zoll, lackiert. Master Spektrum & UV-Neutralisierung — Kombigerät.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-2-zoll'\n },\n\n /* UMH Master UV — Reine UV-Neutralisation (Haus) */\n {\n id: 'umh-master-uv-half',\n series: 'Master UV',\n name: 'UMH Master UV 1/2\"',\n locations: ['haus'],\n functions: ['uv'],\n durchmesser: ['1/2'],\n beschichtung: ['lackiert'],\n iconType: 'shield',\n desc: 'Einbaugerät 1/2 Zoll, lackiert. Reine UV-Neutralisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-uv-1-2-zoll'\n },\n {\n id: 'umh-master-uv-one',\n series: 'Master UV',\n name: 'UMH Master UV 1\"',\n locations: ['haus'],\n functions: ['uv'],\n durchmesser: ['1'],\n beschichtung: ['lackiert'],\n iconType: 'shield',\n desc: 'Einbaugerät 1 Zoll, lackiert. Reine UV-Neutralisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-uv-1-zoll'\n },\n {\n id: 'umh-master-uv-two',\n series: 'Master UV',\n name: 'UMH Master UV 2\"',\n locations: ['haus'],\n functions: ['uv'],\n durchmesser: ['2'],\n beschichtung: ['lackiert'],\n iconType: 'shield',\n desc: 'Einbaugerät 2 Zoll, lackiert. Reine UV-Neutralisierung.',\n shopUrl: 'https://shop.pureswisswater.io/produkt/umh-master-uv-2-zoll'\n }\n ];\n\n /*\n * Verfügbare Funktionen pro Einsatzort.\n * Hinweis: \"Filtern\" ist im aktuellen UMH-Sortiment nicht verfügbar\n * (alle Geräte sind Energetisierungs- und/oder UV-Neutralisations-Geräte).\n * Falls Filter-Produkte ergänzt werden, hier \"filtern\" wieder aktivieren.\n */\n var availableFunctions = {\n haus: ['uv', 'energetisieren'],\n wohnung: ['uv', 'energetisieren'],\n standalone: ['uv', 'energetisieren']\n };\n\n var durchmesserLabels = {\n '3/8': '3/8 Zoll',\n '1/2': '1/2 Zoll',\n '3/4': '3/4 Zoll',\n '1': '1 Zoll',\n '5/4': '5/4 Zoll',\n '6/4': '6/4 Zoll',\n '2': '2 Zoll',\n '2.5': '2,5 Zoll',\n 'M22': 'M22',\n 'keiner': 'Kein Anschluss'\n };\n\n var beschichtungLabels = {\n 'vergoldet': 'Vergoldet',\n 'rhodiniert': 'Rhodiniert',\n 'lackiert': 'Lackiert'\n };\n\n var productIcons = {\n house: '<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M8 28L32 8L56 28V54C56 55.1 55.1 56 54 56H10C8.9 56 8 55.1 8 54V28Z\" fill=\"#ffffff\"/><path d=\"M26 56V38H38V56\" fill=\"#36a9e1\" stroke=\"#36a9e1\" stroke-width=\"2\"/></svg>',\n apartment:'<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><rect x=\"12\" y=\"10\" width=\"40\" height=\"46\" rx=\"2\" fill=\"#ffffff\"/><rect x=\"18\" y=\"18\" width=\"6\" height=\"6\" fill=\"#36a9e1\"/><rect x=\"29\" y=\"18\" width=\"6\" height=\"6\" fill=\"#36a9e1\"/><rect x=\"40\" y=\"18\" width=\"6\" height=\"6\" fill=\"#36a9e1\"/><rect x=\"28\" y=\"44\" width=\"8\" height=\"12\" fill=\"#36a9e1\"/></svg>',\n drop: '<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M32 8C32 8 14 28 14 40C14 49.9 22.1 58 32 58C41.9 58 50 49.9 50 40C50 28 32 8 32 8Z\" fill=\"#ffffff\"/></svg>',\n filter: '<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M10 12H54L40 32V52L24 56V32L10 12Z\" fill=\"#ffffff\"/><circle cx=\"28\" cy=\"22\" r=\"1.5\" fill=\"#36a9e1\"/><circle cx=\"36\" cy=\"20\" r=\"1.5\" fill=\"#36a9e1\"/><circle cx=\"32\" cy=\"28\" r=\"1.5\" fill=\"#36a9e1\"/></svg>',\n shield: '<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M32 6L52 14V32C52 44 43 54 32 58C21 54 12 44 12 32V14L32 6Z\" fill=\"#ffffff\"/><line x1=\"20\" y1=\"20\" x2=\"44\" y2=\"44\" stroke=\"#36a9e1\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>',\n hexagon: '<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M32 6L54 18V44L32 56L10 44V18L32 6Z\" fill=\"#ffffff\"/><circle cx=\"32\" cy=\"32\" r=\"4\" fill=\"#36a9e1\"/></svg>',\n combo: '<svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><circle cx=\"32\" cy=\"32\" r=\"22\" fill=\"#ffffff\"/><path d=\"M22 32L30 40L44 24\" stroke=\"#36a9e1\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/></svg>'\n };\n\n var tagIcons = {\n haus: '<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 2L14 7V14H10V10H6V14H2V7L8 2Z\"/></svg>',\n wohnung: '<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"3\" y=\"2\" width=\"10\" height=\"12\" rx=\"0.5\"/><rect x=\"5\" y=\"4\" width=\"2\" height=\"2\" fill=\"#fff\"/><rect x=\"9\" y=\"4\" width=\"2\" height=\"2\" fill=\"#fff\"/><rect x=\"5\" y=\"8\" width=\"2\" height=\"2\" fill=\"#fff\"/><rect x=\"7\" y=\"11\" width=\"2\" height=\"3\" fill=\"#fff\"/></svg>',\n standalone: '<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 2C8 2 3 7 3 10C3 12.8 5.2 15 8 15C10.8 15 13 12.8 13 10C13 7 8 2 8 2Z\"/></svg>',\n filtern: '<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2 3H14L10 8V13L6 14V8L2 3Z\"/></svg>',\n uv: '<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 1L13 3.5V8C13 11 11 13.5 8 14.5C5 13.5 3 11 3 8V3.5L8 1Z\"/><line x1=\"5\" y1=\"5\" x2=\"11\" y2=\"11\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>',\n energetisieren: '<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 1L14 4.5V11.5L8 15L2 11.5V4.5L8 1Z\"/><circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#fff\"/></svg>'\n };\n\n var state = { currentStep: 1, location: null, functions: [], durchmesser: '', beschichtung: '' };\n\n var steps = el.querySelectorAll('.pf-step');\n var indicators = el.querySelectorAll('.pf-step-indicator');\n var lines = el.querySelectorAll('.pf-step-line');\n var labels = el.querySelectorAll('.pf-step-label');\n var locationCards = el.querySelectorAll('[data-location]');\n var functionCards = el.querySelectorAll('[data-function]');\n var diameterBtns = el.querySelectorAll('[data-diameter]');\n var nextBtn2 = el.querySelector('[data-action=\"next-2\"]');\n var selectBeschichtung = el.querySelector('[data-criteria=\"beschichtung\"]');\n var resultsContainer = el.querySelector('[data-results]');\n var summaryContainer = el.querySelector('[data-summary]');\n var summaryFinal = el.querySelector('[data-summary-final]');\n var comboCounter = el.querySelector('[data-combo-counter]');\n\n function goToStep(n) {\n state.currentStep = n;\n steps.forEach(function(s) { s.classList.toggle('active', parseInt(s.getAttribute('data-pf-step')) === n); });\n indicators.forEach(function(ind) {\n var sn = parseInt(ind.getAttribute('data-step'));\n ind.classList.remove('active', 'completed');\n if (sn === n) ind.classList.add('active');\n else if (sn < n) ind.classList.add('completed');\n });\n lines.forEach(function(line) {\n var ln = parseInt(line.getAttribute('data-line'));\n line.classList.toggle('completed', ln < n);\n });\n labels.forEach(function(lbl) {\n var ln = parseInt(lbl.getAttribute('data-label'));\n lbl.classList.toggle('active', ln === n);\n });\n }\n\n locationCards.forEach(function(card) {\n card.addEventListener('click', function() {\n state.location = card.getAttribute('data-location');\n locationCards.forEach(function(c) { c.classList.remove('selected'); });\n card.classList.add('selected');\n state.functions = [];\n updateFunctionAvailability();\n updateComboCounter();\n setTimeout(function() { goToStep(2); }, 300);\n });\n card.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); }\n });\n });\n\n function updateFunctionAvailability() {\n var avail = availableFunctions[state.location] || [];\n functionCards.forEach(function(fc) {\n var fn = fc.getAttribute('data-function');\n if (avail.indexOf(fn) === -1) {\n fc.classList.add('unavailable');\n fc.classList.remove('selected');\n fc.setAttribute('aria-checked', 'false');\n } else {\n fc.classList.remove('unavailable');\n }\n });\n updateNextBtn();\n }\n\n function updateComboCounter() {\n if (!comboCounter) return;\n var n = state.functions.length;\n if (n === 0) comboCounter.innerHTML = '';\n else if (n === 1) comboCounter.innerHTML = '<strong>1</strong> Funktion ausgewählt';\n else comboCounter.innerHTML = '<strong>' + n + '</strong> Funktionen kombiniert';\n }\n\n functionCards.forEach(function(fc) {\n fc.addEventListener('click', function() {\n if (fc.classList.contains('unavailable')) return;\n var fn = fc.getAttribute('data-function');\n var idx = state.functions.indexOf(fn);\n if (idx > -1) {\n state.functions.splice(idx, 1);\n fc.classList.remove('selected');\n fc.setAttribute('aria-checked', 'false');\n } else {\n state.functions.push(fn);\n fc.classList.add('selected');\n fc.setAttribute('aria-checked', 'true');\n }\n updateNextBtn();\n updateComboCounter();\n });\n fc.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fc.click(); }\n });\n });\n\n function updateNextBtn() {\n if (nextBtn2) nextBtn2.disabled = state.functions.length === 0;\n }\n\n if (nextBtn2) {\n nextBtn2.addEventListener('click', function() { buildSummary(); goToStep(3); });\n }\n\n diameterBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n diameterBtns.forEach(function(b) { b.classList.remove('selected'); });\n btn.classList.add('selected');\n state.durchmesser = btn.getAttribute('data-diameter');\n });\n });\n\n el.querySelector('[data-action=\"next-3\"]').addEventListener('click', function() {\n state.beschichtung = selectBeschichtung.value;\n renderResults();\n goToStep(4);\n });\n\n el.querySelectorAll('[data-action=\"back\"]').forEach(function(btn) {\n btn.addEventListener('click', function() {\n if (state.currentStep > 1) goToStep(state.currentStep - 1);\n });\n });\n el.querySelectorAll('[data-action=\"restart\"]').forEach(function(btn) {\n btn.addEventListener('click', function() {\n state.location = null; state.functions = []; state.durchmesser = ''; state.beschichtung = '';\n locationCards.forEach(function(c) { c.classList.remove('selected'); });\n functionCards.forEach(function(c) { c.classList.remove('selected', 'unavailable'); c.setAttribute('aria-checked', 'false'); });\n diameterBtns.forEach(function(b) { b.classList.remove('selected'); });\n var allBtn = el.querySelector('.pf-diameter-btn.pf-all');\n if (allBtn) allBtn.classList.add('selected');\n if (selectBeschichtung) selectBeschichtung.value = '';\n updateNextBtn();\n updateComboCounter();\n goToStep(1);\n });\n });\n\n var locationLabels = { haus: 'Ganzes Haus', wohnung: 'Wohnung', standalone: 'Standalone' };\n var functionLabels = { filtern: 'Filtern', uv: 'UV-Neutralisieren', energetisieren: 'Strukturieren / Energetisieren' };\n\n function buildSummary() {\n var html = '';\n if (state.location) {\n html += '<span class=\"pf-summary-tag\">' + (tagIcons[state.location] || '') + (locationLabels[state.location] || state.location) + '</span>';\n }\n state.functions.forEach(function(fn) {\n html += '<span class=\"pf-summary-tag func\">' + (tagIcons[fn] || '') + (functionLabels[fn] || fn) + '</span>';\n });\n if (summaryContainer) summaryContainer.innerHTML = html;\n if (summaryFinal) summaryFinal.innerHTML = html;\n }\n\n function renderResults() {\n buildSummary();\n var filtered = products.filter(function(p) {\n if (p.locations.indexOf(state.location) === -1) return false;\n for (var i = 0; i < state.functions.length; i++) {\n if (p.functions.indexOf(state.functions[i]) === -1) return false;\n }\n if (state.durchmesser && p.durchmesser.indexOf(state.durchmesser) === -1) return false;\n if (state.beschichtung && p.beschichtung.indexOf(state.beschichtung) === -1) return false;\n return true;\n });\n\n if (filtered.length === 0) {\n resultsContainer.innerHTML =\n '<div class=\"pf-no-results\">' +\n '<div class=\"pf-no-icon\">' +\n '<svg viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">' +\n '<circle cx=\"15\" cy=\"15\" r=\"9\" stroke=\"#243c5b\" stroke-width=\"2.5\" fill=\"none\"/>' +\n '<line x1=\"22\" y1=\"22\" x2=\"30\" y2=\"30\" stroke=\"#243c5b\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>' +\n '</svg>' +\n '</div>' +\n '<span class=\"pf-no-text\">Für diese Kombination haben wir aktuell kein passendes Produkt. Bitte passen Sie die Kriterien an oder starten Sie eine neue Suche.</span>' +\n '</div>';\n return;\n }\n\n var html = '';\n filtered.forEach(function(p) {\n var badges = '';\n p.functions.forEach(function(fn) {\n badges += '<span class=\"pf-badge\">' + (functionLabels[fn] || fn) + '</span>';\n });\n var specs = [];\n if (p.durchmesser[0] !== 'keiner') {\n var dLabels = p.durchmesser.map(function(d) { return durchmesserLabels[d] || d; });\n specs.push('Anschluss: ' + dLabels.join(', '));\n }\n var bLabels = p.beschichtung.map(function(b) { return beschichtungLabels[b] || b; });\n specs.push('Ausführung: ' + bLabels.join(', '));\n var iconSvg = productIcons[p.iconType] || productIcons.drop;\n var seriesBadge = p.series ? '<span class=\"pf-product-series\">' + p.series + '</span>' : '';\n\n html +=\n '<div class=\"pf-product-card\">' +\n '<div class=\"pf-product-img\">' + seriesBadge + iconSvg + '</div>' +\n '<div class=\"pf-product-body\">' +\n '<span class=\"pf-product-name\">' + p.name + '</span>' +\n '<div class=\"pf-product-features\">' + badges + '</div>' +\n '<span class=\"pf-product-specs\">' + p.desc + '<br>' + specs.join(' · ') + '</span>' +\n '<a href=\"' + p.shopUrl + '\" class=\"pf-product-link\" target=\"_blank\" rel=\"noopener noreferrer\">Zum Produkt im Shop →</a>' +\n '</div>' +\n '</div>';\n });\n resultsContainer.innerHTML = html;\n }\n\n})();\n</script>","summary":null,"version":10,"inserted_version":10,"total_cost":29.98731043,"total_messages_sent":15,"summarized_at_total":12}