Berechnungsformular<\/title>\n <style>\n :root{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;}\n body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f6f7fb;margin:0;padding:24px}\n .card{width:100%;max-width:760px;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(20,30,60,0.08);padding:22px}\n h1{font-size:20px;margin:0 0 12px}\n .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n label{display:block;font-size:13px;margin-bottom:6px;color:#333}\n input[type=number],select{width:100%;padding:10px;border-radius:8px;border:1px solid #dde3ef;font-size:14px}\n .full{grid-column:1\/-1}\n .actions{display:flex;gap:10px;align-items:center;margin-top:12px}\n button{padding:10px 14px;border-radius:10px;border:0;background:#000;color:#fff;font-weight:400;cursor:pointer}\n button.secondary{background:#000;color:#fff;font-weight:400;border:1px solid #000}\n .result{margin-top:16px;padding:12px;border-radius:10px;background:#ffcc00;border:1px solid #000}\n .small{font-size:13px;color:#666}\n footer{margin-top:18px;font-size:12px;color:#777}\n .table{margin-top:14px;border-collapse:collapse;width:100%}\n .table th,.table td{padding:6px 8px;border:1px solid #000;text-align:left}\n @media (max-width:560px){.grid{grid-template-columns:1fr}.actions{flex-direction:column;align-items:stretch}}\n <\/style>\n<\/head>\n<body>\n <main class=\"card\" role=\"main\">\n <h1>Berechnungsformular<\/h1>\n <p class=\"small\">Bitte geben Sie Breite, H\u00f6he (in cm), St\u00fcckzahl und Farbanzahl ein.<\/p>\n\n <form id=\"calcForm\" onsubmit=\"return false;\">\n <div class=\"grid\">\n <div>\n <label for=\"width\">Breite (cm)<\/label>\n <input id=\"width\" name=\"width\" type=\"number\" step=\"0.1\" min=\"0\" required placeholder=\"z. B. 30\" \/>\n <\/div>\n\n <div>\n <label for=\"height\">H\u00f6he (cm)<\/label>\n <input id=\"height\" name=\"height\" type=\"number\" step=\"0.1\" min=\"0\" required placeholder=\"z. B. 40\" \/>\n <\/div>\n\n <div>\n <label for=\"qty\">St\u00fcckzahl<\/label>\n <input id=\"qty\" name=\"qty\" type=\"number\" step=\"1\" min=\"1\" required value=\"1\" \/>\n <\/div>\n\n <div>\n <label for=\"colors\">Farben<\/label>\n <select id=\"colors\" name=\"colors\" required>\n <option value=\"1\">1-farbig<\/option>\n <option value=\"2\">2-farbig<\/option>\n <option value=\"3\">3-farbig<\/option>\n <option value=\"4\">4-farbig<\/option>\n <\/select>\n <\/div>\n\n <div class=\"full actions\">\n <button id=\"calcBtn\" type=\"button\">Berechnen<\/button>\n <button id=\"resetBtn\" class=\"secondary\" type=\"button\">Zur\u00fccksetzen<\/button>\n <div style=\"margin-left:auto;text-align:right\">\n <div class=\"small\">Preis pro St\u00fcck:<\/div>\n <div id=\"pricePerPieceDisplay\" style=\"font-weight:700\">\u2014<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/form>\n\n <div class=\"result\" id=\"resultBox\" aria-live=\"polite\">\n <div id=\"summary\">Noch keine Berechnung durchgef\u00fchrt.<\/div>\n <\/div>\n\n \n <\/main>\n\n <script>\n const priceTable = [\n {min:1, max:500, price:29, add2:0.25, add3:0.50, add4:0.70},\n {min:501, max:1000, price:38, add2:0.25, add3:0.50, add4:0.70},\n {min:1001, max:3000, price:55, add2:0.25, add3:0.50, add4:0.70},\n {min:3001, max:6000, price:72, add2:0.25, add3:0.50, add4:0.70},\n {min:6001, max:8000, price:88, add2:0.25, add3:0.50, add4:0.70},\n {min:8001, max:10000, price:106, add2:0.25, add3:0.50, add4:0.70}\n ];\n\n const discounts = [\n {min:50, rate:0.40},\n {min:20, rate:0.30},\n {min:10, rate:0.20},\n {min:5, rate:0.15}\n ];\n\n const el = id => document.getElementById(id);\n const fmt = v => new Intl.NumberFormat('de-CH', {minimumFractionDigits: 2, maximumFractionDigits:2}).format(v);\n\n function findRow(areaCm2){\n return priceTable.find(row => areaCm2 >= row.min && areaCm2 <= row.max) || null;\n }\n\n function getDiscount(qty){\n for(const d of discounts){\n if(qty >= d.min) return d.rate;\n }\n return 0;\n }\n\n function calculate(){\n const w = parseFloat(el('width').value);\n const h = parseFloat(el('height').value);\n const q = parseInt(el('qty').value, 10);\n const colors = parseInt(el('colors').value, 10);\n\n if(Number.isNaN(w) || Number.isNaN(h) || Number.isNaN(q) || w <= 0 || h <= 0 || q <= 0){\n el('summary').innerHTML = '<strong style=\"color:#b00020\">Bitte g\u00fcltige Werte eingeben.<\/strong>';\n el('pricePerPieceDisplay').textContent = '\u2014';\n return;\n }\n\n const area = w * h;\n const row = findRow(area);\n\n if(!row){\n el('summary').innerHTML = `<strong>Fl\u00e4che: ${fmt(area)} cm\u00b2<\/strong><br><span class=\"small\">Die Fl\u00e4che liegt ausserhalb der Preisstaffel.<\/span>`;\n el('pricePerPieceDisplay').textContent = '\u2014';\n return;\n }\n\n let price = row.price;\n if(colors === 2) price += row.price * row.add2;\n if(colors === 3) price += row.price * row.add3;\n if(colors === 4) price += row.price * row.add4;\n\n \/\/ Mengenrabatt anwenden\n const discountRate = getDiscount(q);\n const discountedPrice = price * (1 - discountRate);\n const total = discountedPrice * q;\n\n el('pricePerPieceDisplay').textContent = discountedPrice.toFixed(2) + ' CHF';\n el('summary').innerHTML = `\n <div><strong>Breite:<\/strong> ${w} cm \u2014 <strong>H\u00f6he:<\/strong> ${h} cm<\/div>\n <div><strong>Fl\u00e4che:<\/strong> ${fmt(area)} cm\u00b2<\/div>\n <div><strong>Farben:<\/strong> ${colors}-farbig<\/div>\n <div><strong>St\u00fcckzahl:<\/strong> ${q}<\/div>\n <div><strong>Preis pro St\u00fcck (nach Rabatt):<\/strong> ${discountedPrice.toFixed(2)} CHF<\/div>\n <hr \/>\n <div style=\"font-size:32px\"><strong>Gesamtpreis:<\/strong> ${fmt(total)} CHF<\/div>\n <div class=\"small\" style=\"margin-top:6px\">\n (Basispreis: ${price.toFixed(2)} CHF, Rabatt: ${discountRate*100}%)\n <\/div>\n `;\n }\n\n el('calcBtn').addEventListener('click', calculate);\n el('resetBtn').addEventListener('click', ()=>{\n el('width').value = '';\n el('height').value = '';\n el('qty').value = '1';\n el('colors').value = '1';\n el('summary').innerHTML = 'Noch keine Berechnung durchgef\u00fchrt.';\n el('pricePerPieceDisplay').textContent = '\u2014';\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4ca7be3 e-con-full e-flex e-con e-parent\" data-id=\"4ca7be3\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-22ff2c7 e-con-full e-flex e-con e-child\" data-id=\"22ff2c7\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53391d4 elementor-widget elementor-widget-heading\" data-id=\"53391d4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">M\u00f6chten Sie Ihren Folienplott gleich bestellen?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-307e00c elementor-widget elementor-widget-text-editor\" data-id=\"307e00c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>F\u00fcllen Sie das kleine Formular aus, laden Sie Ihre Daten hoch und senden es an uns. <br \/><br \/>Erlaubte Dateien sind PDF, EPS, AI, SVG, JPG und JPEG.<br \/><br \/>Wir werden uns umgehend mit Ihnen in Kontakt setzen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fa53cd8 e-con-full e-flex e-con e-child\" data-id=\"fa53cd8\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-297e920 elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"297e920\" data-element_type=\"widget\" data-settings=\"{"step_next_label":"Next","step_previous_label":"Previous","button_width":"100","step_type":"number_text","step_icon_shape":"circle"}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"Bestellung Folienplott\" aria-label=\"Bestellung Folienplott\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"4579\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"297e920\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Preise\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"4579\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tName\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-md elementor-field-textual\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_11ffe28 elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_11ffe28\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tTelefon\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_11ffe28]\" id=\"form-field-field_11ffe28\" class=\"elementor-field elementor-size-md elementor-field-textual\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-md elementor-field-textual\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tIhre Nachricht\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field elementor-size-md\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"4\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-upload elementor-field-group elementor-column elementor-field-group-field_6c4686d elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_6c4686d\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tDaten hochloaden\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<input type=\"file\" name=\"form_fields[field_6c4686d][]\" id=\"form-field-field_6c4686d\" class=\"elementor-field elementor-size-md elementor-upload-field\" multiple=\"multiple\" data-maxsize=\"16\" data-maxsize-message=\"This file exceeds the maximum allowed size.\">\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Senden<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Richtpreis f\u00fcr Folienplott Berechnen Sie Ihren Richtpreis f\u00fcr unseren Folienplott (z.B. geschnittene Logos, Einzelbuchstaben, etc.) Preise gelten ab angelieferten, druckf\u00e4higen Daten. Mengenrabatte:ab 5 St\u00fcck – 15% Rabattab 10 St\u00fcck – 20% Rabattab 20 St\u00fcck – 30% Rabattab 50 St\u00fcck – 40% Rabatt Bei Betr\u00e4gen unter CHF 150.- wird ein Kleinmengenzuschlag von CHF 40.- f\u00e4llig. Berechnungsformular… <a href=\"https:\/\/www.ansatz.ch\/?page_id=4579\" rel=\"bookmark\">Weiterlesen »<span class=\"screen-reader-text\">Preise<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-4579","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=\/wp\/v2\/pages\/4579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4579"}],"version-history":[{"count":67,"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=\/wp\/v2\/pages\/4579\/revisions"}],"predecessor-version":[{"id":5253,"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=\/wp\/v2\/pages\/4579\/revisions\/5253"}],"wp:attachment":[{"href":"https:\/\/www.ansatz.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}