@hundert11/sv-steuer-rechner

<!doctype html> <html lang="de" class="has-navbar-fixed-top"> <head> <meta charset="utf-8"> <title>hundert11 SV- und Steuer-Rechner Demo</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"> <style> .w-100 {width: 100%;} .rounded {border-radius: 50%;} .same-width-numbers {font-feature-settings: "tnum";font-variant-numeric: tabular-nums;} </style> <script type="module" src="../src/index.js"></script> <script src="https://unpkg.com/alpinejs" defer></script> </head> <body> <nav class="navbar is-fixed-top has-text-centered"> <div class="column"> <h1 class="title"> 1️⃣1️⃣1️⃣ hundert11 </h1> <p class="subtitle"> SV- und Steuer-Rechner </p> </div> <div class="column is-hidden-touch"> <h1 class="title"> WKO </h1> <p class="subtitle"> SV- und Steuer-Rechner </p> </div> </nav> <div class="columns"> <div class="column"> <section class="section" x-data="{ currentYear: (new Date()).getFullYear(), options: { year: (new Date()).getFullYear(), foundingYear: (new Date()).getFullYear(), foundingMonth: 1, useInvestFreibetrag: false, investFreibetrag: 0, paidSv: 0 }, income: 0, outgo: 0, showYear: false, results: {} }" x-init="results = hundert11.calculate(income, outgo, options); $watch('income', _ => results = hundert11.calculate(income, outgo, options)); $watch('outgo', _ => results = hundert11.calculate(income, outgo, options)); $watch('options.year', _ => results = hundert11.calculate(income, outgo, options)); $watch('options.foundingYear', _ => results = hundert11.calculate(income, outgo, options)); $watch('options.foundingMonth', _ => results = hundert11.calculate(income, outgo, options)); $watch('options.paidSv', _ => results = hundert11.calculate(income, outgo, options)); $watch('options.useInvestFreibetrag', _ => options.investFreibetrag = hundert11.calculate(income, outgo, options).maxInvestFreibetrag); $watch('options.useInvestFreibetrag', _ => results = hundert11.calculate(income, outgo, options)); $watch('options.investFreibetrag', _ => results = hundert11.calculate(income, outgo, options));"> <p>Speziell für EinzelunternehmerInnen, die digitale Dienstleistungen anbieten, d.h. keine Betriebsausgaben für Personal oder Waren haben.</p> <p x-show="!showYear"> Berechnet wird mit den Werten von <span x-text="options.year"></span>. <a @click="showYear = true">Nachrechnen für verganges Jahr?</a> </p> <div x-show="showYear" class="field mt-4"> <label class="label">Berechnung für das Jahr</label> <div class="control"> <div class="select"> <select x-model.number="options.year"> <template x-for="y in [currentYear+1, currentYear, currentYear-1, currentYear-2, currentYear-3, currentYear-4, currentYear-5]"> <option :key="y" :value="y" x-text="y"></option> </template> </select> </div> </div> </div> <form class="mt-4"> <div class="columns"> <div class="column field"> <label class="label" for="income"> <span x-show="currentYear <= options.year">Voraussichtliche</span> Einnahmen </label> <div class="control has-icons-left"> <input class="input" x-model.number="income" id="income" type="number" placeholder="30000" min="0" step="500"> <span class="icon is-small is-left"> € </span> </div> <p class="help"><input class="w-100" type="range" x-model.number="income" min="0" max="90000" step="500" tabindex="-1"></p> </div> <div class="column field"> <label class="label" for="outgo"> <span x-show="currentYear <= options.year">Voraussichtliche</span> Ausgaben </label> <div class="control has-icons-left"> <input class="input" x-model.number="outgo" id="outgo" type="number" placeholder="2000" min="0" step="100"> <span class="icon is-small is-left"> € </span> </div> <p class="help"><input class="w-100" type="range" x-model.number="outgo" min="0" :max="20000" step="500" tabindex="-1"></p> <p x-show="(income - outgo - options.paidSv) > 30000" class="help"> <label> <input x-model="options.useInvestFreibetrag" type="checkbox" /> Investitionsbedingter Gewinnfreibetrag </label> <a href="https://www.wko.at/service/steuern/der-gewinnfreibetrag.html#heading_Investitionsbedingter_Gewinnfreibetrag" target="_blank" title="öffnet wko.at"> <i class="fa fa-info-circle"></i> </a> </p> <div x-show="options.useInvestFreibetrag"> <div class="control has-icons-left"> <input class="input" x-model.number="options.investFreibetrag" id="invest" type="number" placeholder="2000" min="0" :max="results.maxInvestFreibetrag" step="100"> <span class="icon is-small is-left"> € </span> </div> <p class="help" x-show="(income * 0.12) > outgo"> <b>TIPP:</b> Wird die <abbr title="Einkommensteuer">ESt</abbr> weniger, wenn angehackt?<br> Pauschalieren ODER investieren: <a href="https://www.christianprodinger.com/wp-content/uploads/2018/05/SWK2011_36_GFBPauschalierung.pdf" target="_blank"><i class="fas fa-file-pdf"></i> Vergleich</a> </p> </div> </div> </div> <div class="columns"> <div class="column is-half field"> <label class="label" for="sv">Gezahlte Sozialversicherungsbeiträge</label> <div class="control has-icons-left"> <input class="input" x-model.number="options.paidSv" id="sv" type="number" placeholder="2000" min="0" step="500"> <span class="icon is-small is-left"> € </span> </div> </div> <div class="column field"> <label class="label" for="year">Gründungsjahr</label> <div class="control"> <input class="input" x-model.number="options.foundingYear" id="year" type="number" min="2000" :max="options.year"> </div> </div> <div class="column field" :class="options.foundingYear === options.year ? '' : 'is-invisible'"> <label class="label" for="month">Gründungsmonat</label> <div class="control"> <input class="input" x-model.number="options.foundingMonth" id="month" type="number" min="1" max="12"> </div> </div> </div> </form> <div class="columns mt-5"> <div class="column"> <div class="box is-flex is-align-items-center is-justify-content-space-between is-size-4" :class="{ 'has-text-grey-lighter': !income }"> <div> <h5 class="is-size-7 has-text-grey is-uppercase mr-2"> Nettoeinkommen </h5> <span class="same-width-numbers" x-text="results.netto.toLocaleString()"></span> € </div> <i class="fas fa-chart-line rounded has-background-success has-text-white p-4 is-size-5"></i> </div> </div> <div class="column"> <div class="box is-flex is-align-items-center is-justify-content-space-between is-size-4" :class="{ 'has-text-grey-lighter': !income }"> <div> <h5 class="is-size-7 has-text-grey is-uppercase mr-2"> Einkommensteuer </h5> <span class="same-width-numbers" x-text="results.est.toLocaleString()"></span> € </div> <i class="fas fa-landmark rounded has-background-grey-dark has-text-white p-4 is-size-5"></i> </div> </div> <div class="column"> <div class="box is-flex is-align-items-center is-justify-content-space-between is-size-4" :class="{ 'has-text-grey-lighter': !income }"> <div> <h5 class="is-size-7 has-text-grey is-uppercase mr-2"> Sozialversicherung </h5> <span class="same-width-numbers" x-text="results.sv.toLocaleString()"></span>€ <span x-show="results.svAdditional" class="has-text-danger is-size-7"> +<span x-text="results.svAdditional.toLocaleString()"></span>€ </span> </div> <i class="fas fa-heartbeat rounded has-background-warning-dark has-text-white p-4 is-size-5"></i> </div> </div> </div> <template x-for="tipp in results.tipps" :key="tipp"> <article class="message is-success"> <div class="message-body"> 💡  <span x-text="{USE_PAUSCHALIERUNG: 'Nutze die Basispauschalierung', EXCLUDE_KV_PV: 'Befreie dich von Kranken- und Pensionsversicherung', INCREASE_SV: 'Erhöhe deine SV-Beiträge', USE_INVESTFREIBETRAG: 'Nutze den investitionsbedingten Gewinnfreibetrag'}[tipp]"></span> <span x-show="tipp == 'USE_PAUSCHALIERUNG'" x-init="pauschalierung = (year) => year <= 2024 ? 0.12 : year === 2025 ? 0.135 : 0.15"> <a href="https://www.wko.at/steuern/basispauschalierung" target="_blank" class="text-gray-500 hover:text-gray-900" title="öffnet wko.at"><i class="fa fa-info-circle"></i></a> <span class="is-pulled-right has-text-right is-size-7"> Wird für die Rechnung oben autom. verwendet! Reelle Ausgaben <span x-text="outgo ? outgo.toLocaleString() : 0"></span> €<br> vs. Betriebsausgabenpauschale: <span x-text="(pauschalierung(options.year)*100).toLocaleString()"></span>% * Einkommen = <span x-text="Math.min(income*pauschalierung(options.year), (options.year <= 2024 ? 26400 : options.year === 2025 ? 43200 : 63000)).toLocaleString()"></span> € </span> </span> <span x-show="tipp == 'USE_INVESTFREIBETRAG'"> <a href="https://www.wko.at/service/steuern/der-gewinnfreibetrag.html" target="_blank" title="öffnet wko.at"><i class="fa fa-info-circle"></i></a> <span class="is-pulled-right has-text-right is-size-7"> Investiere max. <span x-text="results.maxInvestFreibetrag.toLocaleString()"></span> € in bestimmte Wertpapiere<br> <a x-show="results.tipps.includes('USE_PAUSCHALIERUNG')" href="https://www.christianprodinger.com/wp-content/uploads/2018/05/SWK2011_36_GFBPauschalierung.pdf" target="_blank">ACHTUNG: Basispauschalierung darf nicht verwendet werden!</a> </span> </div> </article> </template> </section> <section class="section"> <article class="message is-dark"> <div class="message-header"> <p>Wie wird gerechnet?</p> </div> <div class="message-body content"> <p> <a href="https://github.com/hundert11/sv-steuer-rechner/blob/main/src/index.js#L53" target="_blank" class="has-text-primary mr-1" title="Show code"><i class="fas fa-calculator"></i></a> <b>Nettoeinkommen =</b><br><i class="ml-5"></i> Einnahmen - Ausgaben - Einkommensteuer - Sozialversicherung </p> <p> <a href="https://github.com/hundert11/sv-steuer-rechner/blob/main/src/est.js" target="_blank" class="has-text-primary mr-1" title="Show code"><i class="fas fa-calculator"></i></a> <b>Einkommensteuer =</b><br><i class="ml-5"></i> Einkommen lt. ESt-Bescheid x <a href="https://www.usp.gv.at/themen/steuern-finanzen/einkommensteuer-ueberblick/weitere-informationen-est/tarifstufen.html" target="_blank"><i>deine Tarifstufe</i></a> </p> <p> <a href="https://github.com/hundert11/sv-steuer-rechner/blob/main/src/index.js#L7" target="_blank" class="has-text-primary mr-1" title="Show code"><i class="fas fa-calculator"></i></a> <b>Einkommen lt. ESt-Bescheid =</b><br><i class="ml-5"></i> Einnahmen - Ausgaben <small>(od. Pauschale)</small> - bezahlte SV-Beiträge - 13% Grundfreibetrag </p> <p> <a href="https://github.com/hundert11/sv-steuer-rechner/blob/main/src/sv.js" target="_blank" class="has-text-primary mr-1" title="Show code"><i class="fas fa-calculator"></i></a> <b>Sozialversicherung =</b><br><i class="ml-5"></i> Beitragsgrundlage x Beitragssatz </p> <p> <a href="https://github.com/hundert11/sv-steuer-rechner/blob/main/src/sv.js#L22" target="_blank" class="has-text-primary mr-1" title="Show code"><i class="fas fa-calculator"></i></a> <b>Beitragsgrundlage SV =</b><br><i class="ml-5"></i> Einkommen lt. ESt-Bescheid + bezahlte SV-Beiträge (Vorauszahlungen) </p> </div> </article> </section> <section class="section is-hidden-desktop"> <a href="https://svrechner.wko.at/">Zum WKO SV- und Steuer-Rechner</a> </section> </div> <div class="column is-hidden-touch"> <iframe src="https://svrechner.wko.at/" width="100%" height="1500" style="margin-top: -10%;" onload="setTimeout(() => document.getElementById('income').focus())"></iframe> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> </body> </html>