{"uuid":"b2974667-fc59-45a5-a32a-0a03a7661669","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":false,"html":"<style>\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n padding: 3rem 1.5rem;\n }\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 *,\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 *::before,\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-wrapper {\n max-width: 860px;\n margin: 0 auto;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-header {\n text-align: center;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-header h2 {\n color: var(--wsw-color-black, #4a4a4a);\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-subtitle {\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.7;\n font-size: 1.2rem;\n display: block;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-body {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: 2rem;\n align-items: start;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-options {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-label {\n font-weight: 600;\n color: var(--wsw-color-black, #4a4a4a);\n font-size: 1rem;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-hint {\n font-size: 0.875rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.55;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n /* Custom select styling */\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select {\n appearance: none;\n -webkit-appearance: none;\n width: 100%;\n padding: 0.75rem 2.5rem 0.75rem 1rem;\n border: 2px solid var(--wsw-color-black, #4a4a4a);\n border-radius: 8px;\n background-color: var(--wsw-color-white, #fff);\n color: var(--wsw-color-black, #4a4a4a);\n font-family: inherit;\n font-size: 1rem;\n cursor: pointer;\n transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 1rem center;\n opacity: 0.2;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select:hover {\n border-color: var(--wsw-color-accent, #6e8c9a);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select:focus {\n outline: none;\n border-color: var(--wsw-color-accent, #6e8c9a);\n box-shadow: 0 0 0 3px rgba(110, 140, 154, 0.2);\n }\n\n /* Range slider */\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .range-wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 input[type=\"range\"] {\n -webkit-appearance: none;\n appearance: none;\n flex: 1;\n height: 6px;\n border-radius: 3px;\n background: var(--wsw-color-light, #f9f5f2);\n outline: none;\n cursor: pointer;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #6e8c9a);\n border: 3px solid var(--wsw-color-white, #fff);\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n cursor: pointer;\n transition: transform 0.2s ease-out;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 input[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.15);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 input[type=\"range\"]::-moz-range-thumb {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #6e8c9a);\n border: 3px solid var(--wsw-color-white, #fff);\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n cursor: pointer;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .range-value {\n min-width: 36px;\n text-align: center;\n font-weight: 600;\n color: var(--wsw-color-accent, #6e8c9a);\n font-size: 1.1rem;\n }\n\n /* Checkbox group */\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .checkbox-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.6rem 0.75rem;\n border: 2px solid transparent;\n border-radius: 8px;\n cursor: pointer;\n transition: background 0.2s ease-out, border-color 0.2s ease-out;\n user-select: none;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item:hover {\n background: var(--wsw-color-light, #f9f5f2);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item.active {\n border-color: var(--wsw-color-accent, #6e8c9a);\n background: rgba(110, 140, 154, 0.08);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-box {\n width: 20px;\n height: 20px;\n border: 2px solid var(--wsw-color-black, #4a4a4a);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background 0.2s ease-out, border-color 0.2s ease-out;\n opacity: 0.4;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item.active .cb-box {\n background: var(--wsw-color-accent, #6e8c9a);\n border-color: var(--wsw-color-accent, #6e8c9a);\n opacity: 1;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-check {\n color: var(--wsw-color-white, #fff);\n font-size: 0.7rem;\n line-height: 1;\n opacity: 0;\n transition: opacity 0.2s ease-out;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item.active .cb-check {\n opacity: 1;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-text {\n font-size: 0.95rem;\n color: var(--wsw-color-black, #4a4a4a);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-price {\n font-size: 0.8rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.5;\n margin-left: auto;\n white-space: nowrap;\n }\n\n /* Result card */\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-result {\n background: var(--wsw-color-white, #fff);\n border: 2px solid var(--wsw-color-accent, #6e8c9a);\n border-radius: 16px;\n padding: 2rem;\n position: sticky;\n top: 2rem;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n box-shadow: 0 8px 32px rgba(0,0,0,0.08);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-title {\n font-weight: 600;\n color: var(--wsw-color-black, #4a4a4a);\n font-size: 1.1rem;\n text-align: center;\n display: block;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-price-block {\n text-align: center;\n padding: 1.5rem 0;\n border-top: 1px solid var(--wsw-color-light, #f9f5f2);\n border-bottom: 1px solid var(--wsw-color-light, #f9f5f2);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-from {\n font-size: 0.875rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.55;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-amount {\n font-family: Nunito, sans-serif;\n font-size: clamp(2rem, 5vw, 2.7rem);\n font-weight: 700;\n color: var(--wsw-color-dark, #4540f1);\n line-height: 1.1;\n display: block;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-note {\n font-size: 0.8rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.5;\n display: block;\n margin-top: 0.25rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-breakdown {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.9rem;\n color: var(--wsw-color-black, #4a4a4a);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-label {\n opacity: 0.7;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-val {\n font-weight: 600;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-cta {\n display: block;\n width: 100%;\n padding: 0.875rem 1.5rem;\n background: var(--wsw-color-accent, #6e8c9a);\n color: var(--wsw-color-white, #fff);\n border: none;\n border-radius: 8px;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n text-align: center;\n text-decoration: none;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-cta:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(110, 140, 154, 0.35);\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .result-cta:focus {\n outline: 3px solid rgba(110, 140, 154, 0.4);\n outline-offset: 2px;\n }\n\n /* Theme adaptations */\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-header h2,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-header h2,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-header h2,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-header h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-subtitle,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-subtitle,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-subtitle,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-subtitle {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-label,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-label,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-label,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-label {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-hint,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-hint,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-hint,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-hint {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 select {\n background-color: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.3);\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-text,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-text,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-text,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-text {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-price,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-price,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-price,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-price {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-box,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-box,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-box,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-box {\n border-color: rgba(255,255,255,0.5);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item:hover,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item:hover,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item:hover,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .cb-item:hover {\n background: rgba(255,255,255,0.06);\n }\n\n section.wsw-theme-d #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-row,\n section.wsw-theme-db #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-row,\n section.wsw-theme-b #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-row,\n section.wsw-theme-bb #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .breakdown-row {\n color: var(--wsw-color-black, #4a4a4a);\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-body {\n grid-template-columns: 1fr;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .calc-result {\n position: static;\n }\n\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 .checkbox-grid {\n grid-template-columns: 1fr;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 *,\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 *::before,\n #wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-b2974667-fc59-45a5-a32a-0a03a7661669\">\n <div class=\"calc-wrapper\">\n\n <div class=\"calc-header\">\n <h2>Website-Preiskalkulator</h2>\n <span class=\"calc-subtitle\">Konfigurieren Sie Ihre Wunsch-Website und erhalten Sie sofort eine unverbindliche Preisschätzung.</span>\n </div>\n\n <div class=\"calc-body\">\n\n <div class=\"calc-options\">\n\n <!-- Website-Typ -->\n <div class=\"calc-group\">\n <span class=\"calc-label\">Website-Typ</span>\n <span class=\"calc-hint\">Welche Art von Website benötigen Sie?</span>\n <select data-param=\"type\">\n <option value=\"onepage\" data-price=\"800\">One-Page (Einzelseite) — ab 800 €</option>\n <option value=\"business\" data-price=\"1500\" selected=\"\">Unternehmenswebsite (5–10 Seiten) — ab 1.500 €</option>\n <option value=\"shop\" data-price=\"3000\">Online-Shop — ab 3.000 €</option>\n <option value=\"portal\" data-price=\"5000\">Web-Portal / Plattform — ab 5.000 €</option>\n </select>\n </div>\n\n <!-- Seitenanzahl -->\n <div class=\"calc-group\">\n <span class=\"calc-label\">Anzahl der Seiten</span>\n <span class=\"calc-hint\">Jede zusätzliche Seite ab 120 €</span>\n <div class=\"range-wrapper\">\n <input type=\"range\" min=\"1\" max=\"30\" value=\"7\" data-param=\"pages\" aria-label=\"Seitenanzahl\">\n <span class=\"range-value\" data-display=\"pages\">7</span>\n </div>\n </div>\n\n <!-- Design-Niveau -->\n <div class=\"calc-group\">\n <span class=\"calc-label\">Design-Niveau</span>\n <select data-param=\"design\">\n <option value=\"template\" data-price=\"0\">Template-basiert (im Preis enthalten)</option>\n <option value=\"custom\" data-price=\"800\" selected=\"\">Individuelles Design — + 800 €</option>\n <option value=\"premium\" data-price=\"2000\">Premium-Design mit Animationen — + 2.000 €</option>\n </select>\n </div>\n\n <!-- Zusatzleistungen -->\n <div class=\"calc-group\">\n <span class=\"calc-label\">Zusatzleistungen</span>\n <span class=\"calc-hint\">Wählen Sie alle gewünschten Extras</span>\n <div class=\"checkbox-grid\">\n <div class=\"cb-item active\" data-addon=\"seo\" data-price=\"400\" role=\"checkbox\" aria-checked=\"true\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">SEO-Optimierung</span>\n <span class=\"cb-price\">+ 400 €</span>\n </div>\n <div class=\"cb-item\" data-addon=\"responsive\" data-price=\"300\" role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">Responsive-Feintuning</span>\n <span class=\"cb-price\">+ 300 €</span>\n </div>\n <div class=\"cb-item\" data-addon=\"cms\" data-price=\"500\" role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">CMS-Einrichtung</span>\n <span class=\"cb-price\">+ 500 €</span>\n </div>\n <div class=\"cb-item active\" data-addon=\"multilang\" data-price=\"600\" role=\"checkbox\" aria-checked=\"true\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">Mehrsprachigkeit</span>\n <span class=\"cb-price\">+ 600 €</span>\n </div>\n <div class=\"cb-item\" data-addon=\"contact\" data-price=\"200\" role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">Kontaktformular</span>\n <span class=\"cb-price\">+ 200 €</span>\n </div>\n <div class=\"cb-item\" data-addon=\"analytics\" data-price=\"250\" role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">Analytics &amp; Tracking</span>\n <span class=\"cb-price\">+ 250 €</span>\n </div>\n <div class=\"cb-item\" data-addon=\"hosting\" data-price=\"350\" role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">Hosting-Setup (1 Jahr)</span>\n <span class=\"cb-price\">+ 350 €</span>\n </div>\n <div class=\"cb-item\" data-addon=\"texte\" data-price=\"450\" role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\">\n <div class=\"cb-box\"><span class=\"cb-check\">✓</span></div>\n <span class=\"cb-text\">Texterstellung</span>\n <span class=\"cb-price\">+ 450 €</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Result -->\n <div class=\"calc-result\">\n <span class=\"result-title\">Ihre Preisschätzung</span>\n\n <div class=\"result-price-block\">\n <span class=\"result-from\">Geschätzter Gesamtpreis</span>\n <span class=\"result-amount\" data-total=\"\">3.540 €</span>\n <span class=\"result-note\">Alle Preise zzgl. MwSt.</span>\n </div>\n\n <div class=\"result-breakdown\">\n <div class=\"breakdown-row\">\n <span class=\"breakdown-label\">Basis-Paket</span>\n <span class=\"breakdown-val\" data-bd=\"base\">1.500 €</span>\n </div>\n <div class=\"breakdown-row\">\n <span class=\"breakdown-label\">Zusätzliche Seiten</span>\n <span class=\"breakdown-val\" data-bd=\"pages\">240 €</span>\n </div>\n <div class=\"breakdown-row\">\n <span class=\"breakdown-label\">Design</span>\n <span class=\"breakdown-val\" data-bd=\"design\">800 €</span>\n </div>\n <div class=\"breakdown-row\">\n <span class=\"breakdown-label\">Extras</span>\n <span class=\"breakdown-val\" data-bd=\"addons\">1.000 €</span>\n </div>\n </div>\n\n <a href=\"#kontakt\" class=\"result-cta\" draggable=\"false\">Unverbindlich anfragen</a>\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-b2974667-fc59-45a5-a32a-0a03a7661669');\n if (!el) return;\n\n var typeSelect = el.querySelector('[data-param=\"type\"]');\n var pagesRange = el.querySelector('[data-param=\"pages\"]');\n var pagesDisplay = el.querySelector('[data-display=\"pages\"]');\n var designSelect = el.querySelector('[data-param=\"design\"]');\n var addonItems = el.querySelectorAll('.cb-item');\n var totalEl = el.querySelector('[data-total]');\n var bdBase = el.querySelector('[data-bd=\"base\"]');\n var bdPages = el.querySelector('[data-bd=\"pages\"]');\n var bdDesign = el.querySelector('[data-bd=\"design\"]');\n var bdAddons = el.querySelector('[data-bd=\"addons\"]');\n\n var PAGE_COST = 120;\n\n var includedPages = {\n onepage: 1,\n business: 5,\n shop: 8,\n portal: 10\n };\n\n function formatCurrency(val) {\n return val.toLocaleString('de-DE') + ' €';\n }\n\n function calculate() {\n var typeOption = typeSelect.options[typeSelect.selectedIndex];\n var basePrice = parseInt(typeOption.getAttribute('data-price'), 10) || 0;\n var typeVal = typeOption.value;\n\n var pages = parseInt(pagesRange.value, 10) || 1;\n pagesDisplay.textContent = pages;\n\n var included = includedPages[typeVal] || 1;\n var extraPages = Math.max(0, pages - included);\n var pagesPrice = extraPages * PAGE_COST;\n\n var designOption = designSelect.options[designSelect.selectedIndex];\n var designPrice = parseInt(designOption.getAttribute('data-price'), 10) || 0;\n\n var addonsPrice = 0;\n addonItems.forEach(function(item) {\n if (item.classList.contains('active')) {\n addonsPrice += parseInt(item.getAttribute('data-price'), 10) || 0;\n }\n });\n\n var total = basePrice + pagesPrice + designPrice + addonsPrice;\n\n totalEl.textContent = formatCurrency(total);\n bdBase.textContent = formatCurrency(basePrice);\n bdPages.textContent = formatCurrency(pagesPrice);\n bdDesign.textContent = formatCurrency(designPrice);\n bdAddons.textContent = formatCurrency(addonsPrice);\n }\n\n function toggleAddon(item) {\n var isActive = item.classList.toggle('active');\n item.setAttribute('aria-checked', isActive ? 'true' : 'false');\n calculate();\n }\n\n typeSelect.addEventListener('change', calculate);\n pagesRange.addEventListener('input', calculate);\n designSelect.addEventListener('change', calculate);\n\n addonItems.forEach(function(item) {\n item.addEventListener('click', function() {\n toggleAddon(item);\n });\n item.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n toggleAddon(item);\n }\n });\n });\n\n calculate();\n\n})();\n</script>","summary":null,"version":1,"inserted_version":1,"total_cost":0.49774917499999993,"total_messages_sent":1,"summarized_at_total":0}

