{"id":1018,"date":"2026-10-26T16:57:13","date_gmt":"2026-10-26T16:57:13","guid":{"rendered":"https:\/\/srabons.de\/?page_id=1018"},"modified":"2026-10-26T16:57:16","modified_gmt":"2026-10-26T16:57:16","slug":"german-tax-calculator","status":"publish","type":"page","link":"https:\/\/srabons.de\/en\/german-tax-calculator\/","title":{"rendered":"German Tax Calculator"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"de\" class=\"h-full\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Deutscher Steuerrechner | srabons.de<\/title>\n  <!-- Tailwind CSS CDN -->\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <!-- Chart.js CDN -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n  <!-- Lucide Icons -->\n  <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n  <script>\n    tailwind.config = {\n      darkMode: 'class',\n      theme: {\n        extend: {\n          colors: {\n            brand: {\n              50: '#ecfdf5',\n              100: '#d1fae5',\n              500: '#10b981',\n              600: '#059669',\n              700: '#047857',\n              800: '#065f46',\n              900: '#064e3b',\n            },\n            fintech: {\n              navy: '#0f172a',\n              card: '#1e293b',\n              accent: '#38bdf8'\n            }\n          }\n        }\n      }\n    };\n  <\/script>\n  <style>\n    \/* Custom scrollbar and smooth transitions *\/\n    ::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    ::-webkit-scrollbar-track {\n      background: #f1f5f9;\n    }\n    ::-webkit-scrollbar-thumb {\n      background: #cbd5e1;\n      border-radius: 9999px;\n    }\n    .tooltip-container:hover .tooltip-content {\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    @media print {\n      .no-print {\n        display: none !important;\n      }\n      body {\n        background: white !important;\n        color: black !important;\n      }\n      .print-shadow-none {\n        box-shadow: none !important;\n        border: 1px solid #e2e8f0 !important;\n      }\n    }\n  <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 min-h-screen flex flex-col font-sans antialiased selection:bg-emerald-500 selection:text-white\">\n\n  <!-- Header -->\n  <header class=\"bg-white\/80 backdrop-blur-md border-b border-slate-200 sticky top-0 z-40\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n      <!-- Logo & Domain Brand -->\n      <div class=\"flex items-center space-x-3\">\n        <div class=\"w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-600 via-teal-600 to-sky-500 flex items-center justify-center text-white shadow-md shadow-emerald-500\/20\">\n          <i data-lucide=\"calculator\" class=\"w-5 h-5\"><\/i>\n        <\/div>\n        <div>\n          <div class=\"flex items-center space-x-1.5\">\n            <span class=\"text-xl font-bold tracking-tight text-slate-900\">srabons<span class=\"text-emerald-600\">.de<\/span><\/span>\n            <span class=\"px-2 py-0.5 text-[10px] font-semibold bg-emerald-100 text-emerald-800 rounded-full uppercase tracking-wider\">Steuer 2026\/2025<\/span>\n          <\/div>\n          <p class=\"text-[11px] text-slate-500 hidden sm:block\" data-i18n=\"tagline\">Pr\u00e4ziser Brutto-Netto- &#038; Einkommensteuerrechner f\u00fcr Deutschland<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Quick Actions -->\n      <div class=\"flex items-center space-x-2 sm:space-x-3\">\n        <!-- Embed Button -->\n        <button id=\"openEmbedModalBtn\" class=\"no-print inline-flex items-center space-x-1.5 text-xs font-medium px-3 py-1.5 rounded-lg border border-slate-200 text-slate-700 bg-white hover:bg-slate-50 hover:text-emerald-600 transition shadow-sm\">\n          <i data-lucide=\"code\" class=\"w-3.5 h-3.5\"><\/i>\n          <span class=\"hidden md:inline\" data-i18n=\"embedBtn\">Einbetten<\/span>\n        <\/button>\n\n        <!-- Print \/ PDF Button -->\n        <button onclick=\"window.print()\" class=\"no-print inline-flex items-center space-x-1.5 text-xs font-medium px-3 py-1.5 rounded-lg border border-slate-200 text-slate-700 bg-white hover:bg-slate-50 hover:text-emerald-600 transition shadow-sm\">\n          <i data-lucide=\"printer\" class=\"w-3.5 h-3.5\"><\/i>\n          <span class=\"hidden md:inline\" data-i18n=\"printBtn\">Drucken \/ PDF<\/span>\n        <\/button>\n\n        <!-- Language Switch -->\n        <div class=\"no-print flex items-center bg-slate-100 p-0.5 rounded-lg border border-slate-200 text-xs font-medium\">\n          <button id=\"langDe\" class=\"px-2.5 py-1 rounded-md transition font-semibold text-white bg-emerald-600 shadow-sm\">DE<\/button>\n          <button id=\"langEn\" class=\"px-2.5 py-1 rounded-md transition text-slate-600 hover:text-slate-900\">EN<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <!-- Main Container -->\n  <main class=\"flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full\">\n    \n    <!-- Mode Navigation Tabs -->\n    <div class=\"no-print mb-6\">\n      <div class=\"sm:hidden\">\n        <label for=\"mode-select\" class=\"sr-only\">Modus w\u00e4hlen<\/label>\n        <select id=\"mode-select\" class=\"block w-full rounded-xl border-slate-300 py-2.5 pl-3 pr-10 text-base focus:border-emerald-500 focus:outline-none focus:ring-emerald-500 sm:text-sm shadow-sm bg-white\">\n          <option value=\"employee\">Angestellte (Brutto-Netto Rechner)<\/option>\n          <option value=\"self_employed\">Selbstst\u00e4ndige \/ Einkommensteuertarif (\u00a7 32a EStG)<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"hidden sm:block\">\n        <nav class=\"flex space-x-2 p-1.5 bg-slate-200\/70 backdrop-blur rounded-2xl max-w-xl mx-auto border border-slate-200 shadow-inner\" aria-label=\"Modes\">\n          <button id=\"tabEmployee\" class=\"flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-xl text-sm font-semibold transition bg-white text-emerald-700 shadow-sm\">\n            <i data-lucide=\"briefcase\" class=\"w-4 h-4\"><\/i>\n            <span data-i18n=\"tabEmployee\">Angestellte (Brutto-Netto)<\/span>\n          <\/button>\n          <button id=\"tabSelfEmployed\" class=\"flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-xl text-sm font-semibold transition text-slate-600 hover:text-slate-900\">\n            <i data-lucide=\"trending-up\" class=\"w-4 h-4\"><\/i>\n            <span data-i18n=\"tabSelfEmployed\">Selbstst\u00e4ndige (\u00a7 32a EStG)<\/span>\n          <\/button>\n        <\/nav>\n      <\/div>\n    <\/div>\n\n    <!-- CALCULATOR CONTAINER -->\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\n      \n      <!-- LEFT COLUMN: INPUT FORMS -->\n      <div class=\"lg:col-span-5 space-y-6\">\n        \n        <!-- SECTION 1: EMPLOYEE FORM -->\n        <div id=\"employeeFormSection\" class=\"bg-white rounded-2xl border border-slate-200\/80 shadow-sm p-5 sm:p-6 space-y-5\">\n          <div class=\"flex items-center justify-between border-b border-slate-100 pb-3\">\n            <h2 class=\"text-base font-bold text-slate-900 flex items-center space-x-2\">\n              <span class=\"w-2 h-2 rounded-full bg-emerald-500\"><\/span>\n              <span data-i18n=\"empFormTitle\">Eckdaten des Gehalts<\/span>\n            <\/h2>\n            <span class=\"text-xs text-slate-400 font-mono\">Jahr 2025\/2026<\/span>\n          <\/div>\n\n          <!-- Bruttogehalt Input with Monthly\/Yearly toggle -->\n          <div>\n            <div class=\"flex items-center justify-between mb-1.5\">\n              <label for=\"grossSalary\" class=\"text-sm font-semibold text-slate-700\" data-i18n=\"grossSalaryLabel\">Bruttolohn<\/label>\n              <div class=\"flex items-center space-x-1 bg-slate-100 p-0.5 rounded-lg text-xs font-medium\">\n                <button type=\"button\" id=\"periodMonth\" class=\"px-2 py-1 rounded bg-white shadow-xs font-semibold text-emerald-700 transition\" data-i18n=\"perMonth\">Monat<\/button>\n                <button type=\"button\" id=\"periodYear\" class=\"px-2 py-1 rounded text-slate-600 hover:text-slate-900 transition\" data-i18n=\"perYear\">Jahr<\/button>\n              <\/div>\n            <\/div>\n            <div class=\"relative rounded-xl shadow-xs\">\n              <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5\">\n                <span class=\"text-slate-400 font-semibold text-sm\">\u20ac<\/span>\n              <\/div>\n              <input type=\"number\" id=\"grossSalary\" step=\"50\" min=\"0\" value=\"4500\" class=\"block w-full rounded-xl border-slate-200 pl-8 pr-12 py-2.5 text-base font-semibold text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-slate-50\/50 hover:bg-white transition\" placeholder=\"z. B. 4.500\">\n              <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3\">\n                <span id=\"periodLabel\" class=\"text-xs font-medium text-slate-400\">\/ Monat<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Steuerklasse Selector with Tooltip -->\n          <div>\n            <div class=\"flex items-center justify-between mb-1.5\">\n              <label for=\"taxClass\" class=\"text-sm font-semibold text-slate-700 flex items-center space-x-1\">\n                <span data-i18n=\"taxClassLabel\">Steuerklasse<\/span>\n                <!-- Tooltip trigger -->\n                <div class=\"relative inline-block tooltip-container\">\n                  <i data-lucide=\"info\" class=\"w-3.5 h-3.5 text-slate-400 hover:text-slate-600 cursor-pointer\"><\/i>\n                  <div class=\"tooltip-content absolute left-1\/2 -translate-x-1\/2 bottom-full mb-2 hidden w-64 p-2.5 bg-slate-900 text-white text-xs rounded-xl shadow-xl z-50 pointer-events-none transition opacity-0 transform -translate-y-1\">\n                    <p class=\"font-bold border-b border-slate-700 pb-1 mb-1\">Steuerklassen \u00dcbersicht:<\/p>\n                    <ul class=\"space-y-0.5 text-[11px] text-slate-300\">\n                      <li><strong>I:<\/strong> Ledig, kinderlos oder geschieden<\/li>\n                      <li><strong>II:<\/strong> Alleinerziehend (mit Entlastungsbetrag)<\/li>\n                      <li><strong>III:<\/strong> Verheiratet (h\u00f6heres Einkommen)<\/li>\n                      <li><strong>IV:<\/strong> Verheiratet (beide etwa gleiches Einkommen)<\/li>\n                      <li><strong>V:<\/strong> Verheiratet (Partner hat Steuerklasse III)<\/li>\n                      <li><strong>VI:<\/strong> Zweit- oder Nebenjob<\/li>\n                    <\/ul>\n                  <\/div>\n                <\/div>\n              <\/label>\n              <span id=\"taxClassDescription\" class=\"text-xs text-slate-500 truncate max-w-[180px]\">Ledig \/ Single<\/span>\n            <\/div>\n            <select id=\"taxClass\" class=\"block w-full rounded-xl border-slate-200 py-2.5 px-3 text-sm font-medium text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-slate-50\/50 hover:bg-white transition\">\n              <option value=\"1\" selected>Steuerklasse I (Ledig, alleinstehend)<\/option>\n              <option value=\"2\">Steuerklasse II (Alleinerziehend)<\/option>\n              <option value=\"3\">Steuerklasse III (Verheiratet &#8211; Allein-\/Hauptverdiener)<\/option>\n              <option value=\"4\">Steuerklasse IV (Verheiratet &#8211; Partner mit ca. gleichem Gehalt)<\/option>\n              <option value=\"5\">Steuerklasse V (Verheiratet &#8211; Partner in Klasse III)<\/option>\n              <option value=\"6\">Steuerklasse VI (Zweitjob \/ Mehrfachbesch\u00e4ftigung)<\/option>\n            <\/select>\n          <\/div>\n\n          <!-- Bundesland Selector (Church tax variation) -->\n          <div>\n            <label for=\"stateSelect\" class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"stateLabel\">Bundesland<\/label>\n            <select id=\"stateSelect\" class=\"block w-full rounded-xl border-slate-200 py-2.5 px-3 text-sm font-medium text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-slate-50\/50 hover:bg-white transition\">\n              <option value=\"BW\">Baden-W\u00fcrttemberg (8% Kirchensteuer)<\/option>\n              <option value=\"BY\">Bayern (8% Kirchensteuer)<\/option>\n              <option value=\"BE\">Berlin (9% Kirchensteuer)<\/option>\n              <option value=\"BB\">Brandenburg (9% Kirchensteuer)<\/option>\n              <option value=\"HB\">Bremen (9% Kirchensteuer)<\/option>\n              <option value=\"HH\">Hamburg (9% Kirchensteuer)<\/option>\n              <option value=\"HE\">Hessen (9% Kirchensteuer)<\/option>\n              <option value=\"MV\">Mecklenburg-Vorpommern (9% Kirchensteuer)<\/option>\n              <option value=\"NI\" selected>Niedersachsen (9% Kirchensteuer)<\/option>\n              <option value=\"NW\">Nordrhein-Westfalen (9% Kirchensteuer)<\/option>\n              <option value=\"RP\">Rheinland-Pfalz (9% Kirchensteuer)<\/option>\n              <option value=\"SL\">Saarland (9% Kirchensteuer)<\/option>\n              <option value=\"SN\">Sachsen (9% Kirchensteuer)<\/option>\n              <option value=\"ST\">Sachsen-Anhalt (9% Kirchensteuer)<\/option>\n              <option value=\"SH\">Schleswig-Holstein (9% Kirchensteuer)<\/option>\n              <option value=\"TH\">Th\u00fcringen (9% Kirchensteuer)<\/option>\n            <\/select>\n          <\/div>\n\n          <!-- Kirchensteuerpflicht & Kinderfreibetrag (Grid) -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            <!-- Church tax toggle -->\n            <div>\n              <label class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"churchTaxLabel\">Kirchensteuerpflichtig?<\/label>\n              <div class=\"grid grid-cols-2 gap-1.5 p-1 bg-slate-100 rounded-xl\">\n                <button type=\"button\" id=\"churchTaxNo\" class=\"py-1.5 text-xs font-semibold rounded-lg bg-white shadow-xs text-slate-800 transition\" data-i18n=\"no\">Nein<\/button>\n                <button type=\"button\" id=\"churchTaxYes\" class=\"py-1.5 text-xs font-semibold rounded-lg text-slate-500 hover:text-slate-800 transition\" data-i18n=\"yes\">Ja<\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Number of children \/ Kinderfreibetrag -->\n            <div>\n              <label for=\"childrenCount\" class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"childrenLabel\">Kinderanzahl<\/label>\n              <select id=\"childrenCount\" class=\"block w-full rounded-xl border-slate-200 py-2.5 px-3 text-sm font-medium text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-slate-50\/50 hover:bg-white transition\">\n                <option value=\"0\" selected>0 Kinder (Kinderlos)<\/option>\n                <option value=\"0.5\">0.5 Kind<\/option>\n                <option value=\"1\">1 Kind<\/option>\n                <option value=\"1.5\">1.5 Kinder<\/option>\n                <option value=\"2\">2 Kinder<\/option>\n                <option value=\"3\">3 Kinder<\/option>\n                <option value=\"4\">4 Kinder<\/option>\n                <option value=\"5\">5+ Kinder<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <!-- Age \/ Alter (Care Insurance childless surcharge) -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            <div>\n              <label for=\"birthAge\" class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"ageLabel\">Alter<\/label>\n              <input type=\"number\" id=\"birthAge\" value=\"32\" min=\"15\" max=\"100\" class=\"block w-full rounded-xl border-slate-200 py-2.5 px-3 text-sm font-medium text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-slate-50\/50 hover:bg-white transition\">\n              <span class=\"text-[11px] text-slate-400 mt-1 block\" data-i18n=\"ageHint\">Ab 23 J. kinderlos +0,60% PV<\/span>\n            <\/div>\n            <!-- Health Insurance Option -->\n            <div>\n              <label for=\"healthInsType\" class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"healthInsLabel\">Krankenversicherung<\/label>\n              <select id=\"healthInsType\" class=\"block w-full rounded-xl border-slate-200 py-2.5 px-3 text-sm font-medium text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-slate-50\/50 hover:bg-white transition\">\n                <option value=\"gesetzlich\" selected>Gesetzlich (GKV)<\/option>\n                <option value=\"privat\">Privat versichert (PKV)<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <!-- GKV Zusatzbeitrag (shown when Gesetzlich is active) -->\n          <div id=\"gkvDetailBox\" class=\"p-3.5 bg-slate-50 rounded-xl border border-slate-200\/60 space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-slate-600 font-medium\" data-i18n=\"zusatzLabel\">Krankenkassen-Zusatzbeitrag<\/span>\n              <span id=\"zusatzDisplay\" class=\"font-bold text-slate-800\">1.70%<\/span>\n            <\/div>\n            <input type=\"range\" id=\"zusatzSlider\" min=\"0.0\" max=\"3.5\" step=\"0.1\" value=\"1.7\" class=\"w-full accent-emerald-600 h-1.5 bg-slate-200 rounded-lg cursor-pointer\">\n            <div class=\"flex justify-between text-[10px] text-slate-400\">\n              <span>0.0%<\/span>\n              <span class=\"text-emerald-700 font-semibold\" data-i18n=\"avgZusatz\">\u00d8 1.7% \/ 2.2%<\/span>\n              <span>3.5%<\/span>\n            <\/div>\n          <\/div>\n\n          <!-- PKV monthly contribution (hidden by default) -->\n          <div id=\"pkvDetailBox\" class=\"p-3.5 bg-slate-50 rounded-xl border border-slate-200\/60 hidden space-y-2\">\n            <label for=\"pkvAmount\" class=\"block text-xs font-semibold text-slate-700\" data-i18n=\"pkvCostLabel\">Eigener PKV-Monatsbeitrag (\u20ac)<\/label>\n            <input type=\"number\" id=\"pkvAmount\" value=\"450\" min=\"0\" class=\"block w-full rounded-lg border-slate-200 py-2 px-3 text-sm font-medium text-slate-900 focus:border-emerald-500 focus:ring-emerald-500 bg-white\">\n            <span class=\"text-[11px] text-slate-400 block\" data-i18n=\"pkvHint\">Inklusive privater Pflege-Pflichtversicherung<\/span>\n          <\/div>\n\n        <\/div>\n\n        <!-- SECTION 2: FREELANCER \/ SELF EMPLOYED FORM -->\n        <div id=\"selfEmployedFormSection\" class=\"bg-white rounded-2xl border border-slate-200\/80 shadow-sm p-5 sm:p-6 space-y-5 hidden\">\n          <div class=\"flex items-center justify-between border-b border-slate-100 pb-3\">\n            <h2 class=\"text-base font-bold text-slate-900 flex items-center space-x-2\">\n              <span class=\"w-2 h-2 rounded-full bg-sky-500\"><\/span>\n              <span data-i18n=\"freelancerFormTitle\">Einkommen &#038; Tarif (\u00a7 32a EStG)<\/span>\n            <\/h2>\n            <span class=\"text-xs text-slate-400 font-mono\">Tarif 2025\/2026<\/span>\n          <\/div>\n\n          <!-- Freelancer input mode selector -->\n          <div class=\"grid grid-cols-2 gap-1.5 p-1 bg-slate-100 rounded-xl text-xs font-semibold\">\n            <button type=\"button\" id=\"freelancerModeDirect\" class=\"py-2 rounded-lg bg-white shadow-xs text-slate-800 transition\" data-i18n=\"directZve\">Zu versteuerndes Einkommen (zvE)<\/button>\n            <button type=\"button\" id=\"freelancerModeProfit\" class=\"py-2 rounded-lg text-slate-500 hover:text-slate-800 transition\" data-i18n=\"calcProfit\">Einnahmen &#8211; Ausgaben<\/button>\n          <\/div>\n\n          <!-- Option A: Direct zvE -->\n          <div id=\"directZveContainer\">\n            <label for=\"freelancerZve\" class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"zveLabel\">Zu versteuerndes Einkommen (zvE) im Jahr<\/label>\n            <div class=\"relative rounded-xl shadow-xs\">\n              <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5\">\n                <span class=\"text-slate-400 font-semibold text-sm\">\u20ac<\/span>\n              <\/div>\n              <input type=\"number\" id=\"freelancerZve\" step=\"500\" min=\"0\" value=\"55000\" class=\"block w-full rounded-xl border-slate-200 pl-8 pr-12 py-2.5 text-base font-semibold text-slate-900 focus:border-sky-500 focus:ring-sky-500 bg-slate-50\/50 hover:bg-white transition\" placeholder=\"z. B. 55.000\">\n              <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3\">\n                <span class=\"text-xs font-medium text-slate-400\">\/ Jahr<\/span>\n              <\/div>\n            <\/div>\n            <p class=\"text-[11px] text-slate-400 mt-1.5\" data-i18n=\"zveHint\">Eink\u00fcnfte abz\u00fcglich Sonderausgaben, Vorsorgeaufwendungen und Freibetr\u00e4ge.<\/p>\n          <\/div>\n\n          <!-- Option B: Revenue - Expenses -->\n          <div id=\"profitCalcContainer\" class=\"hidden space-y-3 p-3.5 bg-slate-50 rounded-xl border border-slate-200\">\n            <div>\n              <label for=\"freelancerRev\" class=\"block text-xs font-semibold text-slate-700 mb-1\" data-i18n=\"revLabel\">Jahresumsatz \/ Einnahmen (\u20ac)<\/label>\n              <input type=\"number\" id=\"freelancerRev\" value=\"85000\" class=\"block w-full rounded-lg border-slate-200 py-2 px-3 text-sm font-medium text-slate-900 bg-white\">\n            <\/div>\n            <div>\n              <label for=\"freelancerExp\" class=\"block text-xs font-semibold text-slate-700 mb-1\" data-i18n=\"expLabel\">Betriebsausgaben (\u20ac)<\/label>\n              <input type=\"number\" id=\"freelancerExp\" value=\"25000\" class=\"block w-full rounded-lg border-slate-200 py-2 px-3 text-sm font-medium text-slate-900 bg-white\">\n            <\/div>\n            <div class=\"flex justify-between items-center pt-2 border-t border-slate-200 text-xs font-medium text-slate-600\">\n              <span data-i18n=\"approxProfit\">Gewinn (vor Vorsorgeaufwendungen):<\/span>\n              <span id=\"calculatedProfitDisplay\" class=\"font-bold text-slate-900\">60.000 \u20ac<\/span>\n            <\/div>\n          <\/div>\n\n          <!-- Splitting-Tarif Toggle -->\n          <div>\n            <label class=\"block text-sm font-semibold text-slate-700 mb-1.5\" data-i18n=\"veranlagungLabel\">Veranlagungsart<\/label>\n            <div class=\"grid grid-cols-2 gap-1.5 p-1 bg-slate-100 rounded-xl text-xs font-semibold\">\n              <button type=\"button\" id=\"tariffGrund\" class=\"py-2 rounded-lg bg-white shadow-xs text-slate-800 transition\" data-i18n=\"tariffGrundBtn\">Grundtarif (Einzelveranlagung)<\/button>\n              <button type=\"button\" id=\"tariffSplitting\" class=\"py-2 rounded-lg text-slate-500 hover:text-slate-800 transition\" data-i18n=\"tariffSplittingBtn\">Splittingtarif (Verheiratet)<\/button>\n            <\/div>\n            <p class=\"text-[11px] text-slate-400 mt-1\" data-i18n=\"splittingHint\">Das Ehegattensplitting halbiert das gemeinsame zvE f\u00fcr die Tarifformel und verdoppelt die Steuer.<\/p>\n          <\/div>\n\n          <!-- Freelancer Church Tax -->\n          <div>\n            <div class=\"flex items-center justify-between mb-1.5\">\n              <label class=\"text-sm font-semibold text-slate-700\" data-i18n=\"churchTaxLabel\">Kirchensteuerpflichtig?<\/label>\n              <select id=\"freelancerChurchState\" class=\"text-xs border-slate-200 rounded-lg py-1 px-2 bg-slate-50 text-slate-700\">\n                <option value=\"9\">9% (Standard)<\/option>\n                <option value=\"8\">8% (BY \/ BW)<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"grid grid-cols-2 gap-1.5 p-1 bg-slate-100 rounded-xl\">\n              <button type=\"button\" id=\"freelancerChurchNo\" class=\"py-1.5 text-xs font-semibold rounded-lg bg-white shadow-xs text-slate-800 transition\" data-i18n=\"no\">Nein<\/button>\n              <button type=\"button\" id=\"freelancerChurchYes\" class=\"py-1.5 text-xs font-semibold rounded-lg text-slate-500 hover:text-slate-800 transition\" data-i18n=\"yes\">Ja<\/button>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <!-- Quick Info Box -->\n        <div class=\"bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl p-4 text-white text-xs space-y-2 shadow-lg shadow-slate-900\/10\">\n          <div class=\"flex items-center space-x-2 text-emerald-400 font-semibold\">\n            <i data-lucide=\"shield-check\" class=\"w-4 h-4\"><\/i>\n            <span data-i18n=\"infoFormulaTitle\">Berechnungsgrundlagen nach EStG<\/span>\n          <\/div>\n          <p class=\"text-slate-300 leading-relaxed\" data-i18n=\"infoFormulaDesc\">\n            Ber\u00fccksichtigt den aktuellen Grundfreibetrag (11.784 \u20ac bzw. 12.096 \u20ac), die Gleitzonen des \u00a7 32a EStG, Solidarit\u00e4tszuschlag-Freigrenzen sowie Beitragsbemessungsgrenzen (BBG) der Renten- &#038; Krankenversicherung.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n      <!-- RIGHT COLUMN: RESULTS & VISUALIZATIONS -->\n      <div class=\"lg:col-span-7 space-y-6\">\n        \n        <!-- MAIN RESULT HERO CARD -->\n        <div class=\"bg-gradient-to-br from-emerald-700 via-teal-700 to-slate-900 rounded-3xl p-6 sm:p-8 text-white shadow-xl shadow-emerald-950\/20 relative overflow-hidden\">\n          <!-- Background decorative accents -->\n          <div class=\"absolute -right-10 -bottom-10 w-56 h-56 bg-emerald-500\/20 rounded-full blur-3xl pointer-events-none\"><\/div>\n          <div class=\"absolute -left-10 -top-10 w-56 h-56 bg-sky-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n          \n          <div class=\"relative z-10\">\n            <div class=\"flex items-center justify-between mb-4\">\n              <span id=\"heroBadge\" class=\"px-3 py-1 bg-white\/10 backdrop-blur-md rounded-full text-xs font-semibold tracking-wide text-emerald-200 border border-white\/10\" data-i18n=\"heroBadgeEmp\">\n                Nettolohn-Auszahlung\n              <\/span>\n              <div class=\"flex items-center space-x-2 text-xs text-emerald-200\/90\">\n                <i data-lucide=\"clock\" class=\"w-3.5 h-3.5\"><\/i>\n                <span data-i18n=\"liveCalculated\">Echtzeit berechnet<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- Big Main Metric -->\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6 items-end pb-4 border-b border-white\/10\">\n              <div>\n                <p class=\"text-xs uppercase font-medium tracking-wider text-emerald-200\/80 mb-1\" id=\"mainMetricLabel\" data-i18n=\"netMonth\">Monatliches Netto<\/p>\n                <div class=\"flex items-baseline space-x-1\">\n                  <span id=\"heroPrimaryValue\" class=\"text-3xl sm:text-4xl font-extrabold tracking-tight\">2.842,50<\/span>\n                  <span class=\"text-xl sm:text-2xl font-bold text-emerald-300\">\u20ac<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"sm:text-right\">\n                <p class=\"text-xs uppercase font-medium tracking-wider text-emerald-200\/80 mb-1\" id=\"secondaryMetricLabel\" data-i18n=\"netYear\">J\u00e4hrliches Netto<\/p>\n                <div class=\"flex items-baseline sm:justify-end space-x-1\">\n                  <span id=\"heroSecondaryValue\" class=\"text-xl sm:text-2xl font-bold text-slate-100\">34.110,00<\/span>\n                  <span class=\"text-base sm:text-lg font-semibold text-emerald-300\">\u20ac<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Mini Indicators -->\n            <div class=\"grid grid-cols-3 gap-2 sm:gap-4 pt-4 text-center\">\n              <div class=\"bg-black\/20 backdrop-blur-sm p-2 sm:p-3 rounded-2xl border border-white\/5\">\n                <span class=\"text-[10px] sm:text-xs text-emerald-200\/70 block\" data-i18n=\"taxRateTotal\">Steuerabzug<\/span>\n                <span id=\"statTaxes\" class=\"text-sm sm:text-base font-bold text-white\">18.4%<\/span>\n              <\/div>\n              <div class=\"bg-black\/20 backdrop-blur-sm p-2 sm:p-3 rounded-2xl border border-white\/5\">\n                <span class=\"text-[10px] sm:text-xs text-emerald-200\/70 block\" id=\"stat2Label\" data-i18n=\"socialRateTotal\">Sozialabgaben<\/span>\n                <span id=\"statSocial\" class=\"text-sm sm:text-base font-bold text-white\">20.8%<\/span>\n              <\/div>\n              <div class=\"bg-black\/20 backdrop-blur-sm p-2 sm:p-3 rounded-2xl border border-white\/5\">\n                <span class=\"text-[10px] sm:text-xs text-emerald-200\/70 block\" id=\"stat3Label\" data-i18n=\"netQuote\">Nettoquote<\/span>\n                <span id=\"statNetQuote\" class=\"text-sm sm:text-base font-bold text-emerald-300\">60.8%<\/span>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n        <!-- VISUAL CHART & BREAKDOWN -->\n        <div class=\"bg-white rounded-2xl border border-slate-200\/80 shadow-sm p-6 space-y-6\">\n          <div class=\"flex items-center justify-between\">\n            <h3 class=\"text-base font-bold text-slate-900 flex items-center space-x-2\">\n              <i data-lucide=\"pie-chart\" class=\"w-4 h-4 text-emerald-600\"><\/i>\n              <span data-i18n=\"breakdownTitle\">Zusammensetzung &#038; Verteilung<\/span>\n            <\/h3>\n            <span class=\"text-xs text-slate-400 font-medium\" data-i18n=\"distributionLegend\">Grafische \u00dcbersicht<\/span>\n          <\/div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-12 gap-6 items-center\">\n            <!-- Donut Canvas -->\n            <div class=\"md:col-span-5 flex justify-center relative\">\n              <div class=\"w-44 h-44 sm:w-48 sm:h-48 relative\">\n                <canvas id=\"taxDonutChart\"><\/canvas>\n                <!-- Centered inner label -->\n                <div class=\"absolute inset-0 flex flex-col items-center justify-center pointer-events-none\">\n                  <span class=\"text-[11px] font-semibold text-slate-400 uppercase tracking-wider\" data-i18n=\"chartNet\">Netto<\/span>\n                  <span id=\"chartCenterPercent\" class=\"text-xl font-extrabold text-slate-800\">60.8%<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Legend items with dynamic values -->\n            <div class=\"md:col-span-7 space-y-3\">\n              <!-- Item 1: Netto -->\n              <div class=\"flex items-center justify-between p-2.5 rounded-xl bg-slate-50 border border-slate-100\">\n                <div class=\"flex items-center space-x-3\">\n                  <span class=\"w-3.5 h-3.5 rounded-md bg-emerald-500 shrink-0\"><\/span>\n                  <span class=\"text-xs font-semibold text-slate-700\" data-i18n=\"chartNetLabel\">Netto Auszahlung<\/span>\n                <\/div>\n                <div class=\"text-right\">\n                  <span id=\"chartLegendNet\" class=\"text-xs font-bold text-slate-900\">2.842,50 \u20ac<\/span>\n                  <span id=\"chartLegendNetPerc\" class=\"text-[10px] text-slate-400 block\">60.8%<\/span>\n                <\/div>\n              <\/div>\n\n              <!-- Item 2: Steuern -->\n              <div class=\"flex items-center justify-between p-2.5 rounded-xl bg-slate-50 border border-slate-100\">\n                <div class=\"flex items-center space-x-3\">\n                  <span class=\"w-3.5 h-3.5 rounded-md bg-rose-500 shrink-0\"><\/span>\n                  <span class=\"text-xs font-semibold text-slate-700\" data-i18n=\"chartTaxesLabel\">Steuern (Lohnst. \/ Soli \/ Kirch.)<\/span>\n                <\/div>\n                <div class=\"text-right\">\n                  <span id=\"chartLegendTax\" class=\"text-xs font-bold text-slate-900\">720,10 \u20ac<\/span>\n                  <span id=\"chartLegendTaxPerc\" class=\"text-[10px] text-slate-400 block\">18.4%<\/span>\n                <\/div>\n              <\/div>\n\n              <!-- Item 3: Sozialabgaben -->\n              <div id=\"chartSocialLegendBox\" class=\"flex items-center justify-between p-2.5 rounded-xl bg-slate-50 border border-slate-100\">\n                <div class=\"flex items-center space-x-3\">\n                  <span class=\"w-3.5 h-3.5 rounded-md bg-sky-500 shrink-0\"><\/span>\n                  <span class=\"text-xs font-semibold text-slate-700\" data-i18n=\"chartSocialLabel\">Sozialabgaben (AN-Anteil)<\/span>\n                <\/div>\n                <div class=\"text-right\">\n                  <span id=\"chartLegendSocial\" class=\"text-xs font-bold text-slate-900\">937,40 \u20ac<\/span>\n                  <span id=\"chartLegendSocialPerc\" class=\"text-[10px] text-slate-400 block\">20.8%<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- DETAILED TABULAR BREAKDOWN -->\n        <div class=\"bg-white rounded-2xl border border-slate-200\/80 shadow-sm overflow-hidden print-shadow-none\">\n          <div class=\"px-6 py-4 border-b border-slate-100 flex items-center justify-between\">\n            <h3 class=\"text-sm font-bold text-slate-900 flex items-center space-x-2\">\n              <i data-lucide=\"receipt\" class=\"w-4 h-4 text-emerald-600\"><\/i>\n              <span data-i18n=\"tableTitle\">Detaillierte Abrechnungs\u00fcbersicht<\/span>\n            <\/h3>\n            <span class=\"text-xs text-slate-500\" data-i18n=\"tableSubtitle\">Monat \/ Jahr Vergleich<\/span>\n          <\/div>\n\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full text-left text-xs\">\n              <thead class=\"bg-slate-50 border-b border-slate-100 text-slate-500 uppercase tracking-wider font-semibold\">\n                <tr>\n                  <th scope=\"col\" class=\"py-3 px-4\" data-i18n=\"thPosition\">Position<\/th>\n                  <th scope=\"col\" class=\"py-3 px-4 text-right\" data-i18n=\"thMonth\">Monatlich<\/th>\n                  <th scope=\"col\" class=\"py-3 px-4 text-right\" data-i18n=\"thYear\">J\u00e4hrlich<\/th>\n                  <th scope=\"col\" class=\"py-3 px-4 text-right\" data-i18n=\"thPercent\">Anteil<\/th>\n                <\/tr>\n              <\/thead>\n              <tbody id=\"detailedTableBody\" class=\"divide-y divide-slate-100 text-slate-700\">\n                <!-- Dynamically injected rows -->\n              <\/tbody>\n            <\/table>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n    <!-- LEGAL DISCLAIMER -->\n    <div class=\"mt-8 p-4 rounded-xl bg-slate-100\/80 border border-slate-200 text-slate-500 text-[11px] leading-relaxed\">\n      <div class=\"flex items-start space-x-2\">\n        <i data-lucide=\"alert-circle\" class=\"w-4 h-4 text-slate-400 shrink-0 mt-0.5\"><\/i>\n        <div>\n          <span class=\"font-semibold text-slate-700\" data-i18n=\"disclaimerTitle\">Rechtlicher Hinweis &#038; Haftungsausschluss:<\/span>\n          <span data-i18n=\"disclaimerBody\">\n            Dieser Steuer- und Gehaltsrechner auf srabons.de dient unverbindlichen Informations- und Orientierungszwecken nach geltendem deutschem Steuer- und Sozialversicherungsrecht (\u00a7 32a EStG, SGB IV\/V\/VI\/XI). Die Berechnung ersetzt keine individuelle Steuerberatung im Sinne des Steuerberatungsgesetzes (StBerG). F\u00fcr die Richtigkeit, Vollst\u00e4ndigkeit und Aktualit\u00e4t wird keine Gew\u00e4hr \u00fcbernommen.\n          <\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/main>\n\n  <!-- Embed Code Modal -->\n  <div id=\"embedModal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-xs z-50 flex items-center justify-center p-4 hidden\">\n    <div class=\"bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 space-y-4\">\n      <div class=\"flex items-center justify-between border-b border-slate-100 pb-3\">\n        <h3 class=\"text-base font-bold text-slate-900 flex items-center space-x-2\">\n          <i data-lucide=\"code\" class=\"w-4 h-4 text-emerald-600\"><\/i>\n          <span data-i18n=\"embedModalTitle\">Widget auf srabons.de einbetten<\/span>\n        <\/h3>\n        <button id=\"closeEmbedModalBtn\" class=\"text-slate-400 hover:text-slate-600 p-1\">\n          <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n        <\/button>\n      <\/div>\n\n      <p class=\"text-xs text-slate-600 leading-relaxed\" data-i18n=\"embedModalDesc\">\n        Kopieren Sie diesen HTML-Code, um den Steuerrechner responsiv auf srabons.de oder anderen Unterseiten einzubinden:\n      <\/p>\n\n      <div class=\"relative\">\n        <textarea id=\"embedCodeText\" readonly rows=\"4\" class=\"w-full text-xs font-mono bg-slate-900 text-emerald-400 p-3 rounded-xl border border-slate-800 focus:outline-none resize-none selection:bg-emerald-600 selection:text-white\">&lt;iframe src=&#8221;https:\/\/srabons.de\/tools\/steuer-rechner&#8221; width=&#8221;100%&#8221; height=&#8221;820&#8243; style=&#8221;border:none;border-radius:16px;box-shadow:0 10px 25px -5px rgba(0,0,0,0.08);&#8221; title=&#8221;srabons.de Steuerrechner&#8221;&gt;&lt;\/iframe&gt;<\/textarea>\n        <button id=\"copyEmbedBtn\" class=\"absolute top-2 right-2 px-2.5 py-1 text-xs font-medium rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white shadow transition flex items-center space-x-1\">\n          <i data-lucide=\"copy\" class=\"w-3.5 h-3.5\"><\/i>\n          <span data-i18n=\"copyBtn\">Kopieren<\/span>\n        <\/button>\n      <\/div>\n\n      <div class=\"flex justify-end pt-2\">\n        <button id=\"embedDoneBtn\" class=\"px-4 py-2 text-xs font-semibold rounded-xl bg-slate-100 text-slate-700 hover:bg-slate-200 transition\">\n          Schlie\u00dfen\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Footer -->\n  <footer class=\"no-print bg-white border-t border-slate-200 mt-12 py-6\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-3\">\n      <div>\n        \u00a9 2026 <strong class=\"text-slate-700 font-semibold\">srabons.de<\/strong> \u2014 Alle Rechte vorbehalten.\n      <\/div>\n      <div class=\"flex items-center space-x-6\">\n        <span class=\"flex items-center space-x-1 text-slate-400\">\n          <i data-lucide=\"lock\" class=\"w-3.5 h-3.5\"><\/i>\n          <span data-i18n=\"clientSideOnly\">100% Client-Side (Keine Daten\u00fcbertragung)<\/span>\n        <\/span>\n        <a href=\"#top\" class=\"hover:text-emerald-600 transition flex items-center space-x-1\">\n          <span data-i18n=\"backToTop\">Nach oben<\/span>\n          <i data-lucide=\"arrow-up\" class=\"w-3 h-3\"><\/i>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- SCRIPT: APPLICATION LOGIC & TAX ALGORITHMS -->\n  <script>\n    \/* =====================================================================\n       I18N TRANSLATION STRINGS\n       ===================================================================== *\/\n    const i18n = {\n      de: {\n        tagline: \"Pr\u00e4ziser Brutto-Netto- & Einkommensteuerrechner f\u00fcr Deutschland\",\n        embedBtn: \"Einbetten\",\n        printBtn: \"Drucken \/ PDF\",\n        tabEmployee: \"Angestellte (Brutto-Netto)\",\n        tabSelfEmployed: \"Selbstst\u00e4ndige (\u00a7 32a EStG)\",\n        empFormTitle: \"Eckdaten des Gehalts\",\n        grossSalaryLabel: \"Bruttolohn\",\n        perMonth: \"Monat\",\n        perYear: \"Jahr\",\n        taxClassLabel: \"Steuerklasse\",\n        stateLabel: \"Bundesland\",\n        churchTaxLabel: \"Kirchensteuerpflichtig?\",\n        childrenLabel: \"Kinderanzahl\",\n        ageLabel: \"Alter\",\n        ageHint: \"Ab 23 J. kinderlos +0,60% PV\",\n        healthInsLabel: \"Krankenversicherung\",\n        zusatzLabel: \"Krankenkassen-Zusatzbeitrag\",\n        avgZusatz: \"\u00d8 1.7% \/ 2.2%\",\n        pkvCostLabel: \"Eigener PKV-Monatsbeitrag (\u20ac)\",\n        pkvHint: \"Inklusive privater Pflege-Pflichtversicherung\",\n        freelancerFormTitle: \"Einkommen & Tarif (\u00a7 32a EStG)\",\n        directZve: \"Zu versteuerndes Einkommen (zvE)\",\n        calcProfit: \"Einnahmen - Ausgaben\",\n        zveLabel: \"Zu versteuerndes Einkommen (zvE) im Jahr\",\n        zveHint: \"Eink\u00fcnfte abz\u00fcglich Sonderausgaben, Vorsorgeaufwendungen und Freibetr\u00e4ge.\",\n        revLabel: \"Jahresumsatz \/ Einnahmen (\u20ac)\",\n        expLabel: \"Betriebsausgaben (\u20ac)\",\n        approxProfit: \"Gewinn (vor Vorsorgeaufwendungen):\",\n        veranlagungLabel: \"Veranlagungsart\",\n        tariffGrundBtn: \"Grundtarif (Einzelveranlagung)\",\n        tariffSplittingBtn: \"Splittingtarif (Verheiratet)\",\n        splittingHint: \"Das Ehegattensplitting halbiert das gemeinsame zvE f\u00fcr die Tarifformel und verdoppelt die Steuer.\",\n        heroBadgeEmp: \"Nettolohn-Auszahlung\",\n        heroBadgeFree: \"Steuerlast & Nettoeinkommen\",\n        liveCalculated: \"Echtzeit berechnet\",\n        netMonth: \"Monatliches Netto\",\n        netYear: \"J\u00e4hrliches Netto\",\n        taxRateTotal: \"Steuerabzug\",\n        socialRateTotal: \"Sozialabgaben\",\n        netQuote: \"Nettoquote\",\n        marginalTaxRate: \"Grenzsteuersatz\",\n        effectiveTaxRate: \"Durchschnittssteuersatz\",\n        breakdownTitle: \"Zusammensetzung & Verteilung\",\n        distributionLegend: \"Grafische \u00dcbersicht\",\n        chartNet: \"Netto\",\n        chartNetLabel: \"Netto Auszahlung\",\n        chartTaxesLabel: \"Steuern (Lohnst. \/ Soli \/ Kirch.)\",\n        chartSocialLabel: \"Sozialabgaben (AN-Anteil)\",\n        tableTitle: \"Detaillierte Abrechnungs\u00fcbersicht\",\n        tableSubtitle: \"Monat \/ Jahr Vergleich\",\n        thPosition: \"Position\",\n        thMonth: \"Monatlich\",\n        thYear: \"J\u00e4hrlich\",\n        thPercent: \"Anteil\",\n        embedModalTitle: \"Widget auf srabons.de einbetten\",\n        embedModalDesc: \"Kopieren Sie diesen HTML-Code, um den Steuerrechner responsiv auf srabons.de oder anderen Unterseiten einzubinden:\",\n        copyBtn: \"Kopieren\",\n        copiedBtn: \"Kopiert!\",\n        clientSideOnly: \"100% Client-Side (Keine Daten\u00fcbertragung)\",\n        backToTop: \"Nach oben\",\n        disclaimerTitle: \"Rechtlicher Hinweis & Haftungsausschluss:\",\n        disclaimerBody: \"Dieser Steuer- und Gehaltsrechner auf srabons.de dient unverbindlichen Informations- und Orientierungszwecken nach geltendem deutschem Steuer- und Sozialversicherungsrecht (\u00a7 32a EStG, SGB IV\/V\/VI\/XI). Die Berechnung ersetzt keine individuelle Steuerberatung im Sinne des Steuerberatungsgesetzes (StBerG). F\u00fcr die Richtigkeit, Vollst\u00e4ndigkeit und Aktualit\u00e4t wird keine Gew\u00e4hr \u00fcbernommen.\",\n        yes: \"Ja\",\n        no: \"Nein\",\n        \/\/ Table line items\n        grossPayRow: \"Bruttogehalt\",\n        incomeTaxRow: \"Lohnsteuer \/ Einkommensteuer\",\n        soliRow: \"Solidarit\u00e4tszuschlag\",\n        churchTaxRow: \"Kirchensteuer\",\n        pensionInsRow: \"Rentenversicherung (9,30%)\",\n        unempInsRow: \"Arbeitslosenversicherung (1,30%)\",\n        healthInsRow: \"Krankenversicherung (AN-Anteil)\",\n        careInsRow: \"Pflegeversicherung (AN-Anteil)\",\n        totalTaxesRow: \"Summe Steuern\",\n        totalSocialRow: \"Summe Sozialabgaben\",\n        finalNetRow: \"Nettogehalt \/ Auszahlung\"\n      },\n      en: {\n        tagline: \"Accurate Gross-Net & Income Tax Calculator for Germany\",\n        embedBtn: \"Embed\",\n        printBtn: \"Print \/ PDF\",\n        tabEmployee: \"Employees (Gross-Net)\",\n        tabSelfEmployed: \"Self-Employed \/ Freelance (\u00a7 32a EStG)\",\n        empFormTitle: \"Salary Parameters\",\n        grossSalaryLabel: \"Gross Salary\",\n        perMonth: \"Month\",\n        perYear: \"Year\",\n        taxClassLabel: \"Tax Class (Steuerklasse)\",\n        stateLabel: \"Federal State (Bundesland)\",\n        churchTaxLabel: \"Church Tax Obligation?\",\n        childrenLabel: \"Number of Children\",\n        ageLabel: \"Age\",\n        ageHint: \"Age 23+ childless pays +0.60% care ins.\",\n        healthInsLabel: \"Health Insurance\",\n        zusatzLabel: \"Additional Health Ins. Surcharge\",\n        avgZusatz: \"Avg. 1.7% \/ 2.2%\",\n        pkvCostLabel: \"Private Health Ins. Premium (\u20ac\/mo)\",\n        pkvHint: \"Includes compulsory long-term care insurance\",\n        freelancerFormTitle: \"Taxable Income & Tariff (\u00a7 32a EStG)\",\n        directZve: \"Taxable Income (zvE)\",\n        calcProfit: \"Revenue - Expenses\",\n        zveLabel: \"Annual Taxable Income (zvE)\",\n        zveHint: \"Net profit after deductions, insurance expenses and allowances.\",\n        revLabel: \"Annual Revenue (\u20ac)\",\n        expLabel: \"Business Expenses (\u20ac)\",\n        approxProfit: \"Profit (before insurance deductions):\",\n        veranlagungLabel: \"Assessment Type\",\n        tariffGrundBtn: \"Basic Tariff (Single)\",\n        tariffSplittingBtn: \"Splitting Tariff (Married)\",\n        splittingHint: \"Spouse splitting halves common taxable income in the formula and doubles the tax result.\",\n        heroBadgeEmp: \"Net Pay After Taxes & Social Deductions\",\n        heroBadgeFree: \"Tax Liability & Net Income\",\n        liveCalculated: \"Live Calculated\",\n        netMonth: \"Monthly Net\",\n        netYear: \"Annual Net\",\n        taxRateTotal: \"Tax Share\",\n        socialRateTotal: \"Social Insurance\",\n        netQuote: \"Net Retention\",\n        marginalTaxRate: \"Marginal Rate\",\n        effectiveTaxRate: \"Effective Rate\",\n        breakdownTitle: \"Composition & Distribution\",\n        distributionLegend: \"Visual Breakdown\",\n        chartNet: \"Net\",\n        chartNetLabel: \"Net Take-Home Pay\",\n        chartTaxesLabel: \"Taxes (Income \/ Soli \/ Church)\",\n        chartSocialLabel: \"Social Security (Employee)\",\n        tableTitle: \"Detailed Deduction Overview\",\n        tableSubtitle: \"Monthly \/ Annual Comparison\",\n        thPosition: \"Position\",\n        thMonth: \"Monthly\",\n        thYear: \"Annual\",\n        thPercent: \"Share\",\n        embedModalTitle: \"Embed Widget on srabons.de\",\n        embedModalDesc: \"Copy this HTML code to embed the responsive tax calculator on srabons.de or any website:\",\n        copyBtn: \"Copy Code\",\n        copiedBtn: \"Copied!\",\n        clientSideOnly: \"100% Client-Side (No data leaves your device)\",\n        backToTop: \"Back to top\",\n        disclaimerTitle: \"Legal Disclaimer:\",\n        disclaimerBody: \"This tax and salary calculation tool on srabons.de is provided for non-binding informational and orientation purposes under German tax law (\u00a7 32a EStG, SGB). It does not constitute official tax advice under the German Tax Advisory Act (StBerG). No liability is assumed for calculation completeness or accuracy.\",\n        yes: \"Yes\",\n        no: \"No\",\n        grossPayRow: \"Gross Salary\",\n        incomeTaxRow: \"Income Tax (Lohnsteuer)\",\n        soliRow: \"Solidarity Surcharge (Soli)\",\n        churchTaxRow: \"Church Tax (Kirchensteuer)\",\n        pensionInsRow: \"Pension Insurance (9.30%)\",\n        unempInsRow: \"Unemployment Ins. (1.30%)\",\n        healthInsRow: \"Health Insurance (Employee)\",\n        careInsRow: \"Care Insurance (Employee)\",\n        totalTaxesRow: \"Total Taxes\",\n        totalSocialRow: \"Total Social Security\",\n        finalNetRow: \"Net Take-Home Pay\"\n      }\n    };\n\n    let currentLang = 'de';\n    let currentMode = 'employee'; \/\/ 'employee' or 'self_employed'\n    let salaryPeriod = 'month'; \/\/ 'month' or 'year'\n    let churchTaxEnabled = false;\n    let freelancerChurchTax = false;\n    let freelancerAssessment = 'grund'; \/\/ 'grund' or 'splitting'\n    let freelancerCalcMode = 'zve'; \/\/ 'zve' or 'profit'\n    let donutChart = null;\n\n    \/* =====================================================================\n       GERMAN INCOME TAX TARIFF FORMULA (\u00a7 32a EStG 2025\/2026 parameters)\n       ===================================================================== *\/\n    function calculateEStG32a(zve) {\n      if (zve <= 0) return 0;\n      \n      \/\/ Basic personal allowance (Grundfreibetrag)\n      const GF = 11784; \/\/ 2024\/2025 base (11,784\u20ac \/ 12,096\u20ac)\n      \n      if (zve <= GF) {\n        return 0;\n      }\n      \n      let tax = 0;\n      if (zve <= 17005) {\n        \/\/ Zone 2\n        const y = (zve - GF) \/ 10000;\n        tax = (995.21 * y + 1400) * y;\n      } else if (zve <= 66760) {\n        \/\/ Zone 3\n        const z = (zve - 17005) \/ 10000;\n        tax = (208.85 * z + 2397) * z + 1015.67;\n      } else if (zve <= 277825) {\n        \/\/ Zone 4: 42%\n        tax = 0.42 * zve - 10636.31;\n      } else {\n        \/\/ Zone 5: 45% (Reichensteuer)\n        tax = 0.45 * zve - 18971.06;\n      }\n      \n      return Math.max(0, Math.floor(tax));\n    }\n\n    \/\/ Marginal tax rate (Grenzsteuersatz) calculation\n    function getMarginalTaxRate(zve) {\n      if (zve <= 11784) return 0;\n      if (zve <= 17005) {\n        const y = (zve - 11784) \/ 10000;\n        return (14.0 + (2 * 9.9521 * y)) \/ 100;\n      }\n      if (zve <= 66760) {\n        const z = (zve - 17005) \/ 10000;\n        return (23.97 + (2 * 2.0885 * z)) \/ 100;\n      }\n      if (zve <= 277825) {\n        return 0.42;\n      }\n      return 0.45;\n    }\n\n    \/* =====================================================================\n       EMPLOYEE TAX &#038; SOCIAL SECURITY ENGINE\n       ===================================================================== *\/\n    function calculateEmployee(params) {\n      const grossYear = params.period === 'month' ? params.gross * 12 : params.gross;\n      const grossMonth = grossYear \/ 12;\n\n      \/\/ 1. Social Security contribution ceilings (BBG 2025\/2026)\n      \/\/ BBG KV\/PV: 5.175 \u20ac\/mo (62.100 \u20ac\/yr)\n      \/\/ BBG RV\/AV: 7.550 \u20ac\/mo (90.600 \u20ac\/yr)\n      const bbgKV = 62100;\n      const bbgRV = 90600;\n\n      const assessableKV_year = Math.min(grossYear, bbgKV);\n      const assessableRV_year = Math.min(grossYear, bbgRV);\n\n      \/\/ Social security rates (employee share):\n      \/\/ Rentenversicherung: 9.30%\n      const rvYear = assessableRV_year * 0.093;\n\n      \/\/ Arbeitslosenversicherung: 1.30%\n      const avYear = assessableRV_year * 0.013;\n\n      \/\/ Krankenversicherung:\n      let kvYear = 0;\n      let pvYear = 0;\n\n      if (params.healthType === 'gesetzlich') {\n        \/\/ 7.3% base + half of supplementary contribution (Zusatzbeitrag)\n        const halfZusatz = (params.zusatz \/ 100) \/ 2;\n        const employeeKvRate = 0.073 + halfZusatz;\n        kvYear = assessableKV_year * employeeKvRate;\n\n        \/\/ Pflegeversicherung (Employee share):\n        \/\/ Base employee share: 2.2%\n        \/\/ Childless surcharge: +0.60% if age >= 23 and 0 children\n        \/\/ Child discount: -0.25% per child from 2nd to 5th child\n        let employeePvRate = 0.022; \/\/ 2.2% base\n\n        if (params.children === 0 && params.age >= 23) {\n          employeePvRate += 0.006; \/\/ +0.60% surcharge\n        } else if (params.children >= 2) {\n          const discountKids = Math.min(params.children, 5) - 1;\n          employeePvRate = Math.max(0.012, employeePvRate - (discountKids * 0.0025));\n        }\n\n        pvYear = assessableKV_year * employeePvRate;\n      } else {\n        \/\/ Private Insurance\n        kvYear = (params.pkvMonthly * 0.75) * 12; \/\/ estimated pure KV portion\n        pvYear = (params.pkvMonthly * 0.25) * 12; \/\/ estimated PV portion\n      }\n\n      const totalSocialYear = rvYear + avYear + kvYear + pvYear;\n\n      \/\/ 2. Income Tax Approximation (Lohnsteuer based on Tax Class)\n      \/\/ Standard employee deductions:\n      \/\/ - Arbeitnehmer-Pauschbetrag: 1.230 \u20ac\n      \/\/ - Sonderausgaben-Pauschbetrag: 36 \u20ac\n      \/\/ - Vorsorgeaufwendungen (tax deductible pension + basic health insurance)\n      const werbungskosten = 1230;\n      const sonderausgaben = 36;\n      const deductibleVorsorge = Math.min(grossYear * 0.18, rvYear + (kvYear * 0.96) + pvYear);\n\n      let zveEst = Math.max(0, grossYear - werbungskosten - sonderausgaben - deductibleVorsorge);\n\n      \/\/ Adjustments based on Steuerklasse\n      let rawIncomeTax = 0;\n      switch (params.taxClass) {\n        case 1: \/\/ Single\n          rawIncomeTax = calculateEStG32a(zveEst);\n          break;\n        case 2: \/\/ Single parent (Entlastungsbetrag f\u00fcr Alleinerziehende ~4.260 \u20ac)\n          zveEst = Math.max(0, zveEst - 4260);\n          rawIncomeTax = calculateEStG32a(zveEst);\n          break;\n        case 3: \/\/ Married high earner (Splitting formula applied with doubled personal allowances)\n          rawIncomeTax = calculateEStG32a(zveEst \/ 2) * 2;\n          \/\/ Substantial reduction for class 3\n          rawIncomeTax = Math.floor(rawIncomeTax * 0.65);\n          break;\n        case 4: \/\/ Married equal earners (same as class 1)\n          rawIncomeTax = calculateEStG32a(zveEst);\n          break;\n        case 5: \/\/ Married lower earner (compensates class 3, higher rate)\n          rawIncomeTax = Math.floor(calculateEStG32a(zveEst) * 1.55);\n          break;\n        case 6: \/\/ Second job (No basic allowance \/ Grundfreibetrag)\n          rawIncomeTax = Math.floor(calculateEStG32a(zveEst + 11784) * 1.15);\n          break;\n        default:\n          rawIncomeTax = calculateEStG32a(zveEst);\n      }\n\n      \/\/ 3. Solidarit\u00e4tszuschlag (Soli)\n      \/\/ Exemption threshold: 18.130 \u20ac single (36.260 \u20ac married)\n      const soliExemption = params.taxClass === 3 ? 36260 : 18130;\n      let soliYear = 0;\n      if (rawIncomeTax > soliExemption) {\n        \/\/ Gleitzone transition\n        const excess = rawIncomeTax - soliExemption;\n        soliYear = Math.min(rawIncomeTax * 0.055, excess * 0.119);\n      }\n\n      \/\/ 4. Kirchensteuer\n      let churchYear = 0;\n      if (params.churchTax) {\n        \/\/ 8% in Bayern\/Baden-W\u00fcrttemberg, 9% in other states\n        const churchRate = (params.state === 'BY' || params.state === 'BW') ? 0.08 : 0.09;\n        \n        \/\/ Children relief for church tax (Kinderfreibetrag reduces taxable base)\n        const kinderfreibetragTotal = params.children * 9540;\n        const churchZve = Math.max(0, zveEst - kinderfreibetragTotal);\n        const churchBaseTax = calculateEStG32a(churchZve);\n\n        churchYear = Math.max(0, churchBaseTax * churchRate);\n      }\n\n      const totalTaxYear = rawIncomeTax + soliYear + churchYear;\n      const netYear = Math.max(0, grossYear - totalTaxYear - totalSocialYear);\n\n      return {\n        gross: { month: grossMonth, year: grossYear },\n        incomeTax: { month: rawIncomeTax \/ 12, year: rawIncomeTax },\n        soli: { month: soliYear \/ 12, year: soliYear },\n        church: { month: churchYear \/ 12, year: churchYear },\n        totalTax: { month: totalTaxYear \/ 12, year: totalTaxYear },\n        pension: { month: rvYear \/ 12, year: rvYear },\n        unemployment: { month: avYear \/ 12, year: avYear },\n        health: { month: kvYear \/ 12, year: kvYear },\n        care: { month: pvYear \/ 12, year: pvYear },\n        totalSocial: { month: totalSocialYear \/ 12, year: totalSocialYear },\n        net: { month: netYear \/ 12, year: netYear }\n      };\n    }\n\n    \/* =====================================================================\n       FREELANCER \/ \u00a7 32a EStG ENGINE\n       ===================================================================== *\/\n    function calculateFreelancer(params) {\n      let zveYear = params.zve;\n      if (params.calcMode === 'profit') {\n        const profit = Math.max(0, params.revenue - params.expenses);\n        \/\/ Deduct rough average health & pension Vorsorgepauschale (~15%)\n        zveYear = Math.max(0, profit * 0.85);\n      }\n\n      let taxYear = 0;\n      if (params.tariff === 'splitting') {\n        \/\/ Ehegattensplitting: Halve zvE, apply formula, double tax\n        taxYear = calculateEStG32a(zveYear \/ 2) * 2;\n      } else {\n        taxYear = calculateEStG32a(zveYear);\n      }\n\n      \/\/ Soli\n      const soliExemption = params.tariff === 'splitting' ? 36260 : 18130;\n      let soliYear = 0;\n      if (taxYear > soliExemption) {\n        const excess = taxYear - soliExemption;\n        soliYear = Math.min(taxYear * 0.055, excess * 0.119);\n      }\n\n      \/\/ Church tax\n      let churchYear = 0;\n      if (params.churchTax) {\n        churchYear = taxYear * (params.churchRate \/ 100);\n      }\n\n      const totalTaxYear = taxYear + soliYear + churchYear;\n      const netYear = Math.max(0, zveYear - totalTaxYear);\n\n      \/\/ Marginal and effective tax rates\n      const marginalRate = getMarginalTaxRate(params.tariff === 'splitting' ? zveYear \/ 2 : zveYear);\n      const effectiveRate = zveYear > 0 ? (totalTaxYear \/ zveYear) : 0;\n\n      return {\n        gross: { month: zveYear \/ 12, year: zveYear },\n        incomeTax: { month: taxYear \/ 12, year: taxYear },\n        soli: { month: soliYear \/ 12, year: soliYear },\n        church: { month: churchYear \/ 12, year: churchYear },\n        totalTax: { month: totalTaxYear \/ 12, year: totalTaxYear },\n        net: { month: netYear \/ 12, year: netYear },\n        marginalRate: (marginalRate * 100).toFixed(1) + '%',\n        effectiveRate: (effectiveRate * 100).toFixed(1) + '%'\n      };\n    }\n\n    \/* =====================================================================\n       FORMATTING HELPERS\n       ===================================================================== *\/\n    function formatCurrency(val) {\n      return (Number(val) || 0).toLocaleString(currentLang === 'de' ? 'de-DE' : 'en-US', {\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2\n      });\n    }\n\n    function formatPercent(val) {\n      return (Number(val) || 0).toLocaleString(currentLang === 'de' ? 'de-DE' : 'en-US', {\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1\n      }) + '%';\n    }\n\n    \/* =====================================================================\n       CHART RENDERING (DONUT)\n       ===================================================================== *\/\n    function initChart() {\n      const ctx = document.getElementById('taxDonutChart').getContext('2d');\n      donutChart = new Chart(ctx, {\n        type: 'doughnut',\n        data: {\n          labels: ['Netto', 'Steuern', 'Sozialabgaben'],\n          datasets: [{\n            data: [60, 20, 20],\n            backgroundColor: ['#10b981', '#f43f5e', '#38bdf8'],\n            hoverBackgroundColor: ['#059669', '#e11d48', '#0284c7'],\n            borderWidth: 0,\n            hoverOffset: 6\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          cutout: '76%',\n          plugins: {\n            legend: { display: false },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return ` ${context.label}: ${context.raw.toFixed(1)}%`;\n                }\n              }\n            }\n          },\n          animation: {\n            duration: 600,\n            easing: 'easeOutQuart'\n          }\n        }\n      });\n    }\n\n    function updateChart(netPerc, taxPerc, socialPerc) {\n      if (!donutChart) return;\n      if (currentMode === 'self_employed') {\n        donutChart.data.labels = [\n          i18n[currentLang].chartNet,\n          i18n[currentLang].chartTaxesLabel\n        ];\n        donutChart.data.datasets[0].data = [netPerc, taxPerc];\n        donutChart.data.datasets[0].backgroundColor = ['#10b981', '#f43f5e'];\n      } else {\n        donutChart.data.labels = [\n          i18n[currentLang].chartNet,\n          i18n[currentLang].chartTaxesLabel,\n          i18n[currentLang].chartSocialLabel\n        ];\n        donutChart.data.datasets[0].data = [netPerc, taxPerc, socialPerc];\n        donutChart.data.datasets[0].backgroundColor = ['#10b981', '#f43f5e', '#38bdf8'];\n      }\n      donutChart.update();\n      document.getElementById('chartCenterPercent').innerText = netPerc.toFixed(1) + '%';\n    }\n\n    \/* =====================================================================\n       DOM REFRESH & CALCULATION CONTROLLER\n       ===================================================================== *\/\n    function recalculate() {\n      const t = i18n[currentLang];\n\n      if (currentMode === 'employee') {\n        \/\/ Collect Employee inputs\n        const grossInput = parseFloat(document.getElementById('grossSalary').value) || 0;\n        const taxClass = parseInt(document.getElementById('taxClass').value, 10);\n        const state = document.getElementById('stateSelect').value;\n        const children = parseFloat(document.getElementById('childrenCount').value) || 0;\n        const age = parseInt(document.getElementById('birthAge').value, 10) || 30;\n        const healthType = document.getElementById('healthInsType').value;\n        const zusatz = parseFloat(document.getElementById('zusatzSlider').value) || 1.7;\n        const pkvMonthly = parseFloat(document.getElementById('pkvAmount').value) || 0;\n\n        const res = calculateEmployee({\n          gross: grossInput,\n          period: salaryPeriod,\n          taxClass,\n          state,\n          children,\n          age,\n          healthType,\n          zusatz,\n          pkvMonthly,\n          churchTax: churchTaxEnabled\n        });\n\n        \/\/ Update Hero Card\n        document.getElementById('heroBadge').innerText = t.heroBadgeEmp;\n        document.getElementById('mainMetricLabel').innerText = t.netMonth;\n        document.getElementById('heroPrimaryValue').innerText = formatCurrency(res.net.month);\n        document.getElementById('secondaryMetricLabel').innerText = t.netYear;\n        document.getElementById('heroSecondaryValue').innerText = formatCurrency(res.net.year);\n\n        const totalGrossYear = res.gross.year || 1;\n        const taxPerc = (res.totalTax.year \/ totalGrossYear) * 100;\n        const socialPerc = (res.totalSocial.year \/ totalGrossYear) * 100;\n        const netPerc = (res.net.year \/ totalGrossYear) * 100;\n\n        document.getElementById('statTaxes').innerText = formatPercent(taxPerc);\n        document.getElementById('stat2Label').innerText = t.socialRateTotal;\n        document.getElementById('statSocial').innerText = formatPercent(socialPerc);\n        document.getElementById('stat3Label').innerText = t.netQuote;\n        document.getElementById('statNetQuote').innerText = formatPercent(netPerc);\n\n        \/\/ Update Chart & Legend\n        document.getElementById('chartSocialLegendBox').classList.remove('hidden');\n        document.getElementById('chartLegendNet').innerText = formatCurrency(res.net.month) + ' \u20ac';\n        document.getElementById('chartLegendNetPerc').innerText = formatPercent(netPerc);\n        document.getElementById('chartLegendTax').innerText = formatCurrency(res.totalTax.month) + ' \u20ac';\n        document.getElementById('chartLegendTaxPerc').innerText = formatPercent(taxPerc);\n        document.getElementById('chartLegendSocial').innerText = formatCurrency(res.totalSocial.month) + ' \u20ac';\n        document.getElementById('chartLegendSocialPerc').innerText = formatPercent(socialPerc);\n\n        updateChart(netPerc, taxPerc, socialPerc);\n\n        \/\/ Update Detailed Table\n        renderDetailedTable([\n          { label: t.grossPayRow, month: res.gross.month, year: res.gross.year, isHeader: true, perc: 100 },\n          { label: `\u2022 ${t.incomeTaxRow}`, month: -res.incomeTax.month, year: -res.incomeTax.year, perc: (res.incomeTax.year \/ totalGrossYear) * 100 },\n          { label: `\u2022 ${t.soliRow}`, month: -res.soli.month, year: -res.soli.year, perc: (res.soli.year \/ totalGrossYear) * 100 },\n          { label: `\u2022 ${t.churchTaxRow}`, month: -res.church.month, year: -res.church.year, perc: (res.church.year \/ totalGrossYear) * 100 },\n          { label: t.totalTaxesRow, month: -res.totalTax.month, year: -res.totalTax.year, isSubtotal: true, perc: taxPerc },\n          { label: `\u2022 ${t.pensionInsRow}`, month: -res.pension.month, year: -res.pension.year, perc: (res.pension.year \/ totalGrossYear) * 100 },\n          { label: `\u2022 ${t.unempInsRow}`, month: -res.unemployment.month, year: -res.unemployment.year, perc: (res.unemployment.year \/ totalGrossYear) * 100 },\n          { label: `\u2022 ${t.healthInsRow}`, month: -res.health.month, year: -res.health.year, perc: (res.health.year \/ totalGrossYear) * 100 },\n          { label: `\u2022 ${t.careInsRow}`, month: -res.care.month, year: -res.care.year, perc: (res.care.year \/ totalGrossYear) * 100 },\n          { label: t.totalSocialRow, month: -res.totalSocial.month, year: -res.totalSocial.year, isSubtotal: true, perc: socialPerc },\n          { label: t.finalNetRow, month: res.net.month, year: res.net.year, isHighlight: true, perc: netPerc }\n        ]);\n\n      } else {\n        \/\/ Collect Freelancer inputs\n        const zveInput = parseFloat(document.getElementById('freelancerZve').value) || 0;\n        const rev = parseFloat(document.getElementById('freelancerRev').value) || 0;\n        const exp = parseFloat(document.getElementById('freelancerExp').value) || 0;\n        const churchRate = parseFloat(document.getElementById('freelancerChurchState').value) || 9;\n\n        const res = calculateFreelancer({\n          calcMode: freelancerCalcMode,\n          zve: zveInput,\n          revenue: rev,\n          expenses: exp,\n          tariff: freelancerAssessment,\n          churchTax: freelancerChurchTax,\n          churchRate\n        });\n\n        \/\/ Update Profit Display\n        const calculatedProfit = Math.max(0, rev - exp);\n        document.getElementById('calculatedProfitDisplay').innerText = formatCurrency(calculatedProfit) + ' \u20ac';\n\n        \/\/ Update Hero Card\n        document.getElementById('heroBadge').innerText = t.heroBadgeFree;\n        document.getElementById('mainMetricLabel').innerText = t.netMonth;\n        document.getElementById('heroPrimaryValue').innerText = formatCurrency(res.net.month);\n        document.getElementById('secondaryMetricLabel').innerText = t.netYear;\n        document.getElementById('heroSecondaryValue').innerText = formatCurrency(res.net.year);\n\n        const totalBase = res.gross.year || 1;\n        const taxPerc = (res.totalTax.year \/ totalBase) * 100;\n        const netPerc = (res.net.year \/ totalBase) * 100;\n\n        document.getElementById('statTaxes').innerText = res.effectiveRate;\n        document.getElementById('stat2Label').innerText = t.marginalTaxRate;\n        document.getElementById('statSocial').innerText = res.marginalRate;\n        document.getElementById('stat3Label').innerText = t.netQuote;\n        document.getElementById('statNetQuote').innerText = formatPercent(netPerc);\n\n        \/\/ Update Chart & Legend\n        document.getElementById('chartSocialLegendBox').classList.add('hidden');\n        document.getElementById('chartLegendNet').innerText = formatCurrency(res.net.month) + ' \u20ac';\n        document.getElementById('chartLegendNetPerc').innerText = formatPercent(netPerc);\n        document.getElementById('chartLegendTax').innerText = formatCurrency(res.totalTax.month) + ' \u20ac';\n        document.getElementById('chartLegendTaxPerc').innerText = formatPercent(taxPerc);\n\n        updateChart(netPerc, taxPerc, 0);\n\n        \/\/ Update Detailed Table\n        renderDetailedTable([\n          { label: t.zveLabel, month: res.gross.month, year: res.gross.year, isHeader: true, perc: 100 },\n          { label: `\u2022 ${t.incomeTaxRow}`, month: -res.incomeTax.month, year: -res.incomeTax.year, perc: (res.incomeTax.year \/ totalBase) * 100 },\n          { label: `\u2022 ${t.soliRow}`, month: -res.soli.month, year: -res.soli.year, perc: (res.soli.year \/ totalBase) * 100 },\n          { label: `\u2022 ${t.churchTaxRow}`, month: -res.church.month, year: -res.church.year, perc: (res.church.year \/ totalBase) * 100 },\n          { label: t.totalTaxesRow, month: -res.totalTax.month, year: -res.totalTax.year, isSubtotal: true, perc: taxPerc },\n          { label: t.finalNetRow, month: res.net.month, year: res.net.year, isHighlight: true, perc: netPerc }\n        ]);\n      }\n    }\n\n    function renderDetailedTable(rows) {\n      const tbody = document.getElementById('detailedTableBody');\n      tbody.innerHTML = '';\n\n      rows.forEach(r => {\n        const tr = document.createElement('tr');\n        \n        let rowClass = 'hover:bg-slate-50\/80 transition';\n        let textStyle = 'text-slate-700';\n\n        if (r.isHeader) {\n          rowClass = 'bg-slate-100\/60 font-bold border-b border-slate-200 text-slate-900';\n        } else if (r.isSubtotal) {\n          rowClass = 'bg-slate-50 font-semibold border-t border-slate-200 text-rose-700';\n        } else if (r.isHighlight) {\n          rowClass = 'bg-emerald-50\/70 font-extrabold border-t-2 border-emerald-500 text-emerald-900 text-sm';\n        }\n\n        tr.className = rowClass;\n\n        const monthFormatted = formatCurrency(r.month) + ' \u20ac';\n        const yearFormatted = formatCurrency(r.year) + ' \u20ac';\n        const percFormatted = (r.perc ? r.perc.toFixed(1) + '%' : '\u2014');\n\n        tr.innerHTML = `\n          <td class=\"py-2.5 px-4 ${r.isHighlight ? 'font-bold' : ''}\">${r.label}<\/td>\n          <td class=\"py-2.5 px-4 text-right font-mono\">${monthFormatted}<\/td>\n          <td class=\"py-2.5 px-4 text-right font-mono\">${yearFormatted}<\/td>\n          <td class=\"py-2.5 px-4 text-right text-slate-400 font-mono text-[11px]\">${percFormatted}<\/td>\n        `;\n        tbody.appendChild(tr);\n      });\n    }\n\n    \/* =====================================================================\n       I18N LANGUAGE SWITCHER\n       ===================================================================== *\/\n    function setLanguage(lang) {\n      currentLang = lang;\n      const t = i18n[lang];\n\n      \/\/ Update button styling\n      if (lang === 'de') {\n        document.getElementById('langDe').className = \"px-2.5 py-1 rounded-md transition font-semibold text-white bg-emerald-600 shadow-sm\";\n        document.getElementById('langEn').className = \"px-2.5 py-1 rounded-md transition text-slate-600 hover:text-slate-900\";\n      } else {\n        document.getElementById('langEn').className = \"px-2.5 py-1 rounded-md transition font-semibold text-white bg-emerald-600 shadow-sm\";\n        document.getElementById('langDe').className = \"px-2.5 py-1 rounded-md transition text-slate-600 hover:text-slate-900\";\n      }\n\n      \/\/ Update static text elements\n      document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.getAttribute('data-i18n');\n        if (t[key]) {\n          el.innerText = t[key];\n        }\n      });\n\n      \/\/ Update dynamic tooltips & labels\n      updatePeriodLabel();\n      recalculate();\n    }\n\n    function updatePeriodLabel() {\n      const pLabel = document.getElementById('periodLabel');\n      if (salaryPeriod === 'month') {\n        pLabel.innerText = currentLang === 'de' ? '\/ Monat' : '\/ Month';\n      } else {\n        pLabel.innerText = currentLang === 'de' ? '\/ Jahr' : '\/ Year';\n      }\n    }\n\n    \/* =====================================================================\n       MODE SWITCHER (ANGESCHTELLTE \/ FREELANCER)\n       ===================================================================== *\/\n    function setMode(mode) {\n      currentMode = mode;\n      const empSec = document.getElementById('employeeFormSection');\n      const freeSec = document.getElementById('selfEmployedFormSection');\n      const tabEmp = document.getElementById('tabEmployee');\n      const tabFree = document.getElementById('tabSelfEmployed');\n      const modeSelect = document.getElementById('mode-select');\n\n      if (mode === 'employee') {\n        empSec.classList.remove('hidden');\n        freeSec.classList.add('hidden');\n        tabEmp.className = \"flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-xl text-sm font-semibold transition bg-white text-emerald-700 shadow-sm\";\n        tabFree.className = \"flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-xl text-sm font-semibold transition text-slate-600 hover:text-slate-900\";\n        modeSelect.value = 'employee';\n      } else {\n        empSec.classList.add('hidden');\n        freeSec.classList.remove('hidden');\n        tabFree.className = \"flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-xl text-sm font-semibold transition bg-white text-sky-700 shadow-sm\";\n        tabEmp.className = \"flex-1 flex items-center justify-center space-x-2 py-2 px-4 rounded-xl text-sm font-semibold transition text-slate-600 hover:text-slate-900\";\n        modeSelect.value = 'self_employed';\n      }\n      recalculate();\n    }\n\n    \/* =====================================================================\n       EVENT LISTENERS & BINDINGS\n       ===================================================================== *\/\n    document.addEventListener('DOMContentLoaded', function () {\n      lucide.createIcons();\n      initChart();\n\n      \/\/ Lang Toggles\n      document.getElementById('langDe').addEventListener('click', () => setLanguage('de'));\n      document.getElementById('langEn').addEventListener('click', () => setLanguage('en'));\n\n      \/\/ Mode Toggles (Tabs & Mobile Select)\n      document.getElementById('tabEmployee').addEventListener('click', () => setMode('employee'));\n      document.getElementById('tabSelfEmployed').addEventListener('click', () => setMode('self_employed'));\n      document.getElementById('mode-select').addEventListener('change', (e) => setMode(e.target.value));\n\n      \/\/ Month\/Year Toggle\n      const periodMonthBtn = document.getElementById('periodMonth');\n      const periodYearBtn = document.getElementById('periodYear');\n      const grossInput = document.getElementById('grossSalary');\n\n      periodMonthBtn.addEventListener('click', () => {\n        if (salaryPeriod === 'year') {\n          salaryPeriod = 'month';\n          periodMonthBtn.className = \"px-2 py-1 rounded bg-white shadow-xs font-semibold text-emerald-700 transition\";\n          periodYearBtn.className = \"px-2 py-1 rounded text-slate-600 hover:text-slate-900 transition\";\n          grossInput.value = Math.round(parseFloat(grossInput.value || 0) \/ 12);\n          updatePeriodLabel();\n          recalculate();\n        }\n      });\n\n      periodYearBtn.addEventListener('click', () => {\n        if (salaryPeriod === 'month') {\n          salaryPeriod = 'year';\n          periodYearBtn.className = \"px-2 py-1 rounded bg-white shadow-xs font-semibold text-emerald-700 transition\";\n          periodMonthBtn.className = \"px-2 py-1 rounded text-slate-600 hover:text-slate-900 transition\";\n          grossInput.value = Math.round(parseFloat(grossInput.value || 0) * 12);\n          updatePeriodLabel();\n          recalculate();\n        }\n      });\n\n      \/\/ Tax Class Quick Description\n      const taxClassSelect = document.getElementById('taxClass');\n      const taxClassDesc = document.getElementById('taxClassDescription');\n      const classDescriptions = {\n        '1': 'Ledig \/ Single',\n        '2': 'Alleinerziehend',\n        '3': 'Verheiratet (Hauptverdiener)',\n        '4': 'Verheiratet (Gleiches Gehalt)',\n        '5': 'Verheiratet (Zweitverdiener)',\n        '6': 'Zweit- \/ Nebenjob'\n      };\n      taxClassSelect.addEventListener('change', (e) => {\n        taxClassDesc.innerText = classDescriptions[e.target.value] || '';\n        recalculate();\n      });\n\n      \/\/ Church Tax Toggle (Employee)\n      const churchNoBtn = document.getElementById('churchTaxNo');\n      const churchYesBtn = document.getElementById('churchTaxYes');\n      churchNoBtn.addEventListener('click', () => {\n        churchTaxEnabled = false;\n        churchNoBtn.className = \"py-1.5 text-xs font-semibold rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        churchYesBtn.className = \"py-1.5 text-xs font-semibold rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        recalculate();\n      });\n      churchYesBtn.addEventListener('click', () => {\n        churchTaxEnabled = true;\n        churchYesBtn.className = \"py-1.5 text-xs font-semibold rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        churchNoBtn.className = \"py-1.5 text-xs font-semibold rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        recalculate();\n      });\n\n      \/\/ Health Insurance Type Toggle\n      const healthTypeSelect = document.getElementById('healthInsType');\n      const gkvBox = document.getElementById('gkvDetailBox');\n      const pkvBox = document.getElementById('pkvDetailBox');\n      healthTypeSelect.addEventListener('change', (e) => {\n        if (e.target.value === 'gesetzlich') {\n          gkvBox.classList.remove('hidden');\n          pkvBox.classList.add('hidden');\n        } else {\n          gkvBox.classList.add('hidden');\n          pkvBox.classList.remove('hidden');\n        }\n        recalculate();\n      });\n\n      \/\/ GKV Zusatzbeitrag Slider\n      const zusatzSlider = document.getElementById('zusatzSlider');\n      const zusatzDisplay = document.getElementById('zusatzDisplay');\n      zusatzSlider.addEventListener('input', (e) => {\n        zusatzDisplay.innerText = parseFloat(e.target.value).toFixed(2) + '%';\n        recalculate();\n      });\n\n      \/\/ Freelancer Mode Toggle (Direct zvE vs Profit Calc)\n      const modeDirectBtn = document.getElementById('freelancerModeDirect');\n      const modeProfitBtn = document.getElementById('freelancerModeProfit');\n      const directContainer = document.getElementById('directZveContainer');\n      const profitContainer = document.getElementById('profitCalcContainer');\n\n      modeDirectBtn.addEventListener('click', () => {\n        freelancerCalcMode = 'zve';\n        modeDirectBtn.className = \"py-2 rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        modeProfitBtn.className = \"py-2 rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        directContainer.classList.remove('hidden');\n        profitContainer.classList.add('hidden');\n        recalculate();\n      });\n\n      modeProfitBtn.addEventListener('click', () => {\n        freelancerCalcMode = 'profit';\n        modeProfitBtn.className = \"py-2 rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        modeDirectBtn.className = \"py-2 rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        directContainer.classList.add('hidden');\n        profitContainer.classList.remove('hidden');\n        recalculate();\n      });\n\n      \/\/ Tariff Grund vs Splitting\n      const tariffGrundBtn = document.getElementById('tariffGrund');\n      const tariffSplittingBtn = document.getElementById('tariffSplitting');\n      tariffGrundBtn.addEventListener('click', () => {\n        freelancerAssessment = 'grund';\n        tariffGrundBtn.className = \"py-2 rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        tariffSplittingBtn.className = \"py-2 rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        recalculate();\n      });\n\n      tariffSplittingBtn.addEventListener('click', () => {\n        freelancerAssessment = 'splitting';\n        tariffSplittingBtn.className = \"py-2 rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        tariffGrundBtn.className = \"py-2 rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        recalculate();\n      });\n\n      \/\/ Freelancer Church Tax Toggle\n      const fChurchNoBtn = document.getElementById('freelancerChurchNo');\n      const fChurchYesBtn = document.getElementById('freelancerChurchYes');\n      fChurchNoBtn.addEventListener('click', () => {\n        freelancerChurchTax = false;\n        fChurchNoBtn.className = \"py-1.5 text-xs font-semibold rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        fChurchYesBtn.className = \"py-1.5 text-xs font-semibold rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        recalculate();\n      });\n      fChurchYesBtn.addEventListener('click', () => {\n        freelancerChurchTax = true;\n        fChurchYesBtn.className = \"py-1.5 text-xs font-semibold rounded-lg bg-white shadow-xs text-slate-800 transition\";\n        fChurchNoBtn.className = \"py-1.5 text-xs font-semibold rounded-lg text-slate-500 hover:text-slate-800 transition\";\n        recalculate();\n      });\n\n      \/\/ Generic input bindings\n      const inputIds = [\n        'grossSalary', 'taxClass', 'stateSelect', 'childrenCount', \n        'birthAge', 'pkvAmount', 'freelancerZve', 'freelancerRev', \n        'freelancerExp', 'freelancerChurchState'\n      ];\n      inputIds.forEach(id => {\n        const el = document.getElementById(id);\n        if (el) {\n          el.addEventListener('input', recalculate);\n          el.addEventListener('change', recalculate);\n        }\n      });\n\n      \/\/ Embed Modal Control\n      const embedModal = document.getElementById('embedModal');\n      document.getElementById('openEmbedModalBtn').addEventListener('click', () => {\n        embedModal.classList.remove('hidden');\n      });\n      document.getElementById('closeEmbedModalBtn').addEventListener('click', () => {\n        embedModal.classList.add('hidden');\n      });\n      document.getElementById('embedDoneBtn').addEventListener('click', () => {\n        embedModal.classList.add('hidden');\n      });\n\n      \/\/ Copy Embed Snippet\n      const copyBtn = document.getElementById('copyEmbedBtn');\n      copyBtn.addEventListener('click', () => {\n        const textarea = document.getElementById('embedCodeText');\n        textarea.select();\n        navigator.clipboard.writeText(textarea.value).then(() => {\n          copyBtn.innerHTML = `<i data-lucide=\"check\" class=\"w-3.5 h-3.5\"><\/i> <span>${i18n[currentLang].copiedBtn}<\/span>`;\n          lucide.createIcons();\n          setTimeout(() => {\n            copyBtn.innerHTML = `<i data-lucide=\"copy\" class=\"w-3.5 h-3.5\"><\/i> <span>${i18n[currentLang].copyBtn}<\/span>`;\n            lucide.createIcons();\n          }, 2000);\n        });\n      });\n\n      \/\/ Initial calculation\n      recalculate();\n    });\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Deutscher Steuerrechner | srabons.de srabons.de Steuer 2026\/2025 Pr\u00e4ziser Brutto-Netto- &#038; Einkommensteuerrechner f\u00fcr Deutschland Einbetten Drucken \/ PDF DE EN Modus w\u00e4hlen Angestellte (Brutto-Netto Rechner)Selbstst\u00e4ndige \/ Einkommensteuertarif (\u00a7 32a EStG) Angestellte (Brutto-Netto) Selbstst\u00e4ndige (\u00a7 32a EStG) Eckdaten des Gehalts Jahr 2025\/2026 Bruttolohn Monat Jahr \u20ac \/ Monat Steuerklasse Steuerklassen \u00dcbersicht: I: Ledig, kinderlos oder geschieden II: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1018","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":1,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1018\/revisions"}],"predecessor-version":[{"id":1019,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1018\/revisions\/1019"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}