{"id":201198,"date":"2025-10-24T14:37:51","date_gmt":"2025-10-24T12:37:51","guid":{"rendered":"https:\/\/www.bestfinance.ch\/?page_id=201198"},"modified":"2025-12-14T12:18:39","modified_gmt":"2025-12-14T11:18:39","slug":"nuovocalc","status":"publish","type":"page","link":"https:\/\/www.bestfinance.ch\/it\/newcalc\/","title":{"rendered":"NewCalc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"201198\" class=\"elementor elementor-201198\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26160db e-flex e-con-boxed e-con e-parent\" data-id=\"26160db\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d7a466 elementor-widget elementor-widget-spacer\" data-id=\"8d7a466\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6153cb e-flex e-con-boxed e-con e-parent\" data-id=\"f6153cb\" 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-097bf98 elementor-widget elementor-widget-global elementor-global-202390 elementor-widget-html\" data-id=\"097bf98\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ======================= BEST FINANCE KREDITRECHNER \u2013 SCHWEIZ V2 ======================= -->\n<!-- Kompatibel mit Elementor (HTML Widget) -->\n<!-- FARBSCHEMA: Klassisch Professionell (Navy + Lila) -->\n\n<style>\n\/* ===== FONTS ===== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800;900&display=swap');\n\n\/* ===== VARIABLEN - KLASSISCH PROFESSIONELL ===== *\/\n.bf-calculator-wrapper {\n  --bf-primary: #667eea;\n  --bf-primary-dark: #1e3c72;\n  --bf-primary-light: #764ba2;\n  --bf-accent: #2a5298;\n  --bf-accent-hover: #667eea;\n  --bf-dark: #1e3c72;\n  --bf-dark-light: #2a5298;\n  --bf-text: #1e3c72;\n  --bf-bg-light: #f4f7fb;\n  --bf-bg-card: #ffffff;\n  --bf-border: #d3dde8;\n  --bf-gray: #6b7a90;\n  --bf-gray-light: #9ba6b8;\n  \n  position: relative;\n  max-width: 900px;\n  margin: 0 auto;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  padding-top: 0;\n  overflow: visible;\n}\n\n\/* ===== RESET & BASE ===== *\/\n.bf-calculator-wrapper * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.bf-calculator-wrapper {\n  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  max-width: 1100px;\n  margin: 0 auto;\n  position: relative;\n  padding-top: 40px;\n}\n\n\/* ===== BADGE ===== *\/\n.bf-badge {\n  position: absolute;\n  top: 0;\n  right: 30px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: #fff;\n  padding: 10px 14px;\n  border-radius: 0 0 10px 10px;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1.3;\n  text-align: center;\n  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);\n  z-index: 100;\n  white-space: nowrap;\n}\n\n.bf-badge strong {\n  font-size: 18px;\n  display: block;\n  margin: 2px 0;\n  color: #fff;\n  text-shadow: 0 1px 2px rgba(0,0,0,0.2);\n}\n\n\/* ===== MAIN CALCULATOR ===== *\/\n.bf-calculator {\n  background: var(--bf-bg-light);\n  border-radius: 16px;\n  overflow: visible;\n  position: relative;\n}\n\n\/* ===== MAIN LAYOUT ===== *\/\n.bf-main {\n  display: grid;\n  grid-template-columns: 1fr 380px;\n  gap: 0;\n  min-height: 520px;\n  overflow: visible;\n}\n\n\/* ===== LEFT PANEL (INPUTS) ===== *\/\n.bf-inputs {\n  padding: 40px 35px;\n  background: var(--bf-bg-light);\n  border-radius: 16px 0 0 0;\n  overflow: visible;\n}\n\n\/* ===== RIGHT PANEL (RESULT) ===== *\/\n.bf-result {\n  background: linear-gradient(180deg, #f8fbff 0%, #edf3fa 100%);\n  border-left: 1px solid var(--bf-border);\n  padding: 35px 25px;\n  display: flex;\n  flex-direction: column;\n  border-radius: 0 16px 0 0;\n  overflow: visible;\n}\n\n\/* ===== INPUT GROUP ===== *\/\n.bf-input-group {\n  margin-bottom: 28px;\n}\n\n.bf-label-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.bf-label {\n  font-size: 17px;\n  font-weight: 700;\n  color: var(--bf-dark);\n  letter-spacing: 0.2px;\n}\n\n\/* ===== INLINE DROPDOWN ===== *\/\n.bf-dropdown-wrap.bf-dropdown-inline {\n  width: 220px;\n  margin-bottom: 0;\n}\n\n.bf-dropdown-wrap.bf-dropdown-inline .bf-dropdown {\n  padding: 10px 45px 10px 85px;\n  font-size: 18px;\n  text-align: left;\n  text-align-last: left;\n  padding-right: 45px;\n  padding-left: 15px !important;\n}\n\n.bf-dropdown-wrap.bf-dropdown-inline::after {\n  right: 15px;\n}\n\n\/* ===== DROPDOWN + INPUT ===== *\/\n.bf-dropdown-wrap {\n  position: relative;\n}\n\n.bf-dropdown {\n  width: 100%;\n  padding: 14px 50px 14px 20px;\n  font-family: inherit;\n  font-size: 18px;\n  font-weight: 800;\n  color: var(--bf-dark);\n  background: #fff;\n  border: 2px solid var(--bf-border);\n  border-radius: 8px;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.bf-dropdown:hover,\n.bf-dropdown:focus {\n  border-color: var(--bf-primary);\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);\n  outline: none;\n}\n\n.bf-dropdown-wrap::after {\n  content: '';\n  position: absolute;\n  right: 18px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 8px solid var(--bf-dark);\n  pointer-events: none;\n}\n\n\/* ===== SLIDER ===== *\/\n.bf-slider-container {\n  position: relative;\n  padding: 8px 0;\n}\n\n.bf-slider {\n  width: 100%;\n  height: 8px;\n  border-radius: 10px;\n  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n  appearance: none;\n  outline: none;\n  cursor: pointer;\n}\n\n.bf-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: #fff;\n  border: 4px solid #764ba2;\n  box-shadow: 0 2px 10px rgba(118, 75, 162, 0.4);\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n}\n\n.bf-slider::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.5);\n}\n\n.bf-slider::-moz-range-thumb {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: #fff;\n  border: 4px solid #764ba2;\n  box-shadow: 0 2px 10px rgba(118, 75, 162, 0.4);\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n}\n\n.bf-slider::-moz-range-thumb:hover {\n  transform: scale(1.1);\n}\n\n.bf-slider-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 6px;\n  font-size: 12px;\n  color: var(--bf-gray);\n  font-weight: 600;\n}\n\n\/* ===== TOGGLE SECTION ===== *\/\n.bf-toggle-section {\n  margin-top: 10px;\n  overflow: visible;\n}\n\n.bf-toggle-group {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  gap: 15px;\n  overflow: visible;\n}\n\n.bf-toggle-label-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.bf-toggle-label {\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--bf-dark);\n}\n\n.bf-toggle-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.bf-toggle-buttons {\n  display: flex;\n  gap: 0;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 2px solid var(--bf-border);\n  flex-shrink: 0;\n}\n\n.bf-toggle-btn {\n  padding: 10px 32px;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 700;\n  border: none;\n  background: #fff;\n  color: var(--bf-gray);\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 70px;\n}\n\n.bf-toggle-btn:first-child {\n  border-right: 1px solid var(--bf-border);\n}\n\n.bf-toggle-btn.active {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: #fff;\n}\n\n.bf-toggle-btn:hover:not(.active) {\n  background: #f0f3ff;\n  color: var(--bf-dark);\n}\n\n\/* ===== ABSICHERUNG AUSWAHL ===== *\/\n.bf-insurance-selection {\n  margin-top: 12px;\n  padding: 16px;\n  background: #fff;\n  border: 2px solid #764ba2;\n  border-radius: 8px;\n  display: none;\n}\n\n.bf-insurance-selection.active {\n  display: block;\n  animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.bf-insurance-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--bf-dark);\n  margin-bottom: 12px;\n}\n\n.bf-insurance-options {\n  display: flex;\n  gap: 12px;\n}\n\n.bf-insurance-option {\n  flex: 1;\n  position: relative;\n}\n\n.bf-insurance-option input[type=\"radio\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.bf-insurance-option label {\n  display: block;\n  padding: 12px 16px;\n  background: #fff;\n  border: 2px solid var(--bf-border);\n  border-radius: 8px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  font-weight: 700;\n  color: var(--bf-gray);\n  font-size: 14px;\n}\n\n.bf-insurance-option input[type=\"radio\"]:checked + label {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-color: #764ba2;\n  color: #fff;\n}\n\n.bf-insurance-option label:hover {\n  border-color: var(--bf-primary);\n}\n\n.bf-insurance-amount-label {\n  display: block;\n  font-size: 18px;\n  font-weight: 900;\n  margin-bottom: 4px;\n}\n\n.bf-insurance-sublabel {\n  display: block;\n  font-size: 11px;\n  opacity: 0.8;\n}\n\n\/* ===== INFO ICON ===== *\/\n.bf-info-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.bf-info-icon {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: var(--bf-dark);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 800;\n  font-style: normal;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform 0.15s, background 0.15s;\n  flex-shrink: 0;\n}\n\n.bf-info-icon:hover {\n  background: var(--bf-primary);\n  transform: scale(1.1);\n}\n\n.bf-tooltip {\n  position: absolute;\n  left: calc(100% + 12px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.95);\n  background: var(--bf-dark);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.5;\n  padding: 14px 16px;\n  border-radius: 10px;\n  width: 300px;\n  box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s ease;\n  z-index: 1000;\n  pointer-events: none;\n}\n\n.bf-tooltip::before {\n  content: '';\n  position: absolute;\n  left: -6px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 7px solid transparent;\n  border-bottom: 7px solid transparent;\n  border-right: 7px solid var(--bf-dark);\n}\n\n.bf-info-wrap:hover .bf-tooltip {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(-50%) scale(1);\n  pointer-events: auto;\n}\n\n.bf-tooltip.tooltip-left {\n  left: auto;\n  right: calc(100% + 12px);\n}\n\n.bf-tooltip.tooltip-left::before {\n  left: auto;\n  right: -6px;\n  border-right: none;\n  border-left: 7px solid var(--bf-dark);\n}\n\n\/* ===== RESULT CARD ===== *\/\n.bf-result-header {\n  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n  border-radius: 12px;\n  padding: 20px 15px 18px 15px;\n  box-shadow: 0 4px 20px rgba(30, 60, 114, 0.4);\n  margin: 0 -10px 0 -10px;\n  position: relative;\n}\n\n.bf-result-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 15px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  text-align: left;\n  padding-right: 120px;\n}\n\n.bf-result-title span {\n  font-size: 12px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.7);\n}\n\n.bf-rate-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0;\n}\n\n.bf-rate-col {\n  text-align: center;\n  padding: 0 10px;\n}\n\n.bf-rate-col:first-child {\n  border-right: 1px solid rgba(255,255,255,0.2);\n}\n\n.bf-rate-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.7);\n  margin-bottom: 4px;\n}\n\n.bf-rate-percent {\n  font-size: 13px;\n  font-weight: 700;\n  color: #cca0fa;\n  margin-bottom: 8px;\n  text-shadow: 0 0 20px rgba(118, 75, 162, 0.8);\n}\n\n.bf-rate-amount {\n  font-size: 32px;\n  font-weight: 900;\n  color: #fff;\n  line-height: 1;\n  margin-bottom: 12px;\n}\n\n.bf-rate-insurance {\n  font-size: 11px;\n  color: rgba(255,255,255,0.7);\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.bf-rate-insurance-value {\n  display: block;\n  font-weight: 800;\n  color: #fff;\n  font-size: 14px;\n  margin: 4px 0;\n}\n\n.bf-insurance-details {\n  display: block;\n  margin-top: 6px;\n  font-size: 10px;\n  color: rgba(255,255,255,0.8);\n  line-height: 1.4;\n  font-weight: 500;\n}\n\n.bf-insurance-amount {\n  display: block;\n  font-weight: 800;\n  color: #fff;\n  font-size: 13px;\n  margin-top: 3px;\n}\n\n\/* ===== ZINS INFO INSIDE BOX ===== *\/\n.bf-zins-info-inside {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  margin-top: 18px;\n  padding-top: 15px;\n  border-top: 1px solid rgba(255,255,255,0.2);\n}\n\n.bf-zins-info-inside .bf-zins-text {\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.9);\n}\n\n.bf-zins-info-inside .bf-info-icon {\n  background: rgba(255,255,255,0.2);\n  color: #fff;\n}\n\n.bf-zins-info-inside .bf-info-icon:hover {\n  background: rgba(118, 75, 162, 0.5);\n}\n\n.bf-zins-info-inside .bf-tooltip {\n  left: auto;\n  right: 0;\n  top: calc(100% + 10px);\n  transform: scale(0.95);\n}\n\n.bf-zins-info-inside .bf-tooltip::before {\n  left: auto;\n  right: 20px;\n  top: -6px;\n  transform: none;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-top: none;\n  border-bottom: 7px solid var(--bf-dark);\n}\n\n.bf-zins-info-inside .bf-info-wrap:hover .bf-tooltip {\n  transform: scale(1);\n}\n\n\/* ===== ZINS INFO ===== *\/\n.bf-zins-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 15px 0;\n  border-bottom: 1px solid var(--bf-border);\n  margin-bottom: 20px;\n  position: relative;\n  overflow: visible;\n}\n\n.bf-zins-text {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--bf-text);\n}\n\n.bf-zins-info .bf-tooltip {\n  left: auto;\n  right: calc(100% + 12px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.95);\n}\n\n.bf-zins-info .bf-tooltip::before {\n  left: auto;\n  right: -6px;\n  border-right: none;\n  border-left: 7px solid var(--bf-dark);\n}\n\n.bf-zins-info .bf-info-wrap:hover .bf-tooltip {\n  transform: translateY(-50%) scale(1);\n}\n\n\/* ===== CTA BUTTON ===== *\/\n.bf-cta {\n  width: 100%;\n  padding: 16px 30px;\n  font-family: inherit;\n  font-size: 17px;\n  font-weight: 800;\n  color: #fff;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border: none;\n  border-radius: 30px;\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);\n  margin-top: 25px;\n}\n\n.bf-cta:hover {\n  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6);\n}\n\n.bf-cta:active {\n  transform: translateY(0);\n}\n\n\/* ===== DISCLAIMER ===== *\/\n.bf-disclaimer {\n  padding: 20px 35px;\n  background: #fff;\n  border-top: 1px solid var(--bf-border);\n  border-radius: 0 0 16px 16px;\n  font-size: 11px;\n  color: var(--bf-gray);\n  line-height: 1.6;\n}\n\n.bf-disclaimer p {\n  margin-bottom: 8px;\n}\n\n.bf-disclaimer p:last-child {\n  margin-bottom: 0;\n}\n\n\/* ===== MOBILE RESPONSIVE ===== *\/\n@media (max-width: 900px) {\n  .bf-calculator-wrapper { padding-top: 20px; overflow: visible; }\n  .bf-calculator { overflow: visible; }\n  .bf-main { grid-template-columns: 1fr; overflow: visible; }\n  .bf-badge { position: absolute; right: 10px; top: 10px; border-radius: 8px; padding: 6px 10px; font-size: 9px; line-height: 1.2; }\n  .bf-badge strong { font-size: 13px; }\n  .bf-result { border-left: none; border-top: 1px solid var(--bf-border); order: -1; border-radius: 0; padding: 15px 15px 20px 15px; position: relative; overflow: visible; }\n  .bf-result-header { padding: 45px 12px 18px 12px; margin: 0 -15px 0 -15px; border-radius: 0; overflow: visible; }\n  .bf-result-title { padding-right: 0; text-align: center; font-size: 14px; }\n  .bf-inputs { padding: 15px 20px; border-radius: 0; overflow: visible; }\n  .bf-toggle-section, .bf-toggle-group { overflow: visible; }\n  .bf-dropdown-wrap.bf-dropdown-inline { width: 180px; }\n  .bf-dropdown-wrap.bf-dropdown-inline .bf-dropdown { padding: 8px 45px 8px 12px; font-size: 15px; text-align: left; text-align-last: left; }\n  .bf-dropdown-wrap.bf-dropdown-inline::after { right: 12px; }\n  .bf-disclaimer { padding: 15px 20px; font-size: 12px; }\n  .bf-toggle-group { flex-wrap: wrap; }\n  .bf-rate-amount { font-size: 28px; }\n  .bf-rate-col { padding: 0 8px; }\n  .bf-tooltip, .bf-zins-info .bf-tooltip, .bf-zins-info-inside .bf-tooltip { left: auto !important; right: 0 !important; top: calc(100% + 10px) !important; bottom: auto !important; transform: scale(0.95) !important; width: 280px !important; max-width: calc(100vw - 40px) !important; z-index: 9999 !important; position: absolute !important; }\n  .bf-tooltip::before, .bf-zins-info .bf-tooltip::before, .bf-zins-info-inside .bf-tooltip::before { left: auto !important; right: 10px !important; top: -6px !important; bottom: auto !important; transform: none !important; border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; border-top: none !important; border-bottom: 7px solid var(--bf-dark) !important; }\n  .bf-info-wrap:hover .bf-tooltip, .bf-zins-info .bf-info-wrap:hover .bf-tooltip, .bf-zins-info-inside .bf-info-wrap:hover .bf-tooltip { transform: scale(1) !important; }\n  .bf-label { font-size: 16px; }\n  .bf-toggle-label { font-size: 14px; }\n  .bf-rate-label { font-size: 12px; }\n  .bf-rate-percent { font-size: 14px; }\n  .bf-rate-insurance { font-size: 12px; }\n  .bf-insurance-details { font-size: 10px; }\n  .bf-insurance-amount { font-size: 12px; }\n  .bf-zins-info-inside { flex-direction: row !important; gap: 8px; flex-wrap: nowrap; }\n  .bf-zins-info-inside .bf-zins-text { font-size: 13px; white-space: nowrap; }\n  .bf-insurance-options { flex-direction: column; }\n  .bf-insurance-amount-label { font-size: 16px; }\n}\n\n@media (max-width: 600px) {\n  .bf-toggle-group { flex-direction: column; align-items: flex-start; gap: 12px; }\n  .bf-toggle-right { width: 100%; justify-content: space-between; }\n  .bf-toggle-buttons { flex: 1; max-width: 200px; }\n  .bf-toggle-btn { flex: 1; text-align: center; padding: 12px 20px; font-size: 14px; }\n  .bf-badge { font-size: 9px; padding: 6px 10px; }\n  .bf-badge strong { font-size: 13px; }\n  .bf-rate-amount { font-size: 22px; }\n  .bf-rate-col { padding: 0 5px; }\n  .bf-label { font-size: 15px; }\n  .bf-toggle-label { font-size: 13px; }\n  .bf-rate-label { font-size: 11px; }\n  .bf-rate-percent { font-size: 13px; }\n  .bf-rate-insurance { font-size: 11px; }\n  .bf-insurance-details { font-size: 10px; }\n  .bf-insurance-amount { font-size: 12px; }\n  .bf-dropdown-wrap.bf-dropdown-inline { width: 160px; }\n  .bf-dropdown-wrap.bf-dropdown-inline .bf-dropdown { padding: 8px 45px 8px 10px; font-size: 16px; text-align: left; text-align-last: left; }\n  .bf-dropdown-wrap.bf-dropdown-inline::after { right: 12px; }\n  .bf-zins-info-inside { flex-direction: row; gap: 8px; flex-wrap: nowrap; }\n  .bf-zins-info-inside .bf-zins-text { font-size: 12px; }\n  .bf-cta { font-size: 16px; padding: 14px 25px; }\n}\n<\/style>\n\n<div class=\"bf-calculator-wrapper\" id=\"bfCalculatorWrapper\">\n  <div class=\"bf-badge\">\n    Bereits ab <strong>4.9 %<\/strong> Jahreszins<br>f\u00fcr Eigenheimbesitzer!\n  <\/div>\n  \n  <div class=\"bf-calculator\" id=\"bfCalculator\">\n    <div class=\"bf-main\">\n      <div class=\"bf-inputs\">\n        \n        <div class=\"bf-input-group\">\n          <div class=\"bf-label-row\">\n            <label class=\"bf-label\" for=\"bfAmountDropdown\">Wunschkredit<\/label>\n            <div class=\"bf-dropdown-wrap bf-dropdown-inline\">\n              <select class=\"bf-dropdown notranslate\" id=\"bfAmountDropdown\" aria-label=\"Kreditbetrag ausw\u00e4hlen\" translate=\"no\" data-no-translation=\"\" data-trp-gettext=\"\"><\/select>\n            <\/div>\n          <\/div>\n          <div class=\"bf-slider-container\">\n            <input type=\"range\" class=\"bf-slider\" id=\"bfAmountSlider\" min=\"5000\" max=\"300000\" value=\"50000\" aria-label=\"Kreditbetrag Slider\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"bf-input-group\">\n          <div class=\"bf-label-row\">\n            <label class=\"bf-label\" for=\"bfDurationDropdown\">Laufzeit<\/label>\n            <div class=\"bf-dropdown-wrap bf-dropdown-inline\">\n              <select class=\"bf-dropdown\" id=\"bfDurationDropdown\" aria-label=\"Laufzeit ausw\u00e4hlen\"><\/select>\n            <\/div>\n          <\/div>\n          <div class=\"bf-slider-container\">\n            <input type=\"range\" class=\"bf-slider\" id=\"bfDurationSlider\" min=\"12\" max=\"120\" value=\"60\" aria-label=\"Laufzeit Slider\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"bf-toggle-section\">\n          \n          <div class=\"bf-toggle-group\">\n            <div class=\"bf-toggle-label-wrap\">\n              <span class=\"bf-toggle-label\">Besitzen Sie ein Eigenheim?<\/span>\n            <\/div>\n            <div class=\"bf-toggle-right\">\n              <div class=\"bf-toggle-buttons\" id=\"bfEigenheimToggle\">\n                <button type=\"button\" class=\"bf-toggle-btn\" data-value=\"yes\">Ja<\/button>\n                <button type=\"button\" class=\"bf-toggle-btn active\" data-value=\"no\">Nein<\/button>\n              <\/div>\n              <span class=\"bf-info-wrap\">\n                <i class=\"bf-info-icon\" tabindex=\"0\" aria-label=\"Info Eigenheim\">i<\/i>\n                <span class=\"bf-tooltip\">Als Besitzer eines Eigenheims profitieren Sie von attraktiven Zinss\u00e4tzen zwischen 4.9 % und 8.9 %. Entsprechend niedriger sind die Raten. Und das Beste: F\u00fcr die Sch\u00e4tzung des Eigenheims oder zur Erh\u00f6hung eines Schuldbriefs fallen keine weiteren Kosten an. Voraussetzung: Sie sind seit mindestens sechs Monaten Allein- oder Miteigent\u00fcmer eines Eigenheims in der Schweiz (Grundbucheintrag).<\/span>\n              <\/span>\n            <\/div>\n          <\/div>\n          \n          <div class=\"bf-toggle-group\">\n            <div class=\"bf-toggle-label-wrap\">\n              <span class=\"bf-toggle-label\">M\u00f6chten Sie eine Kreditabsicherung?<\/span>\n            <\/div>\n            <div class=\"bf-toggle-right\">\n              <div class=\"bf-toggle-buttons\" id=\"bfAbsicherungToggle\">\n                <button type=\"button\" class=\"bf-toggle-btn\" data-value=\"yes\">Ja<\/button>\n                <button type=\"button\" class=\"bf-toggle-btn active\" data-value=\"no\">Nein<\/button>\n              <\/div>\n              <span class=\"bf-info-wrap\">\n                <i class=\"bf-info-icon\" tabindex=\"0\" aria-label=\"Info Kreditabsicherung\">i<\/i>\n                <span class=\"bf-tooltip\">Damit sichern Sie Ihre Ratenzahlung zus\u00e4tzlich im Falle von Erwerbsunf\u00e4higkeit sowie unverschuldeter Arbeitslosigkeit ab. Die Kreditabsicherung ist optional.<\/span>\n              <\/span>\n            <\/div>\n          <\/div>\n          \n          <div class=\"bf-insurance-selection\" id=\"bfInsuranceSelection\">\n            <div class=\"bf-insurance-title\">W\u00e4hlen Sie Ihre Absicherungsh\u00f6he:<\/div>\n            <div class=\"bf-insurance-options\">\n              <div class=\"bf-insurance-option\">\n                <input type=\"radio\" id=\"insurance1000\" name=\"insuranceAmount\" value=\"1000\" checked>\n                <label for=\"insurance1000\">\n                  <span class=\"bf-insurance-amount-label\">CHF 1'000<\/span>\n                  <span class=\"bf-insurance-sublabel\">monatlich<\/span>\n                <\/label>\n              <\/div>\n              <div class=\"bf-insurance-option\">\n                <input type=\"radio\" id=\"insurance1800\" name=\"insuranceAmount\" value=\"1800\">\n                <label for=\"insurance1800\">\n                  <span class=\"bf-insurance-amount-label\">CHF 1'800<\/span>\n                  <span class=\"bf-insurance-sublabel\">monatlich<\/span>\n                <\/label>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n        <\/div>\n        \n        <button type=\"button\" class=\"bf-cta\" id=\"bfSubmitBtn\">Offerte beantragen<\/button>\n        \n      <\/div>\n      \n      <div class=\"bf-result\">\n        <div class=\"bf-result-header\">\n          <div class=\"bf-result-title\">Ihre monatliche Rate <span>in CHF<\/span><\/div>\n          \n          <div class=\"bf-rate-grid\">\n            <div class=\"bf-rate-col\">\n              <div class=\"bf-rate-label\">Effektiver Jahreszins<\/div>\n              <div class=\"bf-rate-percent\" id=\"bfMinPercent\">von 6.9 %<\/div>\n              <div class=\"bf-rate-amount\" id=\"bfMinRate\">0.00<\/div>\n              <div class=\"bf-rate-insurance\">\n                Kreditabsicherung\/Mt.<br>\n                <span class=\"bf-rate-insurance-value\" id=\"bfMinInsurance\">\u2013<\/span>\n              <\/div>\n            <\/div>\n            \n            <div class=\"bf-rate-col\">\n              <div class=\"bf-rate-label\">Effektiver Jahreszins<\/div>\n              <div class=\"bf-rate-percent\" id=\"bfMaxPercent\">bis 9.95 %<\/div>\n              <div class=\"bf-rate-amount\" id=\"bfMaxRate\">0.00<\/div>\n              <div class=\"bf-rate-insurance\">\n                Kreditabsicherung\/Mt.<br>\n                <span class=\"bf-rate-insurance-value\" id=\"bfMaxInsurance\">\u2013<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"bf-zins-info-inside\">\n            <span class=\"bf-zins-text\">Wie hoch ist mein Zins?<\/span>\n            <span class=\"bf-info-wrap\">\n              <i class=\"bf-info-icon\" tabindex=\"0\" aria-label=\"Info Zinssatz\">i<\/i>\n              <span class=\"bf-tooltip\">Ihren genauen Jahreszins und somit die Zinskosten k\u00f6nnen wir erst aufgrund Ihrer detaillierten Angaben im Kreditantrag ermitteln.<\/span>\n            <\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <div class=\"bf-disclaimer\">\n      <p>Alle Preis-Angaben in CHF. Ihre Gesamtzinskosten liegen zwischen <span id=\"bfCostMin\">CHF 0<\/span> (<span id=\"bfCostMinPercent\">6.9<\/span> % effektiv) und <span id=\"bfCostMax\">CHF 0<\/span> (<span id=\"bfCostMaxPercent\">9.95<\/span> % effektiv), je nach Bonit\u00e4t. Laufzeit: 12 bis 120 Monate.<\/p>\n      <p>Hinweis laut Gesetz: Kreditvergabe ist verboten, falls sie zu \u00dcberschuldung f\u00fchrt (Art. 3 UWG).<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  'use strict';\n  \n  const CONFIG = {\n    EIGENHEIM_MIN_APR: 4.9,\n    EIGENHEIM_MAX_APR: 8.9,\n    STANDARD_MIN_APR: 6.9,\n    STANDARD_MAX_APR: 9.95,\n    \n    \/\/ ===== KORRIGIERT: Beide Spalten zeigen denselben fixen Betrag =====\n    INSURANCE_COSTS: {\n      1000: { min: 66.00, max: 66.00 },\n      1800: { min: 99.00, max: 99.00 }\n    },\n    \n    DEFAULT_AMOUNT: 20000,\n    DEFAULT_DURATION: 84,\n    DEFAULT_INSURANCE_AMOUNT: 1000,\n    MIN_AMOUNT: 5000,\n    MAX_AMOUNT: 300000,\n    DURATIONS: [12, 18, 24, 30, 36, 42, 48, 54, 60, 66, 72, 78, 84, 120]\n  };\n  \n  const elements = {\n    amountDropdown: document.getElementById('bfAmountDropdown'),\n    amountSlider: document.getElementById('bfAmountSlider'),\n    durationDropdown: document.getElementById('bfDurationDropdown'),\n    durationSlider: document.getElementById('bfDurationSlider'),\n    eigenheimToggle: document.getElementById('bfEigenheimToggle'),\n    absicherungToggle: document.getElementById('bfAbsicherungToggle'),\n    insuranceSelection: document.getElementById('bfInsuranceSelection'),\n    insuranceRadios: document.getElementsByName('insuranceAmount'),\n    minPercent: document.getElementById('bfMinPercent'),\n    maxPercent: document.getElementById('bfMaxPercent'),\n    minRate: document.getElementById('bfMinRate'),\n    maxRate: document.getElementById('bfMaxRate'),\n    minInsurance: document.getElementById('bfMinInsurance'),\n    maxInsurance: document.getElementById('bfMaxInsurance'),\n    costMin: document.getElementById('bfCostMin'),\n    costMax: document.getElementById('bfCostMax'),\n    costMinPercent: document.getElementById('bfCostMinPercent'),\n    costMaxPercent: document.getElementById('bfCostMaxPercent'),\n    submitBtn: document.getElementById('bfSubmitBtn')\n  };\n  \n  let state = {\n    amount: CONFIG.DEFAULT_AMOUNT,\n    duration: CONFIG.DEFAULT_DURATION,\n    isEigenheim: false,\n    hasInsurance: false,\n    insuranceAmount: CONFIG.DEFAULT_INSURANCE_AMOUNT\n  };\n  \n  function formatCHF(num) {\n    const parts = num.toFixed(2).split('.');\n    parts[0] = parts[0].replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \"'\");\n    return parts.join('.');\n  }\n  \n  function formatCHFShort(num) {\n    return num.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \"'\");\n  }\n  \n  function roundTo5Cents(value) {\n    return Math.round(value * 20) \/ 20;\n  }\n  \n  function calculateMonthlyRate(principal, months, annualRate) {\n    const monthlyRate = Math.pow(1 + annualRate \/ 100, 1 \/ 12) - 1;\n    if (monthlyRate === 0) return principal \/ months;\n    return roundTo5Cents(principal * monthlyRate \/ (1 - Math.pow(1 \/ (1 + monthlyRate), months)));\n  }\n  \n  function calculateTotalCost(principal, months, annualRate) {\n    const monthly = calculateMonthlyRate(principal, months, annualRate);\n    return Math.max(0, Math.round(monthly * months - principal));\n  }\n  \n  function sliderToAmount(sliderValue) {\n    sliderValue = parseInt(sliderValue);\n    if (sliderValue <= 80000) {\n      return Math.round(sliderValue \/ 1000) * 1000;\n    } else {\n      return Math.round(sliderValue \/ 5000) * 5000;\n    }\n  }\n  \n  function sliderToDuration(sliderValue) {\n    sliderValue = parseInt(sliderValue);\n    let closest = CONFIG.DURATIONS[0];\n    let minDiff = Math.abs(sliderValue - closest);\n    for (let d of CONFIG.DURATIONS) {\n      const diff = Math.abs(sliderValue - d);\n      if (diff < minDiff) { minDiff = diff; closest = d; }\n    }\n    return closest;\n  }\n  \n  function populateAmountDropdown() {\n    elements.amountDropdown.setAttribute('data-no-translation', '');\n    elements.amountDropdown.setAttribute('data-trp-gettext', '');\n    let optionsHTML = '';\n    for (let a = CONFIG.MIN_AMOUNT; a <= CONFIG.MAX_AMOUNT; a += 1000) {\n      const formattedAmount = formatCHFShort(a);\n      optionsHTML += `<option value=\"${a}\" class=\"notranslate\" translate=\"no\" data-no-translation=\"\" data-no-translation-attr=\"text\">CHF\\u00A0${formattedAmount}.-<\/option>`;\n    }\n    elements.amountDropdown.innerHTML = optionsHTML;\n    elements.amountDropdown.value = state.amount;\n  }\n  \n  function populateDurationDropdown() {\n    const fragment = document.createDocumentFragment();\n    for (let d of CONFIG.DURATIONS) {\n      const option = document.createElement('option');\n      option.value = d;\n      option.textContent = d + ' Monate';\n      fragment.appendChild(option);\n    }\n    elements.durationDropdown.innerHTML = '';\n    elements.durationDropdown.appendChild(fragment);\n    elements.durationDropdown.value = state.duration;\n  }\n  \n  function updateDisplay() {\n    const minAPR = state.isEigenheim ? CONFIG.EIGENHEIM_MIN_APR : CONFIG.STANDARD_MIN_APR;\n    const maxAPR = state.isEigenheim ? CONFIG.EIGENHEIM_MAX_APR : CONFIG.STANDARD_MAX_APR;\n    \n    elements.minPercent.textContent = 'von ' + minAPR.toFixed(1).replace('.', ',') + ' %';\n    elements.maxPercent.textContent = 'bis ' + maxAPR.toFixed(2).replace('.', ',') + ' %';\n    \n    let minMonthly = calculateMonthlyRate(state.amount, state.duration, minAPR);\n    let maxMonthly = calculateMonthlyRate(state.amount, state.duration, maxAPR);\n    \n    let minInsurance = 0;\n    let maxInsurance = 0;\n    \n    if (state.hasInsurance) {\n      const costs = CONFIG.INSURANCE_COSTS[state.insuranceAmount];\n      minInsurance = costs.min;\n      maxInsurance = costs.max;\n      \n      minMonthly = roundTo5Cents(minMonthly + minInsurance);\n      maxMonthly = roundTo5Cents(maxMonthly + maxInsurance);\n    }\n    \n    elements.minRate.textContent = formatCHF(minMonthly);\n    elements.maxRate.textContent = formatCHF(maxMonthly);\n    \n    if (state.hasInsurance) {\n      const insuranceAmountFormatted = formatCHFShort(state.insuranceAmount);\n      elements.minInsurance.innerHTML = 'CHF ' + formatCHF(minInsurance) + '<span class=\"bf-insurance-details\">Ihre Leistungen:<br>Bei Arbeitslosigkeit\/Arbeitsunf\u00e4higkeit<span class=\"bf-insurance-amount\">CHF ' + insuranceAmountFormatted + '<\/span><\/span>';\n      elements.maxInsurance.innerHTML = 'CHF ' + formatCHF(maxInsurance) + '<span class=\"bf-insurance-details\">Ihre Leistungen:<br>Bei Arbeitslosigkeit\/Arbeitsunf\u00e4higkeit<span class=\"bf-insurance-amount\">CHF ' + insuranceAmountFormatted + '<\/span><\/span>';\n    } else {\n      elements.minInsurance.textContent = '\u2013';\n      elements.maxInsurance.textContent = '\u2013';\n    }\n    \n    const costMin = calculateTotalCost(state.amount, state.duration, minAPR);\n    const costMax = calculateTotalCost(state.amount, state.duration, maxAPR);\n    \n    elements.costMin.textContent = \"CHF \" + formatCHFShort(costMin);\n    elements.costMax.textContent = \"CHF \" + formatCHFShort(costMax);\n    elements.costMinPercent.textContent = minAPR.toFixed(1).replace('.', ',');\n    elements.costMaxPercent.textContent = maxAPR.toFixed(2).replace('.', ',');\n  }\n  \n  elements.amountDropdown.addEventListener('change', function() {\n    state.amount = parseInt(this.value);\n    elements.amountSlider.value = state.amount;\n    updateDisplay();\n  });\n  \n  elements.amountSlider.addEventListener('input', function() {\n    state.amount = sliderToAmount(this.value);\n    elements.amountDropdown.value = state.amount;\n    updateDisplay();\n  });\n  \n  elements.durationDropdown.addEventListener('change', function() {\n    state.duration = parseInt(this.value);\n    elements.durationSlider.value = state.duration;\n    updateDisplay();\n  });\n  \n  elements.durationSlider.addEventListener('input', function() {\n    state.duration = sliderToDuration(this.value);\n    elements.durationDropdown.value = state.duration;\n    this.value = state.duration;\n    updateDisplay();\n  });\n  \n  elements.eigenheimToggle.addEventListener('click', function(e) {\n    if (e.target.classList.contains('bf-toggle-btn')) {\n      const buttons = this.querySelectorAll('.bf-toggle-btn');\n      buttons.forEach(btn => btn.classList.remove('active'));\n      e.target.classList.add('active');\n      state.isEigenheim = e.target.dataset.value === 'yes';\n      updateDisplay();\n    }\n  });\n  \n  elements.absicherungToggle.addEventListener('click', function(e) {\n    if (e.target.classList.contains('bf-toggle-btn')) {\n      const buttons = this.querySelectorAll('.bf-toggle-btn');\n      buttons.forEach(btn => btn.classList.remove('active'));\n      e.target.classList.add('active');\n      state.hasInsurance = e.target.dataset.value === 'yes';\n      if (state.hasInsurance) {\n        elements.insuranceSelection.classList.add('active');\n      } else {\n        elements.insuranceSelection.classList.remove('active');\n      }\n      updateDisplay();\n    }\n  });\n  \n  Array.from(elements.insuranceRadios).forEach(function(radio) {\n    radio.addEventListener('change', function() {\n      state.insuranceAmount = parseInt(this.value);\n      updateDisplay();\n    });\n  });\n  \n  elements.submitBtn.addEventListener('click', function() {\n    function detectLang() {\n      const supportedLangs = ['de', 'fr', 'it', 'en', 'pt', 'es'];\n      let lang = (window.trp_language || document.documentElement.lang || '').toLowerCase().split('-')[0];\n      if (!lang) {\n        const path = location.pathname.toLowerCase();\n        if (path.startsWith('\/pt\/')) lang = 'pt';\n        else if (path.startsWith('\/es\/')) lang = 'es';\n        else if (path.startsWith('\/fr\/')) lang = 'fr';\n        else if (path.startsWith('\/it\/')) lang = 'it';\n        else if (path.startsWith('\/en\/')) lang = 'en';\n        else lang = 'de';\n      }\n      return supportedLangs.includes(lang) ? lang : 'de';\n    }\n    \n    const URLS = {\n      de: 'https:\/\/www.bestfinance.ch\/kreditanfrage-schweiz\/',\n      fr: 'https:\/\/www.bestfinance.ch\/fr\/demande-de-credit-en-suisse\/',\n      it: 'https:\/\/www.bestfinance.ch\/it\/domanda-di-credito-svizzera\/',\n      en: 'https:\/\/www.bestfinance.ch\/en\/credit-application-switzerland\/',\n      pt: 'https:\/\/www.bestfinance.ch\/pt\/aplicacao-credito-suica\/',\n      es: 'https:\/\/www.bestfinance.ch\/es\/solicitud-de-credito-suiza\/'\n    };\n    \n    const lang = detectLang();\n    const url = URLS[lang] || URLS.de;\n    \n    const params = new URLSearchParams({\n      amount: state.amount,\n      duration: state.duration,\n      versicherung: state.hasInsurance ? 'Ja' : 'Nein',\n      versicherung_betrag: state.hasInsurance ? state.insuranceAmount : '0',\n      w_art: state.isEigenheim ? 'Eigent\u00fcmer' : 'Mietwohnung'\n    });\n    \n    if (typeof window.w1 !== 'undefined' && window.w1) {\n      params.append('w1', window.w1);\n    }\n    \n    window.location.href = url + '?' + params.toString();\n  });\n  \n  function init() {\n    populateAmountDropdown();\n    populateDurationDropdown();\n    elements.amountSlider.value = state.amount;\n    elements.durationSlider.value = state.duration;\n    updateDisplay();\n  }\n  \n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  \n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3cce5a5 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"3cce5a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf8ae63 elementor-widget elementor-widget-spacer\" data-id=\"bf8ae63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31b73ab elementor-widget elementor-widget-html\" data-id=\"31b73ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================ KREDITRECHNER MIT ACF ============================ -->\r\n<!-- KEINE manuellen Konfigurationswerte mehr - alles kommt aus ACF! -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&amp;display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* ============================ THEME-TOKENS (leicht anpassbar) ============================ *\/\r\n  #ik-loan-calculator:root, :root{\r\n    --ik-primary:#0077B6;\r\n    --ik-primary-dark:#03045E;\r\n    --ik-accent:#00B4D8;\r\n    --ik-accent-light:#90E0EF;\r\n    --ik-surface:#ffffff;\r\n    --ik-muted:#6c757d;\r\n    --ik-success:#2f855a;\r\n    --ik-danger:#c53030;\r\n    --ik-border:#e9ecef;\r\n    --ik-shadow-soft:0 10px 30px rgba(0,50,80,.15);\r\n    --ik-shadow-strong:0 15px 45px rgba(0,50,80,.25);\r\n    --ik-radius:18px;\r\n    --ik-focus:0 0 0 3px rgba(56,161,105,.3);\r\n  }\r\n\r\n  \/* ============================ Grundlayout & Container ============================ *\/\r\n  #ik-loan-calculator *{margin:0;padding:0;box-sizing:border-box;}\r\n  #ik-loan-calculator{\r\n    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;\r\n    background:var(--ik-primary-dark);\r\n    padding:6px;border-radius:var(--ik-radius);\r\n    max-width:640px;margin:0 auto;\r\n  }\r\n  #ik-loan-calculator .calculator-container{\r\n    background:var(--ik-surface);border-radius:var(--ik-radius);box-shadow:var(--ik-shadow-strong);\r\n    padding:40px;max-width:640px;margin:0 auto;position:relative;overflow:hidden;\r\n  }\r\n  #ik-loan-calculator .calculator-container::after{\r\n    content:'';position:absolute;inset:-20% -20% auto auto;height:50%;\r\n    background:radial-gradient(circle at 80% 0%, rgba(0,180,216,.15), transparent 60%);\r\n    transform:rotate(-5deg);pointer-events:none;z-index:1;\r\n  }\r\n  #ik-loan-calculator .calculator-header{text-align:center;margin-bottom:28px;}\r\n  #ik-loan-calculator .calculator-header h1{\r\n    font-size:28px;font-weight:900;letter-spacing:.2px;margin:0;\r\n    background:linear-gradient(135deg,var(--ik-accent) 0%, var(--ik-primary-dark) 100%);\r\n    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\r\n  }\r\n\r\n  \/* ============================ Info-Icon + zentrale Tooltip-Bubble ============================ *\/\r\n  #ik-loan-calculator .input-label,\r\n  #ik-loan-calculator .bf-label{display:flex;align-items:center;gap:8px;}\r\n  #ik-loan-calculator .info-icon{\r\n    position:relative;display:inline-flex;align-items:center;justify-content:center;\r\n    width:22px;height:22px;border-radius:50%;\r\n    background:var(--ik-accent);color:#fff;font-weight:900;font-size:12px;line-height:1;\r\n    cursor:help;box-shadow:0 2px 8px rgba(0,180,216,.4);user-select:none;flex:0 0 22px;\r\n    font-style:normal;z-index:100;outline:none;\r\n  }\r\n  #ik-loan-calculator .info-icon:hover{ background:#0096c7;transform:scale(1.05); }\r\n  #ik-loan-calculator .info-icon:focus-visible{ box-shadow:var(--ik-focus); }\r\n  #ik-loan-calculator .info-tooltip{\r\n    position:fixed; left:-9999px; top:-9999px;\r\n    max-width:250px; width:clamp(180px, 80vw, 250px);\r\n    background:#0c1b4a; color:#fff;\r\n    padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.5;\r\n    box-shadow:0 12px 24px rgba(0,0,0,.35);\r\n    z-index:999999; opacity:0; pointer-events:none; transition:opacity .18s ease;\r\n  }\r\n  #ik-loan-calculator .info-tooltip.show{opacity:1; pointer-events:auto;}\r\n  #ik-loan-calculator .info-tooltip::after{\r\n    content:''; position:absolute; width:10px; height:10px; background:#0c1b4a;\r\n    transform:translateX(-50%) rotate(45deg);\r\n    left:var(--arrow-left, 50%);\r\n  }\r\n  #ik-loan-calculator .info-tooltip[data-pos=\"top\"]::after{ bottom:-5px; }\r\n  #ik-loan-calculator .info-tooltip[data-pos=\"bottom\"]::after{ top:-5px; }\r\n\r\n  \/* ============================ Inputs \/ Dropdowns ============================ *\/\r\n  #ik-loan-calculator .input-group{margin-bottom:26px;position:relative;}\r\n  #ik-loan-calculator .input-group .input-label{\r\n    justify-content:space-between;margin-bottom:10px;\r\n    font-size:14px;font-weight:800;color:var(--ik-primary-dark);\r\n  }\r\n  #ik-loan-calculator .loan-dropdown{\r\n    width:100%;padding:12px 14px;text-align:center;font-size:20px;font-weight:800;color:var(--ik-primary-dark);\r\n    border:2px solid var(--ik-accent-light);border-radius:12px;background:#f7fcff;cursor:pointer;transition:all .2s;\r\n    appearance:none;-webkit-appearance:none;-moz-appearance:none;\r\n    background-image:url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' stroke='%230077B6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3e%3cpolyline points='6 9 12 15 18 9'\/%3e%3c\/svg%3e\");\r\n    background-repeat:no-repeat;background-position:right 20px center;background-size:24px;padding-right:56px;\r\n    min-height:44px;\r\n  }\r\n  #ik-loan-calculator .loan-dropdown:hover{box-shadow:var(--ik-shadow-soft);border-color:var(--ik-accent);}\r\n  #ik-loan-calculator .loan-dropdown:focus{outline:none;border-color:#38a169;box-shadow:var(--ik-focus);}\r\n\r\n  \/* ============================ Slider (Fresh) ============================ *\/\r\n  #ik-loan-calculator .slider-wrap{margin-top:14px;text-align:center;}\r\n  \/* Performance: keine display:none Umschaltung \u2192 reservierte Fl\u00e4che *\/\r\n  #ik-loan-calculator .slider-wrap.pending{visibility:hidden;}\r\n  #ik-loan-calculator .slider-wrap.ready{visibility:visible;}\r\n\r\n  #ik-loan-calculator .slider{ --thumb-size:28px; --track-h:10px; width:100%;height:var(--thumb-size);position:relative;display:block; }\r\n  #ik-loan-calculator .slider input[type=\"range\"]{\r\n    width:100%;height:var(--track-h);-webkit-appearance:none;appearance:none;outline:none;border:none;border-radius:999px;cursor:pointer;\r\n    transition:filter .2s, box-shadow .2s;\r\n  }\r\n  #ik-loan-calculator .slider--fresh input[type=\"range\"]{\r\n    background:linear-gradient(90deg,#d8f0f8 0%, #b3e7f4 100%);\r\n    border:1px solid var(--ik-accent-light); box-shadow:inset 0 1px 3px rgba(0,50,80,.1);\r\n  }\r\n  #ik-loan-calculator .slider--fresh input[type=\"range\"]::-webkit-slider-thumb{\r\n    -webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;\r\n    background:#fff;border:3px solid var(--ik-accent); box-shadow:0 2px 10px rgba(0,0,0,.15), 0 0 0 5px rgba(0,180,216,.2);\r\n  }\r\n  #ik-loan-calculator .slider--fresh input[type=\"range\"]::-moz-range-thumb{\r\n    width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;\r\n    background:#fff;border:3px solid var(--ik-accent); box-shadow:0 2px 10px rgba(0,0,0,.15), 0 0 0 5px rgba(0,180,216,.2);\r\n  }\r\n  #ik-loan-calculator .slider-value{ margin-top:8px;font-size:13px;font-weight:800;color:var(--ik-primary-dark);background:rgba(0,180,216,.1);display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,180,216,.2); }\r\n  #ik-loan-calculator.hide-slider-values .slider-value { display: none !important; }\r\n\r\n  \/* ============================ Ergebnis-Karte ============================ *\/\r\n  #ik-loan-calculator .result-card{\r\n    background:linear-gradient(135deg,var(--ik-primary) 0%, var(--ik-primary-dark) 100%);\r\n    border-radius:var(--ik-radius);padding:30px;text-align:center;margin:30px 0;\r\n    box-shadow:0 15px 40px rgba(0,72,129,.4);position:relative;overflow:hidden;z-index:2;\r\n  }\r\n  #ik-loan-calculator .result-label{color:#e0f7ff;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.2);}\r\n  #ik-loan-calculator .result-value{\r\n    display:inline-flex;align-items:baseline;gap:.35rem;white-space:nowrap;line-height:1;\r\n    font-weight:900;font-size:52px;letter-spacing:-.02em;color:#fff;\r\n    text-shadow:0 0 10px var(--ik-accent-light), 0 0 20px rgba(0,180,216,.8);transition:all .3s;\r\n  }\r\n  #ik-loan-calculator .result-value::before{ content:\"CHF\"; font-weight:800; font-size:.55em; letter-spacing:.02em; line-height:1; color:var(--ik-accent-light); }\r\n\r\n  \/* === Dynamischer Gesamtkosten-Text === *\/\r\n  #ik-loan-calculator .totals-wrap{ margin-top:12px;text-align:center; }\r\n  #ik-loan-calculator .totals-wrap.is-hidden{ display:none; }\r\n  #ik-loan-calculator .totals-text{\r\n    font-size:14px;line-height:1.6;color:var(--ik-primary-dark);max-width:540px;margin:0 auto;\r\n  }\r\n  #ik-loan-calculator .totals-text em{ font-weight:800; color:var(--ik-accent); font-style:normal; }\r\n\r\n  \/* === CTA Button === *\/\r\n  #ik-loan-calculator .cta-button{\r\n    display:block; width:100%; max-width:360px; margin:32px auto 0;\r\n    padding:16px 28px; border:none; border-radius:999px; cursor:pointer;\r\n    font-family:inherit; font-size:18px; font-weight:900; text-align:center;\r\n    background:linear-gradient(135deg,var(--ik-accent) 0%, var(--ik-primary) 100%);\r\n    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.15);\r\n    box-shadow:0 6px 18px rgba(0,119,182,.3); transition:all .2s;\r\n  }\r\n  #ik-loan-calculator .cta-button:hover{ transform:translateY(-1px); box-shadow:0 9px 24px rgba(0,119,182,.4); }\r\n  #ik-loan-calculator .cta-button:active{ transform:translateY(0); }\r\n  #ik-loan-calculator .cta-button:focus{ outline:none; box-shadow:var(--ik-focus); }\r\n  #ik-loan-calculator .cta-button.hidden{ display:none; }\r\n\r\n  \/* === Disclaimer unter CTA === *\/\r\n  #ik-loan-calculator .disclaimer{ margin-top:10px; text-align:center; font-size:11px; line-height:1.5; color:var(--ik-muted); font-style:italic; }\r\n\r\n  \/* ============================ FORMULAR ============================ *\/\r\n  #bf-ka-container{ display:none; margin-top:40px; padding-top:24px; border-top:3px solid var(--ik-border); }\r\n  #bf-ka-container.show{display:block;}\r\n\r\n  #ik-loan-calculator .bf-section-header{text-align:center;margin-bottom:32px;}\r\n  #ik-loan-calculator .bf-section-header h2{font-size:26px;font-weight:800;color:var(--ik-primary-dark);margin-bottom:8px;}\r\n  #ik-loan-calculator .bf-section-header p{font-size:14px;color:var(--ik-muted);}\r\n\r\n  \/* === Formular-Felder === *\/\r\n  #ik-loan-calculator .bf-field{margin-bottom:18px;}\r\n  #ik-loan-calculator .bf-label{\r\n    display:flex;align-items:center;gap:6px;margin-bottom:8px;\r\n    font-size:14px;font-weight:700;color:var(--ik-primary-dark);\r\n  }\r\n  #ik-loan-calculator .bf-input,\r\n  #ik-loan-calculator .bf-select{\r\n    width:100%;padding:14px 16px;border:2px solid var(--ik-border);border-radius:10px;\r\n    font-family:inherit;font-size:15px;background:#fafbfc;transition:all .2s;\r\n  }\r\n  #ik-loan-calculator .bf-input:focus,\r\n  #ik-loan-calculator .bf-select:focus{ outline:none;border-color:var(--ik-accent);background:#fff;box-shadow:var(--ik-focus); }\r\n  #ik-loan-calculator .bf-input.bf-error,\r\n  #ik-loan-calculator .bf-select.bf-error{ border-color:var(--ik-danger);background:#fff5f5; animation: bf-shake 0.4s ease-in-out; }\r\n  #ik-loan-calculator .bf-input.bf-success,\r\n  #ik-loan-calculator .bf-select.bf-success{ border-color:var(--ik-success);background:#f0fdf4; }\r\n  @keyframes bf-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }\r\n\r\n  \/* === Anrede (50% Breite) === *\/\r\n  #ik-loan-calculator .bf-anrede-field{ max-width:280px; }\r\n\r\n  \/* === Geburtsdatum-Gruppe (Fieldset) === *\/\r\n  #ik-loan-calculator .bf-fieldset{ border:none;padding:0;margin:0;min-width:0; }\r\n  #ik-loan-calculator .bf-fieldset .bf-legend{\r\n    display:flex;align-items:center;gap:6px;margin-bottom:8px;\r\n    font-size:14px;font-weight:700;color:var(--ik-primary-dark);padding:0;\r\n  }\r\n  #ik-loan-calculator .bf-fieldset.bf-error .bf-legend{ color:var(--ik-danger); }\r\n  #ik-loan-calculator .bf-dob{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}\r\n\r\n  \/* === Adresszeile === *\/\r\n  #ik-loan-calculator .bf-address-row{display:grid;grid-template-columns:1fr auto;gap:10px;}\r\n  #ik-loan-calculator .bf-address-row > div:last-child{max-width:100px;}\r\n\r\n  \/* === PLZ\/Ort-Zeile === *\/\r\n  #ik-loan-calculator .bf-plz-ort-row{display:grid;grid-template-columns:120px 1fr;gap:10px;}\r\n\r\n  \/* === Wohnhaft seit-Gruppe (Fieldset) === *\/\r\n  #ik-loan-calculator .bf-residence-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}\r\n\r\n  \/* === Sublabel === *\/\r\n  #ik-loan-calculator .bf-sublabel{margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ik-primary-dark);}\r\n  #ik-loan-calculator .bf-sublabel label{display:block;}\r\n\r\n  \/* === Alte Adresse (dynamisch) === *\/\r\n  #ik-loan-calculator .bf-old-address-section{\r\n    margin:20px 0; padding:20px; background:#f8feff; border-radius:12px; border:1px solid var(--ik-accent-light);\r\n  }\r\n\r\n  \/* === Telefon-Zeile === *\/\r\n  #ik-loan-calculator .bf-phone-row{display:grid;grid-template-columns:120px 1fr;gap:10px;}\r\n  #ik-loan-calculator .bf-country-select{width:auto;min-width:100px;cursor:pointer;}\r\n\r\n  \/* === Checkboxen === *\/\r\n  #ik-loan-calculator .bf-checkbox-group{margin-top:24px;}\r\n  #ik-loan-calculator .bf-checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;}\r\n  #ik-loan-calculator .bf-checkbox-wrapper input[type=\"checkbox\"]{\r\n    flex-shrink:0;width:20px;height:20px;margin-top:3px;cursor:pointer;accent-color:var(--ik-accent);\r\n  }\r\n  #ik-loan-calculator .bf-checkbox-wrapper.bf-error{\r\n    padding:10px;background:#fff5f5;border-radius:8px;border:1px solid var(--ik-danger);animation: bf-shake 0.4s ease-in-out;\r\n  }\r\n  #ik-loan-calculator .bf-checkbox-wrapper label{ font-size:13px;line-height:1.5;color:#222;cursor:pointer; }\r\n  #ik-loan-calculator .bf-checkbox-wrapper label a{ color:var(--ik-accent);text-decoration:none;font-weight:700; }\r\n  #ik-loan-calculator .bf-checkbox-wrapper label a:hover{text-decoration:underline;}\r\n\r\n  \/* === Submit Button === *\/\r\n  #ik-loan-calculator .bf-submit-area{margin-top:30px;text-align:center;}\r\n  #ik-loan-calculator .bf-submit-btn{\r\n    display:inline-block;width:100%;max-width:320px;padding:15px 30px;border:none;border-radius:999px;cursor:pointer;\r\n    font-family:inherit;font-size:17px;font-weight:800;text-align:center;\r\n    background:linear-gradient(135deg,var(--ik-success) 0%, #276749 100%);\r\n    color:#fff;box-shadow:0 6px 18px rgba(47,133,90,.3);transition:all .2s;position:relative;\r\n  }\r\n  #ik-loan-calculator .bf-submit-btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(47,133,90,.4);}\r\n  #ik-loan-calculator .bf-submit-btn:active{transform:translateY(0);}\r\n  #ik-loan-calculator .bf-submit-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(47,133,90,.3);}\r\n  #ik-loan-calculator .bf-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;}\r\n\r\n  \/* === Loading Animation === *\/\r\n  #ik-loan-calculator .bf-submit-btn.is-loading::after{\r\n    content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;\r\n    border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;\r\n    animation:bf-spin .8s linear infinite;\r\n  }\r\n  @keyframes bf-spin{to{transform:rotate(360deg);}}\r\n\r\n  \/* === Status-Nachrichten === *\/\r\n  #ik-loan-calculator .bf-msg{\r\n    margin-top:18px;padding:14px 18px;border-radius:10px;font-size:14px;line-height:1.5;text-align:center;\r\n  }\r\n  #ik-loan-calculator .bf-msg.bf-ok{background:#d4edda;color:#155724;border:1px solid #c3e6cb;}\r\n  #ik-loan-calculator .bf-msg.bf-err{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}\r\n  #ik-loan-calculator .bf-msg.bf-muted{background:#e2e3e5;color:#383d41;border:1px solid #d6d8db;}\r\n\r\n  \/* ============================ Modal \/ Popup ============================ *\/\r\n  #ik-loan-calculator .ik-modal{\r\n    position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.6);\r\n    display:flex;align-items:center;justify-content:center;padding:10px;\r\n    opacity:0;pointer-events:none;transition:opacity .3s;\r\n  }\r\n  #ik-loan-calculator .ik-modal.is-open{opacity:1;pointer-events:auto;}\r\n  #ik-loan-calculator .ik-modal-content{\r\n    background:#fff;border-radius:12px;\r\n    max-width:95%;width:1100px;\r\n    height:92vh;max-height:92vh;\r\n    box-shadow:0 20px 60px rgba(0,0,0,.3);\r\n    display:flex;flex-direction:column;\r\n  }\r\n  #ik-loan-calculator .ik-modal-header{\r\n    display:flex;justify-content:space-between;align-items:center;\r\n    padding:16px 20px;border-bottom:1px solid var(--ik-border);\r\n    flex-shrink:0;\r\n  }\r\n  #ik-loan-calculator .ik-modal-header h2{\r\n    font-size:17px;font-weight:800;color:var(--ik-primary-dark);margin:0;\r\n    line-height:1.3;padding-right:10px;\r\n  }\r\n  #ik-loan-calculator .ik-modal-close{\r\n    background:none;border:none;font-size:28px;line-height:1;color:var(--ik-muted);\r\n    cursor:pointer;padding:0;width:36px;height:36px;\r\n    display:flex;align-items:center;justify-content:center;border-radius:50%;\r\n    transition:background .2s;flex-shrink:0;\r\n  }\r\n  #ik-loan-calculator .ik-modal-close:hover{background:#f0f0f0;}\r\n  #ik-loan-calculator .ik-modal-body{ \r\n    flex:1;overflow:hidden;position:relative;padding:0;\r\n    min-height:0;\r\n  }\r\n  #ik-loan-calculator .ik-modal-body iframe{\r\n    width:100%;height:100%;border:0;display:block;\r\n  }\r\n  #ik-loan-calculator .ik-modal-loader{\r\n    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\r\n    background:#fafafa;z-index:10;\r\n  }\r\n  #ik-loan-calculator .ik-modal-loader.is-hidden{display:none;}\r\n  #ik-loan-calculator .ik-modal-loader::after{\r\n    content:'';width:40px;height:40px;border:4px solid var(--ik-border);\r\n    border-top-color:var(--ik-accent);border-radius:50%;\r\n    animation:bf-spin .8s linear infinite;\r\n  }\r\n  #ik-loan-calculator .ik-modal-footer{ \r\n    padding:12px 20px;border-top:1px solid var(--ik-border);\r\n    text-align:center;flex-shrink:0;\r\n  }\r\n  #ik-loan-calculator .ik-modal-footer a{\r\n    display:inline-flex;align-items:center;gap:6px;\r\n    font-size:13px;color:var(--ik-accent);text-decoration:none;font-weight:600;\r\n  }\r\n  #ik-loan-calculator .ik-modal-footer a:hover{text-decoration:underline;}\r\n  #ik-loan-calculator .ik-no-scroll{overflow:hidden;}\r\n\r\n  \/* ============================ Responsive ============================ *\/\r\n  @media(max-width:768px){\r\n    #ik-loan-calculator .calculator-container{padding:28px 20px;}\r\n    #ik-loan-calculator .calculator-header h1{font-size:24px;}\r\n    #ik-loan-calculator .result-value{font-size:40px;}\r\n    #ik-loan-calculator .bf-address-row,\r\n    #ik-loan-calculator .bf-plz-ort-row,\r\n    #ik-loan-calculator .bf-residence-row,\r\n    #ik-loan-calculator .bf-phone-row{grid-template-columns:1fr;gap:12px;}\r\n    #ik-loan-calculator .bf-address-row > div:last-child{max-width:none;}\r\n    #ik-loan-calculator .bf-plz-ort-row > div:first-child{max-width:none;}\r\n    #ik-loan-calculator .bf-dob{grid-template-columns:1fr;gap:10px;}\r\n    \r\n    \/* Modal mobile Optimierung *\/\r\n    #ik-loan-calculator .ik-modal{padding:0;}\r\n    #ik-loan-calculator .ik-modal-content{\r\n      max-width:100%;width:100%;\r\n      height:100vh;max-height:100vh;\r\n      border-radius:0;margin:0;\r\n    }\r\n    #ik-loan-calculator .ik-modal-header{padding:12px 15px;}\r\n    #ik-loan-calculator .ik-modal-header h2{font-size:15px;}\r\n    #ik-loan-calculator .ik-modal-footer{padding:10px 15px;}\r\n  }\r\n<\/style>\r\n\r\n<!-- ============================ HTML ============================ -->\r\n<div id=\"ik-loan-calculator\">\r\n  <div class=\"calculator-container\">\r\n    <div class=\"calculator-header\" id=\"calculatorHeader\">\r\n      <h1 id=\"calculatorTitle\">Kredit berechnen<\/h1>\r\n    <\/div>\r\n\r\n    <!-- Kreditbetrag -->\r\n    <div class=\"input-group\">\r\n      <div class=\"input-label\">\r\n        <span>Kreditbetrag<\/span>\r\n        <i class=\"info-icon\" tabindex=\"0\" role=\"button\" aria-label=\"Info Kreditbetrag\" data-tooltip=\"W\u00e4hlen Sie den gew\u00fcnschten Kreditbetrag zwischen CHF 5'000 und CHF 300'000.\">i<\/i>\r\n      <\/div>\r\n      <select\r\n        class=\"loan-dropdown notranslate\"\r\n        id=\"amountDropdown\"\r\n        translate=\"no\" data-no-translation=\"true\" data-trp-translate=\"0\"\r\n        aria-label=\"Kreditbetrag w\u00e4hlen\"><\/select>\r\n\r\n      <div class=\"slider-wrap slider--fresh pending\" id=\"amountSliderWrap\">\r\n        <div class=\"slider\"><input type=\"range\" id=\"amountSlider\" min=\"0\" max=\"0\" step=\"1\" value=\"0\" aria-label=\"Kreditbetrag Slider\"><\/div>\r\n        <div class=\"slider-value\" id=\"amountSliderValue\">CHF 10'000.-<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Laufzeit -->\r\n    <div class=\"input-group\">\r\n      <div class=\"input-label\">\r\n        <span>Laufzeit<\/span>\r\n        <i class=\"info-icon\" tabindex=\"0\" role=\"button\" aria-label=\"Info Laufzeit\" data-tooltip=\"Die Laufzeit bestimmt, wie lange Sie zur R\u00fcckzahlung haben. L\u00e4ngere Laufzeiten bedeuten niedrigere monatliche Raten.\">i<\/i>\r\n      <\/div>\r\n      <select\r\n        class=\"loan-dropdown\"\r\n        id=\"durationDropdown\"\r\n        aria-label=\"Laufzeit w\u00e4hlen\"><\/select>\r\n\r\n      <div class=\"slider-wrap slider--fresh pending\" id=\"durationSliderWrap\">\r\n        <div class=\"slider\"><input type=\"range\" id=\"durationSlider\" min=\"0\" max=\"0\" step=\"1\" value=\"0\" aria-label=\"Laufzeit Slider\"><\/div>\r\n        <div class=\"slider-value\" id=\"durationSliderValue\">0 Monate<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Ergebnis -->\r\n    <div class=\"result-card\" aria-live=\"polite\">\r\n      <p class=\"result-label\">Ihre monatliche Rate ab<\/p>\r\n      <p class=\"result-value\" id=\"monthlyResult\" data-no-translation data-no-dynamic-translation translate=\"no\">0.-<\/p>\r\n    <\/div>\r\n\r\n    <!-- Dynamische Gesamtkosten (TP-sicher) -->\r\n    <div class=\"totals-wrap\" id=\"totalsWrap\">\r\n      <p class=\"totals-text\" id=\"totalCostsText\" data-no-translation data-no-dynamic-translation translate=\"no\"><\/p>\r\n    <\/div>\r\n\r\n    <!-- CTA -->\r\n    <button class=\"cta-button\" id=\"ctaButton\" type=\"button\" aria-controls=\"bf-ka-container\">Jetzt unverbindlich anfragen<\/button>\r\n    <p class=\"disclaimer\">* Die monatliche Rate ist eine Sch\u00e4tzung. Der endg\u00fcltige Zinssatz h\u00e4ngt von Ihrer Bonit\u00e4t ab.<\/p>\r\n\r\n    <!-- ============================ FORMULAR: Kreditanfrage ============================ -->\r\n    <div id=\"bf-ka-container\">\r\n      <div class=\"bf-section-header\" id=\"formScrollTarget\">\r\n        <h2>Pers\u00f6nliche Angaben<\/h2>\r\n        <p>Bitte f\u00fcllen Sie alle Felder aus<\/p>\r\n      <\/div>\r\n\r\n      <form id=\"bf-ka-form\" novalidate autocomplete=\"on\">\r\n        <input type=\"hidden\" id=\"ka_betrag\" name=\"ka_betrag\" \/>\r\n        <input type=\"hidden\" id=\"ka_laufzeit\" name=\"ka_laufzeit\" \/>\r\n\r\n        <!-- Anrede 50% -->\r\n        <div class=\"bf-field bf-anrede-field\">\r\n          <label for=\"ka_anrede\" class=\"bf-label\">Anrede *<\/label>\r\n          <select id=\"ka_anrede\" class=\"bf-select\" required autocomplete=\"honorific-prefix\">\r\n            <option value=\"\">Bitte w\u00e4hlen<\/option>\r\n            <option>Herr<\/option>\r\n            <option>Frau<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"bf-field\">\r\n          <label for=\"ka_vorname\" class=\"bf-label\">\r\n            Vorname *\r\n            <i class=\"info-icon\" tabindex=\"0\" role=\"button\" aria-label=\"Info Vorname\" data-tooltip=\"Bitte geben Sie Name und Vorname genau wie auf Ihrem Ausweisdokument ein.\">i<\/i>\r\n          <\/label>\r\n          <input id=\"ka_vorname\" class=\"bf-input\" type=\"text\" required autocomplete=\"given-name\" \/>\r\n        <\/div>\r\n\r\n        <div class=\"bf-field\">\r\n          <label for=\"ka_nachname\" class=\"bf-label\">\r\n            Name *\r\n            <i class=\"info-icon\" tabindex=\"0\" role=\"button\" aria-label=\"Info Name\" data-tooltip=\"Bitte geben Sie Name und Vorname genau wie auf Ihrem Ausweisdokument ein.\">i<\/i>\r\n          <\/label>\r\n          <input id=\"ka_nachname\" class=\"bf-input\" type=\"text\" required autocomplete=\"family-name\" \/>\r\n        <\/div>\r\n\r\n        <!-- Geburtsdatum -->\r\n        <fieldset class=\"bf-field bf-fieldset\" id=\"dob-fieldset\">\r\n          <legend class=\"bf-legend\">Geburtsdatum *<\/legend>\r\n          <div class=\"bf-dob\">\r\n            <select id=\"dob_day\" class=\"bf-select\" aria-label=\"Geburtstag Tag\" required autocomplete=\"bday-day\"><\/select>\r\n            <select id=\"dob_month\" class=\"bf-select\" aria-label=\"Geburtstag Monat\" required autocomplete=\"bday-month\"><\/select>\r\n            <select id=\"dob_year\" class=\"bf-select\" aria-label=\"Geburtstag Jahr\" required autocomplete=\"bday-year\"><\/select>\r\n          <\/div>\r\n        <\/fieldset>\r\n\r\n        <!-- Strasse & Nr. -->\r\n        <div class=\"bf-field\">\r\n          <div class=\"bf-address-row\">\r\n            <div>\r\n              <div class=\"bf-sublabel\"><label for=\"ka_strasse\">Strasse *<\/label><\/div>\r\n              <input id=\"ka_strasse\" class=\"bf-input\" type=\"text\" placeholder=\"Strasse\" required autocomplete=\"address-line1\" \/>\r\n            <\/div>\r\n            <div>\r\n              <div class=\"bf-sublabel\"><label for=\"ka_nr\">Nr. *<\/label><\/div>\r\n              <input id=\"ka_nr\" class=\"bf-input\" type=\"text\" placeholder=\"Nr.\" required inputmode=\"text\" autocomplete=\"address-line2\" \/>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- PLZ & Ort -->\r\n        <div class=\"bf-field\">\r\n          <div class=\"bf-plz-ort-row\">\r\n            <div>\r\n              <div class=\"bf-sublabel\"><label for=\"ka_plz\">PLZ *<\/label><\/div>\r\n              <input id=\"ka_plz\" class=\"bf-input\" type=\"text\" placeholder=\"PLZ\" required inputmode=\"numeric\" pattern=\"\\d*\" maxlength=\"5\" autocomplete=\"postal-code\" \/>\r\n            <\/div>\r\n            <div>\r\n              <div class=\"bf-sublabel\"><label for=\"ka_ort\">Ort *<\/label><\/div>\r\n              <input id=\"ka_ort\" class=\"bf-input\" type=\"text\" placeholder=\"Ort\" required autocomplete=\"address-level2\" \/>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Wohnhaft seit -->\r\n        <fieldset class=\"bf-field bf-fieldset\" id=\"residence-fieldset\">\r\n          <legend class=\"bf-legend\">Wohnhaft seit? *<\/legend>\r\n          <div class=\"bf-residence-row\">\r\n            <select id=\"residence_month\" class=\"bf-select\" aria-label=\"Wohndauer Monat\" required><\/select>\r\n            <select id=\"residence_year\" class=\"bf-select\" aria-label=\"Wohndauer Jahr\" required><\/select>\r\n          <\/div>\r\n        <\/fieldset>\r\n\r\n        <!-- Vorherige Adresse (dynamisch < 24 Monate) -->\r\n        <div class=\"bf-old-address-section\" id=\"oldAddressSection\" style=\"display:none;\">\r\n          <div class=\"bf-field\">\r\n            <div class=\"bf-address-row\">\r\n              <div>\r\n                <div class=\"bf-sublabel\"><label for=\"ka_old_strasse\">Strasse *<\/label><\/div>\r\n                <input id=\"ka_old_strasse\" class=\"bf-input\" type=\"text\" placeholder=\"Strasse\" \/>\r\n              <\/div>\r\n              <div>\r\n                <div class=\"bf-sublabel\"><label for=\"ka_old_nr\">Nr. *<\/label><\/div>\r\n                <input id=\"ka_old_nr\" class=\"bf-input\" type=\"text\" placeholder=\"Nr.\" \/>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"bf-field\">\r\n            <div class=\"bf-plz-ort-row\">\r\n              <div>\r\n                <div class=\"bf-sublabel\"><label for=\"ka_old_plz\">PLZ *<\/label><\/div>\r\n                <input id=\"ka_old_plz\" class=\"bf-input\" type=\"text\" placeholder=\"PLZ\" inputmode=\"numeric\" pattern=\"\\d*\" maxlength=\"5\" \/>\r\n              <\/div>\r\n              <div>\r\n                <div class=\"bf-sublabel\"><label for=\"ka_old_ort\">Ort *<\/label><\/div>\r\n                <input id=\"ka_old_ort\" class=\"bf-input\" type=\"text\" placeholder=\"Ort\" \/>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"bf-field\">\r\n          <label for=\"ka_phone\" class=\"bf-label\">Tel. oder Handynummer *<\/label>\r\n          <div class=\"bf-phone-row\">\r\n            <select id=\"ka_country_code\" class=\"bf-country-select\" aria-label=\"L\u00e4ndervorwahl\" autocomplete=\"tel-country-code\">\r\n              <option value=\"+41\" selected>\ud83c\udde8\ud83c\udded +41<\/option>\r\n              <option value=\"+49\">\ud83c\udde9\ud83c\uddea +49<\/option>\r\n              <option value=\"+39\">\ud83c\uddee\ud83c\uddf9 +39<\/option>\r\n              <option value=\"+33\">\ud83c\uddeb\ud83c\uddf7 +33<\/option>\r\n              <option value=\"+423\">\ud83c\uddf1\ud83c\uddee +423<\/option>\r\n            <\/select>\r\n            <input id=\"ka_phone\" class=\"bf-input\" type=\"tel\" placeholder=\"079 123 45 67\" required autocomplete=\"tel-national\" \/>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"bf-field\">\r\n          <label for=\"ka_email\" class=\"bf-label\">E-Mail-Adresse *<\/label>\r\n          <input id=\"ka_email\" class=\"bf-input\" type=\"email\" placeholder=\"ihre@email.ch\" required autocomplete=\"email\" \/>\r\n        <\/div>\r\n\r\n        <!-- Einwilligungen -->\r\n        <div class=\"bf-checkbox-group\">\r\n          <div class=\"bf-checkbox-wrapper\" id=\"consent1-wrapper\">\r\n            <input type=\"checkbox\" id=\"consent1\" required \/>\r\n            <label for=\"consent1\">\r\n              Ich habe die <a href=\"#\" class=\"js-open-legal\" data-legal-key=\"legal\" data-legal-title=\"Rechtlichen Hinweise und Datenschutzerkl\u00e4rung\">Rechtlichen Hinweise und Datenschutzerkl\u00e4rung<\/a> gelesen und akzeptiert. *\r\n            <\/label>\r\n          <\/div>\r\n\r\n          <div class=\"bf-checkbox-wrapper\" id=\"consent2-wrapper\">\r\n            <input type=\"checkbox\" id=\"consent2\" required \/>\r\n            <label for=\"consent2\">\r\n              Ich stimme den <a href=\"#\" class=\"js-open-legal\" data-legal-key=\"terms\" data-legal-title=\"Bestimmungen zur Nutzung von elektronischen Kommunikationsmitteln\">Bestimmungen zur Nutzung von elektronischen Kommunikationsmitteln<\/a> zu. *\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Submit -->\r\n        <div class=\"bf-submit-area\">\r\n          <button type=\"submit\" id=\"ka_submit\" class=\"bf-submit-btn\">Anfrage senden<\/button>\r\n          <div id=\"ka_status\" class=\"bf-msg\" style=\"display:none;\"><\/div>\r\n        <\/div>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Modal f\u00fcr Legal\/Terms (MUSS innerhalb des Containers sein) -->\r\n  <div class=\"ik-modal\" id=\"ikLegalModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ikLegalTitle\" aria-hidden=\"true\">\r\n    <div class=\"ik-modal-content\">\r\n      <div class=\"ik-modal-header\">\r\n        <h2 id=\"ikLegalTitle\">Rechtlichen Hinweise und Datenschutzerkl\u00e4rung<\/h2>\r\n        <button class=\"ik-modal-close\" id=\"ikLegalClose\" type=\"button\" aria-label=\"Schliessen\">&times;<\/button>\r\n      <\/div>\r\n      <div class=\"ik-modal-body\">\r\n        <div class=\"ik-modal-loader\" id=\"ikLegalLoader\"><\/div>\r\n        <iframe id=\"ikLegalFrame\" title=\"Rechtlichen Hinweise und Datenschutzerkl\u00e4rung\"><\/iframe>\r\n      <\/div>\r\n      <div class=\"ik-modal-footer\">\r\n        <a href=\"#\" id=\"ikLegalExternal\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3\"\/><\/svg>\r\n          In neuem Tab \u00f6ffnen\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- zentrale Info-Tooltip-Bubble (MUSS innerhalb des Containers sein) -->\r\n  <div class=\"info-tooltip\" id=\"infoTooltip\" role=\"tooltip\" aria-hidden=\"true\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n\r\n  const DEBUG = false;\r\n  const log = (...a) => { if (DEBUG) console.log('[IK Calculator]', ...a); };\r\n\r\n  \/\/ Doppel-Init guard (Elementor etc.)\r\n  if (window.__IK_CALC_READY) { return; }\r\n\r\n  \/\/ Wertelisten cachen (einmalig global)\r\n  if (!window.__IK_AMOUNTS) {\r\n    const A = []; for (let i=5000;i<=100000;i+=1000) A.push(i);\r\n    for (let i=105000;i<=300000;i+=5000) A.push(i);\r\n    window.__IK_AMOUNTS = A;\r\n  }\r\n  if (!window.__IK_DURATIONS) {\r\n    const D = []; for (let m=12;m<=84;m+=6) D.push(m); D.push(120);\r\n    window.__IK_DURATIONS = D;\r\n  }\r\n\r\n  \/\/ ============ MEHRSPRACHIGE TEXTE ============\r\n\r\n  \/\/ Monatswort analog zu deinem ersten Script\r\n  function getCurrentLanguage(){\r\n    const cookie = document.cookie.split('; ').find(r => r.startsWith('trp-current-language='));\r\n    if (cookie) {\r\n      const lang = cookie.split('=')[1];\r\n      if (TRANSLATIONS[lang]) return lang;\r\n    }\r\n    const htmlLang = (document.documentElement.lang || '').toLowerCase();\r\n    if (htmlLang) {\r\n      const short = htmlLang.split('-')[0];\r\n      if (TRANSLATIONS[short]) return short;\r\n    }\r\n    const browser = (navigator.language || 'de').split('-')[0].toLowerCase();\r\n    if (TRANSLATIONS[browser]) return browser;\r\n    return 'de';\r\n  }\r\n\r\n  const MONTH_WORDS = {\r\n    de: 'Monate',\r\n    fr: 'mois',\r\n    it: 'mesi',\r\n    en: 'months',\r\n    pt: 'meses',\r\n    es: 'meses'\r\n  };\r\n\r\n  const TRANSLATIONS = {\r\n    de: { totalCostText(amount, tMinStr, minPct, tMaxStr, maxPct) {\r\n      return `Die Gesamtkosten f\u00fcr Ihren Kredit von <em>CHF ${amount}<\/em> ` +\r\n             `reichen von <em>${tMinStr}<\/em> bei einem Zinssatz von <em>${minPct}%<\/em> ` +\r\n             `bis <em>${tMaxStr}<\/em> bei einem Zinssatz von <em>${maxPct}%<\/em>.`;\r\n    }},\r\n    en: { totalCostText(amount, tMinStr, minPct, tMaxStr, maxPct) {\r\n      return `The total cost for your loan of <em>CHF ${amount}<\/em> ` +\r\n             `ranges from <em>${tMinStr}<\/em> at an interest rate of <em>${minPct}%<\/em> ` +\r\n             `to <em>${tMaxStr}<\/em> at an interest rate of <em>${maxPct}%<\/em>.`;\r\n    }},\r\n    fr: { totalCostText(amount, tMinStr, minPct, tMaxStr, maxPct) {\r\n      return `Le co\u00fbt total de votre cr\u00e9dit de <em>CHF ${amount}<\/em> ` +\r\n             `varie de <em>${tMinStr}<\/em> \u00e0 un taux d'int\u00e9r\u00eat de <em>${minPct}%<\/em> ` +\r\n             `\u00e0 <em>${tMaxStr}<\/em> \u00e0 un taux d'int\u00e9r\u00eat de <em>${maxPct}%<\/em>.`;\r\n    }},\r\n    it: { totalCostText(amount, tMinStr, minPct, tMaxStr, maxPct) {\r\n      return `Il costo totale del vostro credito di <em>CHF ${amount}<\/em> ` +\r\n             `varia da <em>${tMinStr}<\/em> ad un tasso di interesse del <em>${minPct}%<\/em> ` +\r\n             `a <em>${tMaxStr}<\/em> ad un tasso di interesse del <em>${maxPct}%<\/em>.`;\r\n    }},\r\n    pt: { totalCostText(amount, tMinStr, minPct, tMaxStr, maxPct) {\r\n      return `O custo total do seu cr\u00e9dito de <em>CHF ${amount}<\/em> ` +\r\n             `varia de <em>${tMinStr}<\/em> com uma taxa de juro de <em>${minPct}%<\/em> ` +\r\n             `at\u00e9 <em>${tMaxStr}<\/em> com uma taxa de juro de <em>${maxPct}%<\/em>.`;\r\n    }},\r\n    es: { totalCostText(amount, tMinStr, minPct, tMaxStr, maxPct) {\r\n      return `El coste total de su cr\u00e9dito de <em>CHF ${amount}<\/em> ` +\r\n             `var\u00eda desde <em>${tMinStr}<\/em> con un tipo de inter\u00e9s del <em>${minPct}%<\/em> ` +\r\n             `hasta <em>${tMaxStr}<\/em> con un tipo de inter\u00e9s del <em>${maxPct}%<\/em>.`;\r\n    }}\r\n  };\r\n\r\n  \/\/ Idle Fallback\r\n  const ric = window.requestIdleCallback || (fn => setTimeout(fn, 0));\r\n\r\n  \/\/ ======= Rechen-Helpers exakt wie im ersten Script =======\r\n  function roundToFiveCents(value) {\r\n    return Math.round(value * 20) \/ 20; \/\/ Schritte \u00e0 0.05 CHF\r\n  }\r\n  function formatCurrency(value) {\r\n    \/\/ wie erstes Script: Anzeige als ganze CHF mit \".-\"\r\n    return '' + Math.round(value).toLocaleString('de-CH') + '.-';\r\n  }\r\n  \/\/ Normalisiert APR-Eingaben (ACF kann Dezimal 0.079 oder Prozent 7.9 liefern)\r\n  function normalizeAPRtoPercent(v) {\r\n    if (typeof v !== 'number' || !isFinite(v)) return null;\r\n    return (v <= 1) ? (v * 100) : v;\r\n  }\r\n  \/\/ Effektiver Monatszins aus Jahreszins (in Prozent), wie im ersten Script\r\n  function monthlyPayment_effectiveAPR(principal, months, annualRatePercent) {\r\n    if (!annualRatePercent) {\r\n      return roundToFiveCents(principal \/ months);\r\n    }\r\n    const mir = Math.pow(1 + (annualRatePercent \/ 100), 1\/12) - 1; \/\/ effektiver Monatszins\r\n    if (mir === 0) return roundToFiveCents(principal \/ months);\r\n    const denom = 1 - Math.pow(1 \/ (1 + mir), months);\r\n    return roundToFiveCents(principal * mir \/ denom);\r\n  }\r\n\r\n  function initCalculator(){\r\n    if (window.__IK_CALC_READY) return;\r\n    window.__IK_CALC_READY = true;\r\n\r\n    const $id = x => document.getElementById(x);\r\n    const $qs = s => document.querySelector(s);\r\n    const $$  = s => Array.from(document.querySelectorAll(s));\r\n\r\n    const ACF_CFG   = window.IK_ACF_CONFIG || {};\r\n    const LEGAL_URL = 'https:\/\/www.bestfinance.ch\/rechtliche-hinweise-dfi\/';\r\n    const TERMS_URL = 'https:\/\/www.bestfinance.ch\/terms-of-use-d\/';\r\n\r\n    const DEFAULT_AMOUNT   = 10000;\r\n    const DEFAULT_DURATION = 48;\r\n\r\n    \/\/ APRs normalisieren zu Prozent (4.9, 10.95, \u2026)\r\n    const APR_PCT     = normalizeAPRtoPercent((typeof ACF_CFG.APR === 'number') ? ACF_CFG.APR : 0.079)  ?? 7.9;\r\n    const MIN_APR_PCT = normalizeAPRtoPercent((typeof ACF_CFG.MIN_APR === 'number') ? ACF_CFG.MIN_APR : 0.049) ?? 4.9;\r\n    const MAX_APR_PCT = normalizeAPRtoPercent((typeof ACF_CFG.MAX_APR === 'number') ? ACF_CFG.MAX_APR : 0.1095) ?? 10.95;\r\n\r\n    const TITLE_TEXT = ACF_CFG.TITLE_TEXT || 'Ihr Sofort-Kredit Rechner';\r\n    const TITLE_ENABLED = true;\r\n    const SLIDERS_ENABLED = true;\r\n    const SLIDER_VALUES_VISIBLE = false;\r\n    const SHOW_TOTALCOSTS = true;\r\n\r\n    const titleEl        = $id('calculatorTitle');\r\n    const headerEl       = $id('calculatorHeader');\r\n    const amountDD       = $id('amountDropdown');\r\n    const durationDD     = $id('durationDropdown');\r\n    const monthlyResult  = $id('monthlyResult');\r\n    const totalsWrap     = $id('totalsWrap');\r\n    const totalCostsText = $id('totalCostsText');\r\n    const ctaButton      = $id('ctaButton');\r\n    const formContainer  = $id('bf-ka-container');\r\n    const formScrollTarget = $id('formScrollTarget');\r\n\r\n    \/\/ Titel\r\n    if (TITLE_ENABLED && titleEl) { titleEl.textContent = TITLE_TEXT; }\r\n    else if (headerEl) { headerEl.style.display = 'none'; }\r\n\r\n    const AMOUNTS   = window.__IK_AMOUNTS;\r\n    const DURATIONS = window.__IK_DURATIONS;\r\n\r\n    \/\/ Sprache f\u00fcr Labels\r\n    const LANG = getCurrentLanguage();\r\n    const MONTH_WORD = MONTH_WORDS[LANG] || 'Monate';\r\n\r\n    \/\/ Dropdowns f\u00fcllen (ein Write pro Select)\r\n    if (amountDD) {\r\n      let buf=''; for (let i=0;i<AMOUNTS.length;i++){ const v=AMOUNTS[i];\r\n        buf += `<option value=\"${v}\"${v===DEFAULT_AMOUNT?' selected':''}>CHF ${v.toLocaleString('de-CH')}.-<\/option>`;\r\n      } amountDD.innerHTML = buf;\r\n    }\r\n    if (durationDD) {\r\n      let buf=''; for (let i=0;i<DURATIONS.length;i++){ const m=DURATIONS[i];\r\n        buf += `<option value=\"${m}\"${m===DEFAULT_DURATION?' selected':''}>${m} ${MONTH_WORD}<\/option>`;\r\n      } durationDD.innerHTML = buf;\r\n    }\r\n\r\n    \/\/ ===== Finanzfunktionen (jetzt 1:1 wie im ersten Script) =====\r\n    function monthlyPayment(amount, aprPercent, months){\r\n      return monthlyPayment_effectiveAPR(amount, months, aprPercent);\r\n    }\r\n    function totalInterest(amount, aprPercent, months){\r\n      const m = monthlyPayment(amount, aprPercent, months);\r\n      return m*months - amount;\r\n    }\r\n\r\n    \/\/ First Paint: Defaults setzen & sofort rechnen\r\n    if (amountDD && !amountDD.value) amountDD.value = String(DEFAULT_AMOUNT);\r\n    if (durationDD && !durationDD.value) durationDD.value = String(DEFAULT_DURATION);\r\n\r\n    function calcAndPaint(){\r\n      if (!amountDD || !durationDD || !monthlyResult) return;\r\n      const amount   = parseInt(amountDD.value||'0',10);\r\n      const duration = parseInt(durationDD.value||'0',10);\r\n      if (!(amount && duration)) return;\r\n\r\n      \/\/ \u201eab\"-Rate = bester Zins (MIN_APR_PCT), Anzeige wie erstes Script\r\n      const minMonthly = monthlyPayment(amount, MIN_APR_PCT, duration);\r\n      monthlyResult.textContent = formatCurrency(minMonthly);\r\n\r\n      if (SHOW_TOTALCOSTS && totalsWrap && totalCostsText) {\r\n        totalsWrap.classList.remove('is-hidden');\r\n\r\n        const tMinTotal    = minMonthly * duration;\r\n        const tMinInterest = tMinTotal - amount;\r\n\r\n        const maxMonthly   = monthlyPayment(amount, MAX_APR_PCT, duration);\r\n        const tMaxTotal    = maxMonthly * duration;\r\n        const tMaxInterest = tMaxTotal - amount;\r\n\r\n        \/\/ Anzeige wie erstes Script (ganze CHF & \".-\")\r\n        const tMinStr = formatCurrency(tMinInterest);\r\n        const tMaxStr = formatCurrency(tMaxInterest);\r\n\r\n        const minPctStr  = MIN_APR_PCT.toLocaleString('de-CH', { maximumFractionDigits: 2 });\r\n        const maxPctStr  = MAX_APR_PCT.toLocaleString('de-CH', { maximumFractionDigits: 2 });\r\n\r\n        const tr = TRANSLATIONS[LANG] || TRANSLATIONS.de;\r\n        totalCostsText.innerHTML = tr.totalCostText(\r\n          amount.toLocaleString('de-CH'),\r\n          tMinStr, minPctStr, tMaxStr, maxPctStr\r\n        );\r\n      } else if (totalsWrap) {\r\n        totalsWrap.classList.add('is-hidden');\r\n      }\r\n    }\r\n\r\n    \/\/ Sofortiger First-Paint (vor Slider-Setup)\r\n    calcAndPaint();\r\n\r\n    \/\/ ==== Slider Setup (ohne display:none Delay) ====\r\n    const amountSliderWrap     = $id('amountSliderWrap');\r\n    const durationSliderWrap   = $id('durationSliderWrap');\r\n    let amountSlider           = $id('amountSlider'); \/\/ kann ersetzt werden\r\n    let durationSlider         = $id('durationSlider');\r\n    const amountSliderValue    = $id('amountSliderValue');\r\n    const durationSliderValue  = $id('durationSliderValue');\r\n\r\n    if (!SLIDER_VALUES_VISIBLE) { const root=$qs('#ik-loan-calculator'); if (root) root.classList.add('hide-slider-values'); }\r\n\r\n    function indexOfValue(list, value){ const v=parseInt(value,10); const i=list.indexOf(v); return i>=0?i:0; }\r\n\r\n    \/\/ Rebuild Range off-DOM \u2192 ein Layout-Pass\r\n    function rebuildRange(el, max, value){\r\n      if(!el) return el;\r\n      const wrap = el.parentNode;\r\n      const neu = el.cloneNode(false);\r\n      neu.setAttribute('min', 0);\r\n      neu.setAttribute('max', max);\r\n      neu.setAttribute('step', 1);\r\n      neu.value = value;\r\n      wrap.replaceChild(neu, el);\r\n      return neu;\r\n    }\r\n    function markReady(el){ if(!el) return; el.classList.remove('pending'); el.classList.add('ready'); }\r\n\r\n    if (SLIDERS_ENABLED) {\r\n      \/\/ Werte gem\u00e4ss Defaults\r\n      amountSlider = rebuildRange(amountSlider, AMOUNTS.length-1, indexOfValue(AMOUNTS, DEFAULT_AMOUNT));\r\n      durationSlider = rebuildRange(durationSlider, DURATIONS.length-1, indexOfValue(DURATIONS, DEFAULT_DURATION));\r\n\r\n      \/\/ Wraps sichtbar machen (ohne Reflow-Shift)\r\n      markReady(amountSliderWrap);\r\n      markReady(durationSliderWrap);\r\n\r\n      const onAmountSlide = () => {\r\n        const idx = +amountSlider.value, val = AMOUNTS[idx];\r\n        amountDD.value = String(val);\r\n        if (SLIDER_VALUES_VISIBLE && amountSliderValue) amountSliderValue.textContent = 'CHF ' + val.toLocaleString('de-CH') + '.-';\r\n        calcAndPaint(); syncHidden();\r\n      };\r\n      const onDurationSlide = () => {\r\n        const idx = +durationSlider.value, val = DURATIONS[idx];\r\n        durationDD.value = String(val);\r\n        if (SLIDER_VALUES_VISIBLE && durationSliderValue) durationSliderValue.textContent = `${val} ${MONTH_WORD}`;\r\n        calcAndPaint(); syncHidden();\r\n      };\r\n\r\n      amountSlider && amountSlider.addEventListener('input', onAmountSlide, {passive:true});\r\n      durationSlider && durationSlider.addEventListener('input', onDurationSlide, {passive:true});\r\n    }\r\n\r\n    const onAmountChange   = () => {\r\n      if (SLIDERS_ENABLED && amountSlider) amountSlider.value = indexOfValue(AMOUNTS, +amountDD.value);\r\n      if (SLIDER_VALUES_VISIBLE && amountSliderValue) amountSliderValue.textContent = 'CHF ' + (+amountDD.value).toLocaleString('de-CH') + '.-';\r\n      calcAndPaint(); syncHidden();\r\n    };\r\n    const onDurationChange = () => {\r\n      if (SLIDERS_ENABLED && durationSlider) durationSlider.value = indexOfValue(DURATIONS, +durationDD.value);\r\n      if (SLIDER_VALUES_VISIBLE && durationSliderValue) durationSliderValue.textContent = `${durationDD.value} ${MONTH_WORD}`;\r\n      calcAndPaint(); syncHidden();\r\n    };\r\n    amountDD   && amountDD.addEventListener('change', onAmountChange,   {passive:true});\r\n    durationDD && durationDD.addEventListener('change', onDurationChange,{passive:true});\r\n\r\n    \/\/ Hidden Felder synchron\r\n    const betragHidden  = $id('ka_betrag');\r\n    const laufzeitHidden= $id('ka_laufzeit');\r\n    function syncHidden(){\r\n      if (amountDD && betragHidden)       betragHidden.value    = parseInt(amountDD.value||'0',10) || '';\r\n      if (durationDD && laufzeitHidden)   laufzeitHidden.value  = parseInt(durationDD.value||'0',10) || '';\r\n    }\r\n    syncHidden();\r\n\r\n    \/\/ CTA -> Formular\r\n    if (ctaButton && formContainer) {\r\n      ctaButton.addEventListener('click', function(){\r\n        ctaButton.classList.add('hidden');\r\n        formContainer.classList.add('show');\r\n        syncHidden();\r\n        formScrollTarget && formScrollTarget.scrollIntoView({behavior:'smooth', block:'start'});\r\n      });\r\n    }\r\n\r\n    \/\/ =======================================\r\n    \/\/ FORMULAR-VALIDIERUNG (NEU HINZUGEF\u00dcGT)\r\n    \/\/ =======================================\r\n    \r\n    const form = $id('bf-ka-form');\r\n    const submitBtn = $id('ka_submit');\r\n    const statusDiv = $id('ka_status');\r\n    \r\n    \/\/ Geburtsdatum-Dropdowns f\u00fcllen\r\n    const dobDay = $id('dob_day');\r\n    const dobMonth = $id('dob_month');\r\n    const dobYear = $id('dob_year');\r\n    \r\n    if (dobDay) {\r\n      let buf = '<option value=\"\">Tag<\/option>';\r\n      for (let d=1; d<=31; d++) buf += `<option value=\"${d}\">${d}<\/option>`;\r\n      dobDay.innerHTML = buf;\r\n    }\r\n    \r\n    if (dobMonth) {\r\n      let buf = '<option value=\"\">Monat<\/option>';\r\n      for (let m=1; m<=12; m++) {\r\n        const monthStr = m < 10 ? '0' + m : '' + m;\r\n        buf += `<option value=\"${m}\">${monthStr}<\/option>`;\r\n      }\r\n      dobMonth.innerHTML = buf;\r\n    }\r\n    \r\n    if (dobYear) {\r\n      const currentYear = new Date().getFullYear();\r\n      let buf = '<option value=\"\">Jahr<\/option>';\r\n      for (let y=currentYear-18; y>=currentYear-100; y--) buf += `<option value=\"${y}\">${y}<\/option>`;\r\n      dobYear.innerHTML = buf;\r\n    }\r\n    \r\n    \/\/ Wohnhaft seit Dropdowns f\u00fcllen\r\n    const residenceMonth = $id('residence_month');\r\n    const residenceYear = $id('residence_year');\r\n    \r\n    if (residenceMonth) {\r\n      let buf = '<option value=\"\">Monat<\/option>';\r\n      for (let m=1; m<=12; m++) {\r\n        const monthStr = m < 10 ? '0' + m : '' + m;\r\n        buf += `<option value=\"${m}\">${monthStr}<\/option>`;\r\n      }\r\n      residenceMonth.innerHTML = buf;\r\n    }\r\n    \r\n    if (residenceYear) {\r\n      const currentYear = new Date().getFullYear();\r\n      let buf = '<option value=\"\">Jahr<\/option>';\r\n      for (let y=currentYear; y>=currentYear-50; y--) buf += `<option value=\"${y}\">${y}<\/option>`;\r\n      residenceYear.innerHTML = buf;\r\n    }\r\n    \r\n    \/\/ Alte Adresse anzeigen\/verstecken basierend auf Wohndauer\r\n    function checkResidenceDuration() {\r\n      const oldAddressSection = $id('oldAddressSection');\r\n      if (!residenceMonth || !residenceYear || !oldAddressSection) return;\r\n      \r\n      const month = parseInt(residenceMonth.value, 10);\r\n      const year = parseInt(residenceYear.value, 10);\r\n      \r\n      if (month && year) {\r\n        const now = new Date();\r\n        const residenceDate = new Date(year, month - 1, 1);\r\n        const monthsDiff = (now.getFullYear() - residenceDate.getFullYear()) * 12 + \r\n                          (now.getMonth() - residenceDate.getMonth());\r\n        \r\n        if (monthsDiff < 24) {\r\n          oldAddressSection.style.display = 'block';\r\n          \/\/ Alte Adresse wird pflicht\r\n          $id('ka_old_strasse').required = true;\r\n          $id('ka_old_nr').required = true;\r\n          $id('ka_old_plz').required = true;\r\n          $id('ka_old_ort').required = true;\r\n        } else {\r\n          oldAddressSection.style.display = 'none';\r\n          \/\/ Alte Adresse nicht mehr pflicht\r\n          $id('ka_old_strasse').required = false;\r\n          $id('ka_old_nr').required = false;\r\n          $id('ka_old_plz').required = false;\r\n          $id('ka_old_ort').required = false;\r\n        }\r\n      }\r\n    }\r\n    \r\n    residenceMonth && residenceMonth.addEventListener('change', checkResidenceDuration);\r\n    residenceYear && residenceYear.addEventListener('change', checkResidenceDuration);\r\n    \r\n    \/\/ Validierungs-Funktionen\r\n    function clearFieldError(field) {\r\n      if (!field) return;\r\n      field.classList.remove('bf-error');\r\n      field.classList.add('bf-success');\r\n    }\r\n    \r\n    function markFieldError(field) {\r\n      if (!field) return;\r\n      field.classList.remove('bf-success');\r\n      field.classList.add('bf-error');\r\n    }\r\n    \r\n    function clearFieldsetError(fieldset) {\r\n      if (!fieldset) return;\r\n      fieldset.classList.remove('bf-error');\r\n      const selects = fieldset.querySelectorAll('select');\r\n      selects.forEach(s => s.classList.remove('bf-error'));\r\n    }\r\n    \r\n    function markFieldsetError(fieldset) {\r\n      if (!fieldset) return;\r\n      fieldset.classList.add('bf-error');\r\n      const selects = fieldset.querySelectorAll('select');\r\n      selects.forEach(s => s.classList.add('bf-error'));\r\n    }\r\n    \r\n    function validateField(field) {\r\n      if (!field) return true;\r\n      \r\n      \/\/ \u00dcberspringen falls nicht sichtbar oder nicht required\r\n      if (!field.offsetParent || !field.required) return true;\r\n      \r\n      const value = field.value.trim();\r\n      \r\n      if (!value) {\r\n        markFieldError(field);\r\n        return false;\r\n      }\r\n      \r\n      \/\/ Email-Validierung\r\n      if (field.type === 'email') {\r\n        const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n        if (!emailRegex.test(value)) {\r\n          markFieldError(field);\r\n          return false;\r\n        }\r\n      }\r\n      \r\n      \/\/ PLZ-Validierung\r\n      if (field.id === 'ka_plz' || field.id === 'ka_old_plz') {\r\n        if (!\/^\\d{4,5}$\/.test(value)) {\r\n          markFieldError(field);\r\n          return false;\r\n        }\r\n      }\r\n      \r\n      clearFieldError(field);\r\n      return true;\r\n    }\r\n    \r\n    function validateFieldset(fieldsetId) {\r\n      const fieldset = $id(fieldsetId);\r\n      if (!fieldset) return true;\r\n      \r\n      const selects = fieldset.querySelectorAll('select[required]');\r\n      let allValid = true;\r\n      \r\n      selects.forEach(select => {\r\n        if (!select.value) {\r\n          allValid = false;\r\n        }\r\n      });\r\n      \r\n      if (!allValid) {\r\n        markFieldsetError(fieldset);\r\n        return false;\r\n      }\r\n      \r\n      clearFieldsetError(fieldset);\r\n      return true;\r\n    }\r\n    \r\n    function validateCheckbox(checkboxId, wrapperId) {\r\n      const checkbox = $id(checkboxId);\r\n      const wrapper = $id(wrapperId);\r\n      \r\n      if (!checkbox || !wrapper) return true;\r\n      \r\n      if (!checkbox.checked) {\r\n        wrapper.classList.add('bf-error');\r\n        return false;\r\n      }\r\n      \r\n      wrapper.classList.remove('bf-error');\r\n      return true;\r\n    }\r\n    \r\n    function scrollToFirstError(errors) {\r\n      if (errors.length === 0) return;\r\n      \r\n      const firstError = errors[0];\r\n      const offset = 20;\r\n      \r\n      firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n      \r\n      \/\/ Focus setzen\r\n      setTimeout(() => {\r\n        if (firstError.tagName === 'FIELDSET') {\r\n          const firstSelect = firstError.querySelector('select');\r\n          firstSelect && firstSelect.focus();\r\n        } else if (firstError.classList.contains('bf-checkbox-wrapper')) {\r\n          const checkbox = firstError.querySelector('input[type=\"checkbox\"]');\r\n          checkbox && checkbox.focus();\r\n        } else {\r\n          firstError.focus();\r\n        }\r\n      }, 500);\r\n    }\r\n    \r\n    \/\/ Real-time Validierung bei Input (optional aber empfohlen)\r\n    const textInputs = $$('.bf-input, .bf-select');\r\n    textInputs.forEach(input => {\r\n      input.addEventListener('blur', () => {\r\n        validateField(input);\r\n      });\r\n      \r\n      input.addEventListener('input', () => {\r\n        if (input.classList.contains('bf-error')) {\r\n          validateField(input);\r\n        }\r\n      });\r\n    });\r\n    \r\n    \/\/ Geburtsdatum & Wohndauer Selects\r\n    if (dobDay && dobMonth && dobYear) {\r\n      [dobDay, dobMonth, dobYear].forEach(select => {\r\n        select.addEventListener('change', () => {\r\n          if ($id('dob-fieldset').classList.contains('bf-error')) {\r\n            validateFieldset('dob-fieldset');\r\n          }\r\n        });\r\n      });\r\n    }\r\n    \r\n    if (residenceMonth && residenceYear) {\r\n      [residenceMonth, residenceYear].forEach(select => {\r\n        select.addEventListener('change', () => {\r\n          if ($id('residence-fieldset').classList.contains('bf-error')) {\r\n            validateFieldset('residence-fieldset');\r\n          }\r\n        });\r\n      });\r\n    }\r\n    \r\n    \/\/ Checkboxen\r\n    const consent1 = $id('consent1');\r\n    const consent2 = $id('consent2');\r\n    \r\n    consent1 && consent1.addEventListener('change', () => {\r\n      if ($id('consent1-wrapper').classList.contains('bf-error')) {\r\n        validateCheckbox('consent1', 'consent1-wrapper');\r\n      }\r\n    });\r\n    \r\n    consent2 && consent2.addEventListener('change', () => {\r\n      if ($id('consent2-wrapper').classList.contains('bf-error')) {\r\n        validateCheckbox('consent2', 'consent2-wrapper');\r\n      }\r\n    });\r\n    \r\n    \/\/ FORMULAR-SUBMIT mit Validierung und EMAIL-VERSAND\r\n    if (form) {\r\n      form.addEventListener('submit', function(e) {\r\n        e.preventDefault();\r\n        \r\n        \/\/ Alle Fehler zur\u00fccksetzen\r\n        $$('.bf-error').forEach(el => el.classList.remove('bf-error'));\r\n        \r\n        const errors = [];\r\n        \r\n        \/\/ 1. Anrede\r\n        if (!validateField($id('ka_anrede'))) errors.push($id('ka_anrede'));\r\n        \r\n        \/\/ 2. Vorname\r\n        if (!validateField($id('ka_vorname'))) errors.push($id('ka_vorname'));\r\n        \r\n        \/\/ 3. Nachname\r\n        if (!validateField($id('ka_nachname'))) errors.push($id('ka_nachname'));\r\n        \r\n        \/\/ 4. Geburtsdatum (Fieldset)\r\n        if (!validateFieldset('dob-fieldset')) errors.push($id('dob-fieldset'));\r\n        \r\n        \/\/ 5. Strasse\r\n        if (!validateField($id('ka_strasse'))) errors.push($id('ka_strasse'));\r\n        \r\n        \/\/ 6. Hausnummer\r\n        if (!validateField($id('ka_nr'))) errors.push($id('ka_nr'));\r\n        \r\n        \/\/ 7. PLZ\r\n        if (!validateField($id('ka_plz'))) errors.push($id('ka_plz'));\r\n        \r\n        \/\/ 8. Ort\r\n        if (!validateField($id('ka_ort'))) errors.push($id('ka_ort'));\r\n        \r\n        \/\/ 9. Wohnhaft seit (Fieldset)\r\n        if (!validateFieldset('residence-fieldset')) errors.push($id('residence-fieldset'));\r\n        \r\n        \/\/ 10. Alte Adresse (nur wenn sichtbar)\r\n        const oldAddressSection = $id('oldAddressSection');\r\n        if (oldAddressSection && oldAddressSection.style.display !== 'none') {\r\n          if (!validateField($id('ka_old_strasse'))) errors.push($id('ka_old_strasse'));\r\n          if (!validateField($id('ka_old_nr'))) errors.push($id('ka_old_nr'));\r\n          if (!validateField($id('ka_old_plz'))) errors.push($id('ka_old_plz'));\r\n          if (!validateField($id('ka_old_ort'))) errors.push($id('ka_old_ort'));\r\n        }\r\n        \r\n        \/\/ 11. Telefon\r\n        if (!validateField($id('ka_phone'))) errors.push($id('ka_phone'));\r\n        \r\n        \/\/ 12. Email\r\n        if (!validateField($id('ka_email'))) errors.push($id('ka_email'));\r\n        \r\n        \/\/ 13. Checkboxen\r\n        if (!validateCheckbox('consent1', 'consent1-wrapper')) errors.push($id('consent1-wrapper'));\r\n        if (!validateCheckbox('consent2', 'consent2-wrapper')) errors.push($id('consent2-wrapper'));\r\n        \r\n        \/\/ Bei Fehlern: Status anzeigen und zum ersten Fehler scrollen\r\n        if (errors.length > 0) {\r\n          if (statusDiv) {\r\n            statusDiv.textContent = 'Bitte f\u00fcllen Sie alle Pflichtfelder korrekt aus.';\r\n            statusDiv.className = 'bf-msg bf-err';\r\n            statusDiv.style.display = 'block';\r\n          }\r\n          \r\n          scrollToFirstError(errors);\r\n          return false;\r\n        }\r\n        \r\n        \/\/ Alles OK - Formular per AJAX absenden\r\n        if (statusDiv) {\r\n          statusDiv.style.display = 'none';\r\n        }\r\n        \r\n        if (submitBtn) {\r\n          submitBtn.disabled = true;\r\n          submitBtn.classList.add('is-loading');\r\n          submitBtn.textContent = 'Wird gesendet...';\r\n        }\r\n        \r\n        \/\/ Formulardaten sammeln\r\n        const formData = new FormData();\r\n        \r\n        \/\/ Kredit-Daten\r\n        formData.append('ka_betrag', $id('ka_betrag').value);\r\n        formData.append('ka_laufzeit', $id('ka_laufzeit').value);\r\n        \r\n        \/\/ Pers\u00f6nliche Daten\r\n        formData.append('ka_anrede', $id('ka_anrede').value);\r\n        formData.append('ka_vorname', $id('ka_vorname').value);\r\n        formData.append('ka_nachname', $id('ka_nachname').value);\r\n        \r\n        \/\/ Geburtsdatum\r\n        formData.append('dob_day', $id('dob_day').value);\r\n        formData.append('dob_month', $id('dob_month').value);\r\n        formData.append('dob_year', $id('dob_year').value);\r\n        \r\n        \/\/ Adresse\r\n        formData.append('ka_strasse', $id('ka_strasse').value);\r\n        formData.append('ka_nr', $id('ka_nr').value);\r\n        formData.append('ka_plz', $id('ka_plz').value);\r\n        formData.append('ka_ort', $id('ka_ort').value);\r\n        \r\n        \/\/ Wohnhaft seit\r\n        formData.append('residence_month', $id('residence_month').value);\r\n        formData.append('residence_year', $id('residence_year').value);\r\n        \r\n        \/\/ Alte Adresse (falls ausgef\u00fcllt)\r\n        if (oldAddressSection && oldAddressSection.style.display !== 'none') {\r\n          formData.append('ka_old_strasse', $id('ka_old_strasse').value);\r\n          formData.append('ka_old_nr', $id('ka_old_nr').value);\r\n          formData.append('ka_old_plz', $id('ka_old_plz').value);\r\n          formData.append('ka_old_ort', $id('ka_old_ort').value);\r\n        }\r\n        \r\n        \/\/ Kontakt\r\n        formData.append('ka_country_code', $id('ka_country_code').value);\r\n        formData.append('ka_phone', $id('ka_phone').value);\r\n        formData.append('ka_email', $id('ka_email').value);\r\n        \r\n        \/\/ AJAX-Request zum PHP-Script\r\n        \/\/ WICHTIG: Passe den Pfad zu deinem PHP-Script an!\r\n        const phpScriptUrl = '\/wp-content\/themes\/YOUR-THEME\/kreditanfrage-submit.php';\r\n        \r\n        fetch(phpScriptUrl, {\r\n          method: 'POST',\r\n          body: formData\r\n        })\r\n        .then(response => response.json())\r\n        .then(data => {\r\n          if (submitBtn) {\r\n            submitBtn.disabled = false;\r\n            submitBtn.classList.remove('is-loading');\r\n            submitBtn.textContent = 'Anfrage senden';\r\n          }\r\n          \r\n          if (data.success) {\r\n            if (statusDiv) {\r\n              statusDiv.textContent = data.message || 'Vielen Dank! Ihre Anfrage wurde erfolgreich gesendet.';\r\n              statusDiv.className = 'bf-msg bf-ok';\r\n              statusDiv.style.display = 'block';\r\n            }\r\n            \r\n            \/\/ Optional: Formular zur\u00fccksetzen\r\n            form.reset();\r\n            \r\n            \/\/ Optional: Weiterleitung nach 2 Sekunden\r\n            \/\/ setTimeout(() => { window.location.href = '\/danke'; }, 2000);\r\n            \r\n          } else {\r\n            if (statusDiv) {\r\n              statusDiv.textContent = data.message || 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.';\r\n              statusDiv.className = 'bf-msg bf-err';\r\n              statusDiv.style.display = 'block';\r\n            }\r\n          }\r\n        })\r\n        .catch(error => {\r\n          console.error('Fehler:', error);\r\n          \r\n          if (submitBtn) {\r\n            submitBtn.disabled = false;\r\n            submitBtn.classList.remove('is-loading');\r\n            submitBtn.textContent = 'Anfrage senden';\r\n          }\r\n          \r\n          if (statusDiv) {\r\n            statusDiv.textContent = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.';\r\n            statusDiv.className = 'bf-msg bf-err';\r\n            statusDiv.style.display = 'block';\r\n          }\r\n        });\r\n        \r\n        return false;\r\n      });\r\n    }\r\n    \r\n    \/\/ =======================================\r\n    \/\/ ENDE FORMULAR-VALIDIERUNG\r\n    \/\/ =======================================\r\n\r\n    \/\/ ---- Nachgeladene Features (Tooltip\/Modal) ----\r\n    ric(() => { setupTooltips(); wireLegalModal(LEGAL_URL, TERMS_URL); });\r\n\r\n    \/\/ ===== Tooltips =====\r\n    function setupTooltips(){\r\n      const bubble = $id('infoTooltip');\r\n      if(!bubble) return;\r\n      let openFor=null, hideTimeout=null, reflowScheduled=false;\r\n      const clamp=(n,min,max)=>Math.max(min,Math.min(max,n));\r\n\r\n      function place(icon){\r\n        const text = icon.getAttribute('data-tooltip') || '';\r\n        if(!text) return;\r\n        if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout=null; }\r\n        icon.setAttribute('aria-haspopup','true'); icon.setAttribute('aria-expanded','true');\r\n        const r=icon.getBoundingClientRect();\r\n        const vw=Math.max(document.documentElement.clientWidth, window.innerWidth||0);\r\n        const vh=Math.max(document.documentElement.clientHeight,window.innerHeight||0);\r\n        const margin=10, gap=10, bw=Math.min(250, vw-(margin*2));\r\n        bubble.textContent=text; bubble.style.width=bw+'px';\r\n        bubble.classList.add('show'); bubble.setAttribute('aria-hidden','false');\r\n        const bh=bubble.offsetHeight;\r\n        const iconCenterX=r.left+r.width\/2;\r\n        let top=r.top-bh-gap, pos='top';\r\n        if (top<margin){ top=Math.min(r.bottom+gap, vh-bh-margin); pos='bottom'; }\r\n        let left=iconCenterX-bw\/2; left=clamp(left, margin, vw-bw-margin);\r\n        const arrowLeft=clamp(iconCenterX-left, 12, bw-12);\r\n        bubble.style.setProperty('--arrow-left', arrowLeft+'px');\r\n        bubble.setAttribute('data-pos', pos);\r\n        bubble.style.left=left+'px'; bubble.style.top=top+'px';\r\n        openFor=icon;\r\n      }\r\n      function hide(immediate){\r\n        if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout=null; }\r\n        const doHide=()=>{ bubble.classList.remove('show'); bubble.setAttribute('aria-hidden','true');\r\n          bubble.style.left='-9999px'; bubble.style.top='-9999px'; if(openFor) openFor.setAttribute('aria-expanded','false'); openFor=null; };\r\n        immediate ? doHide() : (hideTimeout=setTimeout(doHide,80));\r\n      }\r\n      function scheduleReflow(){\r\n        if (reflowScheduled) return;\r\n        reflowScheduled=true; requestAnimationFrame(()=>{ reflowScheduled=false; if(openFor) place(openFor); });\r\n      }\r\n\r\n      const icons=$$('.info-icon');\r\n      icons.forEach(icon=>{\r\n        if(!icon.hasAttribute('tabindex')) icon.setAttribute('tabindex','0');\r\n        icon.addEventListener('mouseenter', ()=>{ if(window.innerWidth>768) place(icon); }, {passive:true});\r\n        icon.addEventListener('mouseleave', ()=>{ if(window.innerWidth>768) hide(false); }, {passive:true});\r\n        const tap=(e)=>{ if(window.innerWidth<=768){ e.preventDefault(); e.stopPropagation(); (openFor===icon)?hide(true):place(icon); } };\r\n        icon.addEventListener('click', tap); icon.addEventListener('touchstart', tap, {passive:false});\r\n        icon.addEventListener('focus', ()=>place(icon)); icon.addEventListener('blur', ()=>hide(false));\r\n        icon.addEventListener('keydown', (e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); (openFor===icon)?hide(true):place(icon); } if(e.key==='Escape') hide(true); });\r\n      });\r\n      document.addEventListener('click',(e)=>{ if(window.innerWidth>768) return; if(!bubble.classList.contains('show')) return; if(!e.target.closest('.info-icon')) hide(true); }, {passive:true});\r\n      document.addEventListener('keydown',(e)=>{ if(e.key==='Escape' && bubble.classList.contains('show')) hide(true); });\r\n      window.addEventListener('resize',scheduleReflow,{passive:true}); window.addEventListener('scroll',scheduleReflow,{passive:true});\r\n    }\r\n\r\n    \/\/ ===== Modal \/ Legal =====\r\n    function wireLegalModal(LEGAL_URL, TERMS_URL){\r\n      const modal=$id('ikLegalModal'), btnX=$id('ikLegalClose'), frame=$id('ikLegalFrame'), loader=$id('ikLegalLoader'), extLink=$id('ikLegalExternal'), titleEl=$id('ikLegalTitle');\r\n      if (!modal) return;\r\n      function openModal(url, title){\r\n        if (titleEl) titleEl.textContent = title || 'Rechtlichen Hinweise und Datenschutzerkl\u00e4rung';\r\n        if (frame)   frame.setAttribute('title', title || 'Rechtlichen Hinweise und Datenschutzerkl\u00e4rung');\r\n        if (loader)  loader.classList.remove('is-hidden');\r\n        if (extLink) extLink.href = url;\r\n        if (frame){ frame.onload=function(){ if(loader) loader.classList.add('is-hidden'); }; frame.src=url; }\r\n        modal.classList.add('is-open'); document.body.classList.add('ik-no-scroll'); modal.setAttribute('aria-hidden','false');\r\n      }\r\n      function closeModal(){ modal.classList.remove('is-open'); document.body.classList.remove('ik-no-scroll'); modal.setAttribute('aria-hidden','true'); if(frame) frame.removeAttribute('src'); if(loader) loader.classList.remove('is-hidden'); }\r\n      Array.from(document.querySelectorAll('.js-open-legal')).forEach(a=>{\r\n        const key=a.getAttribute('data-legal-key'); const url=(key==='terms')?TERMS_URL:LEGAL_URL;\r\n        a.addEventListener('click',(e)=>{ e.preventDefault(); e.stopPropagation();\r\n          const t=a.getAttribute('data-legal-title')||(key==='terms'?'Bestimmungen zur Nutzung von elektronischen Kommunikationsmitteln':'Rechtlichen Hinweise und Datenschutzerkl\u00e4rung');\r\n          openModal(url, t);\r\n        });\r\n      });\r\n      btnX && btnX.addEventListener('click',(e)=>{ e.preventDefault(); e.stopPropagation(); closeModal(); });\r\n      modal.addEventListener('click',(e)=>{ if(e.target===modal){ e.preventDefault(); closeModal(); }});\r\n      document.addEventListener('keydown',(e)=>{ if(e.key==='Escape' && modal.classList.contains('is-open')) closeModal(); });\r\n    }\r\n  }\r\n\r\n  \/\/ Start so fr\u00fch wie m\u00f6glich\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', initCalculator, {once:true});\r\n  } else {\r\n    initCalculator();\r\n  }\r\n\r\n  \/\/ Elementor-Init (Guard verhindert Doppelstart)\r\n  if (typeof jQuery !== 'undefined' && window.elementorFrontend) {\r\n    jQuery(window).on('elementor\/frontend\/init', function(){ initCalculator(); });\r\n  }\r\n})();\r\n<\/script>\r\n\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>Kredit berechnen Kreditbetrag i CHF 0.- Laufzeit i 0 Monate Ihre monatliche Rate ab 0.- Die Gesamtkosten f\u00fcr Ihren Kredit von {AMOUNT} reichen von {TMIN} bei einem Zinssatz von {PCTMIN}% bis {TMAX} bei einem Zinssatz von {PCTMAX}%. Jetzt unverbindlich anfragen * Die monatliche Rate ist eine Sch\u00e4tzung. Der endg\u00fcltige Zinssatz h\u00e4ngt von Ihrer Bonit\u00e4t ab. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_eb_attr":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-201198","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/pages\/201198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/comments?post=201198"}],"version-history":[{"count":332,"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/pages\/201198\/revisions"}],"predecessor-version":[{"id":202395,"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/pages\/201198\/revisions\/202395"}],"wp:attachment":[{"href":"https:\/\/www.bestfinance.ch\/it\/wp-json\/wp\/v2\/media?parent=201198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}