{"uuid":"6b55d890-2230-45b4-9ae5-74fab6006a50","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":false,"html":"<style>\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 {\n font-family: inherit;\n box-sizing: border-box;\n max-width: 720px;\n margin: 0 auto;\n padding: 3rem 1.5rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 *,\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 *::before,\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 *::after {\n box-sizing: inherit;\n }\n\n /* --- Progress Bar --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-progress {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 2.5rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n position: relative;\n z-index: 1;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 1rem;\n background-color: var(--wsw-color-light, #f5f5f5);\n color: var(--wsw-color-black, #4a4a4a);\n border: 2px solid var(--wsw-color-light, #f5f5f5);\n transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle.active {\n background-color: var(--wsw-color-accent, #6e8c9a);\n color: var(--wsw-color-white, #ffffff);\n border-color: var(--wsw-color-accent, #6e8c9a);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle.completed {\n background-color: var(--wsw-color-dark, #4540f1);\n color: var(--wsw-color-white, #ffffff);\n border-color: var(--wsw-color-dark, #4540f1);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label {\n font-size: 0.85rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.6;\n transition: opacity 0.3s ease-out;\n text-align: center;\n max-width: 100px;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label.active {\n opacity: 1;\n font-weight: 600;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector {\n flex: 1;\n height: 3px;\n background-color: var(--wsw-color-light, #f5f5f5);\n margin: 0 0.25rem;\n margin-bottom: 1.5rem;\n position: relative;\n max-width: 120px;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector .funnel-connector-fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0%;\n background-color: var(--wsw-color-dark, #4540f1);\n transition: width 0.4s ease-out;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector.filled .funnel-connector-fill {\n width: 100%;\n }\n\n /* --- Card --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-card {\n background-color: var(--wsw-color-white, #ffffff);\n border-radius: 12px;\n padding: 2.5rem 2rem;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-slide {\n display: none;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-slide.visible {\n display: block;\n animation: wswFunnelFadeIn 0.35s ease-out;\n }\n @keyframes wswFunnelFadeIn {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* --- Headings --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-slide h3 {\n margin: 0 0 0.25rem 0;\n color: var(--wsw-color-black, #4a4a4a);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-subtitle {\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.6;\n margin-bottom: 2rem;\n font-size: 1rem;\n }\n\n /* --- Form Elements --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-field {\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-field label {\n display: block;\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--wsw-color-black, #4a4a4a);\n margin-bottom: 0.5rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-field input,\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-field select {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 2px solid var(--wsw-color-light, #e8e8e8);\n border-radius: 8px;\n font-size: 1rem;\n font-family: inherit;\n color: var(--wsw-color-black, #4a4a4a);\n background-color: var(--wsw-color-white, #ffffff);\n transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;\n appearance: auto;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-field input:focus,\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-field select:focus {\n outline: none;\n border-color: var(--wsw-color-accent, #6e8c9a);\n box-shadow: 0 0 0 3px rgba(110, 140, 154, 0.15);\n }\n\n /* --- Option Tiles --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-options label {\n margin-bottom: 0;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-option-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 1.25rem 0.75rem;\n border: 2px solid var(--wsw-color-light, #e8e8e8);\n border-radius: 10px;\n cursor: pointer;\n transition: border-color 0.2s ease-out, background-color 0.2s ease-out, transform 0.2s ease-out;\n text-align: center;\n min-height: 90px;\n background-color: var(--wsw-color-white, #ffffff);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-option-tile:hover {\n border-color: var(--wsw-color-accent, #6e8c9a);\n transform: translateY(-2px);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-option-tile input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-option-tile:has(input:checked) {\n border-color: var(--wsw-color-accent, #6e8c9a);\n background-color: rgba(110, 140, 154, 0.08);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-option-icon {\n font-size: 1.75rem;\n line-height: 1;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-option-text {\n font-size: 0.9rem;\n font-weight: 600;\n color: var(--wsw-color-black, #4a4a4a);\n }\n\n /* --- Checkbox Tiles --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-checkbox-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 1.25rem 0.75rem;\n border: 2px solid var(--wsw-color-light, #e8e8e8);\n border-radius: 10px;\n cursor: pointer;\n transition: border-color 0.2s ease-out, background-color 0.2s ease-out, transform 0.2s ease-out;\n text-align: center;\n min-height: 90px;\n background-color: var(--wsw-color-white, #ffffff);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-checkbox-tile:hover {\n border-color: var(--wsw-color-accent, #6e8c9a);\n transform: translateY(-2px);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-checkbox-tile input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-checkbox-tile:has(input:checked) {\n border-color: var(--wsw-color-accent, #6e8c9a);\n background-color: rgba(110, 140, 154, 0.08);\n }\n\n /* --- Buttons --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n margin-top: 2rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn {\n padding: 0.8rem 2rem;\n border-radius: 8px;\n font-size: 1rem;\n font-family: inherit;\n font-weight: 600;\n cursor: pointer;\n border: none;\n transition: background-color 0.2s ease-out, transform 0.15s ease-out, box-shadow 0.2s ease-out;\n min-height: 44px;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn:focus-visible {\n outline: 3px solid var(--wsw-color-accent, #6e8c9a);\n outline-offset: 2px;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-back {\n background: transparent;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.7;\n padding-left: 0;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-back:hover {\n opacity: 1;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-next {\n background-color: var(--wsw-color-accent, #6e8c9a);\n color: var(--wsw-color-white, #ffffff);\n margin-left: auto;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-next:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(110, 140, 154, 0.3);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-next:active {\n transform: translateY(0);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-submit {\n background-color: var(--wsw-color-dark, #4540f1);\n color: var(--wsw-color-white, #ffffff);\n margin-left: auto;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-submit:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(69, 64, 241, 0.3);\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn-submit:active {\n transform: translateY(0);\n }\n\n /* --- Success Screen --- */\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-success {\n display: none;\n text-align: center;\n padding: 2rem 0;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-success.visible {\n display: block;\n animation: wswFunnelFadeIn 0.35s ease-out;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-success-icon {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n display: block;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-success h3 {\n color: var(--wsw-color-dark, #4540f1);\n margin-bottom: 0.5rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-success .funnel-subtitle {\n margin-bottom: 0;\n }\n\n /* --- Theme Overrides --- */\n section.wsw-theme-d #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label,\n section.wsw-theme-db #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label,\n section.wsw-theme-b #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label,\n section.wsw-theme-bb #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle,\n section.wsw-theme-db #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle,\n section.wsw-theme-b #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle,\n section.wsw-theme-bb #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-circle {\n background-color: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.2);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector,\n section.wsw-theme-db #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector,\n section.wsw-theme-b #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector,\n section.wsw-theme-bb #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-connector {\n background-color: rgba(255,255,255,0.15);\n }\n\n /* --- Reduced Motion --- */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 *,\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 *::before,\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* --- Mobile --- */\n @media (max-width: 768px) {\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 {\n padding: 2rem 1rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-card {\n padding: 1.75rem 1.25rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-options {\n grid-template-columns: 1fr 1fr;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-step-label {\n font-size: 0.75rem;\n }\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-btn {\n padding: 0.75rem 1.25rem;\n font-size: 0.9rem;\n }\n }\n @media (max-width: 480px) {\n #wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50 .funnel-options {\n grid-template-columns: 1fr;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50\">\n\n <!-- Progress -->\n <div class=\"funnel-progress\">\n <div class=\"funnel-step-indicator\">\n <div class=\"funnel-step-circle active\" data-step=\"0\"><span>1</span></div>\n <span class=\"funnel-step-label active\">Gebäude</span>\n </div>\n <div class=\"funnel-connector\" data-connector=\"0\"><div class=\"funnel-connector-fill\"></div></div>\n <div class=\"funnel-step-indicator\">\n <div class=\"funnel-step-circle\" data-step=\"1\"><span>2</span></div>\n <span class=\"funnel-step-label\">Dach</span>\n </div>\n <div class=\"funnel-connector\" data-connector=\"1\"><div class=\"funnel-connector-fill\"></div></div>\n <div class=\"funnel-step-indicator\">\n <div class=\"funnel-step-circle\" data-step=\"2\"><span>3</span></div>\n <span class=\"funnel-step-label\">Verbrauch</span>\n </div>\n </div>\n\n <!-- Card -->\n <div class=\"funnel-card\">\n\n <!-- Step 1: Gebäudetyp & Grunddaten -->\n <div class=\"funnel-slide visible\" data-slide=\"0\">\n <h3>Ihr Gebäude</h3>\n <span class=\"funnel-subtitle\">Welchen Gebäudetyp möchten Sie mit Solar ausstatten?</span>\n\n <div class=\"funnel-field\">\n <label>Gebäudetyp</label>\n <div class=\"funnel-options\">\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-building-type\" value=\"einfamilienhaus\" checked=\"\">\n <span class=\"funnel-option-icon\">🏡</span>\n <span class=\"funnel-option-text\">Einfamilienhaus</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-building-type\" value=\"mehrfamilienhaus\">\n <span class=\"funnel-option-icon\">🏢</span>\n <span class=\"funnel-option-text\">Mehrfamilienhaus</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-building-type\" value=\"gewerbe\">\n <span class=\"funnel-option-icon\">🏭</span>\n <span class=\"funnel-option-text\">Gewerbe</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-building-type\" value=\"sonstige\">\n <span class=\"funnel-option-icon\">🏗️</span>\n <span class=\"funnel-option-text\">Sonstiges</span>\n </label>\n </div>\n </div>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-baujahr\">Baujahr des Gebäudes</label>\n <select id=\"wsw-baujahr\">\n <option value=\"\">Bitte wählen…</option>\n <option value=\"vor-1970\">Vor 1970</option>\n <option value=\"1970-1990\">1970 – 1990</option>\n <option value=\"1990-2010\">1990 – 2010</option>\n <option value=\"nach-2010\">Nach 2010</option>\n <option value=\"neubau\">Neubau / Planung</option>\n </select>\n </div>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-wohnflaeche\">Wohnfläche (ca. m²)</label>\n <input type=\"number\" id=\"wsw-wohnflaeche\" placeholder=\"z. B. 140\" min=\"0\">\n </div>\n\n <div class=\"funnel-actions\">\n <div></div>\n <button type=\"button\" class=\"funnel-btn funnel-btn-next\" data-go=\"1\">Weiter →</button>\n </div>\n </div>\n\n <!-- Step 2: Dachparameter -->\n <div class=\"funnel-slide\" data-slide=\"1\">\n <h3>Ihr Dach</h3>\n <span class=\"funnel-subtitle\">Angaben zur Dachfläche und Ausrichtung.</span>\n\n <div class=\"funnel-field\">\n <label>Dachform</label>\n <div class=\"funnel-options\">\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-roof-type\" value=\"satteldach\" checked=\"\">\n <span class=\"funnel-option-icon\">⛺</span>\n <span class=\"funnel-option-text\">Satteldach</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-roof-type\" value=\"flachdach\">\n <span class=\"funnel-option-icon\">⬜</span>\n <span class=\"funnel-option-text\">Flachdach</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-roof-type\" value=\"pultdach\">\n <span class=\"funnel-option-icon\">📐</span>\n <span class=\"funnel-option-text\">Pultdach</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-roof-type\" value=\"walmdach\">\n <span class=\"funnel-option-icon\">🔺</span>\n <span class=\"funnel-option-text\">Walmdach</span>\n </label>\n </div>\n </div>\n\n <div class=\"funnel-field\">\n <label>Ausrichtung der Hauptdachfläche</label>\n <div class=\"funnel-options\">\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-orientation\" value=\"sued\" checked=\"\">\n <span class=\"funnel-option-icon\">☀️</span>\n <span class=\"funnel-option-text\">Süd</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-orientation\" value=\"suedost\">\n <span class=\"funnel-option-icon\">🌅</span>\n <span class=\"funnel-option-text\">Südost</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-orientation\" value=\"suedwest\">\n <span class=\"funnel-option-icon\">🌇</span>\n <span class=\"funnel-option-text\">Südwest</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-orientation\" value=\"ost-west\">\n <span class=\"funnel-option-icon\">↔️</span>\n <span class=\"funnel-option-text\">Ost/West</span>\n </label>\n </div>\n </div>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-dachneigung\">Dachneigung (ungefähr)</label>\n <select id=\"wsw-dachneigung\">\n <option value=\"\">Bitte wählen…</option>\n <option value=\"flach\">0° – 10° (flach)</option>\n <option value=\"gering\">10° – 25°</option>\n <option value=\"mittel\" selected=\"\">25° – 40° (optimal)</option>\n <option value=\"steil\">40° – 60° (steil)</option>\n <option value=\"unsicher\">Bin nicht sicher</option>\n </select>\n </div>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-dachflaeche\">Nutzbare Dachfläche (ca. m²)</label>\n <input type=\"number\" id=\"wsw-dachflaeche\" placeholder=\"z. B. 60\" min=\"0\">\n </div>\n\n <div class=\"funnel-field\">\n <label>Verschattung vorhanden?</label>\n <div class=\"funnel-options\">\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-shading\" value=\"keine\" checked=\"\">\n <span class=\"funnel-option-icon\">☀️</span>\n <span class=\"funnel-option-text\">Keine</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-shading\" value=\"gering\">\n <span class=\"funnel-option-icon\">🌤️</span>\n <span class=\"funnel-option-text\">Gering</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-shading\" value=\"mittel\">\n <span class=\"funnel-option-icon\">⛅</span>\n <span class=\"funnel-option-text\">Mittel</span>\n </label>\n <label class=\"funnel-option-tile\">\n <input type=\"radio\" name=\"wsw-shading\" value=\"stark\">\n <span class=\"funnel-option-icon\">☁️</span>\n <span class=\"funnel-option-text\">Stark</span>\n </label>\n </div>\n </div>\n\n <div class=\"funnel-actions\">\n <button type=\"button\" class=\"funnel-btn funnel-btn-back\" data-go=\"0\">← Zurück</button>\n <button type=\"button\" class=\"funnel-btn funnel-btn-next\" data-go=\"2\">Weiter →</button>\n </div>\n </div>\n\n <!-- Step 3: Verbrauch & Interesse -->\n <div class=\"funnel-slide\" data-slide=\"2\">\n <h3>Ihr Verbrauch</h3>\n <span class=\"funnel-subtitle\">Damit wir Ihren Bedarf einschätzen können.</span>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-stromverbrauch\">Jährlicher Stromverbrauch (kWh)</label>\n <input type=\"number\" id=\"wsw-stromverbrauch\" placeholder=\"z. B. 4.500\" min=\"0\">\n </div>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-personen\">Anzahl Personen im Haushalt</label>\n <select id=\"wsw-personen\">\n <option value=\"\">Bitte wählen…</option>\n <option value=\"1\">1 Person</option>\n <option value=\"2\">2 Personen</option>\n <option value=\"3-4\">3 – 4 Personen</option>\n <option value=\"5+\">5 oder mehr</option>\n </select>\n </div>\n\n <div class=\"funnel-field\">\n <label>Interesse an Zusatzleistungen</label>\n <div class=\"funnel-options\">\n <label class=\"funnel-checkbox-tile\">\n <input type=\"checkbox\" name=\"wsw-extras\" value=\"speicher\">\n <span class=\"funnel-option-icon\">🔋</span>\n <span class=\"funnel-option-text\">Batteriespeicher</span>\n </label>\n <label class=\"funnel-checkbox-tile\">\n <input type=\"checkbox\" name=\"wsw-extras\" value=\"wallbox\">\n <span class=\"funnel-option-icon\">🚗</span>\n <span class=\"funnel-option-text\">Wallbox / E-Auto</span>\n </label>\n <label class=\"funnel-checkbox-tile\">\n <input type=\"checkbox\" name=\"wsw-extras\" value=\"waermepumpe\">\n <span class=\"funnel-option-icon\">🌡️</span>\n <span class=\"funnel-option-text\">Wärmepumpe</span>\n </label>\n <label class=\"funnel-checkbox-tile\">\n <input type=\"checkbox\" name=\"wsw-extras\" value=\"smartHome\">\n <span class=\"funnel-option-icon\">📱</span>\n <span class=\"funnel-option-text\">Smart Home</span>\n </label>\n </div>\n </div>\n\n <div class=\"funnel-field\">\n <label for=\"wsw-zeitraum\">Gewünschter Realisierungszeitraum</label>\n <select id=\"wsw-zeitraum\">\n <option value=\"\">Bitte wählen…</option>\n <option value=\"sofort\">So schnell wie möglich</option>\n <option value=\"3-monate\">In den nächsten 3 Monaten</option>\n <option value=\"6-monate\">In den nächsten 6 Monaten</option>\n <option value=\"12-monate\">Innerhalb eines Jahres</option>\n <option value=\"nur-info\">Nur Informationen sammeln</option>\n </select>\n </div>\n\n <div class=\"funnel-actions\">\n <button type=\"button\" class=\"funnel-btn funnel-btn-back\" data-go=\"1\">← Zurück</button>\n <button type=\"button\" class=\"funnel-btn funnel-btn-submit\">Angebot anfordern ☀️</button>\n </div>\n </div>\n\n <!-- Success -->\n <div class=\"funnel-success visible\" data-slide=\"done\">\n <span class=\"funnel-success-icon\">✅</span>\n <h3>Vielen Dank!</h3>\n <span class=\"funnel-subtitle\">Ihre Angaben wurden erfasst. Wir melden uns in Kürze mit einem individuellen Angebot bei Ihnen.</span>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-6b55d890-2230-45b4-9ae5-74fab6006a50');\n if (!el) return;\n\n var currentStep = 0;\n var totalSteps = 3;\n var slides = el.querySelectorAll('.funnel-slide');\n var circles = el.querySelectorAll('.funnel-step-circle');\n var labels = el.querySelectorAll('.funnel-step-label');\n var connectors = el.querySelectorAll('.funnel-connector');\n var successScreen = el.querySelector('.funnel-success');\n\n function goTo(step) {\n if (step < 0 || step >= totalSteps) return;\n currentStep = step;\n updateUI();\n }\n\n function updateUI() {\n slides.forEach(function(s, i) {\n s.classList.toggle('visible', i === currentStep);\n });\n\n circles.forEach(function(c, i) {\n c.classList.remove('active', 'completed');\n if (i < currentStep) c.classList.add('completed');\n else if (i === currentStep) c.classList.add('active');\n });\n\n labels.forEach(function(l, i) {\n l.classList.toggle('active', i === currentStep);\n });\n\n connectors.forEach(function(conn, i) {\n conn.classList.toggle('filled', i < currentStep);\n });\n }\n\n el.querySelectorAll('.funnel-btn-next, .funnel-btn-back').forEach(function(btn) {\n btn.addEventListener('click', function() {\n var target = parseInt(btn.getAttribute('data-go'), 10);\n goTo(target);\n });\n });\n\n var submitBtn = el.querySelector('.funnel-btn-submit');\n if (submitBtn) {\n submitBtn.addEventListener('click', function() {\n slides.forEach(function(s) { s.classList.remove('visible'); });\n\n circles.forEach(function(c) { c.classList.remove('active'); c.classList.add('completed'); });\n labels.forEach(function(l) { l.classList.remove('active'); });\n connectors.forEach(function(conn) { conn.classList.add('filled'); });\n\n successScreen.classList.add('visible');\n\n /* FUTURE EXTENSION PLACEHOLDER:\n Data submission to WSW backend routes will be implemented\n via a dedicated secure API endpoint.\n See: ApiClient.php wsw-snippet route */\n });\n }\n\n updateUI();\n\n})();\n</script>","summary":null,"version":1,"inserted_version":1,"total_cost":0.536353125,"total_messages_sent":1,"summarized_at_total":0}

