{"id":2570,"date":"2023-07-26T15:17:37","date_gmt":"2023-07-26T15:17:37","guid":{"rendered":"https:\/\/fencespanels.de\/konfigurator\/"},"modified":"2025-02-23T20:04:39","modified_gmt":"2025-02-23T20:04:39","slug":"konfigurator","status":"publish","type":"page","link":"https:\/\/fenceline.pl\/de\/konfigurator\/","title":{"rendered":"Konfigurator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2570\" class=\"elementor elementor-2570 elementor-1280\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-062a369 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"062a369\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5a62820\" data-id=\"5a62820\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9127ed9 elementor-widget elementor-widget-heading\" data-id=\"9127ed9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 13-09-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h1 class=\"elementor-heading-title elementor-size-default\">Online Kostenvoranschlag<\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-49ed40f e-flex e-con-boxed e-con e-parent\" data-id=\"49ed40f\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5def13e uael-cf7-style-box uael-cf7-input-size-sm uael-cf7-button-left uael-cf7-btn-size-sm uael-cf7-highlight-style-default elementor-widget elementor-widget-uael-cf7-styler\" data-id=\"5def13e\" data-element_type=\"widget\" data-widget_type=\"uael-cf7-styler.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class = \"uael-cf7-container\">\n\t\t\t\t\t\t<div class = \"uael-cf7 uael-cf7-style elementor-clickable\">\n\t\t\t\t\t\t\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2568-o1\" lang=\"de-DE\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/de\/wp-json\/wp\/v2\/pages\/2570#wpcf7-f2568-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Kontaktformular\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"2568\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.8\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"de_DE\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2568-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<div id=\"multi-step-form\">\n  <input type=\"hidden\" name=\"net_eur_value\" \/>\n\n  <div class=\"awesome-container\">\n    <div class=\"progress\">\n      <div class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\" data-widget=\"progress-handler\" data-total-steps=\"10\"\n        data-current-step=\"1\"\n        data-step-indicator='<div class=\"step-indicator\" style=\"left:%percentage%%\"><div class=\"filler\"><\/div><\/div>'>\n      <\/div>\n    <\/div>\n\n    <div style=\"display: none;\">\n      <button type=\"button\" id=\"prev-step-bar\" data-action=\"removeStep\">Remove Step<\/button>\n      <button type=\"button\" id=\"next-step-bar\" data-action=\"addStep\">Add step<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"step1\" class=\"slide current\">\n    <h2 class=\"step-heading\">Schritt 1: Kundenart<\/h2>\n    <!-- Step 1 content -->\n    F\u00fcllen Sie einfach das Online-Angebotsformular aus.<br>\n    In wenigen Schritten werden wir Sie nach den Details Ihres Zauns fragen und Ihnen schlie\u00dflich einen Kostenvoranschlag unterbreiten.<br><br><br>\n    Welche Art von Kunde sind Sie?\n    <div class=\"custom-selector\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"Klient indywidualny\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/12\/konfigurator_indywidualny.png\" alt=\"\" title=\"\">\n          <p>private Anfrage<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"Klient biznesowy\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/12\/konfigurator_biznesowy.png\" alt=\"\" title=\"\">\n          <p>gesch\u00e4ftliche Anfrage<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"typ_klienta\" value=\"\" type=\"hidden\" name=\"typ_klienta\" \/>\n    <\/div>\n  <\/div>\n\n  <div id=\"step2\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n  \n    <h2 class=\"step-heading\">Schritt 2: W\u00e4hlen Sie die Art der Umsetzung<\/h2>\n    <!-- Step 2 content -->\n    <div class=\"custom-selector\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"NIE\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/05\/wysylka.png\" alt=\"\" title=\"\">\n          <p>Lieferung<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"TAK\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/05\/montaz.png\" alt=\"\" title=\"\">\n          <p>Montage<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"montaz\" value=\"\" type=\"hidden\" name=\"montaz\" \/>\n    <\/div>\n  <\/div>\n\n  <div id=\"step3\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n  \n    <h2 class=\"step-heading\">Schritt 3: W\u00e4hlen Sie den Zauntyp<\/h2>\n    <!-- Step 3 content -->\n    <div class=\"custom-selector\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"panele ogrodzeniowe 2d\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/ogrodzenia_panelowe.png\" alt=\"\" title=\"\">\n          <p>2D Zaunpaneele<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"ogrodzenie klasyczne\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_1.png\" alt=\"\" title=\"\">\n          <p>Klassischer Zaun<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"ogrodzenia nowoczesne\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_1.png\" alt=\"\" title=\"\">\n          <p>Moderne Z\u00e4une<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"typ_ogrodzenia\" value=\"\" type=\"hidden\" name=\"typ_ogrodzenia\" \/>\n    <\/div>\n  <\/div>\n\n  <div id=\"step4\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n  \n    <h2 class=\"step-heading fence-2d\">Schritt 4: W\u00e4hlen Sie die St\u00e4rke des Zauns<\/h2>\n    <h2 class=\"step-heading fence-classic\" style=\"display: none;\">Schritt 4: W\u00e4hlen Sie die Zaunlinie<\/h2>\n    <!-- Step 4 content -->\n    <div class=\"custom-selector fence-2d\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"Standard 6\/5\/6\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/typ_656.gif\" alt=\"\" title=\"\">\n          <p>Standard 6\/5\/6<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"Premium 8\/6\/8\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/typ_868.gif\" alt=\"\" title=\"\">\n          <p>Premium 8\/6\/8<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"grubosc_ogrodzenia\" value=\"\" type=\"hidden\" name=\"grubosc_ogrodzenia\" \/>\n    <\/div>\n\n    <div class=\"custom-selector fence-classic fence-classic-type\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"standard\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_1.png\" alt=\"\" title=\"\">\n          <p>Standard<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"classic\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/2_1.png\" alt=\"\" title=\"\">\n          <p>Classic<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"styl\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/3_1.png\" alt=\"\" title=\"\">\n          <p>Stil<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"premium\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_1.png\" alt=\"\" title=\"\">\n          <p>Premium<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"linia_ogrodzenia\" value=\"\" type=\"hidden\" name=\"linia_ogrodzenia\" \/>\n    <\/div>\n\n    <div class=\"custom-selector fence-classic fence-modern-type\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"modern\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_1.png\" alt=\"\" title=\"\">\n          <p>Modern<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"modern-premium\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_4.png\" alt=\"\" title=\"\">\n          <p>Premium<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"linia_ogrodzenia_nowoczesne\" value=\"\" type=\"hidden\" name=\"linia_ogrodzenia_nowoczesne\" \/>\n    <\/div>\n  <\/div>\n\n  <div id=\"step5\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n\n    <h2 class=\"step-heading fence-2d\">Schritt 5: W\u00e4hlen Sie die Art der Befestigung<\/h2>\n    <h2 class=\"step-heading fence-classic\" style=\"display: none;\">Schritt 5: W\u00e4hlen Sie das Muster<\/h2>\n    <!-- Step 5 content -->\n    <div class=\"custom-selector fence-2d\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"Typ 1 - plastik\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/09\/mocowanie_typ_1_render_grun.jpg\" alt=\"\" title=\"\">\n          <p>Typ 1<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"Typ 2 - obejma\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/09\/mocowanie_typ_2_render_grun.jpg\" alt=\"\" title=\"\">\n          <p>Typ 2<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"Typ 3 - listwa\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/09\/mocowanie_typ_3_render_grun.jpg\" alt=\"\" title=\"\">\n          <p>Typ 3<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"Typ 4 - blaszka\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/09\/mocowanie_typ_4_render_grun.jpg\" alt=\"\" title=\"\">\n          <p>Typ 4<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"rodzaj_mocowania\" value=\"\" type=\"hidden\" name=\"rodzaj_mocowania\" \/>\n    <\/div>\n\n    <!-- Classic fence patterns -->\n    <div class=\"custom-selector fence-classic pattern-standard\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"standard-1\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_1.png\" alt=\"\" title=\"\">\n          <p>1.1<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"standard-2\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_2.png\" alt=\"\" title=\"\">\n          <p>1.2<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"standard-3\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_3.png\" alt=\"\" title=\"\">\n          <p>1.3<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"standard-4\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_4.png\" alt=\"\" title=\"\">\n          <p>1.4<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"standard-5\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/1_5.png\" alt=\"\" title=\"\">\n          <p>1.5<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"custom-selector fence-classic pattern-classic\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"classic-1\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/2_1.png\" alt=\"\" title=\"\">\n          <p>2.1<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"classic-2\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/2_2.png\" alt=\"\" title=\"\">\n          <p>2.2<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"classic-3\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/2_3.png\" alt=\"\" title=\"\">\n          <p>2.3<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"classic-4\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/2_4.png\" alt=\"\" title=\"\">\n          <p>2.4<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"classic-5\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/2_5.png\" alt=\"\" title=\"\">\n          <p>2.5<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"custom-selector fence-classic pattern-styl\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"styl-1\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/3_1.png\" alt=\"\" title=\"\">\n          <p>3.1<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"styl-2\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/3_2.png\" alt=\"\" title=\"\">\n          <p>3.2<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"styl-3\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/3_3.png\" alt=\"\" title=\"\">\n          <p>3.3<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"styl-4\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/3_4.png\" alt=\"\" title=\"\">\n          <p>3.4<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"styl-5\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/3_5.png\" alt=\"\" title=\"\">\n          <p>3.5<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"custom-selector fence-classic pattern-premium\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"premium-1\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_1.png\" alt=\"\" title=\"\">\n          <p>5.1<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"premium-2\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_2.png\" alt=\"\" title=\"\">\n          <p>5.2<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"premium-3\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_3.png\" alt=\"\" title=\"\">\n          <p>5.3<\/p>\n        <\/div>\n      <\/div>\n    <\/div>    \n\n    <!-- Modern fence patterns -->\n    <div class=\"custom-selector fence-classic pattern-modern\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"modern-1\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_1.png\" alt=\"\" title=\"\">\n          <p>4.1<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"modern-2\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_2.png\" alt=\"\" title=\"\">\n          <p>4.2<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"modern-3\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_3.png\" alt=\"\" title=\"\">\n          <p>4.3<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"modern-4\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_4.png\" alt=\"\" title=\"\">\n          <p>4.4<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"modern-5\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/4_5.png\" alt=\"\" title=\"\">\n          <p>4.5<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"custom-selector fence-classic pattern-modern-premium\" style=\"display: none;\">\n      <div class=\"item-input\">\n        <div class=\"image-selector\" data-value=\"modern-premium-4\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_4.png\" alt=\"\" title=\"\">\n          <p>5.4<\/p>\n        <\/div>\n        <div class=\"image-selector\" data-value=\"modern-premium-5\">\n          <img decoding=\"async\" src=\"https:\/\/fenceline.pl\/wp-content\/uploads\/2025\/02\/5_5.png\" alt=\"\" title=\"\">\n          <p>5.5<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <!-- Hidden fields for form submission -->\n    <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"wzor_ogrodzenia\" value=\"\" type=\"hidden\" name=\"wzor_ogrodzenia\" \/>\n  <\/div>\n\n  <div id=\"step6\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n\n    <h2 class=\"step-heading\">Schritt 6: W\u00e4hlen Sie eine Farbe<\/h2>\n    <!-- Step 6 content -->\n    <div class=\"custom-selector\">\n      <div class=\"item-input\">\n        <div class=\"sub-label\">Prim\u00e4rfarben<\/div>\n        <div class=\"color-selector\" data-value=\"RAL7016 Antracyt\">\n          <!-- TODO: osobne dla paneli -->\n          <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/09\/mocowanie_typ_4_render.jpg\" alt=\"\" title=\"\"> -->\n          <div class=\"color-preview small\" style=\"background-color: #383E42;\"><\/div>\n          <p>RAL7016<br>Anthrazit<\/p>\n        <\/div>\n        <div class=\"color-selector\" data-value=\"RAL6005 Zielony\">\n          <!-- TODO: osobne dla paneli -->\n          <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/09\/mocowanie_typ_4_render_grun.jpg\" alt=\"\" title=\"\"> -->\n          <div class=\"color-preview small\" style=\"background-color: #0F4336;\"><\/div>\n          <p>RAL6005<br>Gr\u00fcn<\/p>\n        <\/div>\n        <div class=\"sub-label\">Optionale Farben<\/div>\n        <div class=\"color-selector\" data-value=\"RAL7040 Szary\">\n          <div class=\"color-preview small\" style=\"background-color: #979DA0;\"><\/div>\n          <p>RAL7040<br>Grau<\/p>\n        <\/div>\n        <div class=\"color-selector\" data-value=\"RAL9005 Czarny\">\n          <div class=\"color-preview small\" style=\"background-color: #0D0E0F;\"><\/div>\n          <p>RAL9005<br>Schwarz<\/p>\n        <\/div>\n        <div class=\"color-selector\" data-value=\"RAL7030 Be\u017cowy\">\n          <div class=\"color-preview small\" style=\"background-color: #918D84;\"><\/div>\n          <p>RAL7030<br>Beige<\/p>\n        <\/div>\n      <\/div>\n      <input class=\"wpcf7-form-control wpcf7-hidden\" id=\"kolor\" value=\"\" type=\"hidden\" name=\"kolor\" \/>\n    <\/div>\n  <\/div>\n\n  <div id=\"step7\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n\n    <h2 class=\"step-heading\">Schritt 7: Geben Sie die Ma\u00dfe des Zauns an<\/h2>\n    <!-- Step 7 content -->\n    <!-- TODO: osobne dla paneli -->\n    <!-- <div class=\"dimensions-preview\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/rozmiary.png\" style=\"width: 590px;\" alt=\"\" title=\"\">\n    <\/div> -->\n    <div class=\"inline-row\">\n      <div class=\"inline-inputs by-2\">\n        <!-- TODO: osobne dla paneli -->\n        <!-- <label>\n          H\u00f6he (mm)\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"wysokosc_ogrodzenia\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required required-field\" aria-required=\"true\" aria-invalid=\"false\" name=\"wysokosc_ogrodzenia\"><option value=\"\">&#8211; Bitte ausw\u00e4hlen &#8211;<\/option><option value=\"830 mm\">830 mm<\/option><option value=\"1030 mm\">1030 mm<\/option><option value=\"1230 mm\">1230 mm<\/option><option value=\"1430 mm\">1430 mm<\/option><option value=\"1630 mm\">1630 mm<\/option><option value=\"1830 mm\">1830 mm<\/option><option value=\"2030 mm\">2030 mm<\/option><option value=\"2230 mm\">2230 mm<\/option><option value=\"2430 mm\">2430 mm<\/option><\/select><\/span>\n        <\/label> -->\n        <label>\n          H\u00f6he (cm)\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"wysokosc_ogrodzenia\"><input class=\"wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number required-field\" min=\"50\" max=\"400\" step=\"1\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"number\" name=\"wysokosc_ogrodzenia\" \/><\/span>\n        <\/label>\n      <\/div>\n      <div class=\"inline-inputs by-2\">\n        <label>\n          Gesamtl\u00e4nge des Zauns (m)\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"dlugosc_ogrodzenia\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required required-field\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"dlugosc_ogrodzenia\" \/><\/span>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"next-wrapper\">\n      <button class=\"next\">Weiter<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"step8\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n\n    <h2 class=\"step-heading\">Schritt 8: Pforte und Tor hinzuf\u00fcgen (optional)<\/h2>\n    <!-- Step 8 content -->\n    <!-- TODO: osobne dla paneli -->\n    <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/furtka_brama.jpg\" alt=\"\" title=\"\"> -->\n    <div class=\"inline-row\">\n      <div class=\"inline-inputs by-2\">\n        <div class=\"custom-selector\">\n          <div class=\"item-input\">\n            <span class=\"wpcf7-form-control-wrap\" data-name=\"brama-toggle\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox hidden\" id=\"form-brama-toggle\"><span class=\"wpcf7-list-item first last\"><label><input type=\"checkbox\" name=\"brama-toggle\" value=\"TAK\" \/><span class=\"wpcf7-list-item-label\">TAK<\/span><\/label><\/span><\/span><\/span>\n            <label for=\"brama-toggle-tak\" class=\"boolean-selector\">\n              <div class=\"boolean-preview\"><\/div>\n              <span>Tor<\/span>\n            <\/label>\n          <\/div>\n          <div class=\"additional-inputs\" style=\"display: none;\">\n            <label>\n              Breite des Tores (mm)\n              <span class=\"wpcf7-form-control-wrap\" data-name=\"szerokosc_bramy\"><select class=\"wpcf7-form-control wpcf7-select\" aria-invalid=\"false\" name=\"szerokosc_bramy\"><option value=\"\">&#8211; Bitte ausw\u00e4hlen &#8211;<\/option><option value=\"2000 mm\">2000 mm<\/option><option value=\"2500 mm\">2500 mm<\/option><option value=\"3000 mm\">3000 mm<\/option><option value=\"3500 mm\">3500 mm<\/option><option value=\"4000 mm\">4000 mm<\/option><option value=\"4500 mm\">4500 mm<\/option><option value=\"5000 mm\">5000 mm<\/option><option value=\"5500 mm\">5500 mm<\/option><option value=\"6000 mm\">6000 mm<\/option><\/select><\/span>\n            <\/label>\n            <label>\n              Art des Tores\n              <span class=\"wpcf7-form-control-wrap\" data-name=\"rodzaj_bramy\"><select class=\"wpcf7-form-control wpcf7-select\" aria-invalid=\"false\" name=\"rodzaj_bramy\"><option value=\"\">&#8211; Bitte ausw\u00e4hlen &#8211;<\/option><option value=\"Fl\u00fcgeltore\">Fl\u00fcgeltore<\/option><option value=\"Fl\u00fcgeltore mit Elektroantrieb\">Fl\u00fcgeltore mit Elektroantrieb<\/option><option value=\"Schiebetore\">Schiebetore<\/option><option value=\"Schiebetore mit Elektroantrieb\">Schiebetore mit Elektroantrieb<\/option><\/select><\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"inline-inputs by-2\">\n        <div class=\"custom-selector\">\n          <div class=\"item-input\">\n            <span class=\"wpcf7-form-control-wrap\" data-name=\"furtka-toggle\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox hidden\" id=\"form-furtka-toggle\"><span class=\"wpcf7-list-item first last\"><label><input type=\"checkbox\" name=\"furtka-toggle\" value=\"TAK\" \/><span class=\"wpcf7-list-item-label\">TAK<\/span><\/label><\/span><\/span><\/span>\n            <label for=\"furtka-toggle-tak\" class=\"boolean-selector\">\n              <div class=\"boolean-preview\"><\/div>\n              <span>Zaunpforte<\/span>\n            <\/label>\n          <\/div>\n          <div class=\"additional-inputs\" style=\"display: none;\">\n            <label>\n              Breite der Zaunpforte (mm)\n              <span class=\"wpcf7-form-control-wrap\" data-name=\"szerokosc_furtki\"><select class=\"wpcf7-form-control wpcf7-select\" aria-invalid=\"false\" name=\"szerokosc_furtki\"><option value=\"\">&#8211; Bitte ausw\u00e4hlen &#8211;<\/option><option value=\"900 mm\">900 mm<\/option><option value=\"1000 mm\">1000 mm<\/option><option value=\"1100 mm\">1100 mm<\/option><option value=\"1200 mm\">1200 mm<\/option><option value=\"1300 mm\">1300 mm<\/option><option value=\"1400 mm\">1400 mm<\/option><option value=\"1500 mm\">1500 mm<\/option><\/select><\/span>\n            <\/label>\n            <label>\n              Elektroantrieb\n              <span class=\"wpcf7-form-control-wrap\" data-name=\"rodzaj_furtki\"><select class=\"wpcf7-form-control wpcf7-select\" aria-invalid=\"false\" name=\"rodzaj_furtki\"><option value=\"\">&#8211; Bitte ausw\u00e4hlen &#8211;<\/option><option value=\"Mit Elektroantrieb\">Mit Elektroantrieb<\/option><option value=\"Ohne Elektroantrieb\">Ohne Elektroantrieb<\/option><\/select><\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"next-wrapper\">\n      <button class=\"next\">Weiter<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"step9\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n\n    <h2 class=\"step-heading\">Schritt 9: Zubeh\u00f6r ausw\u00e4hlen (optional)<\/h2>\n    <!-- Step 9 content -->\n    <div class=\"inline-row\">\n      <div class=\"inline-inputs by-4\">\n        <div class=\"custom-selector\">\n          <div class=\"item-input\">\n            <span class=\"wpcf7-form-control-wrap\" data-name=\"domofon-toggle\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox hidden\" id=\"form-domofon-toggle\"><span class=\"wpcf7-list-item first last\"><label><input type=\"checkbox\" name=\"domofon-toggle\" value=\"TAK\" \/><span class=\"wpcf7-list-item-label\">TAK<\/span><\/label><\/span><\/span><\/span>\n            <label for=\"domofon-toggle-tak\" class=\"boolean-selector\">\n              <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/domofon.jpg\" alt=\"\" title=\"\"> -->\n              <div class=\"boolean-preview\"><\/div>\n              <span>Sprechanlage<\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"inline-inputs by-4\">\n        <div class=\"custom-selector\">\n          <div class=\"item-input\">\n            <span class=\"wpcf7-form-control-wrap\" data-name=\"skrzynka-toggle\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox hidden\" id=\"form-skrzynka-toggle\"><span class=\"wpcf7-list-item first last\"><label><input type=\"checkbox\" name=\"skrzynka-toggle\" value=\"TAK\" \/><span class=\"wpcf7-list-item-label\">TAK<\/span><\/label><\/span><\/span><\/span>\n            <label for=\"skrzynka-toggle-tak\" class=\"boolean-selector\">\n              <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/skrzynka.jpg\" alt=\"\" title=\"\"> -->\n              <div class=\"boolean-preview\"><\/div>\n              <span>Briefkasten<\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"inline-inputs by-4\">\n        <div class=\"custom-selector\">\n          <div class=\"item-input\">\n            <span class=\"wpcf7-form-control-wrap\" data-name=\"krawezniki-toggle\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox hidden\" id=\"form-krawezniki-toggle\"><span class=\"wpcf7-list-item first last\"><label><input type=\"checkbox\" name=\"krawezniki-toggle\" value=\"TAK\" \/><span class=\"wpcf7-list-item-label\">TAK<\/span><\/label><\/span><\/span><\/span>\n            <label for=\"krawezniki-toggle-tak\" class=\"boolean-selector\">\n              <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/kraweznik.jpg\" alt=\"\" title=\"\"> -->\n              <div class=\"boolean-preview\"><\/div>\n              <span>Bordsteine<\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"inline-inputs by-4\">\n        <div class=\"custom-selector\">\n          <div class=\"item-input\">\n            <span class=\"wpcf7-form-control-wrap\" data-name=\"tasma-toggle\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox hidden\" id=\"form-tasma-toggle\"><span class=\"wpcf7-list-item first last\"><label><input type=\"checkbox\" name=\"tasma-toggle\" value=\"TAK\" \/><span class=\"wpcf7-list-item-label\">TAK<\/span><\/label><\/span><\/span><\/span>\n            <label for=\"tasma-toggle-tak\" class=\"boolean-selector\">\n              <!-- <img decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/tasma.jpg\" alt=\"\" title=\"\"> -->\n              <div class=\"boolean-preview\"><\/div>\n              <span>Zaunband<\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"next-wrapper\">\n      <button class=\"next\">Weiter<\/button>\n    <\/div>\n  <\/div>\n\n  <div id=\"step10\" class=\"slide\">\n    <button class=\"previous\">Zur\u00fcck<\/button>\n\n    <!-- <div class=\"price-box\">\n      <h3 class=\"heading\">\n        Gesch\u00e4tzter Preis des Zauns\n        <span id=\"montaz-note\">mit Montage<\/span>\n      <\/h3>\n      <span id=\"total-price\" class=\"price\">0,00 EUR<\/span>\n      <span id=\"total-price-note\"> ohne MwSt.<\/span>\n      \n      <p>Wenn Sie an einem detaillierten Angebot interessiert sind, geben Sie bitte unten Ihre Kontaktdaten an.<\/p>\n    <\/div> -->\n\n    <h2 class=\"step-heading\">Schritt 10: Kontaktdaten<\/h2>\n    <!-- Step 10 content -->\n    <div class=\"inline-row\">\n      <div class=\"inline-inputs by-2\">\n        <label>\n          Vorname\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n        <\/label>\n      <\/div>\n      <div class=\"inline-inputs by-2\">\n        <label>\n          Postleitzahl\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"kod_pocztowy\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"kod_pocztowy\" \/><\/span>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"inline-row\">\n      <div class=\"inline-inputs by-2\">\n        <label>\n          Email\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n        <\/label>\n      <\/div>\n      <div class=\"inline-inputs by-2\">\n        <label>\n          Telefonnummer (optional)\n          <span class=\"wpcf7-form-control-wrap\" data-name=\"your-tel\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"your-tel\" \/><\/span>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <label>\n      Nachricht (optional)\n      <span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span>\n    <\/label>\n\n    Mit dem Absenden des Formulars erkl\u00e4re ich mich damit einverstanden, dass meine pers\u00f6nlichen Daten zum Zweck der Beantwortung der Anfrage elektronisch erfasst und gespeichert werden, im Einklang <a href=\"\/de\/datenschutzrichtlinie\/\" target=\"_blank\">mit der Datenschutzerkl\u00e4rung<\/a>.\n\n    <input type=\"hidden\" name=\"wycena\" \/>\n\n    <input type=\"hidden\" name=\"utm_campaign\" value=\"\" \/>\n \n    <input type=\"hidden\" name=\"utm_source\" value=\"\" \/>\n    \n    <input type=\"hidden\" name=\"utm_medium\" value=\"\" \/>\n    \n    <input type=\"hidden\" name=\"utm_term\" value=\"\" \/>\n    \n    <input type=\"hidden\" name=\"utm_content\" value=\"\" \/>\n    \n    <input type=\"hidden\" name=\"gclid\" value=\"\" \/>\n\n    <input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Senden\" \/>\n  <\/div>\n<\/div>\n\n\n<!-- SCRIPT -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/3.10.1\/lodash.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/2.1.3\/TweenMax.min.js\"><\/script>\n<script>\n  jQuery(document).ready(function ($) {\n    \/\/ adjust form height\n    function adjustFormHeight() {\n      var $form = $('#multi-step-form');\n      var $currentStep = $('.slide.current');\n      $form.height($currentStep.outerHeight() + 450);\n    }\n    adjustFormHeight();\n\n    \/\/ set id of checkbox inputs\n    $('form.wpcf7-form input').each(function(){\n      var span = $(this).parent('span');\n      if(span){\n        var idAttr = span.attr('id');\n        $(this).attr('id',idAttr);\n        span.attr('id','');\n      }\n      var name = $(this).attr('name');\n      var type = $(this).attr('type');\n      switch(type){\n        case 'radio':\n        case 'checkbox':\n          name += '-'+$(this).attr('value');\n          name = name.replace(\/\\s+\/g, '-').replace(\/\\?\/g, '').toLowerCase(); \/\/replace spaces with dash, remove question mark, and convert to lowercase\n      }\n      $(this).attr('id',name);\n    });\n\n    $('.item-input .image-selector, .item-input .color-selector').click(function () {\n      $(this).siblings().removeClass('selected');\n      $(this).addClass('selected');\n\n      \/\/ Handle pattern selection\n      $(this).parent().next('input').val($(this).data('value'));\n      if ($(this).closest('#step5').length) {\n        $('input#wzor_ogrodzenia').val($(this).data('value'));\n      }\n\n      \/\/ Handle fence type and pattern selection\n      if ($(this).closest('#step3').length) {\n        var selectedType = $(this).data('value');\n        if (selectedType === 'panele ogrodzeniowe 2d') {\n          $('.fence-2d').show();\n          $('.fence-classic').hide();\n          $('.price-box').show();\n        } else if (selectedType === 'ogrodzenie klasyczne') {\n          $('.fence-2d').hide();\n          $('.fence-classic').show();\n          $('.fence-classic-type').show();\n          $('.fence-modern-type').hide();\n          $('.price-box').hide();\n          \/\/ Hide all patterns initially\n          $('[class*=\"pattern-\"]').hide();\n        } else if (selectedType === 'ogrodzenia nowoczesne') {\n          $('.fence-2d').hide();\n          $('.fence-classic').show();\n          $('.fence-classic-type').hide();\n          $('.fence-modern-type').show();\n          $('.price-box').hide();\n          \/\/ Hide all patterns initially\n          $('[class*=\"pattern-\"]').hide();\n        }\n      } else if ($(this).closest('#step4').length) {\n        var selectedLine = $(this).data('value');\n        $('[class*=\"pattern-\"]').hide();\n        \n        \/\/ Handle line selection for classic fence\n        if ($('input#typ_ogrodzenia').val() === 'ogrodzenie klasyczne') {\n          $('.pattern-' + selectedLine).show();\n        }\n        \/\/ Handle line selection for modern fence\n        else if ($('input#typ_ogrodzenia').val() === 'ogrodzenia nowoczesne') {\n          $('.pattern-' + selectedLine).show();\n        }\n      }\n\n      if (validateSlide($(this).closest('.slide'))) {\n        moveSlide($(this).closest('.slide'), 'next');\n      }\n    });\n\n    \/\/ Initialize fence type visibility\n    $('.fence-2d').show();\n    $('.fence-classic').hide();\n    $('.price-box').hide();\n\n    $('.item-input input[type=\"checkbox\"]').change(function () {\n      var $checkbox = $(this);\n      var $label = $checkbox.parent().parent().parent().parent().siblings('label.boolean-selector');\n      var $additionalInput = $checkbox.parent().parent().parent().parent().parent().siblings('.additional-inputs');\n      $label.toggleClass('selected', $checkbox.prop('checked'));\n      if ($checkbox.prop('checked')) {\n        $additionalInput.slideDown();\n      } else {\n        $additionalInput.slideUp();\n      }\n    });\n\n    $('.next').click(function (e) {\n      e.preventDefault();\n      if (validateSlide($(this).closest('.slide'))) {\n        moveSlide($(this).closest('.slide'), 'next');\n      }\n    });\n\n    $('.previous').click(function (e) {\n      e.preventDefault();\n      moveSlide($(this).closest('.slide'), 'prev');\n      $('#prev-step-bar').trigger('click');\n    });\n\n    $('.slide:not(:last-child) input').on('keydown', function(e) {\n      if (e.which == 13) { \/\/ 13 is the keycode for the Enter key\n        e.preventDefault();\n        var currentSlide = $(this).closest('.slide');\n        if (validateSlide(currentSlide)) {\n          moveSlide(currentSlide, 'next');\n        }\n      }\n    });\n\n    function moveSlide($slide, direction) {\n      if ($slide.hasClass('disabled')) {\n        return false;\n      }\n\n      var $nextSlide = direction === 'next' ? $slide.next('.slide') : $slide.prev('.slide');\n\n      if ($nextSlide.length > 0) {\n        $('.slide').removeClass('current');\n        $nextSlide.addClass('current');\n\n        if (direction === 'next') {\n          $slide.animate({ left: '-200%' }, 500, function () {\n            \/\/ $slide.hide();\n            $slide.removeClass('disabled');\n          });\n\n          $slide.addClass('disabled');\n          $nextSlide.css('left', '200%');\n          $nextSlide.show();\n          $nextSlide.animate({ left: '0' }, 500);\n\n          $('#next-step-bar').trigger('click');\n        }\n        else {\n          $slide.animate({ left: '200%' }, 500, function () {\n            \/\/ $slide.hide();\n            $slide.removeClass('disabled');\n          });\n\n          $slide.addClass('disabled');\n          $nextSlide.css('left', '-200%');\n          $nextSlide.show();\n          $nextSlide.animate({ left: '0' }, 500);\n        }\n      }\n\n      setTimeout(adjustFormHeight, 500);\n      $('html, body').animate({\n        scrollTop: $(\"#multi-step-form\").offset().top - 100\n      }, 500);\n    }\n\n    function validateSlide($slide) {\n      var isValid = true;\n      $slide.find('input[required], select[required], textarea[required], .required-field').each(function () {\n        if ($(this).val() === '') {\n          isValid = false;\n          alert('Wybierz warto\u015b\u0107.');\n          return false; \/\/ exit .each() loop\n        }\n      });\n      return isValid;\n    }\n\n\n    var WIDGET_DATA = 'ProgressHandler';\n\n    var ProgressHandler = function (element) {\n      this.element = element;\n      this.$element = $(element);\n      this.stepsTotalNumber = this.$element.data('total-steps');\n      this.currentStep = this.$element.data('current-step');\n      this.stepIndicator = this.$element.data('step-indicator');\n\n      this.addTriggers = $('[data-action=\"addStep\"]');\n      this.removeTriggers = $('[data-action=\"removeStep\"]');\n\n\n      this.init();\n    }\n\n    ProgressHandler.prototype = {\n      init: function () {\n        \/\/ Init\n        this.spawnIndicators();\n        this.processWidth();\n        this.listeners();\n      },\n\n      spawnIndicators: function () {\n        var spacing = 100 \/ this.stepsTotalNumber;\n        var currentPosition = spacing;\n        for (i = 0; i < this.stepsTotalNumber; i++) {\n          this.$element.parent().append(this.stepIndicator.replace('%percentage%', currentPosition));\n          currentPosition += spacing;\n        }\n      },\n\n      processWidth: function () {\n        this.elementWidth = (this.currentStep \/ this.stepsTotalNumber) * 100;\n        var done = [];\n        var previousValue = null;\n        var disable = null;\n        TweenMax.to(this.$element, 1, {\n          width: this.elementWidth + \"%\", ease: Power2.easeInOut, onUpdate: function () {\n            var ctx = this;\n            if (disable == null) {\n              if (previousValue == null) {\n                previousValue = parseFloat(ctx.element.style.width);\n              } else {\n                if (parseFloat(ctx.element.style.width) < previousValue) {\n                  disable = true;\n                } else {\n                  disable = false;\n                }\n              }\n            }\n\n            if (disable == true) {\n              this.$element.parent().find('.step-indicator').each(function (index) {\n                if ((parseFloat(this.style.left) > parseFloat(ctx.element.style.width)) && !_.contains(done, index)) {\n                  ctx.disableIndicator(this);\n                  done.push(index);\n                }\n              })\n            }\n            if (disable == false) {\n              this.$element.parent().find('.step-indicator').each(function (index) {\n                if ((parseFloat(this.style.left) <= parseFloat(ctx.element.style.width)) && !_.contains(done, index)) {\n                  ctx.activateIndicator(this);\n                  done.push(index);\n                }\n              })\n            }\n          }.bind(this)\n        });\n      },\n\n      listeners: function () {\n        \/\/ Listeners Bindings\n        this.removeTriggers.on(\"click\", this.removeStep.bind(this));\n        this.addTriggers.on(\"click\", this.addStep.bind(this));\n      },\n\n      addStep: function () {\n        \/\/ Adding a step\n        if (this.currentStep !== this.stepsTotalNumber) {\n          this.currentStep++;\n        }\n\n        this.processWidth();\n      },\n\n      removeStep: function () {\n        \/\/ Removing a step\n        if (this.currentStep !== 0) {\n          this.currentStep--;\n        }\n\n        this.processWidth();\n      },\n\n      activateIndicator: function (element) {\n        var $element = $(element);\n        TweenMax.to($element.find(\".filler\"), .5, { width: \"110%\", height: \"110%\", ease: Expo.easeIn });\n      },\n\n      disableIndicator: function (element) {\n        var $element = $(element);\n        TweenMax.to($element.find(\".filler\"), .5, { width: \"0\", height: \"0\", ease: Expo.easeIn });\n      }\n    }\n\n    $('[data-widget=\"progress-handler\"]').each(function (index, item) {\n      var $element = $(item);\n\n      if (!$element.data(WIDGET_DATA)) {\n        $element.data(WIDGET_DATA, new ProgressHandler(item));\n      }\n    });\n\n    \/\/\n    \/\/ PRICE CALCULATOR\n    \/\/\n\n    \/\/ Function to extract numeric value from a string like \"900 mm\"\n    function parseValueWithUnit(value) {\n      return parseFloat(value.replace(' mm', '')) || 0;\n    }\n\n    \/\/ Function to convert PLN to EUR\n    function convertPLNtoEUR(pln) {\n      return pln \/ 4.34;\n    }\n\n    \/\/ Function to convert EUR to PLN\n    function convertEURtoPLN(eur) {\n      return eur * 4.34;\n    }\n\n    \/\/ Pricing tables for panels and poles\n    \/\/ 10\/2023 pricing, prices in pln\n    const pricingData = {\n      '6\/5\/6': {\n        '830': { panel: 72.20, poleType1: 45.00, poleType2: 53.00, poleType3: 63.10, poleType4: 47.10 },\n        '1030': { panel: 80.82, poleType1: 49.50, poleType2: 57.10, poleType3: 70.25, poleType4: 51.00 },\n        '1230': { panel: 92.97, poleType1: 58.00, poleType2: 68.20, poleType3: 80.00, poleType4: 60.00 },\n        '1430': { panel: 106.44, poleType1: 61.40, poleType2: 71.30, poleType3: 86.30, poleType4: 64.20 },\n        '1630': { panel: 121.67, poleType1: 71.00, poleType2: 83.10, poleType3: 96.80, poleType4: 73.00 },\n        '1830': { panel: 138.91, poleType1: 74.20, poleType2: 87.40, poleType3: 103.50, poleType4: 76.90 },\n        '2030': { panel: 149.08, poleType1: 81.90, poleType2: 97.90, poleType3: 113.10, poleType4: 85.80 },\n        '2230': { panel: 179.90, poleType1: 88.90, poleType2: 101.30, poleType3: 119.00, poleType4: 90.00 },\n        '2430': { panel: 195.10, poleType1: 94.10, poleType2: 112.00, poleType3: 129.80, poleType4: 98.70 }\n      },\n      '8\/6\/8': {\n        '830': { panel: 107.60, poleType1: 45.00, poleType2: 53.00, poleType3: 63.10, poleType4: 47.10 },\n        '1030': { panel: 116.86, poleType1: 49.50, poleType2: 57.10, poleType3: 70.25, poleType4: 51.00 },\n        '1230': { panel: 134.06, poleType1: 58.00, poleType2: 68.20, poleType3: 80.00, poleType4: 60.00 },\n        '1430': { panel: 153.45, poleType1: 61.40, poleType2: 71.30, poleType3: 86.30, poleType4: 64.20 },\n        '1630': { panel: 174.70, poleType1: 71.00, poleType2: 83.10, poleType3: 96.80, poleType4: 73.00 },\n        '1830': { panel: 194.37, poleType1: 74.20, poleType2: 87.40, poleType3: 103.50, poleType4: 76.90 },\n        '2030': { panel: 214.98, poleType1: 81.90, poleType2: 97.90, poleType3: 113.10, poleType4: 85.80 },\n        '2230': { panel: 266.87, poleType1: 88.90, poleType2: 101.30, poleType3: 119.00, poleType4: 90.00 },\n        '2430': { panel: 285.43, poleType1: 94.10, poleType2: 112.00, poleType3: 129.80, poleType4: 98.70 }\n      }\n    };\n\n    \/\/ Function to find the closest valid panel height\n    function findClosestPanelHeight(height) {\n      const validHeights = [830, 1030, 1230, 1430, 1630, 1830, 2030, 2230, 2430];\n      return validHeights.reduce((prev, curr) => \n        Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev\n      );\n    }\n\n    \/\/ Function to calculate the total price based on the form inputs\n    function calculateTotalPrice() {\n      var totalPrice = 0;\n\n      var wysokoscOgrodzeniaCm = parseInt($('input[name=\"wysokosc_ogrodzenia\"]').val()) || 0;\n      var wysokoscOgrodzenia = wysokoscOgrodzeniaCm * 10;\n      console.log('wysokosc ogrodzenia: ' + wysokoscOgrodzenia);\n\n      var dlugoscOgrodzenia = parseFloat($('#dlugosc_ogrodzenia').val()) || 0;\n      console.log('dlugosc ogrodzenia: ' + dlugoscOgrodzenia);\n\n      var typOgrodzenia = $('input#typ_ogrodzenia').val();\n      console.log('typ ogrodzenia: ' + typOgrodzenia);\n\n      if (typOgrodzenia === 'panele ogrodzeniowe 2d') {\n        \/\/ For panel fences, find the closest valid height\n        wysokoscOgrodzenia = findClosestPanelHeight(wysokoscOgrodzenia);\n        \/\/ Update the input value to show the adjusted height\n        \/\/ $('input[name=\"wysokosc_ogrodzenia\"]').val(wysokoscOgrodzenia);\n        console.log('dobrana wysokosc ogrodzenia: ' + wysokoscOgrodzenia);\n\n        var countOfFencePanels = Math.ceil(dlugoscOgrodzenia \/ 2.5);\n        console.log('ilosc paneli: ' + countOfFencePanels);\n        var countOfPoles = countOfFencePanels + 1;\n        console.log('ilosc slupkow: ' + countOfPoles);\n\n        var gruboscOgrodzenia = $('input#grubosc_ogrodzenia').val().split(' ')[1];\n        console.log('grubosc drutu: ' + gruboscOgrodzenia);\n        var selectedMountingTypeRaw = $('input#rodzaj_mocowania').val();\n        var selectedMountingType = 'poleType' + selectedMountingTypeRaw.split(' ')[1];\n        console.log('typ mocowania: ' + selectedMountingType);\n\n        \/\/ Calculate the price for panels and poles\n        var panelPricePLN = pricingData[gruboscOgrodzenia][wysokoscOgrodzenia].panel;\n        console.log('cena 1 panelu pln: ' + panelPricePLN);\n        var polePricePLN = pricingData[gruboscOgrodzenia][wysokoscOgrodzenia][selectedMountingType];\n        console.log('cena 1 slupka pln: ' + polePricePLN);\n        \/\/ Convert prices to EUR\n        var panelPriceEUR = convertPLNtoEUR(panelPricePLN * countOfFencePanels);\n        console.log('cena paneli eur: ' + panelPriceEUR);\n        var polePriceEUR = convertPLNtoEUR(polePricePLN * countOfPoles);\n        console.log('cena slupkow eur: ' + polePriceEUR);\n        \/\/ Add the cost of panels and poles to the total price\n        totalPrice += panelPriceEUR + polePriceEUR;\n\n        var montaz = $('input[name=\"montaz\"]').val() === 'TAK';\n        console.log('montaz: ' + montaz);\n        \/\/ Calculate montaz price\n        if (montaz) {\n          totalPrice += dlugoscOgrodzenia * 28;\n        }\n\n        \/\/ Calculate furtka price\n        var furtka = $('#furtka-toggle-tak').is(':checked');\n        console.log('furtka: ' + furtka);\n        if (furtka) {\n          var szerokoscFurtkiValue = $('select[name=\"szerokosc_furtki\"]').val();\n          var szerokoscFurtki = parseValueWithUnit(szerokoscFurtkiValue);\n          console.log('szerokosc furtki: ' + szerokoscFurtki);\n\n          var rodzajFurtki = $('select[name=\"rodzaj_furtki\"]').val();\n          console.log('rodzaj furtki: ' + rodzajFurtki);\n\n          if (szerokoscFurtki > 0) {\n            totalPrice += 400; \/\/ base price for 1200 mm\n            totalPrice += ((szerokoscFurtki - 1200) \/ 200) * 30;\n          }\n\n          var elektrozaczep = rodzajFurtki === \"Z elektrozaczepem\";\n          console.log('elektrozaczep: ' + elektrozaczep);\n\n          if (elektrozaczep) {\n            totalPrice += 100;\n          }\n        }\n        \n        \/\/ Calculate brama price\n        var brama = $('#brama-toggle-tak').is(':checked');\n        console.log('brama: ' + brama);\n        if (brama) {\n          var szerokoscBramyValue = $('select[name=\"szerokosc_bramy\"]').val();\n          var szerokoscBramy = parseValueWithUnit(szerokoscBramyValue);\n          console.log('szerokosc bramy: ' + szerokoscBramy);\n\n          var rodzajBramy = $('select[name=\"rodzaj_bramy\"]').val();\n          console.log('rodzaj bramy: ' + rodzajBramy);\n\n          \/\/ Calculate brama dwuskrzyd\u0142owa price\n          if ((rodzajBramy === 'Dwuskrzyd\u0142owa' || rodzajBramy === 'Dwuskrzyd\u0142owa z nap\u0119dem') && szerokoscBramy > 0) {\n            totalPrice += 750; \/\/ base price for 3000 mm long, 1200 mm height\n            totalPrice += (szerokoscBramy - 3000) \/ 1000 * 200;\n            \n            totalPrice += (wysokoscOgrodzenia - 1230) \/ 200 * 30;\n          }\n          \/\/ Calculate brama przesuwna price\n          if ((rodzajBramy === 'Przesuwna' || rodzajBramy === 'Przesuwna z nap\u0119dem') && szerokoscBramy > 0) {\n            totalPrice += 1150; \/\/ base price for 3000 mm long, 1200 mm height\n            totalPrice += (szerokoscBramy - 3000) \/ 1000 * 200;\n\n            totalPrice += (wysokoscOgrodzenia - 1230) \/ 200 * 30;\n          }\n\n          var naped = rodzajBramy === \"Dwuskrzyd\u0142owa z nap\u0119dem\" || rodzajBramy === \"Przesuwna z nap\u0119dem\";\n          console.log('naped: ' + naped);\n          \n          if (naped) {\n            totalPrice += montaz ? 800 : 600;\n          }\n        }\n      } else {\n        var przesloPriceM2;\n        var furtkaPriceM2;\n        var bramaSkrzydlowaPriceM2;\n        var bramaPrzesuwnaPriceM2;\n\n        if (typOgrodzenia === 'ogrodzenie klasyczne') {\n          var liniaOgrodzenia = $('input#linia_ogrodzenia').val();\n            switch(liniaOgrodzenia) {\n            case 'standard':\n              przesloPriceM2 = 70;\n              furtkaPriceM2 = 450;\n              bramaSkrzydlowaPriceM2 = 350;\n              bramaPrzesuwnaPriceM2 = 420;\n              break;\n            case 'classic':\n              przesloPriceM2 = 73;\n              furtkaPriceM2 = 480;\n              bramaSkrzydlowaPriceM2 = 360;\n              bramaPrzesuwnaPriceM2 = 430;\n              break;\n            case 'styl':\n              przesloPriceM2 = 77;\n              furtkaPriceM2 = 510;\n              bramaSkrzydlowaPriceM2 = 390;\n              bramaPrzesuwnaPriceM2 = 480;\n              break;\n            case 'premium':\n              przesloPriceM2 = 98;\n              furtkaPriceM2 = 670;\n              bramaSkrzydlowaPriceM2 = 640;\n              bramaPrzesuwnaPriceM2 = 700;\n              break;\n          }\n        } else if (typOgrodzenia === 'ogrodzenia nowoczesne') {\n          var liniaOgrodzenia = $('input#linia_ogrodzenia_nowoczesne').val();\n            switch(liniaOgrodzenia) {\n            case 'modern':\n              przesloPriceM2 = 83;\n              furtkaPriceM2 = 550;\n              bramaSkrzydlowaPriceM2 = 460;\n              bramaPrzesuwnaPriceM2 = 510;\n              break;\n            case 'modern-premium':\n              przesloPriceM2 = 98;\n              furtkaPriceM2 = 670;\n              bramaSkrzydlowaPriceM2 = 640;\n              bramaPrzesuwnaPriceM2 = 700;\n              break;\n          }\n        }\n\n        var przesloAreaM2 = (wysokoscOgrodzenia \/ 1000) * dlugoscOgrodzenia;\n        console.log('powierzchnia przesel: ' + przesloAreaM2);\n        var przesloPrice = przesloAreaM2 * przesloPriceM2;\n        console.log('cena przesel: ' + przesloPrice);\n        totalPrice += przesloPrice;\n\n        var montaz = $('input[name=\"montaz\"]').val() === 'TAK';\n        console.log('montaz: ' + montaz);\n        \/\/ Calculate montaz price\n        if (montaz) {\n          totalPrice += dlugoscOgrodzenia * 50;\n        }\n\n        \/\/ Calculate furtka price\n        var furtka = $('#furtka-toggle-tak').is(':checked');\n        console.log('furtka: ' + furtka);\n        if (furtka) {\n          var szerokoscFurtkiValue = $('select[name=\"szerokosc_furtki\"]').val();\n          var szerokoscFurtki = parseValueWithUnit(szerokoscFurtkiValue);\n          console.log('szerokosc furtki: ' + szerokoscFurtki);\n\n          var rodzajFurtki = $('select[name=\"rodzaj_furtki\"]').val();\n          console.log('rodzaj furtki: ' + rodzajFurtki);\n\n          if (szerokoscFurtki > 0) {\n            var furtkaAreaM2 = (wysokoscOgrodzenia \/ 1000) * (szerokoscFurtki \/ 1000);\n            console.log('powierzchnia furtki: ' + furtkaAreaM2);\n            var furtkaPrice = furtkaAreaM2 * furtkaPriceM2;\n            console.log('cena furtki: ' + furtkaPrice);\n            totalPrice += furtkaPrice;\n          }\n\n          var elektrozaczep = rodzajFurtki === \"Z elektrozaczepem\";\n          console.log('elektrozaczep: ' + elektrozaczep);\n\n          if (elektrozaczep) {\n            totalPrice += 100;\n          }\n        }\n\n        \/\/ Calculate brama price\n        var brama = $('#brama-toggle-tak').is(':checked');\n        console.log('brama: ' + brama);\n        if (brama) {\n          var szerokoscBramyValue = $('select[name=\"szerokosc_bramy\"]').val();\n          var szerokoscBramy = parseValueWithUnit(szerokoscBramyValue);\n          console.log('szerokosc bramy: ' + szerokoscBramy);\n\n          var rodzajBramy = $('select[name=\"rodzaj_bramy\"]').val();\n          console.log('rodzaj bramy: ' + rodzajBramy);\n\n          var bramaAreaM2 = (wysokoscOgrodzenia \/ 1000) * (szerokoscBramy \/ 1000);\n          console.log('powierzchnia bramy: ' + bramaAreaM2);\n          var bramaPrice = 0;\n\n          \/\/ Calculate brama dwuskrzyd\u0142owa price\n          if ((rodzajBramy === 'Dwuskrzyd\u0142owa' || rodzajBramy === 'Dwuskrzyd\u0142owa z nap\u0119dem') && szerokoscBramy > 0) {\n            bramaPrice = bramaAreaM2 * bramaSkrzydlowaPriceM2;\n          }\n          \/\/ Calculate brama przesuwna price\n          if ((rodzajBramy === 'Przesuwna' || rodzajBramy === 'Przesuwna z nap\u0119dem') && szerokoscBramy > 0) {\n            bramaPrice = bramaAreaM2 * bramaPrzesuwnaPriceM2;\n            \n          }\n\n          console.log('cena bramy: ' + bramaPrice);\n          totalPrice += bramaPrice;\n\n          var naped = rodzajBramy === \"Dwuskrzyd\u0142owa z nap\u0119dem\" || rodzajBramy === \"Przesuwna z nap\u0119dem\";\n          console.log('naped: ' + naped);\n          \n          if (naped) {\n            totalPrice += montaz ? 800 : 600;\n          }\n        }\n      }\n\n      \/\/ Calculate skrzynka na listy price\n      var domofon = $('#domofon-toggle-tak').is(':checked');\n      console.log('domofon: ' + domofon);\n      if (domofon) {\n        totalPrice += 160;\n      }\n\n      \/\/ Calculate skrzynka na listy price\n      var skrzynka = $('#skrzynka-toggle-tak').is(':checked');\n      console.log('skrzynka: ' + skrzynka);\n      if (skrzynka) {\n        totalPrice += 150;\n      }\n\n      \/\/ Calculate tasma ogrodzeniowa price\n      var tasma = $('#tasma-toggle-tak').is(':checked');\n      console.log('tasma: ' + tasma);\n      if (tasma) {\n        totalPrice += (dlugoscOgrodzenia \/ 25) * 29;\n      }\n\n      console.log('cena netto eur: ' + totalPrice);\n      console.log('cena netto pln: ' + convertEURtoPLN(totalPrice));\n      console.log('-----------------------');\n      console.log('-----------------------');\n\n      return totalPrice;\n    }\n\n    \/\/ Call this function whenever you need to update the price, for example, when the user changes a value\n    $('#multi-step-form').on('change', 'input, select', function() {\n      var totalNetPriceEUR = calculateTotalPrice();\n      var totalNetPricePLN = convertEURtoPLN(totalNetPriceEUR);\n      $('input[name=\"net_eur_value\"]').val(Math.round(totalNetPriceEUR \/ 10) * 10);\n\n      var typKlienta = $('input#typ_klienta').val().split(' ')[1];\n      var montaz = $('input[name=\"montaz\"]').val() === 'TAK';\n\n      var montazNote = 'mit Montage';\n      if (!montaz) {\n        montazNote = 'mit Lieferung';\n      }\n      $('#montaz-note').text(montazNote);\n\n      var priceInfo = 'ohne MwSt.';\n\n      \/\/ Apply tax based on the type of customer\n      if (typKlienta === 'indywidualny') {\n        if (montaz) {\n          \/\/ Add 19% VAT tax for individual customers with montage\n          totalNetPriceEUR *= 1.19;\n          priceInfo = 'inkl. 19% MwSt.';\n        }\n        else {\n          \/\/ Add 23% VAT tax for individual customers with shipment\n          totalNetPriceEUR *= 1.23;\n          priceInfo = 'inkl. 23% MwSt.';\n        }\n      }\n      \/\/ For business customers ('Klient biznesowy'), leave the net price as is\n\n      \/\/ Display the total price somewhere on the page\n      var roundedTotalPrice = Math.round(totalNetPriceEUR \/ 10) * 10;\n\n      $('#total-price').text(roundedTotalPrice + ' EUR ');\n      $('#total-price-note').text(priceInfo);\n\n      \/\/ Fill in the hidden fields\n      $('input[name=\"wycena\"]').val(roundedTotalPrice + ' EUR ' + priceInfo);\n    });\n\n  });\n<\/script>\n\n\n\n<!-- STYLE -->\n<style>\n  \/* COMMON *\/\n  .hidden {\n    display: none;\n  }\n\n  \/* PROGRESS BAR *\/\n  .awesome-container {\n    padding: 50px;\n  }\n\n  .progress {\n    overflow: visible;\n    position: relative;\n    height: 3px;\n    background-color: var(--ast-global-color-4);\n  }\n\n  .progress .progress-bar {\n    position: relative;\n    display: block;\n    background-color: var(--ast-global-color-0);\n    transition: none;\n    height: 100%;\n  }\n\n  .step-indicator {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 0;\n    width: 8px;\n    height: 8px;\n    background-color: var(--ast-global-color-4);\n    transform: rotate(45deg) translateX(-50%);\n    overflow: hidden;\n  }\n\n  .step-indicator .filler {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 0;\n    height: 0;\n    background-color: var(--ast-global-color-0);\n  }\n\n  .step-indicator .done {\n    background-color: #263238;\n  }\n\n\n  \/* MULTISTEP FORM *\/\n  #multi-step-form {\n    padding-bottom: 160px;\n    min-height: 1100px;\n  }\n\n  .slide {\n    position: absolute;\n    width: 100%;\n    left: 100%;\n    display: none;\n    transition: all 0.5s ease-in-out;\n  }\n\n  h2.step-heading {\n    font-size: 28px;\n    text-align: center;\n  }\n\n  #step1 {\n    left: 0;\n    display: block;\n  }\n\n  .previous {\n    margin: 10px 0 20px;\n  }\n  @media (max-width: 600px) {\n    .previous {\n      margin: 30px 0 60px;\n    }\n  }\n\n  .next-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n  }\n\n  .next {\n    margin-top: 40px;\n  }\n\n  @media (max-width: 600px) {\n    input.wpcf7-form-control.wpcf7-submit {\n      padding: 25px 150px;\n      margin: 20px auto 0;\n    }\n  }\n\n\n  \/*  INLINE ROW *\/\n  .inline-row {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .inline-inputs.by-2 {\n    width: calc(50% - 10px);\n  }\n\n  .inline-inputs.by-3 {\n    width: calc(33.33% - 10px);\n  }\n\n  .inline-inputs.by-4 {\n    width: calc(25% - 10px);\n  }\n\n  @media (max-width: 600px) {\n    .inline-row {\n      flex-direction: column;\n    }\n\n    .inline-inputs.by-2, .inline-inputs.by-3, .inline-inputs.by-4 {\n      width: 100%;\n    }\n  }\n\n  \/*  CUSTOM SELECTOR *\/\n  .custom-selector {\n    text-align: center;\n  }\n\n  .custom-selector > label,\n  .item-input .boolean-selector .boolean-preview + span {\n    font-size: 28px;\n  }\n\n  .custom-selector .sub-label {\n    flex: 0 0 100%;\n    margin: 50px 0 20px;\n  }\n\n  .custom-selector .item-input .sub-label:first-child {\n    margin-top: 0;\n  }\n\n  .item-input {\n    margin-top: 50px;\n  }\n\n  .item-input,\n  .item-input p {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .item-input .image-selector img,\n  .item-input .color-selector img,\n  .item-input .color-selector .color-preview,\n  .item-input .boolean-selector .boolean-preview {\n    outline: 4px solid var(--ast-global-color-4);\n    border: 3px solid var(--ast-global-color-5);\n    cursor: pointer;\n    margin: 0 20px;\n    transition: all .3s ease-in-out;\n  }\n\n  .item-input .image-selector img,\n  .item-input .color-selector img {\n    max-width: 350px;\n    margin-bottom: 20px;\n  }\n\n  .item-input .color-selector .color-preview {\n    width: 125px;\n    height: 125px;\n    border-radius: 125px;\n    margin-bottom: 20px;\n  }\n\n  .item-input .color-selector .color-preview.small {\n    width: 85px;\n    height: 85px;\n    border-radius: 85px;\n  }\n\n  .item-input .image-selector.selected img,\n  .item-input .color-selector.selected img,\n  .item-input .color-selector.selected .color-preview,\n  .item-input .image-selector:hover img,\n  .item-input .color-selector:hover img,\n  .item-input .color-selector:hover .color-preview {\n    border: 3px solid var(--ast-global-color-5);\n  }\n\n  .item-input .image-selector:hover img,\n  .item-input .color-selector:hover img,\n  .item-input .color-selector:hover .color-preview {\n    outline: 4px solid var(--ast-global-color-0);\n    transform: scale(1.03);\n  }\n\n  .item-input .image-selector.selected img,\n  .item-input .color-selector.selected img,\n  .item-input .color-selector.selected .color-preview {\n    outline: 4px solid var(--ast-global-color-1);\n    transform: scale(1.05);\n  }\n\n  .item-input .boolean-selector img {\n    margin-bottom: 20px;\n    border-radius: 30px;\n  }\n  @media (max-width: 600px) {\n    .item-input .boolean-selector,\n    .item-input .boolean-selector img {\n      margin-bottom: 50px;\n    }\n  }\n\n  .item-input .boolean-selector .boolean-preview {\n    width: 65px;\n    height: 65px;\n    border-radius: 65px;\n    margin: 0 auto 20px;\n    border: 32px solid var(--ast-global-color-5);\n  }\n\n  .item-input .boolean-selector.selected .boolean-preview {\n    border: 8px solid var(--ast-global-color-5);\n    outline: 4px solid var(--ast-global-color-1);\n    transform: scale(1.05);\n  }\n\n  .item-input .boolean-selector .boolean-preview {\n    background-color: var(--ast-global-color-4);\n  }\n\n  .item-input .boolean-selector:hover .boolean-preview,\n  .item-input .boolean-selector.selected .boolean-preview {\n    background-color: var(--ast-global-color-0);\n  }\n\n  @media (min-width: 600px) {\n    .item-input .boolean-selector:hover .boolean-preview {\n      background-color: var(--ast-global-color-0);\n      border: 10px solid var(--ast-global-color-5);\n      outline: 4px solid var(--ast-global-color-0);\n      transform: scale(1.03);\n    }\n\n    .item-input .boolean-selector.selected:hover .boolean-preview {\n      background-color: var(--ast-global-color-0);\n      border: 6px solid var(--ast-global-color-5);\n      outline: 4px solid var(--ast-global-color-1);\n      transform: scale(1.07);\n    }\n  }\n\n  .additional-inputs {\n    margin-top: 35px;\n    text-align: left;\n  }\n\n  \/* STEP 1 *\/\n  #step1 .image-selector img {\n    max-width: 260px;\n  }\n\n  \/* STEP 2 *\/\n  #step2 .image-selector img {\n    max-width: 260px;\n  }\n\n  \/* STEP 4 *\/\n  #step4 .image-selector {\n    margin-top: 30px;\n  }\n\n  #step4 .image-selector img {\n    max-width: 450px;\n  }\n  @media (max-width: 600px) {\n    #step4 .image-selector img {\n      max-width: 90%;\n      margin: 0 auto;\n    }\n  }\n\n  \/* STEP 5 *\/\n  #step5 .image-selector img {\n    max-width: 260px;\n  }\n\n  \/* STEP 6 *\/\n  #step6 .color-selector img {\n    max-width: 260px;\n  }\n\n  \/* STEP 7 *\/\n  #step7 .dimensions-preview {\n    margin-bottom: 60px;\n    text-align: center;\n  }\n\n  \/* STEP 10 *\/\n  .price-box {\n    background-color: var(--ast-global-color-4);\n    border: 4px solid var(--ast-global-color-0);\n    margin-bottom: 50px;\n    padding: 50px;\n  }\n\n  .price-box h3.heading {\n    font-family: 'Oxygen', sans-serif;\n    font-size: 24px;\n    font-weight: 400;\n  }\n\n  .price-box .price {\n    color: var(--ast-global-color-1);\n    font-size: 28px;\n    font-weight: 600;\n    margin-right: 4px;\n  }\n\n  .price-box p {\n    margin: 20px 0 0;\n  }\n\n  #step10 .wpcf7-submit {\n    width: 50%;\n    margin: 20px auto 0;\n    text-align: center;\n    display: block;\n    padding: 25px;\n  }\n<\/style><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\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\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Online Kostenvoranschlag &#8218;> Remove Step Add step Krok 1: Typ klienta Zapraszamy do wype\u0142nienia formularza wyceny online. W kilku krokach zapytamy Ci\u0119 o szczeg\u00f3\u0142y dotycz\u0105ce Twojego ogrodzenia, a na ko\u0144cu poka\u017cemy szacunkow\u0105 wycen\u0119. Jakim klientem jeste\u015b? Klient indywidualny Klient biznesowy Wstecz Krok 2: Typ realizacji Zam\u00f3wienie wysy\u0142kowe Realizacja z monta\u017cem Wstecz Krok 3: Wybierz grubo\u015b\u0107 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"ast-button\" href=\"https:\/\/fenceline.pl\/de\/konfigurator\/\"> <span class=\"screen-reader-text\">Konfigurator<\/span> Mehr lesen >><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"","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":"","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":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/pages\/2570"}],"collection":[{"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/comments?post=2570"}],"version-history":[{"count":2,"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/pages\/2570\/revisions"}],"predecessor-version":[{"id":99906,"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/pages\/2570\/revisions\/99906"}],"wp:attachment":[{"href":"https:\/\/fenceline.pl\/de\/wp-json\/wp\/v2\/media?parent=2570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}