{"id":7018,"date":"2025-10-25T14:49:34","date_gmt":"2025-10-25T12:49:34","guid":{"rendered":"https:\/\/beta.polarstar-network.com\/?page_id=7018"},"modified":"2026-01-19T09:59:54","modified_gmt":"2026-01-19T08:59:54","slug":"premium-rechner","status":"publish","type":"page","link":"https:\/\/polarstar-network.com\/en\/premium-rechner\/","title":{"rendered":"Sparplan &#8211; Rechner"},"content":{"rendered":"<div id=\"fws_69f5a02b4086a\"  data-midnight=\"dark\" data-top-percent=\"10%\" data-bottom-percent=\"10%\"  data-bg-mobile-hidden=\"\" class=\"wpb_row vc_row-fluid vc_row full-width-section standard_section\"  style=\"padding-top: calc(100vw * 0.10); padding-bottom: calc(100vw * 0.10); \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\"><div class=\"inner-wrap using-image\"><div class=\"row-bg using-image\"  style=\"background-image: url(https:\/\/polarstar-network.com\/wp-content\/uploads\/2025\/10\/Daten-Zahlen-Fakten-zum-Edelmetall-Online-Kauf.jpg); background-position: center center; background-repeat: no-repeat; \"><\/div><\/div><div class=\"row-bg-overlay\" style=\"background: linear-gradient(to bottom,#000000 0%,rgba(255,255,255,0.001) 75%);  opacity: 0.5; background: #000000; background: linear-gradient(to bottom,#000000 0%,rgba(255,255,255,0.001) 100%);  opacity: 0.5; \"><\/div><\/div><div class=\"col span_12 dark left\">\n\t<div  class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding\"  data-t-w-inherits=\"default\" data-border-radius=\"none\" data-shadow=\"none\" data-border-animation=\"\" data-border-animation-delay=\"\" data-border-width=\"none\" data-border-style=\"solid\" data-border-color=\"\" data-bg-cover=\"\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-hover-bg=\"\" data-hover-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" ><div class=\"column-bg-overlay\"><\/div>\n\t\t<div class=\"vc_column-inner\">\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<section id=\"premium-sparplan\" style=\"font-family:'Poppins',sans-serif;background:#f9f9f9;padding:80px 20px;max-width:1300px;margin:auto;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,0.05);overflow:hidden;\">\n\n<div style=\"text-align:center;margin-bottom:40px;\">\n  <h2 style=\"font-size:30px;color:#0d2240;font-weight:700;\">Sparplan - Rechner<\/h2>\n  <p style=\"color:#666;max-width:700px;margin:auto;\">\n    Berechnen Sie Ihre Edelmetall-Entwicklung auf Basis realer LBMA-Monatsdurchschnittskurse.<br>\n    W\u00e4hlen Sie den Startmonat \u2013 der Endmonat ist automatisch der aktuelle Monat.\n  <\/p>\n<\/div>\n\n<div class=\"ps-row\" style=\"display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;\">\n  <div class=\"ps-box\" style=\"flex:1;min-width:360px;\">\n    <h3 style=\"text-align:center;color:#0d2240;\">Ihre Eingaben<\/h3>\n\n    <label style=\"font-weight:600;\">Metalle ausw\u00e4hlen<\/label>\n    <div id=\"metalSelect\" class=\"ps-metals\" style=\"display:grid;gap:8px;margin-bottom:18px;\">\n      <label><span>Gold<\/span><input type=\"checkbox\" value=\"gold\" checked><\/label>\n      <label><span>Silber<\/span><input type=\"checkbox\" value=\"silver\"><\/label>\n      <label><span>Platin<\/span><input type=\"checkbox\" value=\"platinum\"><\/label>\n      <label><span>Palladium<\/span><input type=\"checkbox\" value=\"palladium\"><\/label>\n    <\/div>\n\n    <label>Monatlicher Beitrag (\u20ac)<\/label>\n    <input id=\"betrag\" type=\"number\" value=\"100\" min=\"25\" step=\"25\" style=\"width:100%;padding:12px;border:1px solid #ccc;border-radius:8px;margin-bottom:12px;\">\n    <label>Einmalzahlung (\u20ac)<\/label>\n    <input id=\"einmal\" type=\"number\" value=\"0\" min=\"0\" step=\"100\" style=\"width:100%;padding:12px;border:1px solid #ccc;border-radius:8px;margin-bottom:12px;\">\n\n<div style=\"display:flex;gap:10px;margin-bottom:15px;\">\n  <div style=\"flex:1;\">\n    <label>Startmonat<\/label>\n    <input id=\"startDatum\" type=\"text\" placeholder=\"MM \/ YYYY\"\n           style=\"width:100%;padding:12px;border:1px solid #ccc;border-radius:8px;\"\n           autocomplete=\"off\">\n  <\/div>\n  <div style=\"flex:1;\">\n    <label>Endmonat<\/label>\n    <input id=\"endDatum\" type=\"text\" placeholder=\"MM \/ YYYY\"\n           style=\"width:100%;padding:12px;border:1px solid #ccc;border-radius:8px;\"\n           autocomplete=\"off\">\n  <\/div>\n<\/div>\n\n    <button id=\"calculate\" class=\"ps-btn\">\ud83d\udcb0 Berechnen<\/button>\n    <div id=\"loadingSpinner\">\n      <div><\/div>\n      <p style=\"font-size:14px;color:#0d2240;font-weight:500;\">Simulation l\u00e4uft \u2026<\/p>\n    <\/div>\n    <button id=\"reset\" style=\"width:100%;margin-top:10px;padding:12px;border:none;background:#eee;color:#333;border-radius:10px;cursor:pointer;\">\u267b\ufe0f Zur\u00fccksetzen<\/button>\n    <button id=\"downloadPDF\" style=\"display:none;width:100%;margin-top:10px;padding:12px;border:none;background:#0d2240;color:#fff;border-radius:10px;cursor:pointer;\">\ud83d\udcc4 PDF herunterladen<\/button>\n  <\/div>\n\n  <div style=\"flex:1.2;min-width:360px;display:flex;flex-direction:column;gap:25px;\">\n    <div class=\"ps-box\">\n      <h3>Depotentwicklung<\/h3>\n      <div style=\"width:100%;height:300px;\"><canvas id=\"chartDepot\"><\/canvas><\/div>\n    <\/div>\n    <div id=\"result\" class=\"ps-box\" style=\"border-left:5px solid #d4af37;display:none;opacity:0;transition:opacity .5s;\">\n      <h4 style=\"color:#0d2240;\">Ergebnis Ihrer Simulation<\/h4>\n      <div id=\"summary\" style=\"font-size:15px;color:#333;line-height:1.7;\"><\/div>\n      <div id=\"metalsBreakdown\" style=\"display:grid;gap:10px;margin-top:10px;\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<p style=\"text-align:center;font-size:13px;color:#777;margin-top:40px;\">\n  Simulation auf Basis historischer LBMA-Monatskurse (\u20ac\/g).<br>\n  \u00a9 Polarstern Sachwert GmbH & Co. KG \u2013 Keine Anlageberatung\n<\/p>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/l10n\/de.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/plugins\/monthSelect\/index.js\"><\/script>\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/plugins\/monthSelect\/style.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n  const logoURL = \"https:\/\/polarstar-network.com\/wp-content\/uploads\/2025\/10\/Logo_NUR-STERN____PolarSTAR_Maerz_20.png\";\n\n  const now = new Date();\n  const year = now.getFullYear();\n  const month = (now.getMonth() + 1).toString().padStart(2, \"0\");\n  const todayStr = `${year}-${month}`;\n\n\/\/ === Datepicker \u2013 NUR Monate, keine Zukunft, gleiche UI auf Handy & Desktop ===\n\n\/\/ Sicherstellen, dass Flatpickr & Plugin geladen sind\nif (typeof flatpickr !== \"undefined\" && typeof monthSelectPlugin !== \"undefined\") {\n  const today = new Date();\n\n  flatpickr(\"#startDatum\", {\n    locale: \"de\",\n    disableMobile: true, \/\/ \u26d4 verhindert nativen Handy-Picker\n    plugins: [\n      new monthSelectPlugin({\n        shorthand: true,\n        dateFormat: \"Y-m\",     \/\/ tats\u00e4chlicher Wert (z. B. \"2025-11\")\n        altFormat: \"F Y\",      \/\/ sichtbare Anzeige (z. B. \"November 2025\")\n        theme: \"light\"\n      })\n    ],\n    minDate: \"2000-01\",\n    maxDate: today\n  });\n\n  flatpickr(\"#endDatum\", {\n    locale: \"de\",\n    disableMobile: true, \/\/ \u26d4 blockiert Handy-Tagesauswahl\n    plugins: [\n      new monthSelectPlugin({\n        shorthand: true,\n        dateFormat: \"Y-m\",\n        altFormat: \"F Y\",\n        theme: \"light\"\n      })\n    ],\n    minDate: \"2000-01\",\n    maxDate: today, \/\/ Zukunft blockiert\n    defaultDate: today\n  });\n\n  \/\/ Endmonat-Feld beim Laden korrekt setzen\n  const currentYear = today.getFullYear();\n  const currentMonth = (today.getMonth() + 1).toString().padStart(2, \"0\");\n  document.getElementById(\"endDatum\").value = `${currentYear}-${currentMonth}`;\n}\n\n\n  \/\/ === Chart ===\n  const ctx = document.getElementById(\"chartDepot\").getContext(\"2d\");\n  let chartDepot = new Chart(ctx, {\n    type: \"line\",\n    data: {\n      labels: [],\n      datasets: [\n        {\n          label: \"Einzahlungen (\u20ac)\",\n          data: [],\n          borderColor: \"#333\",\n          backgroundColor: \"rgba(0,0,0,0.05)\",\n          fill: true,\n          tension: 0.3,\n          borderWidth: 2,\n        },\n        {\n          label: \"Depotwert (\u20ac)\",\n          data: [],\n          borderColor: \"#d4af37\",\n          backgroundColor: \"rgba(212,175,55,0.12)\",\n          fill: true,\n          tension: 0.35,\n          borderWidth: 3,\n        },\n      ],\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: false,\n      animation: false,\n      plugins: { legend: { labels: { color: \"#0d2240\" } } },\n      scales: {\n        x: { ticks: { color: \"#555\" } },\n        y: { beginAtZero: true, ticks: { color: \"#555\" } },\n      },\n    },\n  });\n\n  async function getHistory(metall) {\n    const res = await fetch(`https:\/\/prices.polarstern-cloud.com\/${metall}.json`);\n    return res.json();\n  }\n\n  \/\/ === Berechnung ===\n  document.getElementById(\"calculate\").addEventListener(\"click\", async () => {\n    const spinner = document.getElementById(\"loadingSpinner\");\n    spinner.style.display = \"block\";\n    await new Promise(res => setTimeout(res, 1000));\n\n    try {\n      const metals = [...document.querySelectorAll(\"#metalSelect input:checked\")].map(x => x.value);\n      if (!metals.length) return alert(\"Bitte mindestens ein Metall w\u00e4hlen.\");\n\n      const betragGes = +betrag.value;\n      const einmalGes = +einmal.value;\n      const s = startDatum.value;\n      const e = endDatum.value;\n      if (!s || !e) return alert(\"Bitte Start- und Endmonat w\u00e4hlen.\");\n\n      const [sy, sm] = s.split(\"-\").map(Number);\n      const [ey, em] = e.split(\"-\").map(Number);\n      if (sy > ey || (sy === ey && sm >= em)) return alert(\"Endmonat muss nach Startmonat liegen.\");\n\n      const monate = (ey - sy) * 12 + (em - sm + 1);\n      const investGes = betragGes * monate + einmalGes;\n\n      let depotGes = 0, gewGes = 0, sumInv = [], sumDep = [], labels = [];\n\n      \/\/ Labels\n      for (let i = 0; i < monate; i++) {\n        const y = sy + Math.floor((sm - 1 + i) \/ 12);\n        const m = ((sm - 1 + i) % 12 + 1).toString().padStart(2, \"0\");\n        labels.push(`${m}.${y}`);\n      }\n\n      let html = \"\";\n\n      for (const m of metals) {\n        const data = await getHistory(m);\n        const rel = data.slice(-monate); \/\/ alle relevanten Monate\n\n        let totalW = einmalGes \/ metals.length \/ rel[0].value;\n        let inv = einmalGes \/ metals.length;\n        let arrInv = [], arrDep = [];\n\n        \/\/ realistische monatliche Simulation\n        for (let i = 0; i < rel.length; i++) {\n          inv += betragGes \/ metals.length;\n          totalW += (betragGes \/ metals.length) \/ rel[i].value;\n          arrInv.push(inv);\n          arrDep.push(totalW * rel[i].value);\n        }\n\n        \/\/ Summierung \u00fcber Metalle\n        for (let i = 0; i < arrInv.length; i++) {\n          sumInv[i] = (sumInv[i] || 0) + arrInv[i];\n          sumDep[i] = (sumDep[i] || 0) + arrDep[i];\n        }\n\n        const dep = totalW * rel.at(-1).value;\n        const g = dep - inv;\n        depotGes += dep;\n        gewGes += g;\n\n        html += `<div style=\"border:1px solid #eee;border-radius:8px;padding:10px;\">\n          ${m.toUpperCase()}<br>\n          Wert: <strong>${dep.toLocaleString()} \u20ac<\/strong><br>\n          Gewinn: <strong>+${g.toLocaleString()} \u20ac<\/strong>\n        <\/div>`;\n      }\n\n      const rend = (gewGes \/ investGes) * 100;\n\n      summary.innerHTML = `\n        Einzahlungen: <strong>${investGes.toLocaleString()} \u20ac<\/strong><br>\n        Depotwert: <strong>${depotGes.toLocaleString()} \u20ac<\/strong><br>\n        Gewinn: <strong>+${gewGes.toLocaleString()} \u20ac<\/strong> |\n        Rendite: <strong>${rend.toFixed(1)} %<\/strong>\n      `;\n      metalsBreakdown.innerHTML = html;\n\n      \/\/ Chart sampling nur f\u00fcr Darstellung\n      const step = Math.ceil(labels.length \/ 30);\n      const sampledLabels = labels.filter((_, i) => i % step === 0 || i === labels.length - 1);\n      const sampledInv = sumInv.filter((_, i) => i % step === 0 || i === sumInv.length - 1);\n      const sampledDep = sumDep.filter((_, i) => i % step === 0 || i === sumDep.length - 1);\n\n      chartDepot.data.labels = sampledLabels;\n      chartDepot.data.datasets[0].data = sampledInv;\n      chartDepot.data.datasets[1].data = sampledDep;\n      chartDepot.update();\n\n      result.style.display = \"block\";\n      setTimeout(() => result.style.opacity = 1, 100);\n      downloadPDF.style.display = \"block\";\n\n    } catch (err) {\n      alert(\"Fehler: \" + err.message);\n    } finally {\n      spinner.style.display = \"none\";\n    }\n  });\n\n  \/\/ === Reset ===\n  reset.addEventListener(\"click\", () => {\n    document.querySelectorAll(\"#metalSelect input\").forEach(cb => cb.checked = cb.value === \"gold\");\n    betrag.value = 100;\n    einmal.value = 0;\n    startDatum.value = \"\";\n    endDatum.value = todayStr;\n    chartDepot.data.labels = [];\n    chartDepot.data.datasets.forEach(ds => ds.data = []);\n    chartDepot.update();\n    result.style.display = \"none\";\n    downloadPDF.style.display = \"none\";\n  });\n\n\/\/ === PDF Download (Retina-Optimierung final) ===\ndownloadPDF.addEventListener(\"click\", async () => {\n  const { jsPDF } = window.jspdf;\n  const pdf = new jsPDF(\"p\", \"mm\", \"a4\");\n\n  \/\/ \ud83d\udfe1 Logo\n  const logo = new Image();\n  logo.src = \"\/wp-content\/uploads\/2025\/10\/Logo_PolarSTAR_Maerz_2020-webseite.png\";\n  await new Promise(res => { logo.onload = res; });\n  const logoW = 35;\n  const logoH = (logo.height \/ logo.width) * logoW;\n  pdf.addImage(logo, \"PNG\", 10, 8, logoW, logoH);\n\n  \/\/ \ud83d\udfe1 Titel & Datum\n  pdf.setFontSize(14);\n  pdf.text(\"Polarstern Premium-Sparplan-Simulation\", 50, 16);\n  pdf.text(\"Datum: \" + new Date().toLocaleDateString(\"de-DE\"), 50, 24);\n\n  \/\/ \ud83d\udfe1 Chart mit echter Retina-Aufl\u00f6sung\n  const chartCanvas = document.getElementById(\"chartDepot\");\n  const originalRatio = window.devicePixelRatio;\n  const targetRatio = 3; \/\/ dreifache Sch\u00e4rfe\n\n  \/\/ tempor\u00e4r DPI erh\u00f6hen\n  Object.defineProperty(window, 'devicePixelRatio', { get: () => targetRatio });\n  chartDepot.resize();\n  chartDepot.update();\n\n  \/\/ echtes Chart-Image direkt von Chart.js erzeugen\n  const chartImageHD = chartDepot.toBase64Image(\"image\/png\", 1.0);\n\n  \/\/ DPI wieder zur\u00fccksetzen\n  Object.defineProperty(window, 'devicePixelRatio', { get: () => originalRatio });\n  chartDepot.resize();\n  chartDepot.update();\n\n  pdf.addImage(chartImageHD, \"PNG\", 10, 30, 190, 80);\n\n  \/\/ \ud83d\udfe1 Ergebnisbereich\n  const res = document.getElementById(\"result\");\n  const canvas = await html2canvas(res, { scale: 3, windowWidth: 1400, scrollY: 0 });\n  const img = canvas.toDataURL(\"image\/png\", 1.0);\n  const pdfW = pdf.internal.pageSize.getWidth();\n  const imgProps = pdf.getImageProperties(img);\n  const imgHeight = (imgProps.height * (pdfW - 20)) \/ imgProps.width;\n\n  if (imgHeight > 150) {\n    pdf.addPage();\n    pdf.addImage(img, \"PNG\", 10, 20, pdfW - 20, 0);\n  } else {\n    pdf.addImage(img, \"PNG\", 10, 120, pdfW - 20, 0);\n  }\n\n\/\/ \ud83d\udfe1 Fu\u00dfzeile\nconst pageCount = pdf.internal.getNumberOfPages();\npdf.setFontSize(10);\nfor (let i = 1; i <= pageCount; i++) {\n  pdf.setPage(i);\n  pdf.text(\"\u00a9 Polarstern Sachwert GmbH & Co. KG \u2013 Keine Anlageberatung\", 15, 285);\n  pdf.text(\"Simulation auf Basis historischer LBMA-Monatskurse (\u20ac\/g).\", 15, 291);\n}\n\n  pdf.save(\"Polarstern-Sparplan-Simulation.pdf\");\n});\n});\n<\/script>\n<\/section>\n\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"Sparplan - Rechner Berechnen Sie Ihre Edelmetall-Entwicklung auf Basis realer LBMA-Monatsdurchschnittskurse. W\u00e4hlen Sie den Startmonat \u2013 der Endmonat ist automatisch der aktuelle Monat. Ihre Eingaben Metalle ausw\u00e4hlen Gold Silber Platin...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7018","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/pages\/7018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/comments?post=7018"}],"version-history":[{"count":34,"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/pages\/7018\/revisions"}],"predecessor-version":[{"id":7526,"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/pages\/7018\/revisions\/7526"}],"wp:attachment":[{"href":"https:\/\/polarstar-network.com\/en\/wp-json\/wp\/v2\/media?parent=7018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}