{"id":46243,"date":"2025-11-27T09:02:14","date_gmt":"2025-11-27T09:02:14","guid":{"rendered":"https:\/\/gobelka.com\/de\/?page_id=46243"},"modified":"2025-12-26T08:46:27","modified_gmt":"2025-12-26T08:46:27","slug":"heizkosten-sparen","status":"publish","type":"page","link":"https:\/\/gobelka.com\/de\/heizkosten-sparen\/","title":{"rendered":"heizkosten-sparen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"46243\" class=\"elementor elementor-46243\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-e138d0e e-flex e-con-boxed e-con e-parent\" data-id=\"e138d0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4904d4f elementor-widget elementor-widget-html\" data-id=\"4904d4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n    <style>\r\n        \/* --- TEMEL AYARLAR --- *\/\r\n        :root {\r\n            --primary-color: #059669; \/* Emerald Green *\/\r\n            --text-dark: #111827;\r\n            --text-gray: #4b5563;\r\n            --bg-white: #ffffff;\r\n            --border-color: #e5e7eb;\r\n            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n        }\r\n\r\n        body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; }\r\n\r\n        \/* --- HEADER ST\u0130L\u0130 --- *\/\r\n        .funnel-header {\r\n            position: fixed;\r\n            top: 0; left: 0; width: 100%;\r\n            height: 55px;\r\n            background: var(--bg-white);\r\n            box-shadow: var(--shadow);\r\n            z-index: 1000;\r\n            border-bottom: 1px solid var(--border-color);\r\n        }\r\n\r\n        .header-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        \/* LOGO ALANI *\/\r\n        .logo-area {\r\n            display: flex;\r\n            align-items: center;\r\n            text-decoration: none;\r\n        }\r\n        \r\n        .logo-placeholder {\r\n            width: 120px;\r\n            height: 36px;\r\n            background-color: #f3f4f6;\r\n            border-radius: 4px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #9ca3af;\r\n            font-size: 12px;\r\n            font-weight: bold;\r\n            border: 1px dashed #d1d5db;\r\n        }\r\n\r\n        \/* DESKTOP NAV\u0130GASYON (Mobilde Gizli) *\/\r\n        .desktop-nav {\r\n            display: none; \/* Varsay\u0131lan gizli *\/\r\n            gap: 25px;\r\n            align-items: center;\r\n        }\r\n\r\n        .nav-link {\r\n            text-decoration: none;\r\n            color: var(--text-dark);\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            transition: color 0.2s;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n        }\r\n\r\n        .nav-link:hover { color: var(--primary-color); }\r\n        .nav-link svg { width: 18px; height: 18px; opacity: 0.7; }\r\n\r\n        \/* \u00d6zel Buton Link (Sat\u0131n Al) *\/\r\n        .header-primary-cta-button {\r\n            background-color: #059669 !important;\r\n            color: white !important;\r\n            padding: 8px 16px;\r\n            border-radius: 6px;\r\n            font-weight: 600;\r\n            text-decoration: none;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n        }\r\n        .header-primary-cta-button:hover { \r\n            background-color: #047857 !important; \r\n            color: white !important; \r\n        }\r\n\r\n        \/* MOB\u0130L HAMBURGER (Desktopta Gizli) *\/\r\n        .mobile-toggle {\r\n            display: flex;\r\n            cursor: pointer;\r\n            padding: 8px;\r\n        }\r\n\r\n        \/* MOB\u0130L MEN\u00dc OVERLAY *\/\r\n        .mobile-menu-overlay {\r\n            position: fixed;\r\n            top: 70px; \/* Header alt\u0131ndan ba\u015flar *\/\r\n            left: 0;\r\n            width: 100%;\r\n            height: 0;\r\n            background: white;\r\n            overflow: hidden;\r\n            transition: height 0.3s ease-in-out;\r\n            z-index: 999;\r\n            box-shadow: 0 10px 15px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        .mobile-menu-overlay.active {\r\n            height: auto;\r\n            border-bottom: 1px solid var(--border-color);\r\n        }\r\n\r\n        .mobile-list {\r\n            list-style: none;\r\n            padding: 0;\r\n            margin: 0;\r\n        }\r\n\r\n        .mobile-list li { border-bottom: 1px solid #f3f4f6; }\r\n\r\n        .mobile-list a {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            padding: 16px 20px;\r\n            text-decoration: none;\r\n            color: var(--text-dark);\r\n            font-weight: 500;\r\n            font-size: 16px;\r\n        }\r\n\r\n        .mobile-list a:hover { background-color: #f9fafb; color: var(--primary-color); }\r\n\r\n        \/* --- RESPONSIVE KIRILIM --- *\/\r\n        @media (min-width: 992px) {\r\n            .mobile-toggle { display: none; } \/* Mobili gizle *\/\r\n            .desktop-nav { display: flex; } \/* Desktopu a\u00e7 *\/\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"funnel-header\">\r\n        <div class=\"header-container\">\r\n            \r\n            <!-- SOL: LOGO -->\r\n            <a href=\"\/de\/waermedaemmung-innen\" class=\"logo-area\">\r\n                <img decoding=\"async\" src=\"https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/07\/Belka-Tapete-%E2%80%93-Markenlogo-fuer-oekologische-Baumwollputz-Tapeten-1.svg\" alt=\"Belka Tapete Logo\" style=\"height: 16px; width: auto;\">\r\n            <\/a>\r\n\r\n            <!-- ORTA\/SA\u011e: DESKTOP MENU -->\r\n            <nav class=\"desktop-nav\">\r\n                <a href=\"\/de\/waermedaemmung-innen\" class=\"nav-link\">\r\n                    <!-- Icon: Home -->\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\r\n                    Start\r\n                <\/a>\r\n                <a href=\"\/de\/heizkosten-sparen\" class=\"nav-link\">\r\n                    <!-- Icon: Calculator -->\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"\/><line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"\/><line x1=\"16\" x2=\"16\" y1=\"14\" y2=\"18\"\/><path d=\"M16 10h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M8 18h.01\"\/><\/svg>\r\n                    Rechner\r\n                <\/a>\r\n                <a href=\"\/de\/muster-bestellen\" class=\"nav-link\">\r\n                    <!-- Icon: Package -->\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg>\r\n                    Muster (8\u20ac)\r\n                <\/a>\r\n                <a href=\"\/de\/farben-kaufen\" class=\"nav-link header-primary-cta-button\">\r\n                    Jetzt Kaufen\r\n                <\/a>\r\n            <\/nav>\r\n\r\n            <!-- SA\u011e: MOB\u0130L BUTON -->\r\n            <div class=\"mobile-toggle\" onclick=\"toggleMenu()\">\r\n                <!-- Icon: Menu -->\r\n                <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\"\/><line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\"\/><line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\"\/><\/svg>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- MOB\u0130L A\u00c7ILIR MENU -->\r\n    <div class=\"mobile-menu-overlay\" id=\"mobileMenu\">\r\n        <ul class=\"mobile-list\">\r\n            <li><a href=\"\/de\/waermedaemmung-innen\">\ud83c\udfe0 Startseite<\/a><\/li>\r\n            <li><a href=\"\/de\/heizkosten-sparen\">\ud83e\uddee heizkosten-sparen<\/a><\/li>\r\n            <li><a href=\"\/de\/muster-bestellen\">\ud83d\udce6 Test-Paket (Muster)<\/a><\/li>\r\n            <li><a href=\"\/de\/farben-kaufen\" style=\"color: var(--primary-color); font-weight: 700;\">\ud83c\udfa8 Direkt Kaufen<\/a><\/li>\r\n            <li style=\"background: #fafafa;\"><a href=\"https:\/\/gobelka.com\/de\/waermedaemmung-innen\" style=\"color:#999; font-size:14px;\">\u2190 Zur Hauptseite<\/a><\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n    <script>\r\n        function toggleMenu() {\r\n            document.getElementById('mobileMenu').classList.toggle('active');\r\n        }\r\n    <\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-84ed3d9 wd-section-stretch-content e-flex e-con-boxed e-con e-parent\" data-id=\"84ed3d9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d82843d elementor-widget elementor-widget-html\" data-id=\"d82843d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* =========================================\r\n       1. CSS RESET & VARIABLES\r\n       ========================================= *\/\r\n    * { margin: 0; padding: 0; box-sizing: border-box; }\r\n    :root {\r\n        --background-color: oklch(0.99 0 0);\r\n        --foreground-color: oklch(0.15 0 0);\r\n        --card-background: oklch(1 0 0);\r\n        --primary-color: oklch(0.45 0.15 160);\r\n        --primary-foreground: oklch(0.98 0 0);\r\n        --secondary-color: oklch(0.96 0.01 160);\r\n        --muted-color: oklch(0.96 0.005 160);\r\n        --muted-foreground: oklch(0.5 0.02 160);\r\n        --border-color: oklch(0.9 0.01 160);\r\n        --savings-color: oklch(0.48 0.18 165);\r\n        --radius: 0.75rem;\r\n    }\r\n\r\n    \/* =========================================\r\n       2. G\u0130ZLEME KURALLARI (PAGE ID: 46243)\r\n       ========================================= *\/\r\n    .page-id-46243 .site-header, .page-id-46243 .site-footer, .page-id-46243 header, .page-id-46243 footer,\r\n    .page-id-46243 .whb-header, .page-id-46243 .wd-toolbar, .page-id-46243 .wd-toolbar-label-show,\r\n    .page-id-46243 .wd-sticky-nav, .page-id-46243 .wd-hide-md, .page-id-46243 #hubspot-messages-iframe-container {\r\n        display: none !important;\r\n    }\r\n    .wd-sticky-nav-enabled{ --wd-sticky-nav-w:0px; }\r\n    .sticky-toolbar-on{ padding-bottom:0px !important; }\r\n    .wd-content-layout{ padding-block:0px !important; }\r\n\r\n    \/* =========================================\r\n       3. HESAPLAYICI ST\u0130LLER\u0130\r\n       ========================================= *\/\r\n    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; background-color: var(--background-color); color: var(--foreground-color); line-height: 1.5; min-height: 100vh; }\r\n    .calculator-wrapper-container { min-height: 100vh; display: flex; flex-direction: column; }\r\n    .calculator-content-container { flex: 1; padding: 3rem 1rem; }\r\n    @media (min-width: 1024px) { .calculator-content-container { display: flex; align-items: center; justify-content: center; } }\r\n    .calculator-main-card { width: 100%; max-width: 42rem; margin: 0 auto; background: var(--card-background); padding: 2rem 1rem; }\r\n    @media (min-width: 1024px) { .calculator-main-card { border: 1px solid var(--border-color); border-radius: calc(var(--radius) * 2); box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1); padding: 2rem; } }\r\n    .calculator-progress-section { margin-bottom: 2rem; padding-bottom: 1.5rem; }\r\n    .calculator-progress-steps-desktop { display: none; }\r\n    @media (min-width: 768px) { .calculator-progress-steps-desktop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } }\r\n    .calculator-progress-step-wrapper { display: flex; align-items: center; }\r\n    .calculator-progress-step-circle { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 500; transition: all 0.3s ease; }\r\n    .calculator-progress-step-circle.active { background-color: var(--primary-color); color: var(--primary-foreground); }\r\n    .calculator-progress-step-circle.completed { background-color: var(--primary-color); color: var(--primary-foreground); }\r\n    .calculator-progress-step-circle.inactive { background-color: var(--muted-color); color: var(--muted-foreground); }\r\n    .calculator-progress-step-connector { width: 4rem; height: 2px; margin: 0 0.5rem; }\r\n    @media (min-width: 1024px) { .calculator-progress-step-connector { width: 6rem; } }\r\n    .calculator-progress-step-connector.active { background-color: var(--primary-color); }\r\n    .calculator-progress-step-connector.inactive { background-color: var(--muted-color); }\r\n    .calculator-progress-bar-mobile { width: 100%; height: 0.375rem; background-color: var(--muted-color); border-radius: var(--radius); overflow: hidden; }\r\n    @media (min-width: 768px) { .calculator-progress-bar-mobile { display: none; } }\r\n    .calculator-progress-bar-fill { height: 100%; background-color: var(--primary-color); transition: width 0.3s ease; }\r\n    .calculator-progress-text-mobile { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.5rem; }\r\n    @media (min-width: 768px) { .calculator-progress-text-mobile { display: none; } }\r\n    .calculator-step-content-wrapper { max-width: 28rem; margin: 0 auto; }\r\n    .calculator-step-heading { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; }\r\n    .calculator-step-description { color: var(--muted-foreground); margin-bottom: 1.5rem; }\r\n    .calculator-form-group { margin-bottom: 1rem; }\r\n    .calculator-form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }\r\n    .calculator-input-field { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: calc(var(--radius) * 0.75); font-size: 0.875rem; transition: all 0.2s ease; background: var(--card-background); }\r\n    .calculator-input-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px oklch(0.45 0.15 160 \/ 0.1); }\r\n    .calculator-input-grid { display: grid; gap: 1rem; }\r\n    @media (min-width: 768px) { .calculator-input-grid { grid-template-columns: repeat(3, 1fr); } }\r\n    .calculator-switch-container { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; }\r\n    .calculator-switch-label { font-size: 0.875rem; font-weight: 500; cursor: pointer; }\r\n    .calculator-switch-input { position: relative; width: 2.75rem; height: 1.5rem; appearance: none; background-color: var(--muted-color); border-radius: 9999px; cursor: pointer; transition: background-color 0.2s; }\r\n    .calculator-switch-input:checked { background-color: var(--primary-color); }\r\n    .calculator-switch-input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background-color: white; border-radius: 50%; transition: transform 0.2s; }\r\n    .calculator-switch-input:checked::before { transform: translateX(1.25rem); }\r\n    .elementor-widget-html.calculator-button-primary { width: 100%; padding: 0.625rem 1.5rem; background-color: var(--primary-color); color: var(--primary-foreground); border: none; border-radius: calc(var(--radius) * 0.75); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }\r\n    .elementor-widget-html.calculator-button-primary:hover:not(:disabled) { background-color: oklch(0.40 0.15 160); }\r\n    .elementor-widget-html.calculator-button-primary:disabled { opacity: 0.5; cursor: not-allowed; }\r\n    @media (min-width: 768px) { .elementor-widget-html.calculator-button-primary { width: auto; min-width: 12.5rem; } }\r\n    .elementor-widget-html.calculator-button-secondary { width: 100%; padding: 0.625rem 1.5rem; background-color: transparent; color: var(--foreground-color); border: 1px solid var(--border-color); border-radius: calc(var(--radius) * 0.75); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }\r\n    .elementor-widget-html.calculator-button-secondary:hover { background-color: var(--muted-color); }\r\n    @media (min-width: 768px) { .elementor-widget-html.calculator-button-secondary { width: auto; min-width: 12.5rem; } }\r\n    .elementor-widget-html.calculator-button-ghost { width: 100%; padding: 0.625rem 1.5rem; background-color: transparent; color: var(--muted-foreground); border: none; border-radius: calc(var(--radius) * 0.75); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }\r\n    .elementor-widget-html.calculator-button-ghost:hover { color: var(--foreground-color); background-color: var(--muted-color); }\r\n    .elementor-widget-html.calculator-button-secondary-ghost { width: 100%; padding: 0.625rem 1.5rem; background-color: transparent; color: var(--foreground-color); border: 1px solid var(--border-color); border-radius: calc(var(--radius) * 0.75); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }\r\n    .elementor-widget-html.calculator-button-secondary-ghost:hover { background-color: var(--muted-color); border-color: var(--primary-color); color: var(--primary-color); }\r\n    @media (min-width: 768px) { .elementor-widget-html.calculator-button-secondary-ghost { width: auto; min-width: 12.5rem; } }\r\n    .calculator-button-actions-desktop { display: none; padding-top: 1.5rem; }\r\n    @media (min-width: 768px) { .calculator-button-actions-desktop { display: flex; flex-direction: column; gap: 0.75rem; } }\r\n    .calculator-button-group-row { display: flex; flex-direction: column; gap: 0.75rem; }\r\n    @media (min-width: 768px) { .calculator-button-group-row { flex-direction: row; } }\r\n    .calculator-info-card { background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }\r\n    .calculator-info-card-content { display: flex; align-items: center; justify-content: space-between; }\r\n    .calculator-info-card-left { display: flex; align-items: center; gap: 0.75rem; }\r\n    .calculator-info-card-icon { width: 2.5rem; height: 2.5rem; border-radius: calc(var(--radius) * 0.75); background-color: var(--muted-color); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }\r\n    .calculator-info-card-text-title { font-weight: 500; margin-bottom: 0.125rem; }\r\n    .calculator-info-card-text-subtitle { font-size: 0.75rem; color: var(--muted-foreground); }\r\n    .calculator-counter-controls { display: flex; align-items: center; gap: 0.5rem; }\r\n    .elementor-widget-html.calculator-counter-button { width: 2rem; height: 2rem; background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: calc(var(--radius) * 0.5); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 0; }\r\n    .elementor-widget-html.calculator-counter-button:hover { background-color: var(--muted-color); }\r\n    .elementor-widget-html.calculator-counter-button svg { display: block; }\r\n    .calculator-counter-value { width: 2rem; text-align: center; font-size: 1.125rem; font-weight: 600; }\r\n    .calculator-summary-box { background-color: oklch(0.96 0.005 160 \/ 0.5); border-radius: calc(var(--radius) * 0.75); padding: 0.75rem 1rem; }\r\n    .calculator-summary-text { font-size: 0.875rem; color: var(--muted-foreground); }\r\n    .calculator-summary-value { font-weight: 500; color: var(--foreground-color); }\r\n    .calculator-loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 0; }\r\n    .calculator-loader-spinner { width: 3rem; height: 3rem; border: 3px solid var(--muted-color); border-top-color: var(--primary-color); border-radius: 50%; animation: calculator-spin 1s linear infinite; margin-bottom: 1rem; }\r\n    @keyframes calculator-spin { to { transform: rotate(360deg); } }\r\n    .calculator-loader-text { color: var(--muted-foreground); }\r\n    .calculator-highlight-card { background-color: var(--card-background); border: 1px solid var(--savings-color); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1); margin-bottom: 1.5rem; }\r\n    .calculator-highlight-card-content { display: flex; align-items: flex-start; gap: 0.75rem; }\r\n    .calculator-highlight-icon-wrapper { border-radius: 9999px; background-color: oklch(0.48 0.18 165 \/ 0.1); padding: 0.5rem; flex-shrink: 0; }\r\n    .calculator-highlight-icon { width: 1.25rem; height: 1.25rem; color: var(--savings-color); }\r\n    .calculator-highlight-text-section { flex: 1; }\r\n    .calculator-highlight-label { font-size: 0.875rem; color: var(--muted-foreground); }\r\n    .calculator-highlight-amount { font-size: 1.875rem; font-weight: 700; color: var(--savings-color); margin-top: 0.25rem; }\r\n    .calculator-highlight-description { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem; }\r\n    .calculator-highlight-strong { color: var(--foreground-color); font-weight: 600; }\r\n    .calculator-result-card { background-color: oklch(0.96 0.005 160 \/ 0.5); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }\r\n    .calculator-result-card-section { margin-bottom: 1rem; }\r\n    .calculator-result-card-section:last-child { margin-bottom: 0; }\r\n    .calculator-result-card-label { font-size: 0.875rem; color: var(--muted-foreground); }\r\n    .calculator-result-card-value { font-size: 1.875rem; font-weight: 700; margin-top: 0.25rem; }\r\n    .calculator-result-card-note { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }\r\n    .calculator-result-card-divider { border: none; border-top: 1px solid var(--border-color); margin: 1rem 0; }\r\n    .calculator-result-card-total { font-size: 1.5rem; font-weight: 700; }\r\n    .calculator-notice-card { background-color: oklch(0.45 0.15 160 \/ 0.05); border: 1px solid var(--primary-color); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }\r\n    .calculator-notice-text { font-size: 0.875rem; font-weight: 500; text-align: center; }\r\n    .calculator-notice-email { font-weight: 700; }\r\n    .calculator-mobile-footer { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--border-color); background-color: oklch(1 0 0 \/ 0.95); backdrop-filter: blur(8px); padding: 0.75rem 0.75rem; z-index: 9999; max-height: 90vh; overflow-y: auto; }\r\n    @media (min-width: 768px) { .calculator-mobile-footer { display: none; } }\r\n    .calculator-mobile-footer-content { display: flex; flex-direction: column; gap: 0.375rem; }\r\n    @media (max-width: 480px) { .elementor-widget-html.calculator-button-primary, .elementor-widget-html.calculator-button-secondary, .elementor-widget-html.calculator-button-secondary-ghost { padding: 0.5rem 1rem; font-size: 0.875rem; } }\r\n    .calculator-icon-svg { width: 1.25rem; height: 1.25rem; }\r\n    .calculator-icon-svg-small { width: 0.75rem; height: 0.75rem; }\r\n    .calculator-icon-margin-right { margin-right: 0.5rem; }\r\n    @media (min-width: 768px) { .elementor-widget-html.calculator-button-primary, .elementor-widget-html.calculator-button-secondary { flex: 1; } }\r\n    .hidden { display: none; }\r\n<\/style>\r\n\r\n<div class=\"calculator-wrapper-container\">\r\n    <div class=\"calculator-content-container\">\r\n        <div class=\"calculator-main-card\">\r\n            <!-- Progress Section -->\r\n            <div class=\"calculator-progress-section\">\r\n                <!-- Desktop Progress Steps -->\r\n                <div class=\"calculator-progress-steps-desktop\" id=\"desktopProgressSteps\"><\/div>\r\n                \r\n                <!-- Mobile Progress Bar -->\r\n                <div class=\"calculator-progress-bar-mobile\">\r\n                    <div class=\"calculator-progress-bar-fill\" id=\"progressBarFill\" style=\"width: 25%;\"><\/div>\r\n                <\/div>\r\n                <p class=\"calculator-progress-text-mobile\" id=\"progressText\">Schritt 1 von 4<\/p>\r\n            <\/div>\r\n\r\n            <!-- Main Content -->\r\n            <main id=\"calculatorMainContent\">\r\n                <!-- Steps will be rendered here -->\r\n            <\/main>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Mobile Footer -->\r\n    <div class=\"calculator-mobile-footer\" id=\"mobileFooter\">\r\n        <div class=\"calculator-mobile-footer-content\" id=\"mobileFooterContent\">\r\n            <!-- Buttons will be rendered here -->\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ ==========================================\r\n    \/\/ \u2699\ufe0f AYARLAR (L\u00fctfen Buray\u0131 D\u00fczenleyin)\r\n    \/\/ ==========================================\r\n    const CONFIG = {\r\n        redirectBaseUrl: \"https:\/\/gobelka.com\/de\/farben-kaufen\", \/\/ Y\u00f6nlendirilecek \u00dcr\u00fcn Linki\r\n        hubspotPortalId: \"144408909\",  \/\/ HubSpot Portal ID (Not ald\u0131\u011f\u0131n\u0131z ID)\r\n        hubspotFormId: \"82a146fe-effc-4a70-b187-e4ba5a8ae8be\", \/\/ HubSpot Form ID (Not ald\u0131\u011f\u0131n\u0131z ID)\r\n    };\r\n\r\n    \/\/ --- 1. SETUP & TRACKING HELPER ---\r\n    window.dataLayer = window.dataLayer || [];\r\n\r\n    function trackCalculatorEvent(eventName, params) {\r\n        const eventData = {\r\n            'event': eventName,\r\n            'page_id': '46243',\r\n            ...params\r\n        };\r\n        window.dataLayer.push(eventData);\r\n        console.log('\u2705 Calculator Event:', eventName, params);\r\n    }\r\n\r\n    \/\/ --- 2. CONSTANTS & STATE ---\r\n    const COVERAGE_PER_PACKAGE = 3.3; \r\n    const PRICE_PER_PACKAGE = 30; \r\n    const SAFETY_MARGIN = 1.1; \r\n    const ENERGY_SAVING_PER_SQM = 6; \r\n    const DOOR_DEDUCTION = 2; \r\n    const WINDOW_DEDUCTION = 1.5;\r\n\r\n    let state = {\r\n        step: 1,\r\n        loading: false,\r\n        length: '',\r\n        width: '',\r\n        height: '',\r\n        includeCeiling: false,\r\n        doors: 1,\r\n        windows: 1,\r\n        email: '',\r\n        results: { netArea: 0, packagesNeeded: 0, totalPrice: 0, yearlySaving: 0, roi: 0 }\r\n    };\r\n\r\n    \/\/ --- 3. LOGIC ---\r\n    function calculateResults() {\r\n        const l = parseFloat(state.length);\r\n        const w = parseFloat(state.width);\r\n        const h = parseFloat(state.height);\r\n\r\n        let wallArea = (l + w) * 2 * h;\r\n        if (state.includeCeiling) wallArea += l * w;\r\n\r\n        const deductions = state.doors * DOOR_DEDUCTION + state.windows * WINDOW_DEDUCTION;\r\n        const netArea = Math.max(0, wallArea - deductions);\r\n        const packagesNeeded = Math.ceil((netArea \/ COVERAGE_PER_PACKAGE) * SAFETY_MARGIN);\r\n        const totalPrice = packagesNeeded * PRICE_PER_PACKAGE;\r\n        const yearlySaving = Math.round(netArea * ENERGY_SAVING_PER_SQM);\r\n        const roi = totalPrice > 0 ? totalPrice \/ yearlySaving : 0;\r\n\r\n        state.results = {\r\n            netArea: Math.round(netArea * 10) \/ 10,\r\n            packagesNeeded: packagesNeeded,\r\n            totalPrice: totalPrice,\r\n            yearlySaving: yearlySaving,\r\n            roi: Math.round(roi * 10) \/ 10\r\n        };\r\n    }\r\n\r\n    function renderProgress() {\r\n        const progressValue = (state.step \/ 4) * 100;\r\n        document.getElementById('progressBarFill').style.width = progressValue + '%';\r\n        document.getElementById('progressText').textContent = `Schritt ${state.step} von 4`;\r\n\r\n        const desktopSteps = document.getElementById('desktopProgressSteps');\r\n        desktopSteps.innerHTML = '';\r\n        \r\n        for (let i = 1; i <= 4; i++) {\r\n            const wrapper = document.createElement('div');\r\n            wrapper.className = 'calculator-progress-step-wrapper';\r\n\r\n            const circle = document.createElement('div');\r\n            circle.className = 'calculator-progress-step-circle';\r\n            \r\n            if (i < state.step) {\r\n                circle.classList.add('completed');\r\n                circle.textContent = '\u2713';\r\n            } else if (i === state.step) {\r\n                circle.classList.add('active');\r\n                circle.textContent = i;\r\n            } else {\r\n                circle.classList.add('inactive');\r\n                circle.textContent = i;\r\n            }\r\n            wrapper.appendChild(circle);\r\n\r\n            if (i < 4) {\r\n                const connector = document.createElement('div');\r\n                connector.className = 'calculator-progress-step-connector';\r\n                connector.classList.add(i < state.step ? 'active' : 'inactive');\r\n                wrapper.appendChild(connector);\r\n            }\r\n            desktopSteps.appendChild(wrapper);\r\n        }\r\n    }\r\n\r\n    \/\/ --- HUBSPOT SEND FUNCTION ---\r\n    function sendToHubSpot() {\r\n        const url = `https:\/\/api.hsforms.com\/submissions\/v3\/integration\/submit\/${CONFIG.hubspotPortalId}\/${CONFIG.hubspotFormId}`;\r\n        \r\n        const data = {\r\n            fields: [\r\n                { name: \"email\", value: state.email },\r\n                { name: \"calculator_area\", value: state.results.netArea.toString() },\r\n                { name: \"calculator_needed_kg\", value: state.results.packagesNeeded.toString() },\r\n                { name: \"estimated_savings\", value: state.results.yearlySaving.toString() }\r\n            ],\r\n            context: {\r\n                pageUri: window.location.href,\r\n                pageName: document.title\r\n            }\r\n        };\r\n\r\n        console.log(\"\ud83d\udce4 Sending to HubSpot:\", data);\r\n\r\n        \/\/ Fetch iste\u011fi\r\n        fetch(url, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json'\r\n            },\r\n            body: JSON.stringify(data)\r\n        })\r\n        .then(response => {\r\n            if (!response.ok) throw new Error('Network response was not ok');\r\n            return response.json();\r\n        })\r\n        .then(data => {\r\n            console.log('\u2705 HubSpot Success:', data);\r\n        })\r\n        .catch((error) => {\r\n            console.error('\u274c HubSpot Error:', error);\r\n            \/\/ Hata olsa bile kullan\u0131c\u0131y\u0131 kilitlememek i\u00e7in ak\u0131\u015f devam eder\r\n        });\r\n    }\r\n\r\n    \/\/ --- 4. STEP RENDERERS ---\r\n    function renderStep1() {\r\n        const content = document.getElementById('calculatorMainContent');\r\n        content.innerHTML = `\r\n            <div class=\"calculator-step-content-wrapper\">\r\n                <div><h1 class=\"calculator-step-heading\">Raum definieren<\/h1><p class=\"calculator-step-description\">Geben Sie die Ma\u00dfe Ihres Zimmers ein.<\/p><\/div>\r\n                <div class=\"calculator-input-grid\">\r\n                    <div class=\"calculator-form-group\"><label class=\"calculator-form-label\">L\u00e4nge (m)<\/label><input class=\"calculator-input-field\" id=\"length\" type=\"number\" placeholder=\"z.B. 5\" value=\"${state.length}\" min=\"0\" step=\"0.1\" \/><\/div>\r\n                    <div class=\"calculator-form-group\"><label class=\"calculator-form-label\">Breite (m)<\/label><input class=\"calculator-input-field\" id=\"width\" type=\"number\" placeholder=\"z.B. 4\" value=\"${state.width}\" min=\"0\" step=\"0.1\" \/><\/div>\r\n                    <div class=\"calculator-form-group\"><label class=\"calculator-form-label\">H\u00f6he (m)<\/label><input class=\"calculator-input-field\" id=\"height\" type=\"number\" placeholder=\"z.B. 2.5\" value=\"${state.height}\" min=\"0\" step=\"0.1\" \/><\/div>\r\n                <\/div>\r\n                <div class=\"calculator-switch-container\"><label class=\"calculator-switch-label\">Decke mit isolieren?<\/label><input class=\"calculator-switch-input\" id=\"ceiling\" type=\"checkbox\" ${state.includeCeiling ? 'checked' : ''} \/><\/div>\r\n                <div class=\"calculator-button-actions-desktop\"><button class=\"elementor-widget-html calculator-button-primary\" id=\"step1NextDesktop\" ${!state.length || !state.width || !state.height ? 'disabled' : ''}>Weiter<\/button><\/div>\r\n            <\/div>\r\n        `;\r\n        document.getElementById('length').addEventListener('input', (e) => { state.length = e.target.value; updateStep1Buttons(); });\r\n        document.getElementById('width').addEventListener('input', (e) => { state.width = e.target.value; updateStep1Buttons(); });\r\n        document.getElementById('height').addEventListener('input', (e) => { state.height = e.target.value; updateStep1Buttons(); });\r\n        document.getElementById('ceiling').addEventListener('change', (e) => { state.includeCeiling = e.target.checked; });\r\n        const btn = document.getElementById('step1NextDesktop');\r\n        if(btn) btn.addEventListener('click', handleStep1Next);\r\n        renderMobileFooter();\r\n    }\r\n\r\n    function updateStep1Buttons() {\r\n        const isValid = state.length && state.width && state.height;\r\n        const desktopBtn = document.getElementById('step1NextDesktop');\r\n        const mobileBtn = document.getElementById('step1NextMobile');\r\n        if (desktopBtn) desktopBtn.disabled = !isValid;\r\n        if (mobileBtn) mobileBtn.disabled = !isValid;\r\n    }\r\n\r\n    function renderStep2() {\r\n        const content = document.getElementById('calculatorMainContent');\r\n        const totalDeduction = state.doors * DOOR_DEDUCTION + state.windows * WINDOW_DEDUCTION;\r\n        content.innerHTML = `\r\n            <div class=\"calculator-step-content-wrapper\">\r\n                <div><h1 class=\"calculator-step-heading\">Fenster & T\u00fcren<\/h1><p class=\"calculator-step-description\">Diese Fl\u00e4chen werden abgezogen.<\/p><\/div>\r\n                <div>\r\n                    <div class=\"calculator-info-card\">\r\n                        <div class=\"calculator-info-card-content\">\r\n                            <div class=\"calculator-info-card-left\"><div class=\"calculator-info-card-icon\">\ud83d\udeaa<\/div><div><p class=\"calculator-info-card-text-title\">T\u00fcren<\/p><p class=\"calculator-info-card-text-subtitle\">ca. 2 m\u00b2 pro T\u00fcr<\/p><\/div><\/div>\r\n                            <div class=\"calculator-counter-controls\"><button class=\"elementor-widget-html calculator-counter-button\" id=\"doorsDecrement\">-<\/button><span class=\"calculator-counter-value\">${state.doors}<\/span><button class=\"elementor-widget-html calculator-counter-button\" id=\"doorsIncrement\">+<\/button><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"calculator-info-card\">\r\n                        <div class=\"calculator-info-card-content\">\r\n                            <div class=\"calculator-info-card-left\"><div class=\"calculator-info-card-icon\">\ud83e\ude9f<\/div><div><p class=\"calculator-info-card-text-title\">Fenster<\/p><p class=\"calculator-info-card-text-subtitle\">ca. 1,5 m\u00b2 pro Fenster<\/p><\/div><\/div>\r\n                            <div class=\"calculator-counter-controls\"><button class=\"elementor-widget-html calculator-counter-button\" id=\"windowsDecrement\">-<\/button><span class=\"calculator-counter-value\">${state.windows}<\/span><button class=\"elementor-widget-html calculator-counter-button\" id=\"windowsIncrement\">+<\/button><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"calculator-summary-box\"><p class=\"calculator-summary-text\">Abzug gesamt: <span class=\"calculator-summary-value\">${totalDeduction} m\u00b2<\/span><\/p><\/div>\r\n                <div class=\"calculator-button-actions-desktop\"><div class=\"calculator-button-group-row\"><button class=\"elementor-widget-html calculator-button-secondary\" id=\"step2BackDesktop\">Zur\u00fcck<\/button><button class=\"elementor-widget-html calculator-button-primary\" id=\"step2NextDesktop\">Berechnung starten<\/button><\/div><\/div>\r\n            <\/div>\r\n        `;\r\n        document.getElementById('doorsDecrement').addEventListener('click', () => { state.doors = Math.max(0, state.doors - 1); render(); });\r\n        document.getElementById('doorsIncrement').addEventListener('click', () => { state.doors++; render(); });\r\n        document.getElementById('windowsDecrement').addEventListener('click', () => { state.windows = Math.max(0, state.windows - 1); render(); });\r\n        document.getElementById('windowsIncrement').addEventListener('click', () => { state.windows++; render(); });\r\n        document.getElementById('step2BackDesktop').addEventListener('click', () => { state.step = 1; render(); });\r\n        document.getElementById('step2NextDesktop').addEventListener('click', handleStep2Next);\r\n        renderMobileFooter();\r\n    }\r\n\r\n    function renderStep3() {\r\n        const content = document.getElementById('calculatorMainContent');\r\n        if (state.loading) {\r\n            content.innerHTML = `<div class=\"calculator-step-content-wrapper\"><div class=\"calculator-loader-container\"><div class=\"calculator-loader-spinner\"><\/div><p class=\"calculator-loader-text\">Berechnung l\u00e4uft...<\/p><\/div><\/div>`;\r\n            return;\r\n        }\r\n        content.innerHTML = `\r\n            <div class=\"calculator-step-content-wrapper\">\r\n                <div><h1 class=\"calculator-step-heading\">Ihre Berechnung ist fertig!<\/h1><p class=\"calculator-step-description\">Wohin sollen wir Ihre Materialliste, die Anleitung und Ihren <strong style=\"color: var(--primary-color);\">10% Rabattcode<\/strong> senden?<\/p><\/div>\r\n                <div class=\"calculator-form-group\"><label class=\"calculator-form-label\">E-Mail Adresse<\/label><input class=\"calculator-input-field\" id=\"email\" type=\"email\" placeholder=\"ihre@email.de\" value=\"${state.email}\" required \/><\/div>\r\n                <div class=\"calculator-notice-card\"><p class=\"calculator-notice-text\">Sie erhalten sofort Zugang zu Ihren personalisierten Ergebnissen.<\/p><\/div>\r\n                <div class=\"calculator-button-actions-desktop\"><div class=\"calculator-button-group-row\"><button class=\"elementor-widget-html calculator-button-secondary\" id=\"step3BackDesktop\">Zur\u00fcck<\/button><button class=\"elementor-widget-html calculator-button-primary\" id=\"step3NextDesktop\" ${!state.email || !state.email.includes('@') ? 'disabled' : ''}>Ergebnis anzeigen & Code sichern<\/button><\/div><\/div>\r\n            <\/div>\r\n        `;\r\n        document.getElementById('email').addEventListener('input', (e) => { state.email = e.target.value; updateStep3Buttons(); });\r\n        document.getElementById('step3BackDesktop').addEventListener('click', () => { state.step = 2; render(); });\r\n        document.getElementById('step3NextDesktop').addEventListener('click', handleStep3Next);\r\n        renderMobileFooter();\r\n    }\r\n\r\n    function updateStep3Buttons() {\r\n        const isValid = state.email && state.email.includes('@');\r\n        const desktopBtn = document.getElementById('step3NextDesktop');\r\n        const mobileBtn = document.getElementById('step3NextMobile');\r\n        if (desktopBtn) desktopBtn.disabled = !isValid;\r\n        if (mobileBtn) mobileBtn.disabled = !isValid;\r\n    }\r\n\r\n    \/\/ --- YEN\u0130LENEN Y\u00d6NLEND\u0130RME FONKS\u0130YONU ---\r\n    function redirectToCart() {\r\n        const targetUrl = `${CONFIG.redirectBaseUrl}?kg=${state.results.packagesNeeded}`;\r\n        window.location.href = targetUrl;\r\n    }\r\n\r\n    function renderStep4() {\r\n        const content = document.getElementById('calculatorMainContent');\r\n        content.innerHTML = `\r\n            <div class=\"calculator-step-content-wrapper\">\r\n                <div><h1 class=\"calculator-step-heading\">Ihr Spar-Bericht<\/h1><\/div>\r\n                <div class=\"calculator-highlight-card\">\r\n                    <div class=\"calculator-highlight-card-content\">\r\n                        <div class=\"calculator-highlight-icon-wrapper\">\ud83d\udcb0<\/div>\r\n                        <div class=\"calculator-highlight-text-section\"><p class=\"calculator-highlight-label\">Gesch\u00e4tzte Ersparnis:<\/p><p class=\"calculator-highlight-amount\">~${state.results.yearlySaving} \u20ac \/ Jahr<\/p><p class=\"calculator-highlight-description\">Investition amortisiert sich in ca. <strong class=\"calculator-highlight-strong\">${state.results.roi} Jahren<\/strong>.<\/p><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"calculator-result-card\">\r\n                    <div class=\"calculator-result-card-section\"><p class=\"calculator-result-card-label\">Zu deckende Fl\u00e4che: ${state.results.netArea} m\u00b2<\/p><p class=\"calculator-result-card-value\">Ihr Bedarf: ${state.results.packagesNeeded} Kg<\/p><p class=\"calculator-result-card-note\">Inkl. 10% Reserve.<\/p><\/div>\r\n                    <hr class=\"calculator-result-card-divider\">\r\n                    <div class=\"calculator-result-card-section\"><p class=\"calculator-result-card-total\">Gesamtpreis: ${state.results.totalPrice},00 \u20ac<\/p><\/div>\r\n                <\/div>\r\n                <div class=\"calculator-notice-card\"><p class=\"calculator-notice-text\">Ihr 10% Rabattcode wurde an <strong class=\"calculator-notice-email\">${state.email}<\/strong> gesendet!<\/p><\/div>\r\n                <div class=\"calculator-button-actions-desktop\">\r\n                    <div class=\"calculator-button-group-row\">\r\n                        <button class=\"elementor-widget-html calculator-button-primary\" id=\"addToCartDesktop\">In den Warenkorb (${state.results.totalPrice}\u20ac)<\/button>\r\n                        <button class=\"elementor-widget-html calculator-button-secondary\" id=\"orderSampleDesktop\">Muster bestellen (5\u20ac)<\/button>\r\n                    <\/div>\r\n                    <button class=\"elementor-widget-html calculator-button-secondary-ghost\" id=\"resetDesktop\">Neue Berechnung starten<\/button>\r\n                    <button class=\"elementor-widget-html calculator-button-secondary-ghost\" id=\"viewAllColorsDesktop\">Alle Farben anzeigen<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n        \r\n        \/\/ --- DESKTOP BUTTON EVENTS ---\r\n        document.getElementById('addToCartDesktop').addEventListener('click', () => {\r\n            trackCalculatorEvent('add_to_cart', { \r\n                'value': state.results.totalPrice, \r\n                'currency': 'EUR',\r\n                'quantity': state.results.packagesNeeded,\r\n                'item_name': 'Belka Wandbeschichtung'\r\n            });\r\n            \r\n            \/\/ Y\u00d6NLEND\u0130RME BURADA YAPILIYOR\r\n            redirectToCart();\r\n        });\r\n\r\n        document.getElementById('orderSampleDesktop').addEventListener('click', () => {\r\n            trackCalculatorEvent('purchase_sample', { \r\n                'value': 8.00, \r\n                'currency': 'EUR',\r\n                'item_name': 'Muster (Sample)' \r\n            });\r\n            window.location.href = 'https:\/\/gobelka.com\/de\/muster-bestellen';\r\n        });\r\n\r\n        document.getElementById('resetDesktop').addEventListener('click', resetCalculator);\r\n        document.getElementById('viewAllColorsDesktop').addEventListener('click', () => {\r\n            window.location.href = 'https:\/\/gobelka.com\/de\/belka-alle-produkte';\r\n        });\r\n        renderMobileFooter();\r\n    }\r\n\r\n    function renderMobileFooter() {\r\n        const footer = document.getElementById('mobileFooterContent');\r\n        if (state.step === 1) {\r\n            footer.innerHTML = `<button class=\"elementor-widget-html calculator-button-primary\" id=\"step1NextMobile\" ${!state.length || !state.width || !state.height ? 'disabled' : ''}>Weiter<\/button>`;\r\n            const btn = document.getElementById('step1NextMobile');\r\n            if(btn) btn.addEventListener('click', handleStep1Next);\r\n        } else if (state.step === 2) {\r\n            footer.innerHTML = `<button class=\"elementor-widget-html calculator-button-primary\" id=\"step2NextMobile\">Berechnung starten<\/button>`;\r\n            document.getElementById('step2NextMobile').addEventListener('click', handleStep2Next);\r\n        } else if (state.step === 3 && !state.loading) {\r\n            footer.innerHTML = `<button class=\"elementor-widget-html calculator-button-primary\" id=\"step3NextMobile\" ${!state.email || !state.email.includes('@') ? 'disabled' : ''}>Ergebnis anzeigen & Code sichern<\/button>`;\r\n            const btn = document.getElementById('step3NextMobile');\r\n            if(btn) btn.addEventListener('click', handleStep3Next);\r\n        } else if (state.step === 4) {\r\n            footer.innerHTML = `\r\n                <button class=\"elementor-widget-html calculator-button-primary\" id=\"addToCartMobile\">In den Warenkorb (${state.results.totalPrice}\u20ac)<\/button>\r\n                <button class=\"elementor-widget-html calculator-button-secondary\" id=\"orderSampleMobile\">Muster bestellen (8\u20ac)<\/button>\r\n                <button class=\"elementor-widget-html calculator-button-secondary-ghost\" id=\"resetMobile\">Neue Berechnung<\/button>\r\n                <button class=\"elementor-widget-html calculator-button-secondary-ghost\" id=\"viewAllColorsMobile\">Alle Farben anzeigen<\/button>\r\n            `;\r\n            \r\n            \/\/ --- MOBILE BUTTON EVENTS ---\r\n            document.getElementById('addToCartMobile').addEventListener('click', () => {\r\n                trackCalculatorEvent('add_to_cart', { \r\n                    'value': state.results.totalPrice, \r\n                    'currency': 'EUR',\r\n                    'quantity': state.results.packagesNeeded \r\n                });\r\n                \r\n                \/\/ Y\u00d6NLEND\u0130RME BURADA YAPILIYOR\r\n                redirectToCart();\r\n            });\r\n            \r\n            document.getElementById('orderSampleMobile').addEventListener('click', () => {\r\n                trackCalculatorEvent('purchase_sample', { 'value': 8.00, 'currency': 'EUR' });\r\n                window.location.href = 'https:\/\/gobelka.com\/de\/muster-bestellen';\r\n            });\r\n\r\n            document.getElementById('resetMobile').addEventListener('click', resetCalculator);\r\n            \r\n            document.getElementById('viewAllColorsMobile').addEventListener('click', () => {\r\n                window.location.href = 'https:\/\/gobelka.com\/de\/belka-alle-produkte';\r\n            });\r\n        }\r\n    }\r\n\r\n    \/\/ --- 5. HANDLERS ---\r\n    function handleStep1Next() {\r\n        if (parseFloat(state.length) > 0 && parseFloat(state.width) > 0 && parseFloat(state.height) > 0) {\r\n            trackCalculatorEvent('funnel_step_1_complete', { dimensions: `${state.length}x${state.width}x${state.height}` });\r\n            state.step = 2;\r\n            render();\r\n        }\r\n    }\r\n\r\n    function handleStep2Next() {\r\n        trackCalculatorEvent('funnel_step_2_complete', { doors: state.doors, windows: state.windows });\r\n        state.step = 3;\r\n        calculateResults();\r\n        render();\r\n    }\r\n\r\n    function handleStep3Next() {\r\n        if (state.email && state.email.includes('@')) {\r\n            state.loading = true;\r\n            render();\r\n            \r\n            \/\/ HUBSPOT G\u00d6NDER\u0130M\u0130 (API \u00c7a\u011fr\u0131s\u0131)\r\n            sendToHubSpot();\r\n\r\n            setTimeout(() => {\r\n                \/\/ Tracking\r\n                window.dataLayer.push({\r\n                    'event': 'generate_lead',\r\n                    'email': state.email,\r\n                    'value': state.results.totalPrice,\r\n                    'currency': 'EUR',\r\n                    'calculator_data': {\r\n                        'net_area': state.results.netArea,\r\n                        'total_price': state.results.totalPrice,\r\n                        'packages': state.results.packagesNeeded\r\n                    }\r\n                });\r\n                trackCalculatorEvent('funnel_step_3_complete', { method: 'email' });\r\n\r\n                state.loading = false;\r\n                state.step = 4;\r\n                render();\r\n            }, 1000); \/\/ 1 saniye bekleme efekti\r\n        }\r\n    }\r\n\r\n    function resetCalculator() {\r\n        state = {\r\n            step: 1, loading: false, length: '', width: '', height: '', includeCeiling: false, doors: 1, windows: 1, email: '',\r\n            results: { netArea: 0, packagesNeeded: 0, totalPrice: 0, yearlySaving: 0, roi: 0 }\r\n        };\r\n        render();\r\n    }\r\n\r\n    function render() {\r\n        renderProgress();\r\n        switch(state.step) {\r\n            case 1: renderStep1(); break;\r\n            case 2: renderStep2(); break;\r\n            case 3: renderStep3(); break;\r\n            case 4: renderStep4(); break;\r\n        }\r\n    }\r\n\r\n    document.addEventListener('DOMContentLoaded', () => { render(); });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8c5ea6 elementor-widget elementor-widget-html\" data-id=\"f8c5ea6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n    <style>\r\n        \/* --- FOOTER ST\u0130L\u0130 --- *\/\r\n        .funnel-footer {\r\n            background-color: #f9fafb;\r\n            border-top: 1px solid #e5e7eb;\r\n            padding: 10px 5px 40px;\r\n            \/* KR\u0130T\u0130K: Mobildeki sat\u0131n al butonu alt\u0131nda kalmas\u0131n diye bo\u015fluk *\/\r\n           \r\n            font-family: 'Inter', sans-serif;\r\n            color: #4b5563;\r\n        }\r\n.countdown-bar,.bf-compact-banner{\r\n    display: none;\r\n}\r\n        .footer-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            display: grid;\r\n            grid-template-columns: 1fr; \/* Mobil: Tek kolon *\/\r\n            gap: 10px;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* Footer Ba\u015fl\u0131klar\u0131 *\/\r\n        .footer-heading {\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            margin-bottom: 15px;\r\n            color: #111827;\r\n        }\r\n\r\n        \/* G\u00dcVENL\u0130K & BADGES *\/\r\n        .badge-row {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 20px;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        \/* SVG Rozet Placeholderlar\u0131 (Resim yerine) *\/\r\n        .trust-badge {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            border: 1px solid #d1d5db;\r\n            padding: 8px 12px;\r\n            border-radius: 6px;\r\n            background: white;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* L\u0130NKLER *\/\r\n        .link-list {\r\n            list-style: none;\r\n            padding: 0;\r\n            margin: 0;\r\n        }\r\n        .link-list li { margin-bottom: 10px; }\r\n        .link-list a {\r\n            text-decoration: none;\r\n            color: #6b7280;\r\n            font-size: 14px;\r\n            transition: color 0.2s;\r\n        }\r\n        .link-list a:hover { color: #059669; text-decoration: underline; }\r\n\r\n        \/* \u00d6DEME \u0130KONLARI *\/\r\n        .payment-icons {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            font-size: 24px;\r\n            color: #374151;\r\n        }\r\n\r\n        \/* COPYRIGHT *\/\r\n        .copyright {\r\n            margin-top: 50px;\r\n            padding-top: 20px;\r\n            border-top: 1px solid #e5e7eb;\r\n            font-size: 12px;\r\n            color: #9ca3af;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* --- TABLET & DESKTOP AYARLARI --- *\/\r\n        @media (min-width: 768px) {\r\n            .footer-container {\r\n                grid-template-columns: repeat(3, 1fr); \/* 3 Kolon *\/\r\n                text-align: left;\r\n            }\r\n            .badge-row, .payment-icons {\r\n                justify-content: flex-start;\r\n            }\r\n            .funnel-footer {\r\n                padding-bottom: 40px; \/* Desktopta buton olmad\u0131\u011f\u0131 i\u00e7in normal bo\u015fluk *\/\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"funnel-footer\">\r\n        <div class=\"footer-container\">\r\n            \r\n            <!-- KOLON 1: G\u00dcVEN -->\r\n            <div class=\"footer-col\">\r\n                <div class=\"footer-heading\">Qualit\u00e4t & Sicherheit<\/div>\r\n                <div class=\"badge-row\">\r\n                    <!-- MPA RNW Placeholder SVG -->\r\n                    <div class=\"trust-badge\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#059669\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n                        MPA RNW\r\n                    <\/div>\r\n                    <!-- Trustpilot Placeholder SVG -->\r\n                    <div class=\"trust-badge\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"#059669\" stroke=\"none\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n                        4.8\/5.0\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- KOLON 2: YASAL -->\r\n            <div class=\"footer-col\">\r\n                <div class=\"footer-heading\">Rechtliches<\/div>\r\n                <ul class=\"link-list\">\r\n                    <li><a href=\"\/de\/impressum\" target=\"_blank\">Impressum<\/a><\/li>\r\n                    <li><a href=\"\/de\/datenschutz\" target=\"_blank\">Datenschutzerkl\u00e4rung<\/a><\/li>\r\n                    <li><a href=\"\/de\/agb\" target=\"_blank\">AGB<\/a><\/li>\r\n                   \r\n                <\/ul>\r\n            <\/div>\r\n\r\n            <!-- KOLON 3: \u00d6DEME -->\r\n            <div class=\"footer-col\">\r\n                <div class=\"footer-heading\">Sicher Bezahlen<\/div>\r\n\r\n                <p style=\"font-size:12px; color:#999; margin-top:10px;\">SSL Verschl\u00fcsselte \u00dcbertragung<\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- COPYRIGHT -->\r\n        <div class=\"copyright\">\r\n            &copy; <span id=\"currentYear\"><\/span> BELKA Tapete. Alle Rechte vorbehalten. Made in Germany.\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.getElementById(\"currentYear\").textContent = new Date().getFullYear();\r\n\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    \/\/ Bu fonksiyon butonu bulup gizler\r\n    function hideRevisitBtn() {\r\n        var btnWrapper = document.querySelector(\".cky-btn-revisit-wrapper\");\r\n        if (btnWrapper) {\r\n            btnWrapper.style.display = \"none\";\r\n            btnWrapper.style.visibility = \"hidden\";\r\n            btnWrapper.style.opacity = \"0\";\r\n            btnWrapper.style.pointerEvents = \"none\";\r\n        }\r\n    }\r\n\r\n    \/\/ Sayfa y\u00fcklenince bir kere \u00e7al\u0131\u015ft\u0131r\r\n    hideRevisitBtn();\r\n\r\n    \/\/ CookieYes sonradan DOM'a ekledi\u011finde de yakalamak i\u00e7in g\u00f6zlemci\r\n    var observer = new MutationObserver(function () {\r\n        hideRevisitBtn();\r\n    });\r\n\r\n    observer.observe(document.body, { childList: true, subtree: true });\r\n});\r\n\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Start Rechner Muster (8\u20ac) Jetzt Kaufen \ud83c\udfe0 Startseite \ud83e\uddee heizkosten-sparen \ud83d\udce6 Test-Paket (Muster) \ud83c\udfa8 Direkt Kaufen \u2190 Zur Hauptseite Schritt<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-46243","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages\/46243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/comments?post=46243"}],"version-history":[{"count":94,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages\/46243\/revisions"}],"predecessor-version":[{"id":48772,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages\/46243\/revisions\/48772"}],"wp:attachment":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/media?parent=46243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}