{"id":26767,"date":"2025-02-02T14:54:11","date_gmt":"2025-02-02T14:54:11","guid":{"rendered":"https:\/\/www.nordcraftboats.com\/?page_id=26767"},"modified":"2025-02-02T14:54:42","modified_gmt":"2025-02-02T14:54:42","slug":"elementor-26767","status":"publish","type":"page","link":"https:\/\/www.nordcraftboats.com\/sv\/elementor-26767\/","title":{"rendered":"Elementor #26767"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26767\" class=\"elementor elementor-26767\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2f914 e-con-full thegem-e-con-layout-elementor e-flex e-con e-parent\" data-id=\"ef2f914\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;thegem_container_layout&quot;:&quot;elementor&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c56375f flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-html\" data-id=\"c56375f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html>\r\n<head><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dom-to-image\/2.6.0\/dom-to-image.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.4.0\/jspdf.umd.min.js\"><\/script>\r\n\r\n<!-- this configurator is designed, coded and implemented by:\r\nIFID GmbH - Design for meaningful experiences\r\nwww.ifid.design -->\r\n\r\n<script>\r\n\/\/ Arrays mit Modellen und Optionen\r\nconst models = [\r\n  { model: \"17ft\", price: 29990 },\r\n  { model: \"20ft\", price: 33990 },\r\n  { model: \"22ft\", price: 38990 },\r\n  { model: \"25ft\", price: 42990 },\r\n];\r\n\r\nconst floorPlanDataset = [\r\n  { floorPlan: \"CoastSeeker\", price: 0 },\r\n  { floorPlan: \"SunCruiser\", price: 0 },\r\n  { floorPlan: \"BaySeeker\", price: 0 },\r\n  { floorPlan: \"OceanCruiser\", price: 0 },\r\n  { floorPlan: \"SunCruiser\", price: 0 },\r\n  { floorPlan: \"ArchipelagoCruiser\", price: 0 },\r\n];\r\n\r\nconst pantoons = [\r\n  { pantoon: \"Pantoon_Black\", price: 990 },\r\n  { pantoon: \"Pantoon_Alu\", price: 0 },\r\n];\r\n\r\nconst floorTypes = [\r\n  { floorType: \"Floor_EVA_LightBrown\", price: 0 },\r\n  { floorType: \"Floor_EVA_Grey\", price: 0 },\r\n  { floorType: \"Floor_EVA_Black\", price: 0 },\r\n  { floorType: \"Floor_Vinyl_Grey\", price: 0 },\r\n  { floorType: \"Floor_Vinyl_Beige\", price: 0 },\r\n  { floorType: \"Floor_Vinyl_FakeBrownTeak\", price: 0 },\r\n  { floorType: \"Floor_Alu\", price: 990 },\r\n];\r\n\r\nlet fenceType = \"Standard\";\r\n\r\nconst fences = [\r\n  { fence: \"Standard_Fence_BlackBlack\", price: 0 },\r\n  { fence: \"Standard_Fence_BlackBlackStripe\", price: 0 },\r\n  { fence: \"Standard_Fence_BlackGrey\", price: 0 },\r\n  { fence: \"Standard_Fence_BlackGreyStripe\", price: 0 },\r\n\t{ fence: \"Standard_Fence_DalmatianBlue\", price: 0 },\r\n  { fence: \"Standard_Fence_DalmatianBlueStripe\", price: 0 },\r\n  { fence: \"Standard_Fence_PearlRubyRed\", price: 0 },\r\n  { fence: \"Standard_Fence_PearlRubyRedStripe\", price: 0 },\r\n  { fence: \"Standard_Fence_White\", price: 0 },\r\n  { fence: \"Standard_Fence_CharcoalGrey\", price: 0 },\r\n  { fence: \"Upgrade_Fence_BlackBlack\", price: 990 },\r\n  { fence: \"Upgrade_Fence_BlackGrey\", price: 990 },\r\n\t{ fence: \"Upgrade_Fence_DalmatianBlue\", price: 990 },\r\n  { fence: \"Upgrade_Fence_PearlRubyRed\", price: 990 },\r\n  { fence: \"Upgrade_Fence_White\", price: 990 },\r\n  { fence: \"Upgrade_Fence_CharcoalGrey\", price: 990 },\r\n];\r\n\r\n\r\n\r\nconst upholsteries = [\r\n{ upholstery: \"Upholstery_BrownBlack\", price: 0 },\r\n{ upholstery: \"Upholstery_CreamWhiteGrey\", price: 0 },\r\n{ upholstery: \"Upholstery_GreyBlack\", price: 0 },\r\n{ upholstery: \"Upholstery_CreamWhiteBlack\", price: 0 },\r\n{ upholstery: \"Upholstery_LightBrownBlack\", price: 0 },\r\n];\r\n\r\nconst motors = [\r\n  { motor: \"Tohatsu MFS20EEPTL\", price: 3790 },\r\n  { motor: \"Tohatsu MFS30EEPTL\", price: 5190 },\r\n  { motor: \"Tohatsu MFS40EEPTL\", price: 6795 },\r\n  { motor: \"Tohatsu MFS50EEPTL\", price: 6990 },\r\n  { motor: \"Tohatsu MFS60EEPTL\", price: 7990 },\r\n  { motor: \"Tohatsu MFS75EEPTL\", price: 10545 },\r\n  { motor: \"Tohatsu MFS90EEPTL\", price: 11330 },\r\n  { motor: \"Tohatsu MFS100EEPTL\", price: 11870 },\r\n  { motor: \"Tohatsu MFS115EEPTL\", price: 12630 },\r\n  { motor: \"Tohatsu MFS140EEPTL\", price: 13600 },\r\n  { motor: \"Yamaha 20 HP\", price: 4769 },\r\n  { motor: \"Yamaha 30 HP\", price: 6565 },\r\n  { motor: \"Yamaha 40 HP\", price: 7245 },\r\n  { motor: \"Yamaha 50 HP\", price: 8215 },\r\n  { motor: \"Yamaha 60 HP\", price: 9625 },\r\n  { motor: \"Yamaha 70 HP\", price: 11685 },\r\n  { motor: \"Yamaha 80 HP\", price: 13300 },\r\n  { motor: \"Yamaha 90 HP V MAX SHO\", price: 14530 },\r\n  { motor: \"Yamaha 100 HP\", price: 14115 },\r\n  { motor: \"115 HP HP V MAX SHO\", price: 15470 },\r\n  { motor: \"115 HP V MAX SHO\", price: 17520 },\r\n  { motor: \"130 HP\", price: 17415 },\r\n  { motor: \"150 HP\", price: 20705 },\r\n  { motor: \"150 HP V MAX SHO\", price: 21925 },\r\n];\r\n\r\nconst DoubleBimini = [\r\n  { option: \"yes\", price: 490 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst UpgradedSpeakers= [\r\n  { option: \"yes\", price: 490 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst GarminNavigation= [\r\n  { option: \"yes\", price: 1350 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst Refrigerator= [\r\n  { option: \"yes\", price: 1490 },\r\n  { option: \"no\", price: 0},\r\n];\r\nconst Bar= [\r\n  { option: \"yes\", price: 1890 },\r\n  { option: \"no\", price: 0},\r\n];\r\nconst StormCover= [\r\n  { option: \"yes\", price: 1790 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst Toilet= [\r\n  { option: \"yes\", price: 1290 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst ExtraPontoon= [\r\n  { option: \"yes\", price: 2990 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst HydraulicSteering= [\r\n  { option: \"yes\", price: 1990 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst ExtraTable= [\r\n  { option: \"yes\", price: 290 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst Grill= [\r\n  { option: \"yes\", price: 990 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst SkiTowBar= [\r\n  { option: \"yes\", price: 590 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst BiminiTower= [\r\n  { option: \"yes\", price: 990 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\nconst AluminiumDeck= [\r\n  { option: \"yes\", price: 990 },\r\n  { option: \"no\", price: 0},\r\n];\r\n\r\n\/\/ Objekt zur Speicherung der aktuellen Auswahlen\r\nconst selectedItems = {\r\n  model: models[0],\r\n  floorPlan: floorPlanDataset[0],\r\n  pantoon: pantoons[0], \/\/ Pantoon_Black\r\n  floorType: floorTypes[5], \/\/ Floor_Vinyl_FakeBrownTeak\r\n  fence: fences[4], \r\n  upholstery: upholsteries[2], \/\/ Upholstery_GreyBlack\r\n  motor: motors[0], \/\/ Tohatsu MFS20EEPTL\r\n\r\n  \/\/ Alle fehlenden Optionen erg\u00e4nzt (jeweils den ersten Wert als Standard)\r\n  DoubleBimini: DoubleBimini[1], \/\/ No\r\n  UpgradedSpeakers: UpgradedSpeakers[1], \/\/ No\r\n  GarminNavigation: GarminNavigation[1], \/\/ No\r\n  Refrigerator: Refrigerator[1], \/\/ No\r\n  Bar: Bar[1], \/\/ No\r\n  StormCover: StormCover[1], \/\/ No\r\n  Toilet: Toilet[1], \/\/ No\r\n  ExtraPontoon: ExtraPontoon[1], \/\/ No\r\n  HydraulicSteering: HydraulicSteering[1], \/\/ No\r\n  ExtraTable: ExtraTable[1], \/\/ No\r\n  Grill: Grill[1], \/\/ No\r\n  SkiTowBar: SkiTowBar[1], \/\/ No\r\n  BiminiTower: BiminiTower[1], \/\/ No\r\n  AluminiumDeck: AluminiumDeck[1], \/\/ No\r\n};\r\n\r\nconst default17ft = {\r\n  model: models[0], \r\n  floorPlan: floorPlanDataset[0], \r\n  floorType: floorTypes[5],\r\n  fence: fences[4],\r\n  upholstery: upholsteries[2],\r\n};\r\n\r\nconst default20ft = {\r\n  model: models[1], \r\n  floorPlan: floorPlanDataset[0], \r\n  floorType: floorTypes[3],\r\n  fence: fences[0],\r\n  upholstery: upholsteries[4],\r\n};\r\n\r\nconst default22ft = {\r\n  model: models[2], \r\n  floorType: floorTypes[3],\r\n  fence: fences[0],\r\n  upholstery: upholsteries[0],\r\n};\r\n\r\nconst default25ft = {\r\n  model: models[3], \r\n  floorType: floorTypes[5],\r\n  fence: fences[1],\r\n  upholstery: upholsteries[1],\r\n};\r\n\r\n\r\nconst defaultConfigs = {\r\n    \"17ft\": default17ft,\r\n    \"20ft\": default20ft,\r\n    \"22ft\": default22ft,\r\n    \"25ft\": default25ft\r\n};\r\n\r\n\/\/ Allgemeine Funktion zum Erstellen einer URL\r\nfunction createUrl(model, floorPlan, option) {\r\n  return `https:\/\/storage.ifid.design\/nordcraft\/uncompressed\/${model}_${floorPlan}_Hero_${option}.png`;\r\n}\r\n\r\n\/\/ Allgemeine Funktion zum Erstellen einer URL\r\nfunction createUrlTop(model, floorPlan, option) {\r\n  return `https:\/\/storage.ifid.design\/nordcraft\/uncompressed\/${model}_${floorPlan}_Top_${option}.png`;\r\n}\r\n\r\n\/\/ Helper-Funktion f\u00fcr das Setzen von Hintergr\u00fcnden\r\nfunction setBackground(elementId, url) {\r\n  const element = document.getElementById(elementId);\r\n  if (element) {\r\n    element.style.backgroundImage = `url('${url}')`;\r\n  }\r\n}\r\n\r\n\/\/ Auswahl und Gesamtpreis aktualisieren\r\nfunction updatePrice() {\r\n  const totalPrice = Object.values(selectedItems).reduce(\r\n    (sum, item) => sum + (item.price || 0),\r\n    0\r\n  );\r\n\r\n  const priceDisplay = document.getElementById(\"price-display\");\r\n  if (priceDisplay) {\r\n    priceDisplay.textContent = `Price: $${totalPrice}`;\r\n  }\r\n}\r\n\r\nfunction applyDefaults(selected, defaults) {\r\n  Object.keys(defaults).forEach(key => {\r\n    if (selected.hasOwnProperty(key)) {\r\n      selected[key] = defaults[key];\r\n    }\r\n  });\r\n}\r\n\r\n\r\nfunction floorPlanToggle() {\r\n\r\n    if (selectedItems.model.model === \"17ft\") {\r\n        selectedItems.floorPlan = floorPlanDataset[0]; \/\/ Setze explizit den ersten Eintrag\r\n        document.getElementById(\"floorPlan-field17\").style.display = \"flex\";\r\n        document.getElementById(\"floorPlan-field20\").style.display = \"none\";\r\n\r\n    } else if (selectedItems.model.model === \"20ft\") {\r\n        selectedItems.floorPlan = floorPlanDataset[3]; \/\/ Setze explizit den ersten Eintrag\r\n        document.getElementById(\"floorPlan-field20\").style.display = \"flex\";\r\n        document.getElementById(\"floorPlan-field17\").style.display = \"none\";\r\n    }\r\n\r\n    if (selectedItems.model.model === \"22ft\" || selectedItems.model.model === \"25ft\") {\r\n        selectedItems.floorPlan = { floorPlan: \"Standard\", price: 0 }; \/\/ Fallback, wenn kein Floor Plan existiert\r\n        document.getElementById(\"floorPlan-field17\").style.display = \"none\";\r\n        document.getElementById(\"floorPlan-field20\").style.display = \"none\";\r\n    }\r\n\r\n    console.log(\"Aktuelles selectedItems.floorPlan:\", selectedItems.floorPlan);\r\n\r\n}\r\n\r\nfunction fenceTypeToggle() {\r\n\r\nif (fenceType == \"Standard\") {\r\n    document.getElementById(\"standard-fence\").style.display = \"flex\";\r\n    document.getElementById(\"upgrade-fence\").style.display = \"none\";\r\n\r\n} else if (fenceType === \"Upgrade\") {\r\n  document.getElementById(\"standard-fence\").style.display = \"none\";\r\n  document.getElementById(\"upgrade-fence\").style.display = \"flex\";\r\n}\r\n\r\n}\r\n\r\n\r\n\r\nfunction updateSelectedClasses() {\r\n    const buttonMappings = [\r\n        { selector: \".model-button\", key: \"model\", dataset: models },\r\n        { selector: \".floorPlan-button\", key: \"floorPlan\", dataset: floorPlanDataset },\r\n        { selector: \".pantoon-button\", key: \"pantoon\", dataset: pantoons },\r\n        { selector: \".floorType-button\", key: \"floorType\", dataset: floorTypes },\r\n        { selector: \".fence-button\", key: \"fence\", dataset: fences },\r\n        { selector: \".upholstery-button\", key: \"upholstery\", dataset: upholsteries }\r\n    ];\r\n\r\n    \/\/ Entfernt die `selected`-Klasse von allen Buttons, um die korrekten zu setzen\r\n    document.querySelectorAll(\".selected\").forEach(btn => btn.classList.remove(\"selected\"));\r\n\r\n    buttonMappings.forEach(({ selector, key, dataset }) => {\r\n        document.querySelectorAll(selector).forEach((button) => {\r\n            const optionKey = button.getAttribute(\"data-option\"); \/\/ Holt den richtigen Key aus dem Button\r\n            const selectedValue = selectedItems[key]?.[key]; \/\/ Holt den aktuellen Wert aus selectedItems\r\n\r\n            \/\/ Vergleicht die Werte und markiert den Button als `selected`, falls es passt\r\n            const matchingOption = dataset.find(option => option[key] === selectedValue);\r\n            if (matchingOption && matchingOption[key] === optionKey) {\r\n                button.classList.add(\"selected\");\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Spezielle Behandlung f\u00fcr Extras (Checkboxes)\r\n    document.querySelectorAll(\".tik-box-extras\").forEach((box) => {\r\n        const optionKey = box.getAttribute(\"data-option\");\r\n\r\n        if (selectedItems[optionKey]?.option === \"yes\") {\r\n            box.querySelector(\".tik-box\").classList.add(\"selected\");\r\n            box.querySelector(\".tik\").style.display = \"block\";\r\n        } else {\r\n            box.querySelector(\".tik-box\").classList.remove(\"selected\");\r\n            box.querySelector(\".tik\").style.display = \"none\";\r\n        }\r\n    });\r\n\r\n    \/\/ Behandlung f\u00fcr Fence-Typ-Umschalter (Standard\/Upgrade)\r\n    document.querySelectorAll(\".fenceType-button\").forEach((button) => {\r\n        if (button.getAttribute(\"data-option\") === fenceType) {\r\n            button.classList.add(\"selected\");\r\n        } else {\r\n            button.classList.remove(\"selected\");\r\n        }\r\n    });\r\n\r\n    \/\/ Behandlung f\u00fcr das Dropdown-Men\u00fc (Motor)\r\n    const selectedMotorText = `${selectedItems.motor.motor} - $${selectedItems.motor.price}`;\r\n    document.getElementById(\"selected-option\").textContent = selectedMotorText;\r\n}\r\n\r\n\r\nfunction updateAllBackgrounds() {\r\n  setBackground(\"model\", createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", \"Baselayer\"));\r\n  setBackground(\"floorPlan\", createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", \"Baselayer\"));\r\n  setBackground(\"pantoon\", createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.pantoon.pantoon));\r\n  setBackground(\"floorType\", createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.floorType.floorType));\r\n  setBackground(\"fence\", createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.fence.fence));\r\n  setBackground(\"upholstery\", createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.upholstery.upholstery));\r\n\r\n  \/\/Top\r\n  setBackground(\"model-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", \"Baselayer\"));\r\n  setBackground(\"floorPlan-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", \"Baselayer\"));\r\n  setBackground(\"pantoon-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.pantoon.pantoon));\r\n  setBackground(\"floorType-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.floorType.floorType));\r\n  setBackground(\"fence-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.fence.fence));\r\n  setBackground(\"upholstery-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.upholstery.upholstery));\r\n}\r\n\r\n\r\nfunction setupEventListeners() {\r\n  \/\/ Allgemeine Event-Listener f\u00fcr alle Buttons mit Datenzuweisung\r\n  const buttonMappings = [\r\n    { selector: \".model-button\", key: \"model\", dataset: models, updateBackground: true, imageType: \"Baselayer\" },\r\n    { selector: \".floorPlan-button\", key: \"floorPlan\", dataset: floorPlanDataset, updateBackground: true },\r\n    { selector: \".pantoon-button\", key: \"pantoon\", dataset: pantoons, updateBackground: true },\r\n    { selector: \".floorType-button\", key: \"floorType\", dataset: floorTypes, updateBackground: true },\r\n    { selector: \".fence-button\", key: \"fence\", dataset: fences, updateBackground: true },\r\n    { selector: \".upholstery-button\", key: \"upholstery\", dataset: upholsteries, updateBackground: true }\r\n  ];\r\n\r\n  buttonMappings.forEach(({ selector, key, dataset, updateBackground, imageType }) => {\r\n    document.querySelectorAll(selector).forEach((button, index) => {\r\n      button.addEventListener(\"click\", function () {\r\n        selectedItems[key] = dataset[index];\r\n\r\n        console.log(`default${dataset[index].model}`);\r\n\r\n        \/\/ **Wenn das Modell ge\u00e4ndert wird, ALLE Bilder aktualisieren**\r\n        if (key === \"model\") {\r\n\r\n          const modelKey = dataset[index].model; \/\/ \"17ft\", \"20ft\", ...\r\n            if (defaultConfigs[modelKey]) {\r\n              applyDefaults(selectedItems, defaultConfigs[modelKey]);\r\n                }\r\n\r\n          floorPlanToggle();\r\n          updateSelectedClasses();\r\n          updateAllBackgrounds();\r\n\r\n        } else if (key == \"floorPlan\") {\r\n\r\n          const optionValue = selectedItems[key]?.[key] || imageType;\r\n          setBackground(key, createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", optionValue));\r\n          updateAllBackgrounds();\r\n        }  else {\r\n          \/\/ **Nur das betroffene Element updaten**\r\n          console.log(key == \"fence\" && button.classList.contains(\"stripe\"));\r\n          const optionValue = selectedItems[key]?.[key] || imageType;\r\n          setBackground(key, createUrl(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", optionValue));\r\n        }\r\n\r\n        updatePrice();\r\n        handleSelection(button, selector.replace(\".\", \"\")); \/\/ Entfernt den Punkt f\u00fcr die Klasse\r\n        updateHiddenField();\r\n      });\r\n    });\r\n  });\r\n\r\n  document.querySelectorAll(\".fenceType-button\").forEach((button) => {\r\n    button.addEventListener(\"click\", function () {\r\n      \/\/ Hole den Wert von data-option des geklickten Elements\r\n      const selectedFenceType = button.getAttribute(\"data-option\");\r\n\r\n      if (selectedFenceType) {\r\n        fenceType = selectedFenceType; \/\/ Setze fenceType auf den neuen Wert\r\n      }\r\n\r\n      fenceTypeToggle();\r\n\r\n      console.log(\"Aktueller fenceType:\", fenceType);\r\n\r\n      \/\/ Visuelle Auswahl aktualisieren\r\n      handleSelection(button, \"fenceType-button\");\r\n    });\r\n  });\r\n\r\n  \r\n\r\n  document.querySelectorAll(\".tik-box-extras\").forEach((box) => {\r\n    box.addEventListener(\"click\", function () {\r\n      const tikBoxElement = box.querySelector(\".tik-box\");\r\n      const tikElement = box.querySelector(\".tik\");\r\n\r\n      \/\/ Toggle `.selected`-Klasse\r\n      tikBoxElement.classList.toggle(\"selected\");\r\n\r\n      \/\/ Name des Keys aus dem Dataset holen (z.B. data-option=\"DoubleBimini\")\r\n      const optionKey = box.getAttribute(\"data-option\");\r\n\r\n      \/\/ Sicherstellen, dass optionKey existiert\r\n      if (optionKey && typeof selectedItems[optionKey] !== \"undefined\") {\r\n        \/\/ Holen der richtigen Datenquelle\r\n        const optionArray = eval(optionKey);\r\n        \r\n        if (optionArray) {\r\n          \/\/ Setze Index 0, wenn `selected`, sonst Index 1\r\n          selectedItems[optionKey] = optionArray[tikBoxElement.classList.contains(\"selected\") ? 0 : 1];\r\n\r\n          \/\/ Preis-Update nach jeder \u00c4nderung\r\n          updatePrice();\r\n        } else {\r\n          console.error(`\u274c Fehler: Kein Array f\u00fcr '${optionKey}' gefunden!`);\r\n        }\r\n      } else {\r\n        console.error(`\u274c Fehler: '${optionKey}' existiert nicht in selectedItems.`);\r\n      }\r\n\r\n      \/\/ Zeige\/Verstecke das `.tik`-Element\r\n      if (tikElement) {\r\n        tikElement.style.display = tikBoxElement.classList.contains(\"selected\") ? \"block\" : \"none\";\r\n      }\r\n    });\r\n  });\r\n}\r\n\r\n\r\n\r\n\/\/ Funktion, um die 'selected'-Klasse zu handhaben\r\nfunction handleSelection(button, buttonGroupClass) {\r\n  const buttons = document.querySelectorAll(`.${buttonGroupClass}`);\r\n  buttons.forEach(btn => btn.classList.remove('selected'));\r\n  button.classList.add('selected');\r\n}\r\n\r\n\r\nfunction toggleDropdown() {\r\n  const dropdown = document.getElementById(\"drop-down-menu\");\r\n  const currentDisplay = window.getComputedStyle(dropdown).display;\r\n\r\n  dropdown.style.display = currentDisplay === \"none\" ? \"block\" : \"none\";\r\n}\r\n\r\nfunction selectOption(selectedMotor, event) {\r\n  event.stopPropagation(); \/\/ Verhindert, dass das globale Klick-Event das Dropdown direkt schlie\u00dft\r\n  const selectedOption = document.getElementById(\"selected-option\");\r\n  selectedOption.textContent = `${selectedMotor.motor} - $${selectedMotor.price}`;\r\n  selectedItems.motor = selectedMotor;\r\n      updatePrice();\r\n  \r\n  document.getElementById(\"drop-down-menu\").style.display = \"none\"; \/\/ Schlie\u00dfe das Men\u00fc\r\n}\r\n\r\nfunction populateDropdown() {\r\n  const dropdownMenu = document.getElementById(\"drop-down-menu\");\r\n\r\n  \/\/ Vorherige Inhalte entfernen, um doppelte Eintr\u00e4ge zu vermeiden\r\n  dropdownMenu.innerHTML = \"\";\r\n\r\n  motors.forEach((motor) => {\r\n    const li = document.createElement(\"li\");\r\n    li.textContent = `${motor.motor} - $${motor.price}`;\r\n    \r\n    \/\/ Verwende event.stopPropagation() beim Klicken\r\n    li.addEventListener(\"click\", (event) => selectOption(motor, event));\r\n    \r\n    dropdownMenu.appendChild(li);\r\n  });\r\n}\r\n\r\n\/\/ Schlie\u00dft das Dropdown, wenn au\u00dferhalb geklickt wird\r\ndocument.addEventListener(\"click\", function (event) {\r\n  const dropdown = document.getElementById(\"drop-down-menu\");\r\n  const dropDownButton = document.querySelector(\".drop-down\");\r\n\r\n  \/\/ Schlie\u00dfen, wenn NICHT auf Dropdown oder Button geklickt wurde\r\n  if (!dropDownButton.contains(event.target) && !dropdown.contains(event.target)) {\r\n    dropdown.style.display = \"none\";\r\n  }\r\n});\r\n\r\nfunction updateHiddenField() {\r\n    const selectedItemsInput = document.getElementById(\"selected-items\");\r\n    if (selectedItemsInput) {\r\n        selectedItemsInput.value = JSON.stringify(selectedItems);\r\n    }\r\n}\r\n\r\nfunction showSummary() {\r\n    const summaryList = document.getElementById(\"summary-list\");\r\n    const finalProduct = document.getElementById(\"finalProduct\");\r\n    const messageInput = document.getElementById(\"message\");\r\n    \r\n    \/\/ Popup-Inhalt leeren\r\n    summaryList.innerHTML = \"\";\r\n    finalProduct.innerHTML = \"\";\r\n\r\n    \/\/ Gesamtpreis berechnen\r\n    const totalPrice = Object.values(selectedItems).reduce((sum, item) => sum + (item.price || 0), 0);\r\n    \r\n    let summaryText = `Total Price: $${totalPrice}\\n\\n`;\r\n\r\n    Object.keys(selectedItems).forEach((key) => {\r\n        const item = selectedItems[key];\r\n        if (!item || typeof item !== \"object\") return;\r\n        \r\n        const itemKey = Object.keys(item)[0];\r\n        const itemValue = item[itemKey];\r\n\r\n        \/\/ \u00dcberpr\u00fcfen, ob es sich um eine Extra-Option handelt und ob sie auf \"yes\" gesetzt ist\r\n        if (item.hasOwnProperty(\"option\") && item.option !== \"yes\") return;\r\n        \r\n        const listItem = document.createElement(\"p\");\r\n        listItem.textContent = `${key.replace(\/([A-Z])\/g, ' $1')}: ${itemValue} (Price: $${item.price || 0})`;\r\n        summaryList.appendChild(listItem);\r\n\r\n        summaryText += `${key.replace(\/([A-Z])\/g, ' $1')}: ${itemValue} (Price: $${item.price || 0})\\n`;\r\n    });\r\n\r\n    \/\/ Schichten basierend auf `selectedItems` hinzuf\u00fcgen\r\n    Object.keys(selectedItems).forEach((key) => {\r\n        const item = selectedItems[key];\r\n        const itemKey = Object.keys(item)[0];\r\n        const itemValue = item[itemKey];\r\n    \r\n        const layer = document.createElement(\"div\");\r\n        layer.style.position = \"absolute\";\r\n        layer.style.top = \"0\";\r\n        layer.style.left = \"0\";\r\n        layer.style.width = \"100%\";\r\n        layer.style.height = \"100%\";\r\n        layer.style.backgroundImage = `url('https:\/\/storage.ifid.design\/Testing\/config\/Testbilder\/${model}_${floorPlan}_Hero_${option}.png')`;\r\n        layer.style.backgroundSize = \"contain\";\r\n        layer.style.backgroundRepeat = \"no-repeat\";\r\n        layer.style.backgroundPosition = \"center\";\r\n        finalProduct.appendChild(layer);\r\n      });\r\n\r\n    \r\n\r\n    \/\/ Zeigt das Pop-up an\r\n    document.getElementById(\"summary-popup\").style.display = \"flex\";\r\n    document.getElementById(\"popup-overlay\").style.display = \"block\";\r\n\r\n\r\n}\r\n\r\n\/\/ Event Listener f\u00fcr den Button, um die Zusammenfassung zu zeigen\r\nif (document.getElementById(\"show-summary\")) {\r\n    document.getElementById(\"show-summary\").addEventListener(\"click\", showSummary);\r\n}\r\n\r\n\/\/ Pop-up schlie\u00dfen\r\nif (document.getElementById(\"close-popup\")) {\r\n    document.getElementById(\"close-popup\").addEventListener(\"click\", function () {\r\n        document.getElementById(\"summary-popup\").style.display = \"none\";\r\n        document.getElementById(\"popup-overlay\").style.display = \"none\";\r\n    });\r\n}\r\n\r\n\r\n\r\n\/\/ Dokument laden und Initialisierung\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n  updateSelectedClasses();\r\n  \/\/ Standardwerte setzen\r\n  setBackground(\"model\", createUrl(selectedItems.model.model, selectedItems.floorPlan.floorPlan, \"Baselayer\"));\r\n  setBackground(\"floorPlan\", createUrl(selectedItems.model.model, selectedItems.floorPlan.floorPlan, \"Baselayer\"));\r\n  setBackground(\"pantoon\", createUrl(selectedItems.model.model, selectedItems.floorPlan.floorPlan, selectedItems.pantoon.pantoon));\r\n  setBackground(\"floorType\", createUrl(selectedItems.model.model, selectedItems.floorPlan.floorPlan, selectedItems.floorType.floorType));\r\n  setBackground(\"fence\", createUrl(selectedItems.model.model, selectedItems.floorPlan.floorPlan, selectedItems.fence.fence));\r\n  setBackground(\"upholstery\", createUrl(selectedItems.model.model, selectedItems.floorPlan.floorPlan, selectedItems.upholstery.upholstery));\r\n\r\n  \/\/Top\r\n  setBackground(\"model-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", \"Baselayer\"));\r\n  setBackground(\"floorPlan-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", \"Baselayer\"));\r\n  setBackground(\"pantoon-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.pantoon.pantoon));\r\n  setBackground(\"floorType-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.floorType.floorType));\r\n  setBackground(\"fence-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.fence.fence));\r\n  setBackground(\"upholstery-top\", createUrlTop(selectedItems.model.model, selectedItems.floorPlan?.floorPlan || \"Standard\", selectedItems.upholstery.upholstery));\r\n \r\n  populateDropdown();\r\n  setupEventListeners();\r\n  updatePrice();\r\n\r\nlet formattedItems = \"\";\r\n\r\nif (typeof selectedItems === \"object\" && selectedItems !== null) {\r\n    Object.keys(selectedItems).forEach(key => {\r\n        const item = selectedItems[key];\r\n\r\n        \/\/ Sicherstellen, dass item ein Objekt ist\r\n        if (typeof item === \"object\" && item !== null) {\r\n            \/\/ Extrahiere den Namen des ausgew\u00e4hlten Elements\r\n            const name = item.model || item.floorPlan || item.pantoon || item.floorType || \r\n                         item.fence || item.upholstery || item.motor || item.option || \"Unbekannt\";\r\n\r\n            formattedItems += `${key.replace(\/([A-Z])\/g, \" $1\")}: ${name} (Preis: $${item.price ?? 0})\\n`;\r\n        } else {\r\n            \/\/ Falls item direkt ein Wert ist (z. B. String oder Zahl)\r\n            formattedItems += `${key.replace(\/([A-Z])\/g, \" $1\")}: ${item} (Preis: $0)\\n`;\r\n        }\r\n    });\r\n}\r\n\r\n\/\/ Setze den Wert in das Eingabefeld, falls es existiert\r\nconst selectedItemsInput = document.getElementById(\"selected-items\");\r\nif (selectedItemsInput) {\r\n    selectedItemsInput.value = formattedItems.trim();\r\n}\r\n\r\n});\r\n\r\nfunction checkScreenSize() {\r\n    const popUp = document.querySelector(\".too-small-pop-up\");\r\n\r\n    if (window.innerWidth <= 1200) {\r\n      popUp.style.display = \"flex\"; \/\/ Pop-up anzeigen\r\n    } else {\r\n      popUp.style.display = \"none\"; \/\/ Pop-up verstecken\r\n    }\r\n  }\r\n\r\n  \/\/ Funktion direkt beim Laden ausf\u00fchren\r\n  window.addEventListener(\"load\", checkScreenSize);\r\n  \/\/ Funktion bei jeder Gr\u00f6\u00dfen\u00e4nderung ausf\u00fchren\r\n  window.addEventListener(\"resize\", checkScreenSize);\r\n\r\n\r\n \r\n\r\n<\/script>\r\n\r\n<style>\r\n\r\n\r\n#parent-container {\r\n    display: flex; \/* Flexbox-Layout aktivieren *\/\r\n    flex-direction: row; \/* Elemente nebeneinander anordnen *\/\r\n    width: 100%; \/* Vollst\u00e4ndige Breite *\/\r\n    height: 90vh; \/* Vollst\u00e4ndige H\u00f6he *\/\r\n    font-family: 'Jost', sans-serif;\r\n    margin-top: 100px;\r\n  }\r\n  \r\n\r\n  .extras-wrapper {\r\n      grid-column-gap: 20px;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .tik-box-extras {\r\n      grid-column-gap: 5px;\r\n      color: #63717e;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      width: 300px;\r\n      font-size: 18px;\r\n      text-decoration: none;\r\n      display: flex;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    \r\n    .tik-box-extras:hover {\r\n      color: #bbaa8b;\r\n    }\r\n    \r\n    .swatch {\r\n      grid-row-gap: 10px;\r\n      color: #63717e;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100px;\r\n      min-height: 90px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    \r\n    .swatch:hover {\r\n      color: #bbaa8b;\r\n    }\r\n    \r\n    .swatch.selected {\r\n      color: #f5f6f6;\r\n    }\r\n    \r\n   \r\n    \r\n    .color-swatch-image {\r\n      border-style: solid;\r\n      border-width: 0px;\r\n      object-fit: cover;\r\n      border-color: #fff;\r\n      border-radius: 100px;\r\n    }\r\n    \r\n    .price-bg {\r\n      grid-row-gap: 15px;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n      padding-top: 30px;\r\n    }\r\n    \r\n    .extras {\r\n      grid-row-gap: 10px;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .border {\r\n      border: 3px #e6e6e6;\r\n      border-radius: 100px;\r\n      flex: 0 auto;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      text-decoration: none;\r\n    }\r\n    \r\n    .border.selected {\r\n      border-style: solid;\r\n    }\r\n    \r\n    .model-wrapper {\r\n      grid-row-gap: 20px;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      max-width: 377px;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .ui-wrapper {\r\n      \/* grid-row-gap: 30px; *\/\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      text-decoration: none;\r\n      display: flex;\r\n    \r\n      overflow-x: hidden;\r\n      height: 100%;\r\n    }\r\n    \r\n    .customize-your {\r\n      color: #E6E6E6;\r\n      -webkit-text-stroke-width: 1;\r\n      -webkit-text-stroke-color: var(--Primary, #BBAA8B);\r\n      font-size: 32px;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .pontoon-boat {\r\n      color: var(--Primary, #BBAA8B);\r\n      font-size: 32px;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n      line-height: 2em;\r\n    }\r\n    \r\n    \r\n    .button-wrapper {\r\n      grid-column-gap: 10px;\r\n      flex-wrap: wrap;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .submit-button {\r\n      background-color: #e6e6e6;\r\n      border-radius: 5px;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      padding: 20px 100px;\r\n      text-decoration: none;\r\n      display: flex;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    \r\n    .field-heading {\r\n      color: #fff;\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n      font-size: 24px;\r\n      font-weight: 700;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n    }\r\n    \r\n    .moving-ui {\r\n      grid-row-gap: 30px;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      display: flex;\r\n    }\r\n    \r\n    \r\n    .text-4 {\r\n      color: #fff;\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n      font-size: 24px;\r\n      font-weight: 400;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n    }\r\n    \r\n    .drop-down-secondary {\r\n      color: #e6e6e6;\r\n      border-radius: 3px;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      width: 173px;\r\n      padding-top: 15px;\r\n      padding-bottom: 15px;\r\n      text-decoration: none;\r\n      display: flex;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    \r\n    .drop-down-secondary:hover {\r\n      color: #bbaa8b;\r\n    }\r\n    \r\n    .color {\r\n      object-fit: cover;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 45px;\r\n      height: 45px;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .color:hover {\r\n      border: 1px solid #000;\r\n    }\r\n    \r\n    .price-wrapper {\r\n      position: sticky;\r\n      bottom: 0;\r\n      grid-row-gap: 25px;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n      z-index: 100;\r\n      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);\r\n      gap: 15px;\r\n      align-self: stretch;\r\n      padding-bottom: 30px;\r\n      background-color: #071426;\r\n      border: 0 solid #bbaa8b;\r\n      border-top-width: 2px;\r\n    }\r\n    \r\n    .floorPlan-button {\r\n      grid-column-gap: 10px;\r\n      color: #f5f6f6;\r\n      background-color: #071426;\r\n      border: 2px solid #bbaa8b;\r\n      border-radius: 5px;\r\n      flex: 0 auto;\r\n      justify-content: center;\r\n      align-items: center;\r\n      padding: 15px;\r\n      font-size: 18px;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    \r\n    .floorPlan-button:hover {\r\n      background-color: #bbaa8b;\r\n    }\r\n    \r\n    .floorPlan-button.selected {\r\n      color: #071426;\r\n      background-color: #e6e6e6;\r\n      border-color: #e6e6e6;\r\n      font-weight: 700;\r\n    }\r\n    \r\n    .options-wrapper {\r\n      grid-row-gap: 30px;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      padding-top: 30px;\r\n    }\r\n    \r\n    .field {\r\n      grid-row-gap: 20px;\r\n      background-color: #071426;\r\n      border: 2px solid #bbaa8b;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      max-width: 600px;\r\n      padding: 30px;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .text-6 {\r\n      color: #071426;\r\n      text-align: center;\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n      font-size: 20px;\r\n      font-weight: 700;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n    }\r\n    \r\n    .color-name-long {\r\n      text-align: center;\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n      font-size: 14px;\r\n      font-weight: 400;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n    }\r\n    \r\n    .configurator-wrapper {\r\n     \r\n     background-position: 50%;\r\n     background-repeat: no-repeat;\r\n     background-size: cover;\r\n     flex-direction: column;\r\n     justify-content: flex-start;\r\n     align-items: flex-start;\r\n     flex: 0 0 650px;\r\n     max-width: 650px;\r\n     height: 100%;\r\n     text-decoration: none;\r\n     padding-left: 20px;\r\n     padding-right: 20px;\r\n     display: flex;\r\n     overflow-x: hidden;\r\n     z-index: 10;\r\n     background-image: url('https:\/\/storage.ifid.design\/Testing\/config\/assets\/background_dark_small.jpg');\r\n   }\r\n    \r\n    .choose-an-option {\r\n      text-align: center;\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n      font-size: 14px;\r\n      font-weight: 700;\r\n      line-height: 100%;\r\n      text-decoration: underline;\r\n    }\r\n    \r\n    .double-color {\r\n      object-fit: cover;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 45px;\r\n      height: 45px;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .color-swatch-wrapper {\r\n      grid-column-gap: 30px;\r\n      flex-wrap: wrap;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .text-2 {\r\n      color: #e6e6e6;\r\n      text-align: center;\r\n      margin-top: 0;\r\n      margin-bottom: 0;\r\n      font-size: 18px;\r\n      font-weight: 700;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n    }\r\n    \r\n    .selector-arrow {\r\n      object-fit: cover;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 7px;\r\n      height: 14px;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .model-button {\r\n      grid-column-gap: 20px;\r\n      color: #71767b;\r\n      background-color: #071426;\r\n      border: 1.5px solid #bbaa8b;\r\n      border-radius: 3px;\r\n      flex: 0 auto;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      padding: 15px 20px;\r\n      font-size: 24px;\r\n      font-weight: 700;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n      cursor: pointer;\r\n      user-select: none;\r\n    }\r\n    \r\n    .model-button:hover {\r\n      background-color: #bbaa8b;\r\n    }\r\n    \r\n    .model-button.selected {\r\n      color: #071426;\r\n      background-color: #e6e6e6;\r\n    }\r\n    \r\n    .vectors-wrapper-3 {\r\n      object-fit: cover;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 7px;\r\n      height: 14px;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .configurator-header {\r\n      position: sticky;\r\n      top: 0;\r\n      grid-column-gap: 10px;\r\n      border: 0 solid #bbaa8b;\r\n      border-bottom-width: 2px;\r\n      width: 100%;\r\n      padding-bottom: 30px;\r\n      text-decoration: none;\r\n      display: flex;\r\n      z-index: 100;\r\n    }\r\n\r\n    \/* .configurator-header::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      bottom: -12px; \r\n      width: 100%;\r\n      height: 10px; \r\n      background: linear-gradient(to bottom, rgba(230, 230, 230, 1), transparent);\r\n      pointer-events: none; \/* Keine Klick-Interaktion \r\n      } *\/\r\n    \r\n   \r\n    \r\n    .fenceType-button {\r\n      grid-column-gap: 10px;\r\n      color: #f5f6f6;\r\n      background-color: #071426;\r\n      border: 2px solid #bbaa8b;\r\n      border-radius: 5px;\r\n      flex: 0 auto;\r\n      justify-content: center;\r\n      align-items: center;\r\n      padding: 15px;\r\n      font-size: 18px;\r\n      line-height: 100%;\r\n      text-decoration: none;\r\n      display: flex;\r\n    }\r\n    \r\n    .fenceType-button:hover {\r\n      background-color: #bbaa8b;\r\n    }\r\n    \r\n    .fenceType-button.selected {\r\n      color: #071426;\r\n      background-color: #e6e6e6;\r\n      border-color: #e6e6e6;\r\n      font-weight: 700;\r\n    }\r\n    \r\n\/* Konfigurator Container *\/\r\n#configurator {\r\n  position: relative;\r\n  width: 100%;\r\n  min-width: 500px;\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-image: url('https:\/\/storage.ifid.design\/Testing\/config\/assets\/background_light_small.jpg');\r\n  overflow: hidden;\r\n}\r\n\r\n\/* Side View - Gro\u00df und zentral *\/\r\n#side-view {\r\n  position: absolute;\r\n  left: 0;\r\n  width: 100%;\r\n  max-height: 1000px;\r\n  height: 100%;\r\n  transform: translateY(-15%);\r\n}\r\n\r\n\/* Top View - Kleines Overlay unten links *\/\r\n#top-view {\r\n  position: absolute;\r\n  bottom: 2%; \/* Abstand vom unteren Rand *\/\r\n  left: 2%; \/* Abstand vom linken Rand *\/\r\n  width: 25%; \/* Kleinere Gr\u00f6\u00dfe *\/\r\n  height: 25%;\r\n  min-width: 400px;\r\n  background: rgba(255, 255, 255, 0.6); \/* Halbtransparenter Hintergrund *\/\r\n  border: 2px solid rgba(0, 0, 0, 0.5);\r\n  backdrop-filter: blur(5px); \/* Optionaler Blur f\u00fcr einen modernen Look *\/\r\n}\r\n\r\n\/* Layers f\u00fcr Side View *\/\r\n#side-view div {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  background-size: contain;\r\n}\r\n\r\n\/* Layers f\u00fcr Top View *\/\r\n#top-view div {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-repeat: no-repeat;\r\n  background-position: center center;\r\n  background-size: contain;\r\n}\r\n\r\n\/* Z-Index f\u00fcr Layer *\/\r\n#side-view div {\r\n  z-index: 2; \/* Sicherstellen, dass Side View \u00fcber allem ist *\/\r\n}\r\n\r\n#top-view {\r\n  z-index: 3; \/* Top View ist sichtbar, aber kleiner *\/\r\n}\r\n  \r\n  \r\n  \r\n    .drop-down {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 400px;\r\n    padding: 15px;\r\n    background-color: #071426;\r\n    border: 2px solid #bbaa8b;\r\n    border-radius: 3px;\r\n    color: #f5f6f6;\r\n    font-size: 18px;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    text-decoration: none;\r\n    position: relative;\r\n  }\r\n  \r\n  .drop-down:hover {\r\n    background-color: #bbaa8b; \/* Hover-Farbe *\/\r\n    color: #071426;\r\n  }\r\n  \r\n  .drop-down-menu {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    width: 100%;\r\n    background-color: #071426; \/* Dropdown-Hintergrundfarbe *\/\r\n    border: 2px solid #bbaa8b;\r\n    border-radius: 5px;\r\n    overflow-y: auto; \/* Scrollbar bei Bedarf *\/\r\n    list-style: none;\r\n    margin: 5px 0 0;\r\n    padding: 0;\r\n    z-index: 20;\r\n    display: none; \/* Standardm\u00e4\u00dfig ausgeblendet *\/\r\n    max-height: 350px;\r\n    overflow-y: auto;\r\n  }\r\n  \r\n  .drop-down-menu li {\r\n    padding: 15px;\r\n    font-size: 18px;\r\n    color: #f5f6f6;\r\n    background-color: #071426; \/* Hintergrund *\/\r\n    text-align: center;\r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    transition: background-color 0.3s ease;\r\n  }\r\n  \r\n  .drop-down-menu li:hover {\r\n    background-color: #bbaa8b; \/* Hover-Farbe *\/\r\n    color: #071426;\r\n  }\r\n  \r\n  .drop-down-menu li.selected {\r\n    color: #071426;\r\n    background-color: #e6e6e6;\r\n    border-color: #e6e6e6;\r\n    font-weight: 700;\r\n  }\r\n\r\n  \/* .price-wrapper::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  top: -10px;\r\n  width: 100%;\r\n  height: 10px; \r\n  background: linear-gradient(to top, rgba(230, 230, 230, 1), transparent); \r\n  pointer-events: none;\r\n} *\/\r\n\r\n.final-price {\r\ncolor: var(--Primary, #BBAA8B);\r\nfont-size: 24px;\r\nfont-style: normal;\r\nfont-weight: 700;\r\nline-height: normal;\r\n\r\n}\r\n\r\n.tik {\r\n  display:none;\r\n  width: 16px;\r\n  height: 16px;\r\n  position:relative;\r\n}\r\n\r\n.tik-box {\r\n  border-radius: 2px;\r\n  border: 1px solid var(--Primary, #BBAA8B);\r\n  border-radius: 2px;\r\n  width: 16px;\r\n  height: 16px;\r\n  }\r\n\r\n  .tik-box.selected{\r\n    background-color: #e6e6e6;\r\n  }\r\n\r\n  .upholstery-swatch {\r\n    border-radius: 100px;\r\n  }\r\n\r\n  \/* Standard Border beim Hover *\/\r\n.swatch:hover img {\r\n  border: 2px solid var(--Primary, #BBAA8B); \/* Blau beim Hover *\/\r\n  border-radius: 100px; \/* Optional f\u00fcr abgerundete Kanten *\/\r\n}\r\n\r\n\/* Wenn swatch bereits selected ist, bleibt die Border wei\u00df *\/\r\n.swatch.selected img {\r\n  border: 2px solid #e6e6e6;\r\n  border-radius: 100px; \/* Optional f\u00fcr abgerundete Kanten *\/\r\n}\r\n  \r\n  \r\n.swatch img {\r\n  \r\n  border-radius: 50%; \/* Macht das Bild rund *\/\r\n  object-fit: cover;  \/* Sorgt daf\u00fcr, dass das Bild den runden Bereich ausf\u00fcllt *\/\r\n  display: block;  \/* Verhindert L\u00fccken durch Inline-Elemente *\/\r\n}\r\n\r\n  .too-small-pop-up {\r\n\r\n  width: 100%;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n\r\n  display: none; \/* Standardm\u00e4\u00dfig versteckt *\/\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background: rgba(7, 20, 38, 0.98);\r\n  color: white;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  text-align: center;\r\n  z-index: 1000;\r\n\r\n  }\r\n\r\n  .flex-center {\r\n  display: flex;\r\n  height: 100px;\r\n  max-width: 600px;\r\n  padding-bottom: 30px;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: 20px;\r\n  }\r\n\r\n  .pop-up-heading {\r\n    color: var(--Primary, #BBAA8B);\r\n  font-size: 32px;\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  line-height: normal;\r\n  }\r\n\r\n  .pop-up-text {\r\n  color: var(--Light-Grey, #E6E6E6);\r\n  font-size: 20px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: normal;\r\n  }\r\n\r\n  .heading-config {\r\n    padding: 0px;\r\n    margin: 0px;\r\n  }\r\n\r\n  .heading-config span{\r\n    padding: 0px;\r\n    margin: 0px;\r\n  }\r\n\r\n\r\n    \r\n  <\/style>\r\n  \r\n  <\/head><\/html>\r\n\r\n    \r\n  \r\n<body><div id=\"parent-container\">\r\n  <div style=\"height: 80px\"> <\/div>\r\n  <div class=\"configurator-wrapper\">\r\n      <div class=\"configurator-header\">\r\n        <div class=\"customize-your-pontoon-boat\">\r\n            <h1 class=\"heading-config\">\r\n \t\t\t\t\t\t\t \t<span class=\"customize-your\">CUSTOMIZE YOUR<\/span><br>\r\n  \t\t\t\t\t\t\t<span class=\"pontoon-boat\"> PONTOON BOAT<\/span>\r\n\t\t\t\t\t\t<\/h1>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ui-wrapper\">\r\n        <div class=\"options-wrapper\">\r\n          <div class=\"moving-ui\">\r\n            <div class=\"model-wrapper\">\r\n              <div class=\"extras-wrapper\">\r\n                <div class=\"model-button\" data-index=\"0\" data-option=\"17ft\">\r\n                  <div>17\u2019<\/div>\r\n                <\/div>\r\n                <div class=\"model-button\" data-index=\"1\" data-option=\"20ft\">\r\n                  <div>20\u2019<\/div>\r\n                <\/div>\r\n                <div class=\"model-button\" data-index=\"2\" data-option=\"22ft\">\r\n                  <div>22\u2019<\/div>\r\n                <\/div>\r\n                <div class=\"model-button\" data-index=\"3\" data-option=\"25ft\">\r\n                  <div>25\u2019<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div id=\"floorPlan-field17\" class=\"field\">\r\n              <div class=\"field-heading\">FLOOR PLAN<\/div>\r\n\r\n              <div class=\"button-wrapper\">\r\n                <div class=\"floorPlan-button\" data-index=\"0\" data-option=\"CoastSeeker\">\r\n                  <div>Coast Seeker<\/div>\r\n                <\/div>\r\n                <div class=\"floorPlan-button\" data-index=\"1\" data-option=\"SunCruiser\">\r\n                  <div>Sun Cruiser<\/div>\r\n                <\/div>\r\n                <div class=\"floorPlan-button\" data-index=\"2\" data-option=\"BaySeeker\">\r\n                  <div>Bay Seeker<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"floorPlan-field20\" style =\"display: none;\"class=\"field\">\r\n              <div class=\"field-heading\">FLOOR PLAN<\/div>\r\n\r\n              <div class=\"button-wrapper\">\r\n                <div class=\"floorPlan-button\" data-index=\"3\" data-option=\"OceanCruiser\">\r\n                  <div>Ocean Cruiser<\/div>\r\n                <\/div>\r\n                <div class=\"floorPlan-button\" data-index=\"4\" data-option=\"SunCruiser\">\r\n                  <div>Sun Cruiser<\/div>\r\n                <\/div>\r\n                <div class=\"floorPlan-button\" data-index=\"5\" data-option=\"ArchipelagoCruiser\">\r\n                  <div>Archipelago Cruiser<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"field\">\r\n              <div class=\"field-heading\">PONTOON<\/div>\r\n              <div class=\"color-swatch-wrapper\">\r\n                <div class=\"pantoon-button swatch\" data-index=\"0\" data-option=\"Pantoon_Black\"><img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Pantoon_Black.png\" loading=\"lazy\" class=\"color\">\r\n                  <div>Black<\/div>\r\n                <\/div>\r\n                <div class=\"pantoon-button swatch\" data-index=\"1\" data-option=\"Pantoon_Alu\"><img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Pantoon_Alu.png\" loading=\"lazy\" class=\"color\">\r\n                  <div>Aluminium<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"field\">\r\n              <div class=\"field-heading\">FLOOR TYPE<\/div>\r\n              <div class=\"color-swatch-wrapper\">\r\n                <div class=\"floorType-button swatch \" data-index=\"0\" data-option=\"Floor_EVA_LightBrown\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_EVA_LightBrown.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div class=\"color-name-long\">EVA - Light Brown <\/div>\r\n                <\/div>\r\n                <div class=\"floorType-button swatch\" data-index=\"1\" data-option=\"Floor_EVA_Grey\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_EVA_Grey.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div>EVA - Grey <\/div>\r\n                <\/div>\r\n                <div class=\"floorType-button swatch\" data-index=\"2\" data-option=\"Floor_EVA_Black\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_EVA_Black.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div>EVA - Black <\/div>\r\n                <\/div>\r\n                <div class=\"floorType-button swatch\" data-index=\"3\" data-option=\"Floor_Vinyl_Grey\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_Vinyl_Grey.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div class=\"color-name-long\">Vinyl Carpet - Grey<\/div>\r\n                <\/div>\r\n                <div class=\"floorType-button swatch\" data-index=\"4\" data-option=\"Floor_Vinyl_Beige\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_Vinyl_Beige.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div class=\"color-name-long\">Vinyl Carpet - Beige <\/div>\r\n                <\/div>\r\n                <div class=\"floorType-button swatch\" data-index=\"5\" data-option=\"Floor_Vinyl_FakeBrownTeak\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_Vinyl_FakeBrownTeak.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div class=\"color-name-long\">Vinyl Carpet - Fake Brown Teak<\/div>\r\n                <\/div>\r\n                <div class=\"floorType-button swatch\" data-index=\"6\" data-option=\"Floor_Alu\"><img loading=\"lazy\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Floor_Alu.png\" loading=\"lazy\" class=\"color-swatch-image\">\r\n                  <div class=\"color-name-long\">Aluminium<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"field\">\r\n              <div class=\"field-heading\">FENCE<\/div>\r\n              <div class=\"button-wrapper\">\r\n                <div class=\"fenceType-button\" data-option=\"Standard\">\r\n                  <div>Standard<\/div>\r\n                <\/div>\r\n                <div class=\"fenceType-button\" data-option=\"Upgrade\">\r\n                  <div>Upgrade<\/div>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div id=\"standard-fence\" class=\"color-swatch-wrapper\">\r\n                <div class=\"fence-button swatch\" data-index=\"0\" data-option=\"Standard_Fence_BlackBlack\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Black.png\">\r\n                  <div>Black Black<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch stripe\" data-index=\"1\" data-option=\"Standard_Fence_BlackBlackStripe\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_BlackStripe.png\">\r\n                  <div class=\"color-name-long\">Black Black + Stripe<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"2\" data-option=\"Standard_Fence_BlackGrey\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Black.png\">\r\n                  <div>Black Grey<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch stripe\" data-index=\"3\" data-option=\"Standard_Fence_BlackGreyStripe\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_BlackStripe.png\">\r\n                  <div class=\"color-name-long\">Black Grey + Stripe<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"4\" data-option=\"Standard_Fence_DalmatianBlue\">\r\n                  <img class=\"color-swatch-image\"width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Dalmatianblue.png\">\r\n                  <div class=\"color-name-long\">Dalmatian Blue<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch stripe\" data-index=\"5\" data-option=\"Standard_Fence_DalmatianBlueStripe\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Dalmatianbluestripe.png\">\r\n                  <div class=\"color-name-long\">Dalmatian Blue + Stripe<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"6\" data-option=\"Standard_Fence_PearlRubyRed\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Pearlrubyred.png\">\r\n                  <div class=\"color-name-long\">Pearl Ruby Red<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch stripe\" data-index=\"7\" data-option=\"Standard_Fence_PearlRubyRedStripe\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_PearlrubyredStripe.png\">\r\n                  <div class=\"color-name-long\">Pearl Ruby Red + Stripe<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"8\" data-option=\"Standard_Fence_White\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_White.png\">\r\n                  <div>White<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"9\" data-option=\"Standard_Fence_CharcoalGrey\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_CharcoalGrey.png\">\r\n                  <div>Charcoal Grey<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            \r\n              <div id=\"upgrade-fence\" style=\"display: none;\" class=\"color-swatch-wrapper\">\r\n                <div class=\"fence-button swatch\" data-index=\"10\" data-option=\"Upgrade_Fence_BlackBlack\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Black.png\">\r\n                  <div>Black Black<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"11\" data-option=\"Upgrade_Fence_BlackGrey\">\r\n                  <img class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Black.png\">\r\n                  <div>Black Grey<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"12\" data-option=\"Upgrade_Fence_DalmatianBlue\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_DalmatianBlue.png\">\r\n                  <div class=\"color-name-long\">Dalmatian Blue<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"13\" data-option=\"Upgrade_Fence_PearlRubyRed\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_Pearlrubyred.png\">\r\n                  <div class=\"color-name-long\">Pearl Ruby Red<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"14\" data-option=\"Upgrade_Fence_White\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_White.png\">\r\n                  <div>White<\/div>\r\n                <\/div>\r\n                <div class=\"fence-button swatch\" data-index=\"15\" data-option=\"Upgrade_Fence_CharcoalGrey\">\r\n                  <img loading=\"lazy\" class=\"color-swatch-image\" width=\"45\" height=\"45\" alt=\"\" \r\n                    src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Fence_CharcoalGrey.png\">\r\n                  <div>Charcoal Grey<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"field\">\r\n              <div class=\"field-heading\">UPHOLSTERY<\/div>\r\n              <div class=\"color-swatch-wrapper\">\r\n                <div class=\"upholstery-button swatch\" data-option=\"Upholstery_BrownBlack\">\r\n                  <div class=\"border\"><img loading=\"lazy\" class=\"upholstery-swatch\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Upholstery_BrownBlack.png\" loading=\"lazy\" class=\"double-color\"><\/div>\r\n                  <div>Black - Brown<\/div>\r\n                <\/div>\r\n                <div class=\"upholstery-button swatch\" data-option=\"Upholstery_CreamWhiteGrey\">\r\n                  <div class=\"border\"><img loading=\"lazy\"  class=\"upholstery-swatch\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Upholstery_CreamWhiteGrey.png\" loading=\"lazy\" class=\"double-color\"><\/div>\r\n                  <div class=\"color-name-long\">Grey - Cream White<\/div>\r\n                <\/div>\r\n                <div class=\"upholstery-button swatch\" data-option=\"Upholstery_GreyBlack\">\r\n                  <div class=\"border\"><img loading=\"lazy\" class=\"upholstery-swatch\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Upholstery_GreyBlack.png\" loading=\"lazy\" class=\"double-color\"><\/div>\r\n                  <div>Grey - Black<\/div>\r\n                <\/div>\r\n                <div class=\"upholstery-button swatch\" data-option=\"Upholstery_CreamWhiteBlack\">\r\n                  <div class=\"border\"><img loading=\"lazy\" class=\"upholstery-swatch\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Upholstery_CreamWhiteBlack.png\" loading=\"lazy\" class=\"double-color\"><\/div>\r\n                  <div class=\"color-name-long\">Black - Cream White<\/div>\r\n                <\/div>\r\n                <div class=\"upholstery-button swatch\" data-option=\"Upholstery_LightBrownBlack\">\r\n                  <div class=\"border\"><img loading=\"lazy\" class=\"upholstery-swatch\" width=\"45\" height=\"45\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/Upholstery_LightBrownBlack.png\" loading=\"lazy\" class=\"double-color\"><\/div>\r\n                  <div class=\"color-name-long\">Black - Light Brown<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"field\">\r\n              <div class=\"field-heading\">MOTOR<\/div>\r\n              <div class=\"drop-down\" onclick=\"toggleDropdown()\">\r\n                <div id=\"selected-option\">Choose an Option<\/div>\r\n                <img loading=\"lazy\"\r\n                  width=\"7\"\r\n                  height=\"14\"\r\n                  alt=\"\"\r\n                  src=\"https:\/\/cdn.prod.website-files.com\/6798b574ca15c9ef87f1474c\/6798b85d9e9093d15949594c_Vectors-Wrapper.svg\"\r\n                  loading=\"lazy\"\r\n                  class=\"vectors-wrapper-3\"\r\n                \/>\r\n                <ul class=\"drop-down-menu\" id=\"drop-down-menu\" style=\"display: none\"><\/ul>\r\n            <\/div>\r\n            <\/div>\r\n\r\n \r\n\r\n\r\n            <div class=\"field\">\r\n              <div class=\"field-heading\">EXTRAS<\/div>\r\n              <div class=\"extras-wrapper\">\r\n                <div class=\"extras\">\r\n                  <div class=\"tik-box-extras\" data-option=\"DoubleBimini\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Double Bimini<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"UpgradedSpeakers\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Upgraded Speakers<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"GarminNavigation\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Garmin Navigation<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"Refrigerator\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Dometic Refrigerator<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"Bar\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Bar with Sink and Refrigerator<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"StormCover\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Storm Cover<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"Toilet\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Toilet<\/div>\r\n                  <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"extras\">\r\n                  <div class=\"tik-box-extras\" data-option=\"BiminiTower\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Bimini Tower<\/div>\r\n                  <\/div><div class=\"tik-box-extras\" data-option=\"AluminiumDeck\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Aluminium Deck<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"ExtraPontoon\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Extra Pontoon (Tritoon)<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"HydraulicSteering\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Hydraulic Steering<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"ExtraTable\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Extra Table<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"Grill\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Grill<\/div>\r\n                  <\/div>\r\n                  <div class=\"tik-box-extras\" data-option=\"SkiTowBar\">\r\n                    <div class=\"tik-box\"><img class=\"tik\" alt=\"\" src=\"https:\/\/storage.ifid.design\/Testing\/config\/assets\/tik.svg\" loading=\"lazy\"><\/div>\r\n                    <div>Sky Tow Bar<\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"price-wrapper\">\r\n          <div class=\"price-bg\">\r\n            <div class=\"field-heading\">Current Price:<\/div>\r\n            <div class=\"final-price\" id=\"price-display\">3.050 $<\/div>\r\n          \r\n            <a href=\"#inquiery-field\" class=\"submit-button\">\r\n              <div class=\"text-6\">Send Inquiry<\/div>\r\n          <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"configurator\">\r\n      <div id=\"side-view\">\r\n        <div id=\"model\"><\/div>\r\n        <div id=\"floorPlan\"><\/div>\r\n        <div id=\"pantoon\"><\/div>\r\n        <div id=\"floorType\"><\/div>\r\n        <div id=\"upholstery\"><\/div>\r\n        <div id=\"fence\"><\/div>\r\n      <\/div>\r\n\r\n      <div id=\"top-view\">\r\n        <div id=\"model-top\"><\/div>\r\n        <div id=\"floorPlan-top\"><\/div>\r\n        <div id=\"pantoon-top\"><\/div>\r\n        <div id=\"floorType-top\"><\/div>\r\n        <div id=\"upholstery-top\"><\/div>\r\n        <div id=\"fence-top\"><\/div>\r\n      <\/div>\r\n      \r\n    <\/div>\r\n    \r\n    <\/div>\r\n\r\n\r\n    <div class=\"too-small-pop-up\" style=\"display: none;\">\r\n      <div class=\"flex-center\">\r\n        <div class=\"pop-up-heading\">For optimal experience, please use a desktop device.<\/div>\r\n        <div class=\"pop-up-text\">Our configurator is designed for larger screens to ensure the best usability and functionality. Please access the configurator from a desktop or laptop for the full experience.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n    \r\n<\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0cc2578 thegem-e-con-layout-elementor e-flex e-con-boxed e-con e-parent\" data-id=\"0cc2578\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;thegem_container_layout&quot;:&quot;elementor&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b251356 flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-spacer\" data-id=\"b251356\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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>\n\t\t\t\t<div class=\"elementor-element elementor-element-60c59db elementor-widget__width-initial flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"60c59db\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"title-h1 elementor-heading-title elementor-size-default\"><span data-teams=\"true\">Send Your Configuration \u2013 <\/span><span style=\"color:#bfa888\">We\u2019ll Be in Touch!<\/span><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc65423 elementor-widget__width-initial flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"cc65423\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"styled-subtitle elementor-heading-title elementor-size-default\"><span data-teams=\"true\">Submit your custom setup, and our team will review your configuration. We\u2019ll get back to you shortly to discuss the details and next steps.<\/span><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdc7faa flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-spacer\" data-id=\"fdc7faa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\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>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8cfb39 flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-thegem-contact-form7\" data-id=\"f8cfb39\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;thegem_elementor_preset&quot;:&quot;white&quot;}\" data-widget_type=\"thegem-contact-form7.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f26608-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"26608\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/sv\/wp-json\/wp\/v2\/pages\/26767#wpcf7-f26608-o1\" method=\"post\" class=\"wpcf7-form init thegem-cf7 gem-contact-form-white form-f8cfb39 label-top\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"26608\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f26608-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"contact-form\">\n\t<div class=\"col-lg-4 col-md-4 col-xs-12\">\n\t\t<div class=\"form-line\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Name*\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><\/div>\n\t<\/div>\n\t<div class=\"col-lg-4 col-md-4 col-xs-12\">\n\t\t<div class=\"form-line\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Email*\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><\/div>\n\t<\/div>\n\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"selected-items\" value=\"\" type=\"hidden\" name=\"selected-items\" \/>\n\n\n\t<div class=\"col-lg-12 col-md-12 col-xs-12\">\n\t\t<div class=\"form-line\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"30\" rows=\"7\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Message*\" name=\"your-message\"><\/textarea><\/span><\/div>\n\t<\/div>\n\t<div class=\"col-lg-12 col-md-12 col-xs-12\">\n\t\t<div class=\"form-line\"><div class=\"gem-button-container gem-button-position-fullwidth\"><input class=\"gem-button gem-button-size-small gem-button-style-flat gem-button-text-weight-normal wpcf7-form-control wpcf7-submit has-spinner gem-button-wpcf-custom\" style=\"border-radius: 3px;\" onmouseleave=\"\" onmouseenter=\"\" id=\"\" tabindex=\"\" type=\"submit\" value=\"Submit Message\" \/><\/div> <\/div>\n\t<\/div>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CUSTOMIZE YOUR PONTOON BOAT 17\u2019 20\u2019 22\u2019 25\u2019 FLOOR PLAN Coast Seeker Sun Cruiser Bay Seeker FLOOR PLAN Ocean Cruiser&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-26767","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/pages\/26767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/comments?post=26767"}],"version-history":[{"count":4,"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/pages\/26767\/revisions"}],"predecessor-version":[{"id":26771,"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/pages\/26767\/revisions\/26771"}],"wp:attachment":[{"href":"https:\/\/www.nordcraftboats.com\/sv\/wp-json\/wp\/v2\/media?parent=26767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}