{"uuid":"98d72aa6-6be6-42d4-a391-402a82d309f1","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":false,"html":"<style>\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 {\n font-family: inherit;\n box-sizing: border-box;\n padding: 2.5rem 1.5rem;\n background: transparent;\n max-width: 640px;\n margin: 0 auto;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 *,\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 *::before,\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card {\n background: var(--wsw-color-white, #ffffff);\n border-radius: 12px;\n padding: 2.5rem 2rem;\n box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);\n transition: box-shadow 0.2s ease-out;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card:hover {\n box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);\n }\n\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 h3 {\n color: var(--wsw-color-black, #4a4a4a);\n margin: 0 0 0.25rem 0;\n text-align: center;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-subtitle {\n display: block;\n text-align: center;\n color: var(--wsw-color-accent, #6e8c9a);\n margin-bottom: 2rem;\n font-family: inherit;\n font-size: 1rem;\n }\n\n /* Slider area */\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-group {\n margin-bottom: 2rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-label-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 0.75rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-label {\n font-family: inherit;\n font-size: 1rem;\n color: var(--wsw-color-black, #4a4a4a);\n font-weight: 600;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-value-display {\n font-family: inherit;\n font-size: 1.4rem;\n font-weight: 700;\n color: var(--wsw-color-dark, #4540f1);\n min-width: 80px;\n text-align: right;\n }\n\n /* Range input styling */\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 8px;\n border-radius: 4px;\n background: var(--wsw-color-light, #f9f5f2);\n outline: none;\n cursor: pointer;\n margin: 0;\n transition: background 0.15s ease-out;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--wsw-color-dark, #4540f1);\n border: 3px solid var(--wsw-color-white, #ffffff);\n box-shadow: 0 2px 8px rgba(69, 64, 241, 0.35);\n cursor: pointer;\n transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-webkit-slider-thumb:hover {\n transform: scale(1.15);\n box-shadow: 0 3px 12px rgba(69, 64, 241, 0.45);\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-thumb {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--wsw-color-dark, #4540f1);\n border: 3px solid var(--wsw-color-white, #ffffff);\n box-shadow: 0 2px 8px rgba(69, 64, 241, 0.35);\n cursor: pointer;\n transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-thumb:hover {\n transform: scale(1.15);\n box-shadow: 0 3px 12px rgba(69, 64, 241, 0.45);\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-track {\n height: 8px;\n border-radius: 4px;\n background: var(--wsw-color-light, #f9f5f2);\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider:focus-visible {\n outline: 3px solid var(--wsw-color-accent, #6e8c9a);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-ticks {\n display: flex;\n justify-content: space-between;\n margin-top: 0.5rem;\n padding: 0 2px;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-ticks span {\n font-family: inherit;\n font-size: 0.8rem;\n color: var(--wsw-color-accent, #6e8c9a);\n opacity: 0.7;\n }\n\n /* Result area */\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .result-box {\n background: linear-gradient(135deg, var(--wsw-color-dark, #4540f1), var(--wsw-color-accent, #6e8c9a));\n border-radius: 10px;\n padding: 1.75rem 1.5rem;\n text-align: center;\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .result-label {\n display: block;\n font-family: inherit;\n font-size: 0.95rem;\n color: rgba(255,255,255,0.85);\n margin-bottom: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .result-amount {\n display: block;\n font-family: inherit;\n font-size: 2.8rem;\n font-weight: 700;\n color: var(--wsw-color-white, #ffffff);\n line-height: 1.1;\n margin-bottom: 0.25rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .result-period {\n display: block;\n font-family: inherit;\n font-size: 0.9rem;\n color: rgba(255,255,255,0.75);\n }\n\n /* Breakdown */\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.6rem 0;\n border-bottom: 1px solid rgba(0,0,0,0.06);\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-row:last-child {\n border-bottom: none;\n padding-bottom: 0;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-key {\n font-family: inherit;\n font-size: 0.95rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.8;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-val {\n font-family: inherit;\n font-size: 0.95rem;\n font-weight: 600;\n color: var(--wsw-color-black, #4a4a4a);\n }\n\n /* Info hint */\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .info-hint {\n display: block;\n margin-top: 1.5rem;\n padding: 1rem;\n background: var(--wsw-color-light, #f9f5f2);\n border-radius: 8px;\n font-family: inherit;\n font-size: 0.85rem;\n color: var(--wsw-color-black, #4a4a4a);\n opacity: 0.75;\n line-height: 1.5;\n }\n\n /* Theme adaptations — dark/black themes */\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 h3,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 h3,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 h3,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card {\n background: rgba(255,255,255,0.06);\n box-shadow: 0 2px 16px rgba(0,0,0,0.2);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-label,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-label,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-label,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-label {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-value-display,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-value-display,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-value-display,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .slider-value-display {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider {\n background: rgba(255,255,255,0.12);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-track,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-track,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-track,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .km-slider::-moz-range-track {\n background: rgba(255,255,255,0.12);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-key,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-key,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-key,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-key {\n color: rgba(255,255,255,0.7);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-val,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-val,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-val,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-val {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-row,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-row,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-row,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .breakdown-row {\n border-bottom-color: rgba(255,255,255,0.08);\n }\n section.wsw-theme-d #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .info-hint,\n section.wsw-theme-db #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .info-hint,\n section.wsw-theme-b #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .info-hint,\n section.wsw-theme-bb #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .info-hint {\n background: rgba(255,255,255,0.06);\n color: rgba(255,255,255,0.6);\n }\n\n /* Reduced motion */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 *,\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 *::before,\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 {\n padding: 1.5rem 1rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .calc-card {\n padding: 1.75rem 1.25rem;\n }\n #wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1 .result-amount {\n font-size: 2.2rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1\">\n <div class=\"calc-card\">\n <h3>Entfernungspauschale berechnen</h3>\n <span class=\"calc-subtitle\">Pendlerpauschale nach § 9 Abs. 1 Nr. 4 EStG</span>\n\n <div class=\"slider-group\">\n <div class=\"slider-label-row\">\n <span class=\"slider-label\">Einfache Entfernung</span>\n <span class=\"slider-value-display\" data-km-display=\"\">25 km</span>\n </div>\n <input type=\"range\" class=\"km-slider\" min=\"1\" max=\"120\" value=\"25\" step=\"1\" aria-label=\"Entfernungskilometer einfache Strecke\" data-km-slider=\"\" style=\"background: linear-gradient(to right, rgb(69, 64, 241) 0%, rgb(69, 64, 241) 20.1681%, transparent 20.1681%, transparent 100%), rgb(249, 245, 242);\">\n <div class=\"slider-ticks\">\n <span>1 km</span>\n <span>30 km</span>\n <span>60 km</span>\n <span>90 km</span>\n <span>120 km</span>\n </div>\n </div>\n\n <div class=\"result-box\">\n <span class=\"result-label\">Jährliche Pauschale</span>\n <span class=\"result-amount\" data-result-year=\"\">1.817,00 €</span>\n <span class=\"result-period\">bei 230 Arbeitstagen</span>\n </div>\n\n <div class=\"breakdown\">\n <div class=\"breakdown-row\">\n <span class=\"breakdown-key\">Tagespauschale</span>\n <span class=\"breakdown-val\" data-result-day=\"\">7,90 €</span>\n </div>\n <div class=\"breakdown-row\">\n <span class=\"breakdown-key\">Erste 20 km × 0,30 €</span>\n <span class=\"breakdown-val\" data-part1=\"\">6,00 €</span>\n </div>\n <div class=\"breakdown-row\">\n <span class=\"breakdown-key\">Ab 21. km × 0,38 € (5 km)</span>\n <span class=\"breakdown-val\" data-part2=\"\">1,90 €</span>\n </div>\n <div class=\"breakdown-row\">\n <span class=\"breakdown-key\">Monatlich (Ø)</span>\n <span class=\"breakdown-val\" data-result-month=\"\">151,42 €</span>\n </div>\n </div>\n\n <span class=\"info-hint\">ℹ Berechnung basiert auf der Entfernungspauschale 2024: 0,30 € für die ersten 20 Entfernungskilometer, 0,38 € ab dem 21. Kilometer. Es zählt nur die einfache Entfernung (Hinweg). Angenommen werden 230 Arbeitstage pro Jahr.</span>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-98d72aa6-6be6-42d4-a391-402a82d309f1');\n if (!el) return;\n\n var slider = el.querySelector('[data-km-slider]');\n var kmDisplay = el.querySelector('[data-km-display]');\n var resultYear = el.querySelector('[data-result-year]');\n var resultDay = el.querySelector('[data-result-day]');\n var resultMonth = el.querySelector('[data-result-month]');\n var part1El = el.querySelector('[data-part1]');\n var part2El = el.querySelector('[data-part2]');\n\n var RATE_FIRST = 0.30;\n var RATE_ABOVE = 0.38;\n var THRESHOLD = 20;\n var WORK_DAYS = 230;\n\n function formatEuro(value) {\n return value.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';\n }\n\n function calculate(km) {\n var part1 = Math.min(km, THRESHOLD) * RATE_FIRST;\n var part2 = km > THRESHOLD ? (km - THRESHOLD) * RATE_ABOVE : 0;\n var daily = part1 + part2;\n var yearly = daily * WORK_DAYS;\n var monthly = yearly / 12;\n\n return {\n daily: daily,\n yearly: yearly,\n monthly: monthly,\n part1: part1,\n part2: part2\n };\n }\n\n function update() {\n var km = parseInt(slider.value, 10);\n var result = calculate(km);\n\n kmDisplay.textContent = km + ' km';\n resultYear.textContent = formatEuro(result.yearly);\n resultDay.textContent = formatEuro(result.daily);\n resultMonth.textContent = formatEuro(result.monthly);\n part1El.textContent = formatEuro(result.part1);\n part2El.textContent = formatEuro(result.part2);\n\n /* Update the breakdown label for part 2 dynamically */\n var part2Row = part2El.parentElement;\n var part2Key = part2Row ? part2Row.querySelector('.breakdown-key') : null;\n if (part2Key) {\n if (km <= THRESHOLD) {\n part2Key.textContent = 'Ab 21. km × 0,38 €';\n part2El.textContent = '–';\n } else {\n part2Key.textContent = 'Ab 21. km × 0,38 € (' + (km - THRESHOLD) + ' km)';\n part2El.textContent = formatEuro(result.part2);\n }\n }\n\n /* Update the slider track fill via CSS gradient */\n var pct = ((km - 1) / (120 - 1)) * 100;\n var darkColor = getComputedStyle(document.documentElement).getPropertyValue('--wsw-color-dark').trim() || '#4540f1';\n var trackBg = getComputedStyle(slider).getPropertyValue('background-color') || '#f9f5f2';\n slider.style.background = 'linear-gradient(to right, ' + darkColor + ' 0%, ' + darkColor + ' ' + pct + '%, transparent ' + pct + '%, transparent 100%), ' + trackBg;\n }\n\n slider.addEventListener('input', update);\n update();\n\n})();\n</script>","summary":null,"version":1,"inserted_version":1,"total_cost":0.40028642499999995,"total_messages_sent":1,"summarized_at_total":0}