{
    "id": 2596,
    "date": "2026-10-03T13:21:38",
    "date_gmt": "2026-10-03T13:21:38",
    "guid": {
        "rendered": "https:\/\/esentrappen.nl\/?page_id=2596"
    },
    "modified": "2026-10-11T00:49:12",
    "modified_gmt": "2026-10-11T00:49:12",
    "slug": "design-your-staircase",
    "status": "publish",
    "type": "page",
    "link": "https:\/\/esentrappen.nl\/en\/design-your-staircase\/",
    "title": {
        "rendered": "Design Your Staircase"
    },
    "content": {
        "rendered": "<style>body{margin:0;background:#f3f7f7;font-family:Arial,sans-serif}.preview-banner{background:#102b32;color:white;padding:14px 5%;font-size:14px}.esen-config-fields{display:block!important}.step-nav{display:flex;gap:8px;margin-bottom:30px}.step-nav button{flex:1;border:1px solid #d4e3e3;background:white;border-radius:8px;padding:14px 8px;color:#506568;cursor:pointer}.step-nav .active{background:#006b73;color:white;border-color:#006b73}.step-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px}.step-panel[hidden]{display:none}.step-panel h2,.step-panel p,.model-diagram{grid-column:1\/-1}.step-panel h2{margin:0}.step-panel p{color:#657779;line-height:1.6;margin:0 0 8px}.step-actions{display:flex;justify-content:space-between;margin-top:28px;padding-top:22px;border-top:1px solid #e4eded}.step-actions button{border:0;background:#006b73;color:white;padding:14px 22px;border-radius:7px;cursor:pointer}.step-actions #step-back{background:#e8f1f1;color:#31585d}.model-diagram{background:#f1f7f7;border-radius:10px;padding:20px;text-align:center}.model-diagram svg{width:240px;height:90px}.model-diagram span{display:block;font-size:13px;color:#5d7b7e}.esen-config-summary{position:sticky;top:24px}.esen-config-summary>p{font-size:12px}.esen-config-summary #esen-base-price{font-size:24px;font-weight:bold;color:#006b73}.esen-config-summary #esen-total-price h3:last-of-type{color:#006b73}.esen-config-summary #esen-total-price p:last-child{font-size:30px;font-weight:700;color:#006b73}.esen-config-summary #esen-total-price{border-top:1px solid #dbe5e5;padding-top:15px}.esen-config-selection p{font-size:13px}@media(max-width:700px){.step-panel{grid-template-columns:1fr}.step-nav button{font-size:11px}.esen-config-summary{position:static}}.entry-header{display:none}.esen-config h1{font-size:42px;line-height:1.2}.esen-config h2{font-size:28px}.esen-config h3{font-size:22px}.esen-config{max-width:1100px;margin:0 auto;padding:45px 24px 70px;color:#102b32}.esen-config-layout{display:grid;grid-template-columns:2fr 1fr;gap:28px}.esen-config-fields,.esen-config-summary{background:#fff;border:1px solid #dbe5e5;border-radius:14px;padding:28px}.esen-config-fields{align-content:start;display:grid;grid-template-columns:1fr 1fr;gap:22px}.esen-config label{display:block;font-weight:600}.esen-config select,.esen-config input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #b8c9cb;border-radius:6px;background:#fff;color:#102b32;box-sizing:border-box}.esen-config-summary{align-self:start}.esen-config-summary p{line-height:1.7}.esen-config-summary a{display:inline-block;background:#006b73;color:#fff;padding:12px 18px;border-radius:6px;text-decoration:none}.esen-config-note{color:#52636a;max-width:720px;margin-bottom:28px}@media(max-width:700px){.esen-config{padding-top:35px}.esen-config-layout,.esen-config-fields{grid-template-columns:1fr}}<\/style><section class=\"esen-config\"><h1>Design Your Staircase<\/h1><p class=\"esen-config-note\">Explore the options for your made-to-measure wooden staircase. Explore an estimated price as you select your options. Your measurements and design will be reviewed before production.<\/p><div class=\"esen-config-layout\"><div class=\"esen-config-fields\"><nav class=\"step-nav\"><button type=\"button\" data-step=\"0\" class=\"active\">1 \u00b7 Measurements<\/button><button type=\"button\" data-step=\"1\">2 \u00b7 Model &#038; Wood<\/button><button type=\"button\" data-step=\"2\">3 \u00b7 Extras &#038; Price<\/button><\/nav><div class=\"step-panel\" data-panel=\"1\"><h2>Your staircase, your style<\/h2><p>Select a model and a wood type to begin.<\/p><label>Model<select id=\"esen-choice-0\" data-label=\"Model\"><option value=\"\">Choose an option<\/option><option selected>Straight<\/option><option>Quarter turn<\/option><option>Half turn<\/option><option>Three-quarter turn (270\u00b0)<\/option><option>S-shaped<\/option><\/select><\/label><label>Wood<select id=\"esen-choice-1\" data-label=\"Wood\"><option value=\"\">Choose an option<\/option><option>Oak<\/option><option selected>Pine<\/option><option>Mahogany<\/option><\/select><\/label><div class=\"model-diagram\"><svg viewbox=\"0 0 360 100\" role=\"img\" aria-label=\"Illustration of wooden staircase steps\"><path d=\"M30 90h50V70h50V50h50V30h50V10h70\" fill=\"none\" stroke=\"#00828a\" stroke-width=\"10\" stroke-linejoin=\"round\"\/><\/svg><span>Made to measure \u00b7 Crafted with precision<\/span><\/div><\/div><div class=\"step-panel\" data-panel=\"0\" hidden><h2>Measure your space<\/h2><p>Enter measurements in centimetres. The initial estimate uses a straight pine staircase; you can change the model and wood in the next step. Our team verifies the design before production.<\/p><label>Floor-to-floor height (cm)<input data-label=\"Height (cm)\" type=\"number\" min=\"1\" step=\"1\" placeholder=\"e.g. 280\"><\/label><label>Staircase width (cm)<input data-label=\"Width (cm)\" type=\"number\" min=\"0\" step=\"1\" placeholder=\"e.g. 90\"><\/label><label>Available opening length (cm)<input data-label=\"Opening length (cm)\" type=\"number\" min=\"1\" step=\"1\"><\/label><\/div><div class=\"step-panel\" data-panel=\"2\" hidden><h2>The finishing touches<\/h2><p>Choose your risers, balustrade, finish and installation.<\/p><label>Steps<select id=\"esen-choice-2\" data-label=\"Steps\"><option value=\"\">Choose an option<\/option><option>Open risers<\/option><option>Closed risers<\/option><\/select><\/label><label>Balustrade<select id=\"esen-choice-3\" data-label=\"Balustrade\"><option value=\"\">Choose an option<\/option><option>No balustrade<\/option><option>Pine balustrade \u2014 1 m (Free)<\/option><option>Pine balustrade \u2014 2 m (+\u20ac100)<\/option><option>Pine balustrade \u2014 3 m (+\u20ac200)<\/option><option>Pine balustrade \u2014 4 m (+\u20ac300)<\/option><option>Oak balustrade \u2014 1 m (+\u20ac200)<\/option><option>Oak balustrade \u2014 2 m (+\u20ac400)<\/option><option>Oak balustrade \u2014 3 m (+\u20ac600)<\/option><option>Oak balustrade \u2014 4 m (+\u20ac800)<\/option><option>Mahogany balustrade \u2014 1 m (+\u20ac150)<\/option><option>Mahogany balustrade \u2014 2 m (+\u20ac300)<\/option><option>Mahogany balustrade \u2014 3 m (+\u20ac450)<\/option><option>Mahogany balustrade \u2014 4 m (+\u20ac600)<\/option><option>Discuss other options<\/option><\/select><\/label><label>Finish<select id=\"esen-choice-4\" data-label=\"Finish\"><option value=\"\">Choose an option<\/option><option>Unfinished<\/option><option>Primer 1 \u2014 up to 300 cm (+\u20ac100)<\/option><option>Primer 2 \u2014 over 300\u2013400 cm (+\u20ac150)<\/option><option value=\"Varnish\">Varnish<\/option><\/select><\/label><label>Installation<select id=\"esen-choice-5\" data-label=\"Installation\"><option value=\"\">Choose an option<\/option><option>Supply only<\/option><option value=\"installation-1\">Installation 1 \u2014 up to 300 cm<\/option><option value=\"installation-2\">Installation 2 \u2014 over 300\u2013400 cm<\/option><\/select><\/label><\/div><div class=\"step-actions\"><button type=\"button\" id=\"step-back\">Back<\/button><button type=\"button\" id=\"step-next\">Continue \u2192<\/button><\/div><\/div><aside class=\"esen-config-summary\"><span class=\"estimate-eyebrow\">YOUR CONFIGURATION<\/span><h2>Your Staircase<\/h2><div class=\"estimate-action\"><div><span>Total incl. 21% VAT<\/span><strong class=\"estimate-value\">Choose your options<\/strong><\/div><div class=\"estimate-button-slot\"><\/div><\/div><div id=\"esen-total-price\" aria-live=\"polite\"><\/div><details class=\"estimate-details\"><summary>View selected options<\/summary><div id=\"esen-config-selection\" aria-live=\"polite\">Select your preferences to see a summary.<\/div><\/details><p id=\"esen-base-price\" aria-live=\"polite\" hidden><\/p><p class=\"estimate-footnote\">Estimated price. Measurements and design are checked before production.<\/p><a class=\"estimate-quote\" href=\"https:\/\/esentrappen.nl\/en\/contact\/#request-a-quote\">Need help? Request a quote \u2192<\/a><\/aside><\/div><\/section><script>(function(){var root=document.querySelector(\".esen-config\");if(!root)return;root.querySelector(\"#esen-choice-0\").value=\"Straight\";root.querySelector(\"#esen-choice-1\").value=\"Pine\";function update(){var enteredHeight=Number(root.querySelector(\"input\").value);var tierFinish=root.querySelector(\"#esen-choice-4\");var tierInstallation=root.querySelector(\"#esen-choice-5\");[tierFinish,tierInstallation].forEach(function(select){Array.from(select.options).forEach(function(option){var first=option.value.indexOf(\"Primer 1\")===0||option.value===\"installation-1\";var second=option.value.indexOf(\"Primer 2\")===0||option.value===\"installation-2\";if(first||second){var limit=300;option.disabled=first?enteredHeight>limit:enteredHeight<=limit||enteredHeight>400;if(option.disabled){if(select.value===option.value)select.value=\"\";}}});});var selectedWood=root.querySelector(\"#esen-choice-1\").value;var installation=root.querySelector(\"#esen-choice-5\");Array.from(installation.options).forEach(function(option){var hardwood=[\"Oak\",\"Mahogany\"].indexOf(selectedWood)!==-1;if(option.value===\"installation-1\")option.textContent=\"Installation 1 \u2014 up to 300 cm\"+(hardwood?\" (+\u20ac400)\":selectedWood===\"Pine\"?\" (+\u20ac300)\":\" \u2014 select wood\");if(option.value===\"installation-2\")option.textContent=\"Installation 2 \u2014 over 300\u2013400 cm\"+(hardwood?\" (+\u20ac500)\":selectedWood===\"Pine\"?\" (+\u20ac400)\":\" \u2014 select wood\");});var steps=root.querySelector(\"#esen-choice-2\");Array.from(steps.options).forEach(function(option){if(root.querySelector(\"#esen-choice-1\").value!==\"Mahogany\"){if(option.value===\"Mahogany risers\")option.remove();}});if(root.querySelector(\"#esen-choice-1\").value===\"Mahogany\"){if(!Array.from(steps.options).some(function(option){return option.value===\"Mahogany risers\";})){var mahoganyOption=document.createElement(\"option\");mahoganyOption.value=\"Mahogany risers\";mahoganyOption.textContent=\"Mahogany risers \u2014 up to 250 cm +\u20ac150; at 350 cm +\u20ac250\";steps.appendChild(mahoganyOption);}}var isOak=root.querySelector(\"#esen-choice-1\").value===\"Oak\";var oakChoices=[\"Oak risers \u2014 one-sided: up to 250 cm +\u20ac400; at 350 cm +\u20ac550\",\"Oak risers \u2014 two-sided: up to 250 cm +\u20ac400; at 350 cm +\u20ac800\"];if(isOak){oakChoices.forEach(function(text){if(!Array.from(steps.options).some(function(o){return o.value===text;})){var option=document.createElement(\"option\");option.value=text;option.textContent=text;steps.appendChild(option);}});}else{Array.from(steps.options).forEach(function(option){if(oakChoices.indexOf(option.value)!==-1)option.remove();});}var pine=root.querySelector(\"#esen-choice-1\").value===\"Pine\";var finish=root.querySelector(\"#esen-choice-4\");Array.from(finish.options).forEach(function(option){if(option.value===\"Varnish\"){option.disabled=pine;option.textContent=[\"Oak\",\"Mahogany\"].indexOf(root.querySelector(\"#esen-choice-1\").value)!==-1?\"Varnish (+\u20ac150)\":\"Varnish\";}});if(pine){if(finish.value===\"Varnish\")finish.value=\"\";}var out=root.querySelector(\"#esen-config-selection\");out.replaceChildren();root.querySelectorAll(\"select,input\").forEach(function(field){if(!field.value)return;var p=document.createElement(\"p\");p.textContent=field.dataset.label+\": \"+(field.tagName===\"SELECT\"?field.selectedOptions[0].textContent:field.value);out.appendChild(p);});if(!out.children.length)out.textContent=\"Select your preferences to see a summary.\";var model=root.querySelector(\"#esen-choice-0\").value;var height=Number(root.querySelectorAll(\"input\")[0].value);var price=root.querySelector(\"#esen-base-price\");var width=Number(root.querySelectorAll(\"input\")[1].value);function money(amount){return new Intl.NumberFormat(\"nl-NL\",{style:\"currency\",currency:\"EUR\"}).format((amount-(root.querySelector(\"#esen-choice-1\").value===\"Pine\"?170:0))*(width>95?1.06:1));}if([\"Oak\",\"Mahogany\"].indexOf(root.querySelector(\"#esen-choice-1\").value)!==-1){if([\"Straight\",\"Quarter turn\",\"Half turn\",\"Three-quarter turn (270\u00b0)\",\"S-shaped\"].indexOf(model)===-1){price.textContent=\"Pricing for this model requires a tailored quote.\";}else if(!root.querySelector(\"#esen-choice-2\").value){price.textContent=\"Select your riser preference.\";}else if(!height||height<=0){price.textContent=\"Enter your staircase height.\";}else if(height>350){price.textContent=\"Above 350 cm: request a tailored quote.\";}else{price.textContent=money(model===\"S-shaped\"?(height<=250?2500:2500+(height-250)*10):model===\"Three-quarter turn (270\u00b0)\"?(height<=250?2600:2600+(height-250)*10):model===\"Half turn\"?(height<=250?2400:2400+(height-250)*9):model===\"Quarter turn\"?(height<=250?2300:2300+(height-250)*9):(height<=250?2000:2000+(height-250)*10));}}else if(root.querySelector(\"#esen-choice-1\").value!==\"Pine\"){price.textContent=\"Select Pine, Oak or Mahogany. Other wood types require a tailored quote.\";}else if(model===\"Straight\"){if(height<80||height>400){price.textContent=\"Enter a height between 80 and 400 cm.\";}else if(root.querySelectorAll(\"input\")[1].value===\"\"){price.textContent=\"Enter your staircase width.\";}else if(width<0||width>120){price.textContent=\"Enter a width between 0 and 120 cm.\";}else{var straightPrice=height<=200?350+(height-80)*650\/120:1000+(height-200)*5;price.textContent=money(straightPrice);}}else if(model===\"Three-quarter turn (270\u00b0)\"){if(!height||height<=0){price.textContent=\"Enter your staircase height.\";}else if(height>400){price.textContent=\"Above 400 cm: request a tailored quote.\";}else{price.textContent=money(height<=300?1850:1850+(height-300)*4);}}else if([\"Quarter turn\",\"Half turn\",\"S-shaped\"].indexOf(model)===-1){price.textContent=\"Pricing for this model is being prepared.\";}else if(!height||height<=0){price.textContent=\"Enter your staircase height.\";}else if(height>380){price.textContent=\"Above 380 cm: request a tailored quote.\";}else{var total=(height<=250?1400:1400+(height-250)*600\/130)+(model===\"Half turn\"?100:model===\"S-shaped\"?200:0);price.textContent=money(total);}if(width<0||width>120){price.textContent=\"Enter a width between 0 and 120 cm. Other widths require a tailored quote.\";}var totalPanel=root.querySelector(\"#esen-total-price\");totalPanel.replaceChildren();if(price.textContent.indexOf(\"\u20ac\")!==-1){var base=Number(price.textContent.replace(\/[^0-9,.]\/g,\"\").replace(\/\\.\/g,\"\").replace(\",\",\".\"));var additions=[];var issues=[];var stepChoice=steps.value;var wood=root.querySelector(\"#esen-choice-1\").value;var rail=root.querySelector(\"#esen-choice-3\").value;var finishChoice=finish.value;var install=installation.value;if(stepChoice===\"Closed risers\"){if(wood===\"Pine\"){additions.push([\"Closed risers\",height<=300?100:150]);}else{issues.push(\"Choose the material-specific riser option.\");}}else if(stepChoice.indexOf(\"Oak risers \u2014 one-sided\")===0){additions.push([\"One-sided oak risers\",height<=250?400:400+(height-250)*1.5]);}else if(stepChoice.indexOf(\"Oak risers \u2014 two-sided\")===0){additions.push([\"Two-sided oak risers\",height<=250?400:400+(height-250)*4]);}else if(stepChoice===\"Mahogany risers\"){additions.push([\"Mahogany risers\",height<=250?150:150+(height-250)]);}if(!rail){issues.push(\"Select your balustrade preference.\");}else if(rail===\"Discuss other options\"){issues.push(\"A tailored balustrade quote is required.\");}else{var railMatch=rail.match(\/\\+\u20ac(\\d+)\/);if(railMatch)additions.push([\"Balustrade\",Number(railMatch[1])]);}if(!finishChoice){issues.push(\"Select your finish.\");}else if(finishChoice.indexOf(\"Primer 1\")===0){if(height>300)issues.push(\"Above 300 cm, choose Primer 2.\");else additions.push([\"Primer\",100]);}else if(finishChoice.indexOf(\"Primer 2\")===0){if(height<=300)issues.push(\"At or below 300 cm, choose Primer 1.\");else additions.push([\"Primer\",150]);}else if(finishChoice===\"Varnish\")additions.push([\"Varnish\",150]);if(!install){issues.push(\"Select supply only or installation.\");}else if(install===\"installation-1\"){if(height>300)issues.push(\"Above 300 cm, choose Installation 2.\");else additions.push([\"Installation\",wood===\"Pine\"?300:400]);}else if(install===\"installation-2\"){if(height<=300)issues.push(\"At or below 300 cm, choose Installation 1.\");else additions.push([\"Installation\",wood===\"Pine\"?400:500]);}var sum=base;function money(value){return new Intl.NumberFormat(\"nl-NL\",{style:\"currency\",currency:\"EUR\"}).format(value);}function row(label,value,kind){var line=document.createElement(\"div\");line.className=\"receipt-row \"+(kind||\"\");var name=document.createElement(\"span\");name.textContent=label;var amount=document.createElement(\"strong\");amount.textContent=money(value);line.appendChild(name);line.appendChild(amount);totalPanel.appendChild(line);}var receiptHeading=document.createElement(\"h3\");receiptHeading.textContent=\"Your price breakdown\";totalPanel.appendChild(receiptHeading);var originalBase=width>95?base\/1.06:base;row(\"Base staircase\",originalBase);row(\"Width surcharge\",base-originalBase);var categories=[\"Risers\",\"Balustrade\",\"Finish\",\"Installation\"];var fees=[0,0,0,0];additions.forEach(function(item){sum+=item[1];var category=item[0]===\"Balustrade\"?1:item[0]===\"Primer\"||item[0]===\"Varnish\"?2:item[0]===\"Installation\"?3:0;fees[category]+=item[1];});categories.forEach(function(label,index){row(label,fees[index]);});if(issues.length){var warning=document.createElement(\"p\");var actualErrors=issues.filter(function(issue){return issue!==\"Select your balustrade preference.\"&&issue!==\"Select your finish.\"&&issue!==\"Select supply only or installation.\";});warning.textContent=actualErrors.join(\" \");var extrasPanel=root.querySelector('[data-panel=\"2\"]');if(actualErrors.length&&extrasPanel&&!extrasPanel.hidden)totalPanel.appendChild(warning);}else{row(\"Subtotal (excl. VAT)\",sum,\"receipt-subtotal\");row(\"VAT (21%)\",sum*0.21);row(\"Total including VAT\",sum*1.21,\"receipt-grand\");var note=document.createElement(\"small\");note.textContent=\"Estimated price \u00b7 Final measurements and design subject to review.\";totalPanel.appendChild(note);}}}root.addEventListener(\"input\",update);root.addEventListener(\"change\",update);})();<\/script><script>(function(){var current=0;var root=document.querySelector(\".esen-config\");function complete(step){var fields=Array.from(root.querySelectorAll(\"[data-panel]\")).find(function(panel){return Number(panel.dataset.panel)===step;}).querySelectorAll(\"input,select\");return Array.from(fields).every(function(field){if(field.tagName===\"SELECT\")return field.value!==\"\";return field.value.trim()!==\"\"?Number(field.value)>0:false;});}function allowed(step){for(var i=0;i<step;i++){if(!complete(i))return false;}return true;}function refresh(){root.querySelector(\"#step-next\").disabled=!complete(current);root.querySelectorAll(\"[data-step]\").forEach(function(button){button.disabled=!allowed(Number(button.dataset.step));});}function show(step){if(!allowed(step))return;current=step;root.querySelectorAll(\"[data-panel]\").forEach(function(panel){panel.hidden=Number(panel.dataset.panel)!==step;});root.querySelectorAll(\"[data-step]\").forEach(function(button){button.classList.toggle(\"active\",Number(button.dataset.step)===step);});root.querySelector(\"#step-back\").disabled=step===0;root.querySelector(\"#step-next\").textContent=step===2?\"Add to Basket\":\"Continue \u2192\";refresh();root.dispatchEvent(new Event(\"change\",{bubbles:true}));}root.querySelectorAll(\"[data-step]\").forEach(function(button){button.addEventListener(\"click\",function(){show(Number(button.dataset.step));});});root.querySelector(\"#step-back\").addEventListener(\"click\",function(){show(Math.max(0,current-1));});root.querySelector(\"#step-next\").addEventListener(\"click\",function(){if(!complete(current))return;if(current===2){var cartButton=root.querySelector(\".estimate-cart-button\");if(cartButton){if(!cartButton.disabled){cartButton.dataset.destination=\"basket\";cartButton.click();cartButton.dataset.destination=\"checkout\";}}return;}show(Math.min(2,current+1));});root.addEventListener(\"input\",refresh);root.addEventListener(\"change\",refresh);show(0);})();<\/script><style>.esen-config button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}<\/style><style>#esen-total-price{border-top:2px dashed #b9caca;padding-top:20px;margin-top:20px}.receipt-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #e7eeee;font-size:14px}.receipt-row strong{white-space:nowrap;font-variant-numeric:tabular-nums}.receipt-subtotal{border-top:2px dashed #b9caca;margin-top:12px;font-weight:700}.receipt-grand{background:#006d73;color:white;border-radius:8px;padding:16px 10px;margin:12px 0;font-size:17px}#esen-total-price small{display:block;line-height:1.5;color:#657777}<\/style><style>\nbody.page-id-2596{background:#f4f7f7}.page-id-2596 .site-content .ast-container{max-width:1320px;padding:0 28px}.page-id-2596 .entry-content{padding:0!important}.page-id-2596 .main-header-menu .menu-link{color:#123b40!important}.esen-config{max-width:1200px!important;padding:40px 0 55px!important}.esen-config h1{font-size:40px!important;font-weight:800!important;letter-spacing:-1px;color:#123b40;margin-bottom:12px!important}.esen-config-note{font-size:16px!important;color:#416065!important;line-height:1.6;max-width:850px!important;margin-bottom:26px!important}.esen-config-layout{grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr)!important;gap:26px!important}.esen-config-fields,.esen-config-summary{border:1px solid #dae6e6!important;border-radius:16px!important;padding:26px!important;box-shadow:0 5px 22px #123b4005}.step-nav{gap:6px!important;margin-bottom:26px!important;background:#eef4f4;padding:5px;border-radius:12px}.step-nav button{background:transparent!important;border:0!important;border-radius:8px!important;font-size:13px!important;font-weight:750!important;color:#37575c!important;padding:12px 5px!important}.step-nav button.active{background:#006d73!important;color:white!important;box-shadow:0 3px 8px #006d7325}.step-nav button:disabled{color:#6f8589!important;opacity:.6!important}.step-panel h2{font-size:25px!important;font-weight:800;color:#123b40}.step-panel p{font-size:15px!important;line-height:1.6!important;color:#486469!important}.esen-config label{font-size:16px!important;font-weight:750!important;color:#163f45!important}.esen-config select,.esen-config input{font-size:16px!important;font-weight:550!important;padding:14px!important;border:1px solid #b7ccce!important;border-radius:8px!important;min-height:51px}.esen-config input:focus,.esen-config select:focus{outline:2px solid #007d84!important;outline-offset:2px}.step-actions button{font-size:15px!important;font-weight:750!important;border-radius:25px!important;padding:13px 24px!important}.esen-config-summary{top:24px!important}.estimate-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#006d73}.esen-config-summary h2{font-size:26px!important;font-weight:800!important;margin:8px 0 20px!important;color:#123b40}.estimate-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;background:#eaf5f4;border-radius:12px;padding:18px;margin-bottom:18px}.estimate-action span{display:block;font-size:12px;font-weight:650;color:#315b60}.estimate-value{display:block;font-size:26px;font-weight:800;color:#006d73;line-height:1.3;margin-top:5px;white-space:nowrap}.estimate-action:has(.estimate-value:empty){display:none}.estimate-button-slot button{width:auto!important;min-width:108px!important;margin:0!important;padding:14px 16px!important;border-radius:26px!important;font-size:14px!important;font-weight:800!important;white-space:nowrap!important;line-height:1.3!important}.estimate-button-slot button:disabled{opacity:.45!important}.esen-config-summary #esen-total-price{padding-top:0!important;border-top:0!important}.esen-config-summary #esen-total-price h3{font-size:16px!important;font-weight:800!important;margin:0 0 10px!important;color:#123b40}.receipt-row{font-size:14px!important;padding:8px 0!important;font-weight:550!important;color:#284d53}.receipt-row strong{font-size:15px;font-weight:750}.receipt-grand{display:none!important}.receipt-zero{display:none!important}.receipt-subtotal{margin-top:8px!important;padding-top:12px!important}.esen-config-summary #esen-total-price small{display:none!important}.estimate-details{border-top:1px solid #dce8e8;padding-top:14px;margin-top:12px}.estimate-details summary{font-size:14px;font-weight:750;color:#006d73;cursor:pointer}.estimate-details p{font-size:13px!important;line-height:1.5!important;margin:8px 0}.estimate-footnote{font-size:12px!important;line-height:1.5!important;color:#557075!important;margin:14px 0!important}.esen-config-summary .estimate-quote{padding:0!important;background:none!important;color:#006d73!important;font-size:13px!important;font-weight:750!important}.esen-config-summary>p[role=status]{font-size:13px!important;line-height:1.4}.model-diagram{padding:14px!important;background:#eff6f5!important}@media(max-width:800px){.esen-config-layout{grid-template-columns:1fr!important}.esen-config-summary{position:static!important}.esen-config h1{font-size:31px!important}.page-id-2596 .site-content .ast-container{padding:0 18px}.esen-config{padding:26px 0!important}.estimate-action{grid-template-columns:minmax(0,1fr) auto}.esen-config-fields,.esen-config-summary{padding:20px!important}.step-nav button{font-size:11px!important}.step-panel{grid-template-columns:1fr!important}}\n<\/style><script>(function(){var root=document.querySelector('.esen-config');if(!root)return;var summary=root.querySelector('.esen-config-summary'),slot=root.querySelector('.estimate-button-slot'),value=root.querySelector('.estimate-value');function sync(){var button=Array.from(summary.querySelectorAll('button')).find(function(b){return b.textContent==='Add staircase to cart'||b.classList.contains('estimate-cart-button');});if(button){button.classList.add('estimate-cart-button');if(button.textContent!=='Checkout')button.textContent='Checkout';if(!button.dataset.destination)button.dataset.destination='checkout';if(button.parentElement!==slot)slot.append(button);}var total=summary.querySelector('.receipt-grand strong');var text=total?total.textContent:'Complete options';if(value.textContent!==text)value.textContent=text;summary.querySelectorAll('.receipt-row').forEach(function(row){var amount=row.querySelector('strong');var zero=amount&&\/0,00\/.test(amount.textContent)&&!\/[1-9]\/.test(amount.textContent);if(!row.classList.contains('receipt-subtotal')&&!row.classList.contains('receipt-grand'))row.classList.toggle('receipt-zero',!!zero);});}new MutationObserver(sync).observe(summary,{childList:true,subtree:true});root.addEventListener('input',sync);root.addEventListener('change',sync);sync();})();<\/script><style>.page-id-2596 .ast-article-single{padding:0!important;background:transparent!important}.page-id-2596 #primary{margin:20px 0!important}.esen-config{padding:20px 0 40px!important}.esen-config-summary #esen-total-price p{font-size:14px!important;font-weight:550!important;line-height:1.5!important;color:#587075!important;margin:10px 0!important}.estimate-value{font-size:23px!important}.esen-config-fields{min-height:0!important}.esen-config-summary{height:auto!important}.step-panel{gap:16px!important}.step-panel p{margin-bottom:0!important}.esen-config-note{margin-bottom:20px!important}.estimate-action{padding:14px!important}.estimate-value:has(+*){white-space:normal}.esen-config-summary #esen-total-price .receipt-row strong{font-size:14px!important}<\/style>\n<style>@media(max-width:420px){.esen-config .estimate-action{grid-template-columns:1fr!important;gap:12px!important}.esen-config .estimate-button-slot,.esen-config .estimate-button-slot button{width:100%!important}.esen-config .estimate-value{white-space:normal!important;overflow-wrap:anywhere}.esen-config .step-actions{gap:8px!important}.esen-config .step-actions button{padding:13px 16px!important;min-height:48px}}<\/style>\n<style>.page-id-2596 .site-content{background:linear-gradient(rgba(15,38,40,.28),rgba(15,38,40,.28)),url(\"https:\/\/esentrappen.nl\/wp-content\/uploads\/2026\/09\/400cd142-8bf6-4081-a7c2-5c3812b133d31.jpg\") center center\/cover no-repeat!important}.page-id-2596 .esen-config>h1,.page-id-2596 .esen-config>.esen-config-note{color:#fff!important;text-shadow:0 2px 5px rgba(0,0,0,.45)}.page-id-2596 .esen-config>h1{padding-top:14px!important}.page-id-2596 .esen-config>.esen-config-note{max-width:850px!important}.page-id-2596 .esen-config-fields,.page-id-2596 .esen-config-summary{background:#fff!important;box-shadow:0 8px 28px rgba(0,0,0,.12)}@media(max-width:800px){.page-id-2596 .site-content{background-position:55% top!important}.page-id-2596 .esen-config>h1{font-size:30px!important}}<\/style>\n<style>.page-id-2596 #masthead{background:linear-gradient(rgba(15,38,40,.15),rgba(15,38,40,.15)),url(\"https:\/\/esentrappen.nl\/wp-content\/uploads\/2026\/09\/400cd142-8bf6-4081-a7c2-5c3812b133d31.jpg\") center 35%\/cover no-repeat!important}.page-id-2596 #masthead .ast-primary-header-bar,.page-id-2596 #masthead .ast-below-header-bar,.page-id-2596 #masthead .main-header-bar,.page-id-2596 #masthead .ast-main-header-wrap{background:transparent!important;border-color:rgba(255,255,255,.18)!important}.page-id-2596 #masthead .main-header-menu .menu-link{color:#fff!important}.page-id-2596 #masthead .main-header-menu .current-menu-item>.menu-link{color:#ffcb46!important}.page-id-2596 #masthead .ast-mobile-header-content{background:#fff!important}.page-id-2596 #masthead .ast-mobile-header-content .menu-link{color:#123b40!important}<\/style>\n<style>.page-id-2596 .esen-config-fields,.page-id-2596 .esen-config-summary{background:#007d85!important;border-color:#006b73!important;color:#fff!important;box-shadow:0 12px 30px #005f661a}.page-id-2596 .esen-config-fields :is(h2,label,.step-panel p),.page-id-2596 .esen-config-summary :is(h2,h3,p,span,strong,summary,.estimate-value,.estimate-eyebrow){color:#fff!important}.page-id-2596 .esen-config-fields :is(input,select){background:#fff!important;color:#123b40!important;border:1px solid #d2e5e5!important}.page-id-2596 .step-nav button{background:#00656c!important;color:#fff!important;border-color:#ffffff50!important}.page-id-2596 .step-nav button.active{background:white!important;color:#00656c!important;font-weight:800}.page-id-2596 .step-actions{border-color:#ffffff40!important}.page-id-2596 .step-actions button,.page-id-2596 .estimate-cart-button{background:white!important;color:#00656c!important;font-weight:800!important;border:1px solid #fff!important}.page-id-2596 .step-actions button:disabled,.page-id-2596 .estimate-cart-button:disabled{opacity:.5!important}.page-id-2596 .esen-config-summary .estimate-action{background:#00656c!important;border-color:#ffffff40!important}.page-id-2596 .esen-config-summary :is(.estimate-details,#esen-total-price){border-color:#ffffff40!important}.page-id-2596 .esen-config-summary .estimate-quote{background:#00656c!important;color:white!important;border:1px solid #ffffff60!important}.page-id-2596 .esen-config-summary #esen-total-price :is(table,tbody,tr,td,th){background:transparent!important;color:white!important;border-color:#ffffff30!important}.page-id-2596 .esen-config-summary #esen-total-price [style]{color:white!important}.page-id-2596 .model-diagram span{color:#31585d!important}<\/style>\n<style>.page-id-2596 .estimate-action{display:flex!important;flex-wrap:wrap!important;gap:16px!important;align-items:center!important}.page-id-2596 .estimate-action>div:first-child{flex:1 1 150px;min-width:0}.page-id-2596 .estimate-button-slot{flex:1 1 130px;min-width:0}.page-id-2596 .estimate-value{white-space:normal!important;overflow-wrap:anywhere;font-size:25px!important;line-height:1.25!important}.page-id-2596 .estimate-cart-button{margin-top:0!important}.page-id-2596 .estimate-action>div:first-child>span{display:block!important;font-size:12px!important}<\/style>\n<style>body.page-id-2596 .esen-config .step-actions #step-next,body.page-id-2659.woocommerce-cart .woocommerce .cart-collaterals .cart_totals a.checkout-button,body.page-id-2660.woocommerce-checkout .woocommerce form.esen-checkout .esen-checkout-step button.esen-step-button,body.page-id-2660.woocommerce-checkout .woocommerce form.esen-checkout .esen-checkout-step #place_order{background:#145bcc!important;color:#fff!important;border-color:#145bcc!important;font-weight:800!important}body.page-id-2596 .esen-config .step-actions #step-next:hover,body.page-id-2659.woocommerce-cart .woocommerce .cart-collaterals .cart_totals a.checkout-button:hover,body.page-id-2660.woocommerce-checkout .woocommerce form.esen-checkout .esen-checkout-step button.esen-step-button:hover,body.page-id-2660.woocommerce-checkout .woocommerce form.esen-checkout .esen-checkout-step #place_order:hover{background:#1048a3!important}body.page-id-2596 .esen-config .step-actions #step-next:focus-visible,body.page-id-2659.woocommerce-cart .woocommerce .cart-collaterals .cart_totals a.checkout-button:focus-visible,body.page-id-2660.woocommerce-checkout .woocommerce form.esen-checkout .esen-checkout-step button:focus-visible{outline:3px solid #fff!important;outline-offset:3px}<\/style>\n<style>body.page-id-2596 .esen-config .step-nav button{background:#145bcc!important;color:white!important;border-color:#145bcc!important;font-weight:750!important}body.page-id-2596 .esen-config .step-nav button.active{background:#0d3f95!important;color:white!important;border-color:white!important;box-shadow:inset 0 0 0 1px white}body.page-id-2596 .esen-config .step-nav button:disabled{opacity:.45!important;cursor:not-allowed}<\/style>\n<style>body.page-id-2596 .esen-config-summary .estimate-cart-button{background:#145bcc!important;color:#fff!important;border-color:#145bcc!important}<\/style>\n<style id=\"esen-watermark-angle\">#content .esen-watermark-wrap:after,#content .esen-watermark-background:after{transform:translate(-50%,-50%) rotate(-45deg)!important}.esen-photo-dialog .esen-photo-stage:after{transform:translate(-50%,-50%) rotate(-45deg)!important}<\/style>\n<style id=\"esen-compact-calculator\">body #page #content .esen-config .esen-config-fields,body #page #content .esen-config .esen-config-summary{padding:16px!important;min-height:0!important;border-radius:14px!important}body #page #content .esen-config .esen-config-layout{gap:16px!important;align-items:start!important}body #page #content .esen-config .step-nav{padding:5px!important;gap:5px!important;margin:0 0 12px!important;border-radius:10px!important}body #page #content .esen-config .step-nav button{font-size:11px!important;padding:9px 5px!important;min-height:35px!important}body #page #content .esen-config .step-panel{gap:10px 14px!important}body #page #content .esen-config .step-panel h2{font-size:22px!important;line-height:1.2!important;margin:0 0 5px!important}body #page #content .esen-config .step-panel>p{font-size:12px!important;line-height:1.45!important;margin:0 0 3px!important}body #page #content .esen-config .step-panel label{font-size:12px!important;line-height:1.4!important;gap:4px!important}body #page #content .esen-config .step-panel :is(input,select){min-height:38px!important;height:38px!important;padding:8px 10px!important;font-size:14px!important;border-radius:7px!important;margin-top:4px!important}body #page #content .esen-config .esen-pdf-preview{padding:8px!important;margin:0!important;border-radius:10px!important}body #page #content .esen-config .esen-pdf-preview img{height:110px!important;max-height:110px!important;width:100%!important;object-fit:contain!important}body #page #content .esen-config .esen-direction-wrap{max-height:110px!important}body #page #content .esen-config .esen-pdf-preview :is(strong,p){font-size:11px!important;line-height:1.4!important;margin:4px 0 0!important}body #page #content .esen-config .step-actions{margin-top:10px!important;padding-top:10px!important;min-height:0!important}body #page #content .esen-config .step-actions button{padding:9px 18px!important;font-size:13px!important;min-height:38px!important}body #page #content .esen-config .esen-config-summary h2{font-size:23px!important;margin:8px 0 14px!important}body #page #content .esen-config .estimate-action{padding:12px!important;gap:10px!important;margin-bottom:12px!important}body #page #content .esen-config .estimate-value{font-size:25px!important;line-height:1.15!important}body #page #content .esen-config .estimate-cart-button{padding:10px 14px!important;min-height:38px!important;margin-top:0!important;font-size:12px!important}body #page #content .esen-config #esen-total-price{font-size:12px!important}body #page #content .esen-config #esen-total-price h3{font-size:16px!important;margin:10px 0!important}body #page #content .esen-config .estimate-details{margin-top:12px!important;padding-top:10px!important;font-size:12px!important}body #page #content .esen-config .estimate-footnote,body #page #content .esen-config .estimate-quote{font-size:11px!important;line-height:1.45!important;margin:10px 0 0!important}body #page #content .esen-calculator-intro{padding:16px!important;margin-top:18px!important}body #page #content .esen-calculator-intro h1{font-size:26px!important;margin:0 0 8px!important}body #page #content .esen-calculator-intro p{font-size:12px!important;line-height:1.45!important}@media(min-width:922px){body:is(.page-id-493,.page-id-2596) #masthead .custom-logo{max-height:62px!important;width:auto!important}body:is(.page-id-493,.page-id-2596) #masthead .site-branding{padding:6px 0!important}body:is(.page-id-493,.page-id-2596) #masthead :is(.ast-primary-header-bar,.site-primary-header-wrap){min-height:76px!important}body:is(.page-id-493,.page-id-2596) #masthead .ast-below-header-bar{min-height:48px!important;margin-top:0!important}body:is(.page-id-493,.page-id-2596) #masthead .site-below-header-wrap{min-height:48px!important}body:is(.page-id-493,.page-id-2596) #masthead .main-header-menu .menu-link{font-size:12px!important;padding:8px 11px!important}body:is(.page-id-493,.page-id-2596) #masthead .ast-custom-button{padding:10px 16px!important;font-size:12px!important}body.page-id-493 #page #content #sb_instagram #sbi_images .sbi_photo{height:95px!important}body.page-id-493 #page #content #sb_instagram .sbi_load_btn,body.page-id-493 #page #content #sb_instagram .sbi_follow_btn a{font-size:11px!important;padding:7px 10px!important}}@media(max-width:600px){body #page #content .esen-config .esen-config-layout{grid-template-columns:minmax(0,1fr)!important}body #page #content .esen-config .step-nav button{font-size:10px!important;padding:9px 3px!important}}<\/style>\n\n<style>.esen-model-3d-button{margin:12px 0;padding:10px 18px;border:0;border-radius:8px;background:#007e86;color:#fff;cursor:pointer;font:inherit;font-weight:600}.esen-model-3d-dialog{border:1px solid #d7e5e6;border-radius:12px;padding:0;width:min(820px,94vw);max-height:94vh;overflow:hidden;background:white}.esen-model-3d-dialog::backdrop{background:rgba(10,35,40,.65)}.esen-model-3d-dialog iframe{display:block;width:100%;height:calc(90dvh - 55px);border:0}.esen-model-3d-close{float:right;margin:10px 14px;border:0;background:#007e86;color:white;padding:8px 15px;border-radius:6px;cursor:pointer} .esen-inline-3d{width:100%;grid-column:1\/-1}.esen-inline-3d iframe{width:100%;height:140px;border:0;display:block;background:white;border-radius:8px}.esen-inline-3d .esen-model-3d-button{margin:6px 0 0;padding:8px 16px;background:#007e86!important;color:white!important}.esen-has-inline-3d>:not(.esen-inline-3d){display:none!important}#page #content .esen-has-inline-3d strong{display:none!important}.esen-has-inline-3d:after{display:none!important}.esen-inline-3d[hidden]{display:none!important}<\/style>\n<script>(()=>{const examples={\"270\":\"<!doctype html>\\n<html lang=\\\"tr\\\"><head><meta charset=\\\"utf-8\\\"><meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1\\\"><title>Esen Trappen \u2014 270\u00b0 3D<\/title>\\n<\/head><body>\\n<header><strong>ESEN TRAPPEN<\/strong><span>270\u00b0 \u00b7 three winder turns \u00b7 3D preview<\/span><\/header>\\n<main><div class=\\\"toolbar\\\"><button id=\\\"left\\\" aria-pressed=\\\"true\\\">Left turn<\/button><button id=\\\"right\\\" aria-pressed=\\\"false\\\">Right turn<\/button><button id=\\\"perspective\\\" aria-pressed=\\\"true\\\">3D<\/button><button id=\\\"top\\\" aria-pressed=\\\"false\\\">Top view<\/button><label><input id=\\\"risers\\\" type=\\\"checkbox\\\" checked>Closed risers<\/label><label><input id=\\\"rail\\\" type=\\\"checkbox\\\">Balustrade<\/label><button id=\\\"home\\\">Reset view<\/button><\/div>\\n<div class=\\\"stage\\\" id=\\\"stage\\\"><svg id=\\\"view\\\" role=\\\"img\\\" aria-label=\\\"\u00dc\u00e7 kez 90 derece sola d\u00f6nen 19 kademeli merdiven; s\u00fcr\u00fckleyerek d\u00f6nd\u00fcr\u00fcn.\\\"><\/svg><svg id=\\\"plan\\\" role=\\\"img\\\" aria-label=\\\"Numaral\u0131 merdiven \u00fcstten plan\u0131\\\"><\/svg><div class=\\\"bottom\\\"><span id=\\\"status\\\" aria-live=\\\"polite\\\">Left turn \u00b7 270\u00b0<\/span><span class=\\\"muted\\\">Drag to rotate \u00b7 Scroll to zoom<\/span><\/div><\/div>\\n<p class=\\\"note muted\\\">3D example with winder steps. Your final design and measurements are checked before production.<\/p><\/main>\\n<script>\\n(()=>{'use strict';\\nconst ns='http:\/\/www.w3.org\/2000\/svg',svg=document.getElementById('view'),plan=document.getElementById('plan'),stage=document.getElementById('stage');\\nconst origin=[311,251],scale=2090\/(945-311),outline=[\\n [642,881],[709,881],[795,881],[934,869],[934,750],[934,658],[934,574],\\n [934,485],[934,386],[934,263],[805,263],[713,263],[627,263],\\n [537,263],[437,263],[324,283],[324,414],[324,505],[324,574],[324,587]\\n];\\nconst inside=[\\n [642,606],[642,606],[646,606],[654,606],[663,601],[663,591],[663,575],\\n [663,563],[663,552],[663,541],[651,537],[638,537],[627,537],\\n [616,537],[605,537],[595,537],[595,549],[595,563],[595,576],[595,587]\\n];\\nconst point=p=>[(p[0]-origin[0])*scale,(p[1]-origin[1])*scale],o=outline.map(point),inn=inside.map(point);\\nconst polygons=o.slice(0,-1).map((p,i)=>[p,o[i+1],inn[i+1],inn[i]]);\\nlet direction=1,yaw=-.63,pitch=.35,zoom=1,drag=null,closed=true,rails=false;\\nconst rise=3530\/19,wood=[201,164,115],sideWood=[173,133,84];\\nfunction node(tag,attr={}){const e=document.createElementNS(ns,tag);Object.entries(attr).forEach(([k,v])=>e.setAttribute(k,v));return e;}\\nfunction prism(poly,y,h,c,faces){const b=poly.map(p=>[p[0],y,p[1]]),t=poly.map(p=>[p[0],y+h,p[1]]);faces.push({p:t,c,shade:1});faces.push({p:b,c,shade:.62});for(let i=0;i<poly.length;i++)faces.push({p:[b[i],b[(i+1)%poly.length],t[(i+1)%poly.length],t[i]],c,shade:i%2?.79:.86});}\\nfunction beam(a,b,width,height,c,faces){const dx=b[0]-a[0],dz=b[2]-a[2],len=Math.hypot(dx,dz)||1,n=[-dz\/len*width\/2,dx\/len*width\/2];const base=[[a[0]+n[0],a[1],a[2]+n[1]],[a[0]-n[0],a[1],a[2]-n[1]],[b[0]-n[0],b[1],b[2]-n[1]],[b[0]+n[0],b[1],b[2]+n[1]]],top=base.map(p=>[p[0],p[1]+height,p[2]]);faces.push({p:top,c,shade:.93});for(let i=0;i<4;i++)faces.push({p:[base[i],base[(i+1)%4],top[(i+1)%4],top[i]],c,shade:i%2?.74:.85});}\\nfunction geometry(){const f=[];polygons.forEach((p,i)=>{const y=(i+1)*rise;prism(p,y-40,40,wood,f);if(closed){const a=o[i],b=inn[i];beam([a[0],i*rise,a[1]],[b[0],i*rise,b[1]],18,rise-40,sideWood,f);}const a=o[i],b=o[i+1];beam([a[0],Math.max(0,i*rise-220),a[1]],[b[0],Math.max(0,(i+1)*rise-220),b[1]],40,270,sideWood,f);\\n if(rails){beam([a[0],y+830,a[1]],[b[0],y+rise+830,b[1]],45,55,wood,f);if(i%3===0||i===18){prism([[a[0]-22,a[1]-22],[a[0]+22,a[1]-22],[a[0]+22,a[1]+22],[a[0]-22,a[1]+22]],y,900,wood,f);}}\\n });\\n \/\/ Three central turning posts, dimensions from the drawing.\\n [[642,587,0,1250],[650,548,850,2450],[604,551,1950,3590]].forEach(p=>{const q=point(p);prism([[q[0]-36,q[1]-60],[q[0]+36,q[1]-60],[q[0]+36,q[1]+60],[q[0]-36,q[1]+60]],p[2],p[3]-p[2],wood,f);});\\n return f;\\n}\\nfunction draw(){const w=svg.clientWidth||900,h=svg.clientHeight||570;svg.setAttribute('viewBox',`0 0 ${w} ${h}`);svg.replaceChildren();const f=geometry();\\nconst transform=p=>{const x=(p[0]-1045)*-direction,y=p[1]-1795,z=p[2]-1057.5;const xx=x*Math.cos(yaw)+z*Math.sin(yaw),zz=-x*Math.sin(yaw)+z*Math.cos(yaw);return[xx,-y*Math.cos(pitch)+zz*Math.sin(pitch),y*Math.sin(pitch)+zz*Math.cos(pitch)];};\\nconst all=f.flatMap(q=>q.p.map(transform)),xs=all.map(p=>p[0]),ys=all.map(p=>p[1]);const lx=Math.min(...xs),hx=Math.max(...xs),ly=Math.min(...ys),hy=Math.max(...ys),s=Math.min((w-70)\/(hx-lx),(h-50)\/(hy-ly))*zoom;const project=p=>[(p[0]-(lx+hx)\/2)*s+w\/2,(p[1]-(ly+hy)\/2)*s+h\/2];\\nconst ground=node('ellipse',{cx:w\/2,cy:h-25,rx:Math.min(w*.28,180),ry:14,fill:'#dce4e3',opacity:.55});svg.append(ground);\\nf.map(q=>({...q,p:q.p.map(transform)})).sort((a,b)=>b.p.reduce((s,p)=>s+p[2],0)\/b.p.length-a.p.reduce((s,p)=>s+p[2],0)\/a.p.length).forEach(q=>{const c=q.c.map(v=>Math.round(v*q.shade));svg.append(node('polygon',{points:q.p.map(project).map(p=>p.join(',')).join(' '),fill:`rgb(${c})`,stroke:`rgb(${c.map(v=>Math.round(v*.8))})`,'stroke-width':.55,'stroke-linejoin':'round'}));});\\ndrawPlan();document.getElementById('status').textContent=(direction===1?'Left':'Right')+' turn \u00b7 270\u00b0 \u00b7 3530 mm';svg.setAttribute('aria-label',(direction===1?'Left':'Right')+' d\u00f6nen 270 derece merdiven, 19 kademe.');\\n}\\nfunction drawPlan(){plan.setAttribute('viewBox',svg.getAttribute('viewBox'));plan.replaceChildren();}\\nfunction selected(id,value){document.getElementById(id).setAttribute('aria-pressed',String(value));}\\ndocument.getElementById('left').onclick=()=>{direction=1;selected('left',true);selected('right',false);draw();};document.getElementById('right').onclick=()=>{direction=-1;selected('left',false);selected('right',true);draw();};\\ndocument.getElementById('top').onclick=()=>{stage.classList.add('plan-mode');selected('top',true);selected('perspective',false);drawPlan();};document.getElementById('perspective').onclick=()=>{stage.classList.remove('plan-mode');selected('top',false);selected('perspective',true);draw();};document.getElementById('home').onclick=()=>{yaw=-.63;pitch=.35;zoom=1;draw();};document.getElementById('risers').onchange=e=>{closed=e.target.checked;draw();};document.getElementById('rail').onchange=e=>{rails=e.target.checked;draw();};\\nsvg.addEventListener('pointerdown',e=>{drag=[e.clientX,e.clientY,yaw,pitch];svg.setPointerCapture(e.pointerId);});svg.addEventListener('pointermove',e=>{if(!drag)return;yaw=drag[2]+(e.clientX-drag[0])*.009;pitch=Math.max(-.2,Math.min(1.5,drag[3]+(e.clientY-drag[1])*.006));draw();});svg.addEventListener('pointerup',()=>drag=null);svg.addEventListener('pointercancel',()=>drag=null);svg.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.6,Math.min(1.8,zoom*Math.exp(-e.deltaY*.001)));draw();},{passive:false});new ResizeObserver(draw).observe(svg);draw();\\n})();\\n<\\\/script><\/body><\/html>\\n\",\"s\":\"<!doctype html>\\n<html lang=\\\"tr\\\"><head><meta charset=\\\"utf-8\\\"><meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1\\\"><title>Esen Trappen \u2014 S model 3D<\/title>\\n<\/head><body>\\n<header><strong>ESEN TRAPPEN<\/strong><span>S model \u00b7 two opposite winder turns \u00b7 3D preview<\/span><\/header>\\n<main><div class=\\\"toolbar\\\"><button id=\\\"left\\\" aria-pressed=\\\"true\\\">Left \u2192 right<\/button><button id=\\\"right\\\" aria-pressed=\\\"false\\\">Right \u2192 left<\/button><button id=\\\"perspective\\\" aria-pressed=\\\"true\\\">3D<\/button><button id=\\\"top\\\" aria-pressed=\\\"false\\\">Top view<\/button><label><input id=\\\"risers\\\" type=\\\"checkbox\\\" checked>Closed risers<\/label><label><input id=\\\"rail\\\" type=\\\"checkbox\\\">Balustrade<\/label><button id=\\\"home\\\">Reset view<\/button><\/div>\\n<div class=\\\"stage\\\" id=\\\"stage\\\"><svg id=\\\"view\\\" role=\\\"img\\\" aria-label=\\\"Z\u0131t y\u00f6nde iki 90 derece d\u00f6n\u00fc\u015f\u00fc olan 16 basamakl\u0131 merdiven; s\u00fcr\u00fckleyerek d\u00f6nd\u00fcr\u00fcn.\\\"><\/svg><svg id=\\\"plan\\\" role=\\\"img\\\" aria-label=\\\"Numaral\u0131 merdiven \u00fcstten plan\u0131\\\"><\/svg><div class=\\\"bottom\\\"><span id=\\\"status\\\" aria-live=\\\"polite\\\">Left \u2192 right \u00b7 S model<\/span><span class=\\\"muted\\\">Drag to rotate \u00b7 Scroll to zoom<\/span><\/div><\/div>\\n<p class=\\\"note muted\\\">3D example with winder steps. Your final design and measurements are checked before production.<\/p><\/main>\\n<script>\\n(()=>{'use strict';\\nconst ns='http:\/\/www.w3.org\/2000\/svg',svg=document.getElementById('view'),plan=document.getElementById('plan'),stage=document.getElementById('stage');\\nconst point=p=>p;\\nconst o=[[900,0],[900,-230],[900,-460],[900,-690],[900,-920],\\n [900,-1439.615],[519.615,-1820],[0,-1820],[-230,-1820],[-460,-1820],[-690,-1820],\\n [-690,-1820],[-690,-1820],[-690,-1820],[-690,-2050],[-690,-2280],[-690,-2510]];\\nconst inn=[[0,0],[0,-230],[0,-460],[0,-690],[0,-920],\\n [0,-920],[0,-920],[0,-920],[-230,-920],[-460,-920],[-690,-920],\\n [-1209.615,-920],[-1590,-1300.385],[-1590,-1820],[-1590,-2050],[-1590,-2280],[-1590,-2510]];\\nconst polygons=o.slice(0,-1).map((p,i)=>[p,o[i+1],inn[i+1],inn[i]]);\\nlet direction=1,yaw=-.63,pitch=.35,zoom=1,drag=null,closed=true,rails=false;\\nconst rise=2800\/16,wood=[201,164,115],sideWood=[173,133,84];\\nfunction node(tag,attr={}){const e=document.createElementNS(ns,tag);Object.entries(attr).forEach(([k,v])=>e.setAttribute(k,v));return e;}\\nfunction prism(poly,y,h,c,faces){const b=poly.map(p=>[p[0],y,p[1]]),t=poly.map(p=>[p[0],y+h,p[1]]);faces.push({p:t,c,shade:1});faces.push({p:b,c,shade:.62});for(let i=0;i<poly.length;i++)faces.push({p:[b[i],b[(i+1)%poly.length],t[(i+1)%poly.length],t[i]],c,shade:i%2?.79:.86});}\\nfunction beam(a,b,width,height,c,faces){const dx=b[0]-a[0],dz=b[2]-a[2],len=Math.hypot(dx,dz)||1,n=[-dz\/len*width\/2,dx\/len*width\/2];const base=[[a[0]+n[0],a[1],a[2]+n[1]],[a[0]-n[0],a[1],a[2]-n[1]],[b[0]-n[0],b[1],b[2]-n[1]],[b[0]+n[0],b[1],b[2]+n[1]]],top=base.map(p=>[p[0],p[1]+height,p[2]]);faces.push({p:top,c,shade:.93});for(let i=0;i<4;i++)faces.push({p:[base[i],base[(i+1)%4],top[(i+1)%4],top[i]],c,shade:i%2?.74:.85});}\\nfunction geometry(){const f=[];polygons.forEach((p,i)=>{const y=(i+1)*rise;prism(p,y-40,40,wood,f);if(closed){const a=o[i],b=inn[i];beam([a[0],i*rise,a[1]],[b[0],i*rise,b[1]],18,rise-40,sideWood,f);}const a=o[i],b=o[i+1];beam([a[0],Math.max(0,i*rise-220),a[1]],[b[0],Math.max(0,(i+1)*rise-220),b[1]],40,270,sideWood,f);\\n const ia=inn[i],ib=inn[i+1];beam([ia[0],Math.max(0,i*rise-220),ia[1]],[ib[0],Math.max(0,(i+1)*rise-220),ib[1]],40,270,sideWood,f);\\n if(rails){beam([a[0],y+830,a[1]],[b[0],y+rise+830,b[1]],45,55,wood,f);if(i%3===0||i===15){prism([[a[0]-22,a[1]-22],[a[0]+22,a[1]-22],[a[0]+22,a[1]+22],[a[0]-22,a[1]+22]],y,900,wood,f);}}\\n });\\n \/\/ Turning posts for the two opposite turns.\\n [[0,-920,600,1700],[-690,-1820,1750,2700]].forEach(p=>{const q=point(p);prism([[q[0]-36,q[1]-60],[q[0]+36,q[1]-60],[q[0]+36,q[1]+60],[q[0]-36,q[1]+60]],p[2],p[3]-p[2],wood,f);});\\n return f;\\n}\\nfunction draw(){const w=svg.clientWidth||900,h=svg.clientHeight||570;svg.setAttribute('viewBox',`0 0 ${w} ${h}`);svg.replaceChildren();const f=geometry();\\nconst transform=p=>{const x=(p[0]+345)*-direction,y=p[1]-1400,z=p[2]+1255;const xx=x*Math.cos(yaw)+z*Math.sin(yaw),zz=-x*Math.sin(yaw)+z*Math.cos(yaw);return[xx,-y*Math.cos(pitch)+zz*Math.sin(pitch),y*Math.sin(pitch)+zz*Math.cos(pitch)];};\\nconst all=f.flatMap(q=>q.p.map(transform)),xs=all.map(p=>p[0]),ys=all.map(p=>p[1]);const lx=Math.min(...xs),hx=Math.max(...xs),ly=Math.min(...ys),hy=Math.max(...ys),s=Math.min((w-70)\/(hx-lx),(h-50)\/(hy-ly))*zoom;const project=p=>[(p[0]-(lx+hx)\/2)*s+w\/2,(p[1]-(ly+hy)\/2)*s+h\/2];\\nconst ground=node('ellipse',{cx:w\/2,cy:h-25,rx:Math.min(w*.28,180),ry:14,fill:'#dce4e3',opacity:.55});svg.append(ground);\\nf.map(q=>({...q,p:q.p.map(transform)})).sort((a,b)=>b.p.reduce((s,p)=>s+p[2],0)\/b.p.length-a.p.reduce((s,p)=>s+p[2],0)\/a.p.length).forEach(q=>{const c=q.c.map(v=>Math.round(v*q.shade));svg.append(node('polygon',{points:q.p.map(project).map(p=>p.join(',')).join(' '),fill:`rgb(${c})`,stroke:`rgb(${c.map(v=>Math.round(v*.8))})`,'stroke-width':.55,'stroke-linejoin':'round'}));});\\ndrawPlan();document.getElementById('status').textContent=(direction===1?'Left then right':'Right then left')+' \u00b7 S model \u00b7 2800 mm';svg.setAttribute('aria-label','Z\u0131t y\u00f6nde iki basamakl\u0131 d\u00f6n\u00fc\u015f\u00fc olan S merdiven, 16 basamak.');\\n}\\nfunction drawPlan(){plan.setAttribute('viewBox',svg.getAttribute('viewBox'));plan.replaceChildren();}\\nfunction selected(id,value){document.getElementById(id).setAttribute('aria-pressed',String(value));}\\ndocument.getElementById('left').onclick=()=>{direction=1;selected('left',true);selected('right',false);draw();};document.getElementById('right').onclick=()=>{direction=-1;selected('left',false);selected('right',true);draw();};\\ndocument.getElementById('top').onclick=()=>{stage.classList.add('plan-mode');selected('top',true);selected('perspective',false);drawPlan();};document.getElementById('perspective').onclick=()=>{stage.classList.remove('plan-mode');selected('top',false);selected('perspective',true);draw();};document.getElementById('home').onclick=()=>{yaw=-.63;pitch=.35;zoom=1;draw();};document.getElementById('risers').onchange=e=>{closed=e.target.checked;draw();};document.getElementById('rail').onchange=e=>{rails=e.target.checked;draw();};\\nsvg.addEventListener('pointerdown',e=>{drag=[e.clientX,e.clientY,yaw,pitch];svg.setPointerCapture(e.pointerId);});svg.addEventListener('pointermove',e=>{if(!drag)return;yaw=drag[2]+(e.clientX-drag[0])*.009;pitch=Math.max(-.2,Math.min(1.5,drag[3]+(e.clientY-drag[1])*.006));draw();});svg.addEventListener('pointerup',()=>drag=null);svg.addEventListener('pointercancel',()=>drag=null);svg.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.6,Math.min(1.8,zoom*Math.exp(-e.deltaY*.001)));draw();},{passive:false});new ResizeObserver(draw).observe(svg);draw();\\n})();\\n<\\\/script><\/body><\/html>\\n\",\"straight\":\"<!doctype html>\\n<html lang=\\\"tr\\\"><head><meta charset=\\\"utf-8\\\"><meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1\\\"><title>Esen Trappen \u2014 Straight staircase 3D<\/title>\\n<\/head><body>\\n<header><strong>ESEN TRAPPEN<\/strong><span>Straight staircase \u00b7 3D preview<\/span><\/header>\\n<main><div class=\\\"toolbar\\\"><button id=\\\"left\\\" aria-pressed=\\\"true\\\">Left turn<\/button><button id=\\\"right\\\" aria-pressed=\\\"false\\\">Right turn<\/button><button id=\\\"perspective\\\" aria-pressed=\\\"true\\\">3D<\/button><button id=\\\"top\\\" aria-pressed=\\\"false\\\">Top view<\/button><label><input id=\\\"risers\\\" type=\\\"checkbox\\\" checked>Closed risers<\/label><label><input id=\\\"rail\\\" type=\\\"checkbox\\\">Balustrade<\/label><button id=\\\"home\\\">Reset view<\/button><\/div>\\n<div class=\\\"stage\\\" id=\\\"stage\\\"><svg id=\\\"view\\\" role=\\\"img\\\" aria-label=\\\"Z\u0131t y\u00f6nde iki 90 derece d\u00f6n\u00fc\u015f\u00fc olan 16 basamakl\u0131 merdiven; s\u00fcr\u00fckleyerek d\u00f6nd\u00fcr\u00fcn.\\\"><\/svg><svg id=\\\"plan\\\" role=\\\"img\\\" aria-label=\\\"Numaral\u0131 merdiven \u00fcstten plan\u0131\\\"><\/svg><div class=\\\"bottom\\\"><span id=\\\"status\\\" aria-live=\\\"polite\\\">Left turn \u00b7 Straight staircase<\/span><span class=\\\"muted\\\">Drag to rotate \u00b7 Scroll to zoom<\/span><\/div><\/div>\\n<p class=\\\"note muted\\\">3D example with winder steps. Your final design and measurements are checked before production.<\/p><\/main>\\n<script>\\n(()=>{'use strict';\\nconst ns='http:\/\/www.w3.org\/2000\/svg',svg=document.getElementById('view'),plan=document.getElementById('plan'),stage=document.getElementById('stage');\\nconst point=p=>p;\\nconst o=[[900.0, 0.0], [900.0, -230.0], [900.0, -460.0], [900.0, -690.0], [900.0, -920.0], [900.0, -1150.0], [900.0, -1380.0], [900.0, -1610.0], [900.0, -1840.0], [900.0, -2070.0], [900.0, -2300.0], [900.0, -2530.0], [900.0, -2760.0], [900.0, -2990.0], [900.0, -3220.0], [900.0, -3450.0], [900.0, -3680.0]],inn=[[0.0, 0.0], [0.0, -230.0], [0.0, -460.0], [0.0, -690.0], [0.0, -920.0], [0.0, -1150.0], [0.0, -1380.0], [0.0, -1610.0], [0.0, -1840.0], [0.0, -2070.0], [0.0, -2300.0], [0.0, -2530.0], [0.0, -2760.0], [0.0, -2990.0], [0.0, -3220.0], [0.0, -3450.0], [0.0, -3680.0]];\\nconst polygons=o.slice(0,-1).map((p,i)=>[p,o[i+1],inn[i+1],inn[i]]);\\nlet direction=1,yaw=-.63,pitch=.35,zoom=1,drag=null,closed=true,rails=false;\\nconst rise=2800\/16,wood=[201,164,115],sideWood=[173,133,84];\\nfunction node(tag,attr={}){const e=document.createElementNS(ns,tag);Object.entries(attr).forEach(([k,v])=>e.setAttribute(k,v));return e;}\\nfunction prism(poly,y,h,c,faces){const b=poly.map(p=>[p[0],y,p[1]]),t=poly.map(p=>[p[0],y+h,p[1]]);faces.push({p:t,c,shade:1});faces.push({p:b,c,shade:.62});for(let i=0;i<poly.length;i++)faces.push({p:[b[i],b[(i+1)%poly.length],t[(i+1)%poly.length],t[i]],c,shade:i%2?.79:.86});}\\nfunction beam(a,b,width,height,c,faces){const dx=b[0]-a[0],dz=b[2]-a[2],len=Math.hypot(dx,dz)||1,n=[-dz\/len*width\/2,dx\/len*width\/2];const base=[[a[0]+n[0],a[1],a[2]+n[1]],[a[0]-n[0],a[1],a[2]-n[1]],[b[0]-n[0],b[1],b[2]-n[1]],[b[0]+n[0],b[1],b[2]+n[1]]],top=base.map(p=>[p[0],p[1]+height,p[2]]);faces.push({p:top,c,shade:.93});for(let i=0;i<4;i++)faces.push({p:[base[i],base[(i+1)%4],top[(i+1)%4],top[i]],c,shade:i%2?.74:.85});}\\nfunction geometry(){const f=[];polygons.forEach((p,i)=>{const y=(i+1)*rise;prism(p,y-40,40,wood,f);if(closed){const a=o[i],b=inn[i];beam([a[0],i*rise,a[1]],[b[0],i*rise,b[1]],18,rise-40,sideWood,f);}const a=o[i],b=o[i+1];beam([a[0],Math.max(0,i*rise-220),a[1]],[b[0],Math.max(0,(i+1)*rise-220),b[1]],40,270,sideWood,f);\\n const ia=inn[i],ib=inn[i+1];beam([ia[0],Math.max(0,i*rise-220),ia[1]],[ib[0],Math.max(0,(i+1)*rise-220),ib[1]],40,270,sideWood,f);\\n if(rails){beam([a[0],y+830,a[1]],[b[0],y+rise+830,b[1]],45,55,wood,f);if(i%3===0||i===15){prism([[a[0]-22,a[1]-22],[a[0]+22,a[1]-22],[a[0]+22,a[1]+22],[a[0]-22,a[1]+22]],y,900,wood,f);}}\\n });\\n return f;\\n}\\nfunction draw(){const w=svg.clientWidth||900,h=svg.clientHeight||570;svg.setAttribute('viewBox',`0 0 ${w} ${h}`);svg.replaceChildren();const f=geometry();\\nconst transform=p=>{const x=(p[0]+345)*-direction,y=p[1]-1400,z=p[2]+1255;const xx=x*Math.cos(yaw)+z*Math.sin(yaw),zz=-x*Math.sin(yaw)+z*Math.cos(yaw);return[xx,-y*Math.cos(pitch)+zz*Math.sin(pitch),y*Math.sin(pitch)+zz*Math.cos(pitch)];};\\nconst all=f.flatMap(q=>q.p.map(transform)),xs=all.map(p=>p[0]),ys=all.map(p=>p[1]);const lx=Math.min(...xs),hx=Math.max(...xs),ly=Math.min(...ys),hy=Math.max(...ys),s=Math.min((w-70)\/(hx-lx),(h-50)\/(hy-ly))*zoom;const project=p=>[(p[0]-(lx+hx)\/2)*s+w\/2,(p[1]-(ly+hy)\/2)*s+h\/2];\\nconst ground=node('ellipse',{cx:w\/2,cy:h-25,rx:Math.min(w*.28,180),ry:14,fill:'#dce4e3',opacity:.55});svg.append(ground);\\nf.map(q=>({...q,p:q.p.map(transform)})).sort((a,b)=>b.p.reduce((s,p)=>s+p[2],0)\/b.p.length-a.p.reduce((s,p)=>s+p[2],0)\/a.p.length).forEach(q=>{const c=q.c.map(v=>Math.round(v*q.shade));svg.append(node('polygon',{points:q.p.map(project).map(p=>p.join(',')).join(' '),fill:`rgb(${c})`,stroke:`rgb(${c.map(v=>Math.round(v*.8))})`,'stroke-width':.55,'stroke-linejoin':'round'}));});\\ndrawPlan();document.getElementById('status').textContent=(direction===1?'Left turn':'Right turn')+' \u00b7 Straight staircase \u00b7 2800 mm';svg.setAttribute('aria-label','Z\u0131t y\u00f6nde iki basamakl\u0131 d\u00f6n\u00fc\u015f\u00fc olan S merdiven, 16 basamak.');\\n}\\nfunction drawPlan(){plan.setAttribute('viewBox',svg.getAttribute('viewBox'));plan.replaceChildren();}\\nfunction selected(id,value){document.getElementById(id).setAttribute('aria-pressed',String(value));}\\ndocument.getElementById('left').onclick=()=>{direction=1;selected('left',true);selected('right',false);draw();};document.getElementById('right').onclick=()=>{direction=-1;selected('left',false);selected('right',true);draw();};\\ndocument.getElementById('top').onclick=()=>{stage.classList.add('plan-mode');selected('top',true);selected('perspective',false);drawPlan();};document.getElementById('perspective').onclick=()=>{stage.classList.remove('plan-mode');selected('top',false);selected('perspective',true);draw();};document.getElementById('home').onclick=()=>{yaw=-.63;pitch=.35;zoom=1;draw();};document.getElementById('risers').onchange=e=>{closed=e.target.checked;draw();};document.getElementById('rail').onchange=e=>{rails=e.target.checked;draw();};\\nsvg.addEventListener('pointerdown',e=>{drag=[e.clientX,e.clientY,yaw,pitch];svg.setPointerCapture(e.pointerId);});svg.addEventListener('pointermove',e=>{if(!drag)return;yaw=drag[2]+(e.clientX-drag[0])*.009;pitch=Math.max(-.2,Math.min(1.5,drag[3]+(e.clientY-drag[1])*.006));draw();});svg.addEventListener('pointerup',()=>drag=null);svg.addEventListener('pointercancel',()=>drag=null);svg.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.6,Math.min(1.8,zoom*Math.exp(-e.deltaY*.001)));draw();},{passive:false});new ResizeObserver(draw).observe(svg);draw();\\n})();\\n<\\\/script><\/body><\/html>\\n\",\"quarter\":\"<!doctype html>\\n<html lang=\\\"tr\\\"><head><meta charset=\\\"utf-8\\\"><meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1\\\"><title>Esen Trappen \u2014 Quarter-turn staircase 3D<\/title>\\n<\/head><body>\\n<header><strong>ESEN TRAPPEN<\/strong><span>Quarter-turn staircase \u00b7 3D preview<\/span><\/header>\\n<main><div class=\\\"toolbar\\\"><button id=\\\"left\\\" aria-pressed=\\\"true\\\">Left turn<\/button><button id=\\\"right\\\" aria-pressed=\\\"false\\\">Right turn<\/button><button id=\\\"perspective\\\" aria-pressed=\\\"true\\\">3D<\/button><button id=\\\"top\\\" aria-pressed=\\\"false\\\">Top view<\/button><label><input id=\\\"risers\\\" type=\\\"checkbox\\\" checked>Closed risers<\/label><label><input id=\\\"rail\\\" type=\\\"checkbox\\\">Balustrade<\/label><button id=\\\"home\\\">Reset view<\/button><\/div>\\n<div class=\\\"stage\\\" id=\\\"stage\\\"><svg id=\\\"view\\\" role=\\\"img\\\" aria-label=\\\"Z\u0131t y\u00f6nde iki 90 derece d\u00f6n\u00fc\u015f\u00fc olan 16 basamakl\u0131 merdiven; s\u00fcr\u00fckleyerek d\u00f6nd\u00fcr\u00fcn.\\\"><\/svg><svg id=\\\"plan\\\" role=\\\"img\\\" aria-label=\\\"Numaral\u0131 merdiven \u00fcstten plan\u0131\\\"><\/svg><div class=\\\"bottom\\\"><span id=\\\"status\\\" aria-live=\\\"polite\\\">Left turn \u00b7 Quarter-turn staircase<\/span><span class=\\\"muted\\\">Drag to rotate \u00b7 Scroll to zoom<\/span><\/div><\/div>\\n<p class=\\\"note muted\\\">3D example with winder steps. Your final design and measurements are checked before production.<\/p><\/main>\\n<script>\\n(()=>{'use strict';\\nconst ns='http:\/\/www.w3.org\/2000\/svg',svg=document.getElementById('view'),plan=document.getElementById('plan'),stage=document.getElementById('stage');\\nconst point=p=>p;\\nconst o=[[900.0, 0.0], [900.0, -230.0], [900.0, -460.0], [900.0, -690.0], [900.0, -920.0], [900.0000000000001, -1439.6152422706632], [519.6152422706633, -1820.0], [5.510910596163089e-14, -1820.0], [-229.99999999999994, -1820.0], [-459.99999999999994, -1820.0], [-690.0, -1820.0], [-920.0, -1820.0], [-1150.0, -1820.0], [-1380.0, -1820.0], [-1610.0, -1820.0], [-1840.0, -1820.0], [-2070.0, -1820.0]],inn=[[0.0, 0.0], [0.0, -230.0], [0.0, -460.0], [0.0, -690.0], [0.0, -920.0], [0.0, -920.0], [0.0, -920.0], [0.0, -920.0], [-230.0, -920.0], [-460.0, -920.0], [-690.0, -920.0], [-920.0, -920.0], [-1150.0, -920.0], [-1380.0, -920.0], [-1610.0, -920.0], [-1840.0, -920.0], [-2070.0, -920.0]];\\nconst polygons=o.slice(0,-1).map((p,i)=>[p,o[i+1],inn[i+1],inn[i]]);\\nlet direction=1,yaw=-.63,pitch=.35,zoom=1,drag=null,closed=true,rails=false;\\nconst rise=2800\/16,wood=[201,164,115],sideWood=[173,133,84];\\nfunction node(tag,attr={}){const e=document.createElementNS(ns,tag);Object.entries(attr).forEach(([k,v])=>e.setAttribute(k,v));return e;}\\nfunction prism(poly,y,h,c,faces){const b=poly.map(p=>[p[0],y,p[1]]),t=poly.map(p=>[p[0],y+h,p[1]]);faces.push({p:t,c,shade:1});faces.push({p:b,c,shade:.62});for(let i=0;i<poly.length;i++)faces.push({p:[b[i],b[(i+1)%poly.length],t[(i+1)%poly.length],t[i]],c,shade:i%2?.79:.86});}\\nfunction beam(a,b,width,height,c,faces){const dx=b[0]-a[0],dz=b[2]-a[2],len=Math.hypot(dx,dz)||1,n=[-dz\/len*width\/2,dx\/len*width\/2];const base=[[a[0]+n[0],a[1],a[2]+n[1]],[a[0]-n[0],a[1],a[2]-n[1]],[b[0]-n[0],b[1],b[2]-n[1]],[b[0]+n[0],b[1],b[2]+n[1]]],top=base.map(p=>[p[0],p[1]+height,p[2]]);faces.push({p:top,c,shade:.93});for(let i=0;i<4;i++)faces.push({p:[base[i],base[(i+1)%4],top[(i+1)%4],top[i]],c,shade:i%2?.74:.85});}\\nfunction geometry(){const f=[];polygons.forEach((p,i)=>{const y=(i+1)*rise;prism(p,y-40,40,wood,f);if(closed){const a=o[i],b=inn[i];beam([a[0],i*rise,a[1]],[b[0],i*rise,b[1]],18,rise-40,sideWood,f);}const a=o[i],b=o[i+1];beam([a[0],Math.max(0,i*rise-220),a[1]],[b[0],Math.max(0,(i+1)*rise-220),b[1]],40,270,sideWood,f);\\n const ia=inn[i],ib=inn[i+1];beam([ia[0],Math.max(0,i*rise-220),ia[1]],[ib[0],Math.max(0,(i+1)*rise-220),ib[1]],40,270,sideWood,f);\\n if(rails){beam([a[0],y+830,a[1]],[b[0],y+rise+830,b[1]],45,55,wood,f);if(i%3===0||i===15){prism([[a[0]-22,a[1]-22],[a[0]+22,a[1]-22],[a[0]+22,a[1]+22],[a[0]-22,a[1]+22]],y,900,wood,f);}}\\n });\\n return f;\\n}\\nfunction draw(){const w=svg.clientWidth||900,h=svg.clientHeight||570;svg.setAttribute('viewBox',`0 0 ${w} ${h}`);svg.replaceChildren();const f=geometry();\\nconst transform=p=>{const x=(p[0]+345)*-direction,y=p[1]-1400,z=p[2]+1255;const xx=x*Math.cos(yaw)+z*Math.sin(yaw),zz=-x*Math.sin(yaw)+z*Math.cos(yaw);return[xx,-y*Math.cos(pitch)+zz*Math.sin(pitch),y*Math.sin(pitch)+zz*Math.cos(pitch)];};\\nconst all=f.flatMap(q=>q.p.map(transform)),xs=all.map(p=>p[0]),ys=all.map(p=>p[1]);const lx=Math.min(...xs),hx=Math.max(...xs),ly=Math.min(...ys),hy=Math.max(...ys),s=Math.min((w-70)\/(hx-lx),(h-50)\/(hy-ly))*zoom;const project=p=>[(p[0]-(lx+hx)\/2)*s+w\/2,(p[1]-(ly+hy)\/2)*s+h\/2];\\nconst ground=node('ellipse',{cx:w\/2,cy:h-25,rx:Math.min(w*.28,180),ry:14,fill:'#dce4e3',opacity:.55});svg.append(ground);\\nf.map(q=>({...q,p:q.p.map(transform)})).sort((a,b)=>b.p.reduce((s,p)=>s+p[2],0)\/b.p.length-a.p.reduce((s,p)=>s+p[2],0)\/a.p.length).forEach(q=>{const c=q.c.map(v=>Math.round(v*q.shade));svg.append(node('polygon',{points:q.p.map(project).map(p=>p.join(',')).join(' '),fill:`rgb(${c})`,stroke:`rgb(${c.map(v=>Math.round(v*.8))})`,'stroke-width':.55,'stroke-linejoin':'round'}));});\\ndrawPlan();document.getElementById('status').textContent=(direction===1?'Left turn':'Right turn')+' \u00b7 Quarter-turn staircase \u00b7 2800 mm';svg.setAttribute('aria-label','Z\u0131t y\u00f6nde iki basamakl\u0131 d\u00f6n\u00fc\u015f\u00fc olan S merdiven, 16 basamak.');\\n}\\nfunction drawPlan(){plan.setAttribute('viewBox',svg.getAttribute('viewBox'));plan.replaceChildren();}\\nfunction selected(id,value){document.getElementById(id).setAttribute('aria-pressed',String(value));}\\ndocument.getElementById('left').onclick=()=>{direction=1;selected('left',true);selected('right',false);draw();};document.getElementById('right').onclick=()=>{direction=-1;selected('left',false);selected('right',true);draw();};\\ndocument.getElementById('top').onclick=()=>{stage.classList.add('plan-mode');selected('top',true);selected('perspective',false);drawPlan();};document.getElementById('perspective').onclick=()=>{stage.classList.remove('plan-mode');selected('top',false);selected('perspective',true);draw();};document.getElementById('home').onclick=()=>{yaw=-.63;pitch=.35;zoom=1;draw();};document.getElementById('risers').onchange=e=>{closed=e.target.checked;draw();};document.getElementById('rail').onchange=e=>{rails=e.target.checked;draw();};\\nsvg.addEventListener('pointerdown',e=>{drag=[e.clientX,e.clientY,yaw,pitch];svg.setPointerCapture(e.pointerId);});svg.addEventListener('pointermove',e=>{if(!drag)return;yaw=drag[2]+(e.clientX-drag[0])*.009;pitch=Math.max(-.2,Math.min(1.5,drag[3]+(e.clientY-drag[1])*.006));draw();});svg.addEventListener('pointerup',()=>drag=null);svg.addEventListener('pointercancel',()=>drag=null);svg.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.6,Math.min(1.8,zoom*Math.exp(-e.deltaY*.001)));draw();},{passive:false});new ResizeObserver(draw).observe(svg);draw();\\n})();\\n<\\\/script><\/body><\/html>\\n\",\"half\":\"<!doctype html>\\n<html lang=\\\"tr\\\"><head><meta charset=\\\"utf-8\\\"><meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1\\\"><title>Esen Trappen \u2014 Half-turn staircase 3D<\/title>\\n<\/head><body>\\n<header><strong>ESEN TRAPPEN<\/strong><span>Half-turn staircase \u00b7 3D preview<\/span><\/header>\\n<main><div class=\\\"toolbar\\\"><button id=\\\"left\\\" aria-pressed=\\\"true\\\">Left turn<\/button><button id=\\\"right\\\" aria-pressed=\\\"false\\\">Right turn<\/button><button id=\\\"perspective\\\" aria-pressed=\\\"true\\\">3D<\/button><button id=\\\"top\\\" aria-pressed=\\\"false\\\">Top view<\/button><label><input id=\\\"risers\\\" type=\\\"checkbox\\\" checked>Closed risers<\/label><label><input id=\\\"rail\\\" type=\\\"checkbox\\\">Balustrade<\/label><button id=\\\"home\\\">Reset view<\/button><\/div>\\n<div class=\\\"stage\\\" id=\\\"stage\\\"><svg id=\\\"view\\\" role=\\\"img\\\" aria-label=\\\"Z\u0131t y\u00f6nde iki 90 derece d\u00f6n\u00fc\u015f\u00fc olan 16 basamakl\u0131 merdiven; s\u00fcr\u00fckleyerek d\u00f6nd\u00fcr\u00fcn.\\\"><\/svg><svg id=\\\"plan\\\" role=\\\"img\\\" aria-label=\\\"Numaral\u0131 merdiven \u00fcstten plan\u0131\\\"><\/svg><div class=\\\"bottom\\\"><span id=\\\"status\\\" aria-live=\\\"polite\\\">Left turn \u00b7 Half-turn staircase<\/span><span class=\\\"muted\\\">Drag to rotate \u00b7 Scroll to zoom<\/span><\/div><\/div>\\n<p class=\\\"note muted\\\">3D example with winder steps. Your final design and measurements are checked before production.<\/p><\/main>\\n<script>\\n(()=>{'use strict';\\nconst ns='http:\/\/www.w3.org\/2000\/svg',svg=document.getElementById('view'),plan=document.getElementById('plan'),stage=document.getElementById('stage');\\nconst point=p=>p;\\nconst o=[[900.0, 0.0], [900.0, -230.0], [900.0, -460.0], [900.0, -690.0], [900.0, -920.0], [900.0000000000001, -1439.6152422706632], [519.6152422706633, -1820.0], [5.510910596163089e-14, -1820.0], [-229.99999999999994, -1820.0], [-459.99999999999994, -1820.0], [-690.0, -1820.0], [-1209.615242270663, -1820.0], [-1590.0, -1439.6152422706637], [-1590.0, -920.0000000000005], [-1590.0, -690.0000000000005], [-1590.0000000000002, -460.0000000000005], [-1590.0000000000005, -230.0000000000005]],inn=[[0.0, 0.0], [0.0, -230.0], [0.0, -460.0], [0.0, -690.0], [0.0, -920.0], [0.0, -920.0], [0.0, -920.0], [0.0, -920.0], [-230.0, -920.0], [-460.0, -920.0], [-690.0, -920.0], [-690.0, -920.0], [-690.0, -920.0], [-690.0, -920.0], [-690.0000000000001, -690.0], [-690.0000000000002, -460.0], [-690.0000000000003, -230.0]];\\nconst polygons=o.slice(0,-1).map((p,i)=>[p,o[i+1],inn[i+1],inn[i]]);\\nlet direction=1,yaw=-.63,pitch=.35,zoom=1,drag=null,closed=true,rails=false;\\nconst rise=2800\/16,wood=[201,164,115],sideWood=[173,133,84];\\nfunction node(tag,attr={}){const e=document.createElementNS(ns,tag);Object.entries(attr).forEach(([k,v])=>e.setAttribute(k,v));return e;}\\nfunction prism(poly,y,h,c,faces){const b=poly.map(p=>[p[0],y,p[1]]),t=poly.map(p=>[p[0],y+h,p[1]]);faces.push({p:t,c,shade:1});faces.push({p:b,c,shade:.62});for(let i=0;i<poly.length;i++)faces.push({p:[b[i],b[(i+1)%poly.length],t[(i+1)%poly.length],t[i]],c,shade:i%2?.79:.86});}\\nfunction beam(a,b,width,height,c,faces){const dx=b[0]-a[0],dz=b[2]-a[2],len=Math.hypot(dx,dz)||1,n=[-dz\/len*width\/2,dx\/len*width\/2];const base=[[a[0]+n[0],a[1],a[2]+n[1]],[a[0]-n[0],a[1],a[2]-n[1]],[b[0]-n[0],b[1],b[2]-n[1]],[b[0]+n[0],b[1],b[2]+n[1]]],top=base.map(p=>[p[0],p[1]+height,p[2]]);faces.push({p:top,c,shade:.93});for(let i=0;i<4;i++)faces.push({p:[base[i],base[(i+1)%4],top[(i+1)%4],top[i]],c,shade:i%2?.74:.85});}\\nfunction geometry(){const f=[];polygons.forEach((p,i)=>{const y=(i+1)*rise;prism(p,y-40,40,wood,f);if(closed){const a=o[i],b=inn[i];beam([a[0],i*rise,a[1]],[b[0],i*rise,b[1]],18,rise-40,sideWood,f);}const a=o[i],b=o[i+1];beam([a[0],Math.max(0,i*rise-220),a[1]],[b[0],Math.max(0,(i+1)*rise-220),b[1]],40,270,sideWood,f);\\n const ia=inn[i],ib=inn[i+1];beam([ia[0],Math.max(0,i*rise-220),ia[1]],[ib[0],Math.max(0,(i+1)*rise-220),ib[1]],40,270,sideWood,f);\\n if(rails){beam([a[0],y+830,a[1]],[b[0],y+rise+830,b[1]],45,55,wood,f);if(i%3===0||i===15){prism([[a[0]-22,a[1]-22],[a[0]+22,a[1]-22],[a[0]+22,a[1]+22],[a[0]-22,a[1]+22]],y,900,wood,f);}}\\n });\\n return f;\\n}\\nfunction draw(){const w=svg.clientWidth||900,h=svg.clientHeight||570;svg.setAttribute('viewBox',`0 0 ${w} ${h}`);svg.replaceChildren();const f=geometry();\\nconst transform=p=>{const x=(p[0]+345)*-direction,y=p[1]-1400,z=p[2]+1255;const xx=x*Math.cos(yaw)+z*Math.sin(yaw),zz=-x*Math.sin(yaw)+z*Math.cos(yaw);return[xx,-y*Math.cos(pitch)+zz*Math.sin(pitch),y*Math.sin(pitch)+zz*Math.cos(pitch)];};\\nconst all=f.flatMap(q=>q.p.map(transform)),xs=all.map(p=>p[0]),ys=all.map(p=>p[1]);const lx=Math.min(...xs),hx=Math.max(...xs),ly=Math.min(...ys),hy=Math.max(...ys),s=Math.min((w-70)\/(hx-lx),(h-50)\/(hy-ly))*zoom;const project=p=>[(p[0]-(lx+hx)\/2)*s+w\/2,(p[1]-(ly+hy)\/2)*s+h\/2];\\nconst ground=node('ellipse',{cx:w\/2,cy:h-25,rx:Math.min(w*.28,180),ry:14,fill:'#dce4e3',opacity:.55});svg.append(ground);\\nf.map(q=>({...q,p:q.p.map(transform)})).sort((a,b)=>b.p.reduce((s,p)=>s+p[2],0)\/b.p.length-a.p.reduce((s,p)=>s+p[2],0)\/a.p.length).forEach(q=>{const c=q.c.map(v=>Math.round(v*q.shade));svg.append(node('polygon',{points:q.p.map(project).map(p=>p.join(',')).join(' '),fill:`rgb(${c})`,stroke:`rgb(${c.map(v=>Math.round(v*.8))})`,'stroke-width':.55,'stroke-linejoin':'round'}));});\\ndrawPlan();document.getElementById('status').textContent=(direction===1?'Left turn':'Right turn')+' \u00b7 Half-turn staircase \u00b7 2800 mm';svg.setAttribute('aria-label','Z\u0131t y\u00f6nde iki basamakl\u0131 d\u00f6n\u00fc\u015f\u00fc olan S merdiven, 16 basamak.');\\n}\\nfunction drawPlan(){plan.setAttribute('viewBox',svg.getAttribute('viewBox'));plan.replaceChildren();}\\nfunction selected(id,value){document.getElementById(id).setAttribute('aria-pressed',String(value));}\\ndocument.getElementById('left').onclick=()=>{direction=1;selected('left',true);selected('right',false);draw();};document.getElementById('right').onclick=()=>{direction=-1;selected('left',false);selected('right',true);draw();};\\ndocument.getElementById('top').onclick=()=>{stage.classList.add('plan-mode');selected('top',true);selected('perspective',false);drawPlan();};document.getElementById('perspective').onclick=()=>{stage.classList.remove('plan-mode');selected('top',false);selected('perspective',true);draw();};document.getElementById('home').onclick=()=>{yaw=-.63;pitch=.35;zoom=1;draw();};document.getElementById('risers').onchange=e=>{closed=e.target.checked;draw();};document.getElementById('rail').onchange=e=>{rails=e.target.checked;draw();};\\nsvg.addEventListener('pointerdown',e=>{drag=[e.clientX,e.clientY,yaw,pitch];svg.setPointerCapture(e.pointerId);});svg.addEventListener('pointermove',e=>{if(!drag)return;yaw=drag[2]+(e.clientX-drag[0])*.009;pitch=Math.max(-.2,Math.min(1.5,drag[3]+(e.clientY-drag[1])*.006));draw();});svg.addEventListener('pointerup',()=>drag=null);svg.addEventListener('pointercancel',()=>drag=null);svg.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.6,Math.min(1.8,zoom*Math.exp(-e.deltaY*.001)));draw();},{passive:false});new ResizeObserver(draw).observe(svg);draw();\\n})();\\n<\\\/script><\/body><\/html>\\n\"};function init(){document.querySelectorAll('.esen-config').forEach(root=>{if(root.dataset.esen3dReady)return;root.dataset.esen3dReady='1';const model=root.querySelector('#esen-choice-0');if(!model)return;const en=location.pathname.startsWith('\/en\/');const dock=document.createElement('div');dock.className='esen-inline-3d';let small=document.createElement('iframe');small.title='Interactive staircase 3D preview';small.setAttribute('sandbox','allow-scripts');const button=document.createElement('button');button.type='button';button.className='esen-model-3d-button';button.textContent=en?'Enlarge 3D \u2197':'3D vergroten \u2197';dock.append(small,button);const dialog=document.createElement('dialog');dialog.className='esen-model-3d-dialog';const close=document.createElement('button');close.type='button';close.className='esen-model-3d-close';close.textContent=en?'Close \u00d7':'Sluiten \u00d7';let frame=document.createElement('iframe');frame.title='Esen Trappen 3D example';frame.setAttribute('sandbox','allow-scripts');dialog.append(close,frame);document.body.append(dialog);close.onclick=()=>dialog.close();dialog.addEventListener('click',e=>{if(e.target===dialog)dialog.close()});function htmlFor(){const key=\/270\/.test(model.value)?'270':\/S-shaped|S-vorm\/i.test(model.value)?'s':\/Half|Halve\/i.test(model.value)?'half':\/Quarter|Kwart\/i.test(model.value)?'quarter':'straight';let html=examples[key];if(key==='straight')html=html.replace('<\/head>','<style>#left,#right{display:none!important}<\/style><\/head>');const turn=root.querySelector('#esen-turn-direction');if(\/right|rechts\/i.test(model.value+' '+(turn?turn.value:''))){html=html.replace('})();','document.getElementById(\"right\").click();})();')}const r=root.querySelector('#esen-choice-2').value,b=root.querySelector('#esen-choice-3').value;html=html.replace('})();','Object.entries('+JSON.stringify({risers:r?!\/Open\/i.test(r):true,rail:\/balustrade\/i.test(b)&&!\/No balustrade\/i.test(b)})+').forEach(([id,v])=>{const e=document.getElementById(id);e.checked=v;e.dispatchEvent(new Event(\"change\"))});})();');if(root.querySelector('#esen-choice-1').value==='Pine'&&\/^Primer\/i.test(root.querySelector('#esen-choice-4').value))html=html.replace('wood=[201,164,115],sideWood=[173,133,84]','wood=[255,255,255],sideWood=[255,255,255]').replaceAll('v*q.shade','255*(.96+.04*q.shade)').replace('<\/head>','<style>.stage{background:#343b40!important}<\/style><\/head>');if(\/^installation-\/.test(root.querySelector('#esen-choice-5').value))html=html.replace('<div class=\"stage\" id=\"stage\">','<div class=\"stage\" id=\"stage\" style=\"position:relative\"><span style=\"position:absolute;right:8px;top:8px;z-index:2;background:#007e86;color:white;padding:6px 9px;border-radius:6px;font:12px system-ui\">\ud83d\udd28\ud83e\ude9b '+(en?'Installation included \u2713':'Montage inbegrepen \u2713')+'<\/span>');if(!en){const words={'Left turn':'Linksom','Left':'Links','Right':'Rechts','Right turn':'Rechtsom','Left \u2192 right':'Links \u2192 rechts','Right \u2192 left':'Rechts \u2192 links','Left then right':'Eerst links, daarna rechts','Right then left':'Eerst rechts, daarna links','Top view':'Bovenaanzicht','Closed risers':'Gesloten stootborden','Balustrade':'Balustrade','Reset view':'Beginweergave','Drag to rotate \u00b7 Scroll to zoom':'Sleep om te draaien \u00b7 Scroll om te zoomen','three winder turns \u00b7 3D preview':'drie draaien met verdreven treden \u00b7 3D voorbeeld','two opposite winder turns \u00b7 3D preview':'twee tegengestelde draaien \u00b7 3D voorbeeld','3D example with winder steps. Your final design and measurements are checked before production.':'3D-voorbeeld met verdreven treden. Het definitieve ontwerp en de maten worden v\u00f3\u00f3r productie gecontroleerd.'};Object.entries(words).forEach(([a,b])=>{html=html.split(a).join(b)})} html=html.replace(\"function drawPlan(){plan.setAttribute('viewBox',svg.getAttribute('viewBox'));plan.replaceChildren();}\",\"function drawPlan(){const ps=polygons.map(p=>p.map(q=>[(q[0]+345)*-direction,q[1]])),all=ps.flat(),xs=all.map(p=>p[0]),ys=all.map(p=>p[1]);plan.setAttribute('viewBox',[Math.min(...xs)-100,Math.min(...ys)-100,Math.max(...xs)-Math.min(...xs)+200,Math.max(...ys)-Math.min(...ys)+200].join(' '));plan.replaceChildren();ps.forEach(p=>plan.append(node('polygon',{points:p.map(q=>q.join(',')).join(' '),fill:'#e9dcc5',stroke:'#645139','stroke-width':3})));}\");return html.replace('<\/head>',\"<style>\\n*{box-sizing:border-box}body{margin:0;font:16px system-ui,sans-serif;background:#f4f7f7;color:#173b42}header{padding:18px 24px;background:#007e86;color:white;display:flex;gap:14px;align-items:center;flex-wrap:wrap}header strong{letter-spacing:.04em}header span{opacity:.85;font-size:14px}main{max-width:1100px;margin:auto;padding:20px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button,select{font:inherit;border:1px solid #bdd0d1;border-radius:7px;padding:10px 14px;background:white;color:#173b42;cursor:pointer}button[aria-pressed=true]{background:#007e86;color:white;border-color:#007e86}button:focus-visible,select:focus-visible{outline:3px solid #f5c539;outline-offset:3px}.stage{margin-top:14px;background:white;border:1px solid #deeaeb;border-radius:12px;overflow:hidden}#view{display:block;width:100%;height:clamp(240px,calc(76vh - 205px),570px);touch-action:none;cursor:grab}.bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid #e0e9e9;font-size:14px}.muted{color:#5b7379}.note{font-size:14px;line-height:1.5}#plan{width:100%;height:480px;display:none}.plan-mode #view{display:none}.plan-mode #plan{display:block}label{display:flex;align-items:center;gap:7px}input{width:18px;height:18px} @media(max-width:600px){main{padding:12px}#view{height:clamp(220px,calc(76vh - 235px),460px)}header{padding:15px}button,select{padding:9px 11px}.bottom{padding:12px}}\\n header{padding:10px 16px}body{height:100vh;overflow:hidden}main{padding:12px 16px 100px}.toolbar{gap:7px}.toolbar button{padding:8px 11px;font-size:14px}.stage{margin-top:10px}#view{height:calc(100vh - 190px)!important;min-height:230px}#plan{height:calc(100vh - 190px)!important;min-height:230px}.bottom #status{display:none!important}.bottom{position:fixed;left:16px;right:16px;bottom:44px;padding:8px 0;background:#f4f7f7;font-size:12px;border:0}.note{position:fixed;left:16px;right:16px;bottom:12px;margin:0;padding:6px 0;background:#f4f7f7;font-size:12px;line-height:1.4}@media(max-width:600px){.bottom{bottom:80px;gap:4px}#view{height:calc(100vh - 285px)!important;min-height:180px}}<\/style><\/head>\");}let last='';function update(){const active=!!model.value;const boxes=Array.from(root.querySelectorAll('.esen-pdf-preview,.model-diagram'));const box=boxes.find(b=>!b.closest('[hidden]')&&b.getClientRects().length)||boxes[0];if(!box)return;if(dock.parentElement!==box){box.append(dock);last='';}boxes.forEach(b=>b.classList.toggle('esen-has-inline-3d',active&&b===box));dock.hidden=!active;const turn=root.querySelector('#esen-turn-direction');const signature=model.value+' '+(turn?turn.value:'')+' '+root.querySelector('#esen-choice-2').value+' '+root.querySelector('#esen-choice-3').value+' '+root.querySelector('#esen-choice-4').value+' '+root.querySelector('#esen-choice-5').value;if(active&&last!==signature){last=signature;const next=small.cloneNode();next.removeAttribute('src');small.replaceWith(next);small=next;small.src='data:text\/html;charset=utf-8,'+encodeURIComponent(htmlFor().replace('<\/head>','<style>header,.toolbar,.bottom,.note{display:none!important}body,main{padding:0!important;margin:0!important;background:white!important}.stage{margin:0!important;border:0!important;border-radius:0!important}#view{height:140px!important;min-height:140px!important}#plan{height:140px!important;min-height:140px!important}<\/style><\/head>'))}}root.addEventListener('change',update);root.addEventListener('click',()=>requestAnimationFrame(()=>{last='';update()}));new MutationObserver(update).observe(root,{childList:true,subtree:true});update();button.onclick=()=>{const next=frame.cloneNode();next.removeAttribute('src');frame.replaceWith(next);frame=next;dialog.showModal();frame.src='data:text\/html;charset=utf-8,'+encodeURIComponent(htmlFor())};})}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();})();<\/script>",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>Design Your Staircase Explore the options for your made-to-measure wooden staircase. Explore an estimated price as you select your options. Your measurements and design will be reviewed before production. 1 \u00b7 Measurements2 \u00b7 Model &#038; Wood3 \u00b7 Extras &#038; Price Your staircase, your style Select a model and a wood type to begin. ModelChoose an [&hellip;]<\/p>",
        "protected": false
    },
    "author": 1,
    "featured_media": 0,
    "parent": 0,
    "menu_order": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "template": "",
    "meta": {
        "site-sidebar-layout": "default",
        "site-content-layout": "",
        "ast-site-content-layout": "default",
        "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": "",
        "ast-breadcrumbs-content": "",
        "ast-featured-img": "",
        "footer-sml-layout": "",
        "ast-disable-related-posts": "",
        "theme-transparent-header-meta": "",
        "adv-header-id-meta": "",
        "stick-header-meta": "",
        "header-above-stick-meta": "",
        "header-main-stick-meta": "",
        "header-below-stick-meta": "",
        "astra-migrate-meta-layouts": "set",
        "ast-page-background-enabled": "default",
        "ast-page-background-meta": {
            "desktop": {
                "background-color": "var(--ast-global-color-4)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "tablet": {
                "background-color": "",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "mobile": {
                "background-color": "",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            }
        },
        "ast-content-background-meta": {
            "desktop": {
                "background-color": "var(--ast-global-color-5)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "tablet": {
                "background-color": "var(--ast-global-color-5)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "mobile": {
                "background-color": "var(--ast-global-color-5)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            }
        },
        "_zipai_imported": false,
        "_zipai_import_id": "",
        "footnotes": ""
    },
    "class_list": [
        "post-2596",
        "page",
        "type-page",
        "status-publish",
        "hentry"
    ],
    "spectra_blocks_featured_image_url": null,
    "spectra_blocks_author_info": {
        "display_name": "esentr-6ab0318e0fe2c",
        "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/3b2939d9b711f35095bc3c2dfff447ece7b774acc85b24b425a90ed12f57b9e5?s=96&d=mm&r=g",
        "author_link": "https:\/\/esentrappen.nl\/en\/author\/esentr-6ab0318e0fe2c\/",
        "description": ""
    },
    "_links": {
        "self": [
            {
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/pages\/2596",
                "targetHints": {
                    "allow": [
                        "GET"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/pages"
            }
        ],
        "about": [
            {
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/types\/page"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/users\/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/comments?post=2596"
            }
        ],
        "version-history": [
            {
                "count": 109,
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/pages\/2596\/revisions"
            }
        ],
        "predecessor-version": [
            {
                "id": 3104,
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/pages\/2596\/revisions\/3104"
            }
        ],
        "wp:attachment": [
            {
                "href": "https:\/\/esentrappen.nl\/en\/wp-json\/wp\/v2\/media?parent=2596"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}