{"id":2173,"date":"2026-06-01T03:07:35","date_gmt":"2026-06-01T03:07:35","guid":{"rendered":"https:\/\/aiper.com\/blogs\/?page_id=2173"},"modified":"2026-06-24T04:23:07","modified_gmt":"2026-06-24T04:23:07","slug":"rasenduenger-rechner","status":"publish","type":"page","link":"https:\/\/aiper.com\/blogs\/de\/rasenduenger-rechner\/","title":{"rendered":"Rasend\u00fcnger-Rechner"},"content":{"rendered":"\n<style>\n    #lawn-calc-container {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n        max-width: 720px;\n        margin: 0 auto;\n        background: #ffffff;\n        border-radius: 16px;\n        padding: 28px 24px 32px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);\n        color: #1a1a2e;\n        line-height: 1.6;\n        box-sizing: border-box;\n    }\n    #lawn-calc-container *,\n    #lawn-calc-container *::before,\n    #lawn-calc-container *::after {\n        box-sizing: border-box;\n    }\n\n    #lawn-calc-container h2 {\n        font-weight: 700;\n        color: #1a1a2e;\n        margin: 0 0 6px;\n        letter-spacing: -0.3px;\n    }\n    #lawn-calc-container .subtitle {\n        font-size: 0.9rem;\n        color: #6b7280;\n        margin: 0 0 24px;\n    }\n\n    #lawn-calc-container .step-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        background: #1ecad3;\n        color: #fff;\n        font-weight: 700;\n        font-size: 0.85rem;\n        flex-shrink: 0;\n    }\n    #lawn-calc-container .step-label {\n        font-weight: 600;\n        font-size: 0.95rem;\n        color: #374151;\n        letter-spacing: -0.2px;\n    }\n\n    #lawn-calc-container .unit-toggle {\n        display: inline-flex;\n        background: #f3f4f6;\n        border-radius: 10px;\n        padding: 3px;\n        gap: 2px;\n    }\n    #lawn-calc-container .unit-toggle button {\n        padding: 8px 18px;\n        border-radius: 8px;\n        border: none;\n        cursor: pointer;\n        font-weight: 600;\n        font-size: 0.875rem;\n        transition: all 0.2s ease;\n        background: transparent;\n        color: #6b7280;\n        white-space: nowrap;\n        font-family: inherit;\n    }\n    #lawn-calc-container .unit-toggle button.active {\n        background: #1ecad3;\n        color: #ffffff;\n        box-shadow: 0 1px 3px rgba(30, 202, 211, 0.35);\n    }\n    #lawn-calc-container .unit-toggle button:not(.active):hover {\n        background: #e5e7eb;\n        color: #374151;\n    }\n\n    #lawn-calc-container input[type=\"number\"] {\n        width: 100%;\n        padding: 11px 14px;\n        border: 2px solid #e5e7eb;\n        border-radius: 10px;\n        font-size: 1rem;\n        font-family: inherit;\n        transition: all 0.2s ease;\n        background: #f9fafb;\n        color: #1a1a2e;\n        -moz-appearance: textfield;\n        appearance: textfield;\n    }\n    #lawn-calc-container input[type=\"number\"]::-webkit-outer-spin-button,\n    #lawn-calc-container input[type=\"number\"]::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n    #lawn-calc-container input[type=\"number\"]:focus {\n        outline: none;\n        border-color: #1ecad3;\n        box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.12);\n        background: #ffffff;\n    }\n    #lawn-calc-container input[type=\"number\"].input-error {\n        border-color: #ef4444;\n        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);\n        background: #fefafa;\n    }\n\n    #lawn-calc-container .npk-input {\n        text-align: center;\n        font-weight: 700;\n        font-size: 1.15rem;\n        letter-spacing: 0.5px;\n    }\n\n    #lawn-calc-container .btn-calculate {\n        background: #1ecad3;\n        color: #ffffff;\n        font-weight: 700;\n        font-size: 1.05rem;\n        padding: 13px 32px;\n        border: none;\n        border-radius: 12px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        letter-spacing: -0.2px;\n        font-family: inherit;\n        box-shadow: 0 2px 8px rgba(30, 202, 211, 0.3);\n    }\n    #lawn-calc-container .btn-calculate:hover {\n        background: #19b0b8;\n        box-shadow: 0 4px 16px rgba(30, 202, 211, 0.4);\n        transform: translateY(-1px);\n    }\n    #lawn-calc-container .btn-calculate:active {\n        transform: translateY(0);\n        box-shadow: 0 1px 4px rgba(30, 202, 211, 0.25);\n    }\n    #lawn-calc-container .btn-reset {\n        background: #ffffff;\n        color: #6b7280;\n        font-weight: 600;\n        font-size: 0.95rem;\n        padding: 12px 28px;\n        border: 2px solid #e5e7eb;\n        border-radius: 12px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-family: inherit;\n    }\n    #lawn-calc-container .btn-reset:hover {\n        background: #f9fafb;\n        border-color: #d1d5db;\n        color: #374151;\n    }\n\n    #lawn-calc-container .helper-toggle {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        color: #1ecad3;\n        font-weight: 600;\n        font-size: 0.875rem;\n        cursor: pointer;\n        background: none;\n        border: none;\n        padding: 6px 0;\n        font-family: inherit;\n        transition: color 0.2s;\n    }\n    #lawn-calc-container .helper-toggle:hover {\n        color: #148a91;\n    }\n    #lawn-calc-container .helper-panel {\n        overflow: hidden;\n        max-height: 0;\n        opacity: 0;\n        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;\n        background: #f9fafb;\n        border-radius: 10px;\n        border: 1px dashed #e5e7eb;\n        padding: 0 16px;\n        margin-top: 0;\n    }\n    #lawn-calc-container .helper-panel.open {\n        max-height: 200px;\n        opacity: 1;\n        padding: 16px;\n        margin-top: 10px;\n    }\n\n    #lawn-calc-container .results-card {\n        overflow: hidden;\n        max-height: 0;\n        opacity: 0;\n        transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;\n        background: #f9fafb;\n        border-radius: 14px;\n        border: 1px solid #e5e7eb;\n        margin-top: 0;\n    }\n    #lawn-calc-container .results-card.visible {\n        max-height: 800px;\n        opacity: 1;\n        margin-top: 24px;\n    }\n    #lawn-calc-container .results-inner {\n        padding: 24px;\n    }\n\n    #lawn-calc-container .nutrient-bar {\n        height: 10px;\n        border-radius: 8px;\n        transition: width 0.6s ease;\n    }\n    #lawn-calc-container .nutrient-bar.n-bar {\n        background: #1ecad3;\n    }\n    #lawn-calc-container .nutrient-bar.p-bar {\n        background: #f59e0b;\n    }\n    #lawn-calc-container .nutrient-bar.k-bar {\n        background: #8b5cf6;\n    }\n\n    #lawn-calc-container .warning-badge {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        background: #fff7ed;\n        border: 1px solid #fdba74;\n        border-radius: 10px;\n        padding: 14px 16px;\n        color: #c2410c;\n        font-weight: 500;\n        font-size: 0.9rem;\n        line-height: 1.5;\n    }\n    #lawn-calc-container .warning-badge svg {\n        flex-shrink: 0;\n        margin-top: 1px;\n    }\n\n    #lawn-calc-container .info-card {\n        background: #f0fcfc;\n        border: 1px solid #abf0f2;\n        border-radius: 10px;\n        padding: 12px 16px;\n        font-size: 0.85rem;\n        color: #0c565b;\n        line-height: 1.5;\n    }\n\n    #lawn-calc-container .inline-error {\n        color: #ef4444;\n        font-size: 0.8rem;\n        font-weight: 500;\n        margin-top: 4px;\n        display: none;\n    }\n    #lawn-calc-container .inline-error.show {\n        display: block;\n    }\n\n    #lawn-calc-container .section-divider {\n        border: none;\n        border-top: 1px solid #f3f4f6;\n        margin: 20px 0;\n    }\n\n    @media (max-width: 480px) {\n        #lawn-calc-container {\n            padding: 20px 14px 24px;\n            border-radius: 12px;\n        }\n        #lawn-calc-container .unit-toggle button {\n            padding: 7px 13px;\n            font-size: 0.8rem;\n        }\n        #lawn-calc-container .npk-input {\n            font-size: 1rem;\n            padding: 10px 8px;\n        }\n        #lawn-calc-container .btn-calculate,\n        #lawn-calc-container .btn-reset {\n            width: 100%;\n            text-align: center;\n        }\n    }\n<\/style>\n\n<script src=\"https:\/\/cdn.tailwindcss.com\">\n<\/script>\n<script>\n    tailwind.config = {\n        corePlugins: {\n            preflight: false,\n        },\n        theme: {\n            extend: {\n                colors: {\n                    accent: {\n                        DEFAULT: '#1ecad3',\n                        50: '#f0fcfc',\n                        100: '#d5f7f8',\n                        200: '#abf0f2',\n                        300: '#6ee4e8',\n                        400: '#1ecad3',\n                        500: '#1ecad3',\n                        600: '#19b0b8',\n                        700: '#148a91',\n                        800: '#106d73',\n                        900: '#0c565b',\n                    }\n                }\n            }\n        }\n    }\n<\/script>\n\n<div id=\"lawn-calc-container\">\n\n    <p class=\"subtitle\">Berechnen Sie genau, wie viel D\u00fcnger Ihr Rasen ben\u00f6tigt \u2013 basierend auf Bodenwissenschaft.<\/p>\n\n    <!-- Step 1 -->\n    <div style=\"margin-bottom: 18px;\">\n        <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 10px;\">\n            <span class=\"step-badge\">1<\/span>\n            <span class=\"step-label\">Rasenfl\u00e4che<\/span>\n        <\/div>\n        <div style=\"margin-bottom: 10px;\">\n            <div class=\"unit-toggle\" id=\"unitToggleStep1\">\n                <button class=\"active\" data-unit=\"imperial\">Quadratfu\u00df (sq ft)<\/button>\n                <button data-unit=\"metric\">Quadratmeter (sq m)<\/button>\n            <\/div>\n        <\/div>\n        <div>\n            <label style=\"display: block; font-weight: 600; font-size: 0.85rem; color: #4b5563; margin-bottom: 5px;\" id=\"areaLabel\">\n                Gesamte Rasenfl\u00e4che (sq ft)\n            <\/label>\n            <input type=\"number\" id=\"lawnArea\" placeholder=\"z. B. 5000\" min=\"1\" step=\"any\" style=\"max-width: 320px;\">\n            <p class=\"inline-error\" id=\"areaError\">Bitte geben Sie eine g\u00fcltige Rasenfl\u00e4che gr\u00f6\u00dfer als null ein.<\/p>\n        <\/div>\n        <button class=\"helper-toggle\" id=\"helperToggle\" type=\"button\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n            <span>Fl\u00e4che aus L\u00e4nge &amp; Breite berechnen<\/span>\n        <\/button>\n        <div class=\"helper-panel\" id=\"helperPanel\">\n            <div style=\"display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;\">\n                <div style=\"flex: 1; min-width: 100px;\">\n                    <label style=\"display: block; font-weight: 600; font-size: 0.8rem; color: #4b5563; margin-bottom: 4px;\" id=\"helperLengthLabel\">L\u00e4nge (ft)<\/label>\n                    <input type=\"number\" id=\"helperLength\" placeholder=\"L\u00e4nge\" min=\"0\" step=\"any\">\n                <\/div>\n                <div style=\"flex: 1; min-width: 100px;\">\n                    <label style=\"display: block; font-weight: 600; font-size: 0.8rem; color: #4b5563; margin-bottom: 4px;\" id=\"helperWidthLabel\">Breite (ft)<\/label>\n                    <input type=\"number\" id=\"helperWidth\" placeholder=\"Breite\" min=\"0\" step=\"any\">\n                <\/div>\n                <button type=\"button\" id=\"helperApplyBtn\" style=\"background: #1ecad3; color: #fff; font-weight: 600; border: none; border-radius: 8px; padding: 11px 16px; cursor: pointer; font-family: inherit; font-size: 0.85rem; white-space: nowrap; transition: all 0.2s;\">\n                    Fl\u00e4che \u00fcbernehmen\n                <\/button>\n            <\/div>\n            <p class=\"inline-error\" id=\"helperError\">Bitte geben Sie g\u00fcltige Werte f\u00fcr L\u00e4nge und Breite ein.<\/p>\n        <\/div>\n    <\/div>\n\n    <hr class=\"section-divider\">\n\n    <!-- Step 2 -->\n    <div style=\"margin-bottom: 18px;\">\n        <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 10px;\">\n            <span class=\"step-badge\">2<\/span>\n            <span class=\"step-label\">D\u00fcngeranalyse (N-P-K)<\/span>\n        <\/div>\n        <p style=\"font-size: 0.85rem; color: #6b7280; margin: 0 0 10px;\">Geben Sie die garantierte Analyse von Ihrer D\u00fcngerverpackung ein.<\/p>\n        <div style=\"display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;\">\n            <div style=\"flex: 1; min-width: 70px; text-align: center;\">\n                <label style=\"display: block; font-weight: 700; font-size: 0.85rem; color: #1ecad3; margin-bottom: 4px;\">N (%)<\/label>\n                <input type=\"number\" class=\"npk-input\" id=\"npkN\" placeholder=\"24\" min=\"0\" max=\"100\" step=\"any\" style=\"max-width: 100px; margin: 0 auto;\">\n            <\/div>\n            <div style=\"flex: 1; min-width: 70px; text-align: center;\">\n                <label style=\"display: block; font-weight: 700; font-size: 0.85rem; color: #f59e0b; margin-bottom: 4px;\">P (%)<\/label>\n                <input type=\"number\" class=\"npk-input\" id=\"npkP\" placeholder=\"4\" min=\"0\" max=\"100\" step=\"any\" style=\"max-width: 100px; margin: 0 auto;\">\n            <\/div>\n            <div style=\"flex: 1; min-width: 70px; text-align: center;\">\n                <label style=\"display: block; font-weight: 700; font-size: 0.85rem; color: #8b5cf6; margin-bottom: 4px;\">K (%)<\/label>\n                <input type=\"number\" class=\"npk-input\" id=\"npkK\" placeholder=\"12\" min=\"0\" max=\"100\" step=\"any\" style=\"max-width: 100px; margin: 0 auto;\">\n            <\/div>\n        <\/div>\n        <p class=\"inline-error\" id=\"npkError\">N-P-K-Werte m\u00fcssen zwischen 0\u2013100 liegen und ihre Summe darf 100 % nicht \u00fcberschreiten.<\/p>\n    <\/div>\n\n    <hr class=\"section-divider\">\n\n    <!-- Step 3 -->\n    <div style=\"margin-bottom: 18px;\">\n        <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 10px;\">\n            <span class=\"step-badge\">3<\/span>\n            <span class=\"step-label\">Ziel-Stickstoffmenge<\/span>\n        <\/div>\n        <div style=\"margin-bottom: 10px;\">\n            <div class=\"unit-toggle\" id=\"unitToggleStep3\">\n                <button class=\"active\" data-unit=\"imperial\">lbs pro 1,000 sq ft<\/button>\n                <button data-unit=\"metric\">kg pro 100 sq m<\/button>\n            <\/div>\n        <\/div>\n        <div>\n            <label style=\"display: block; font-weight: 600; font-size: 0.85rem; color: #4b5563; margin-bottom: 5px;\" id=\"targetNLabel\">\n                Ziel-Stickstoffmenge (lbs \/ 1,000 sq ft)\n            <\/label>\n            <input type=\"number\" id=\"targetN\" value=\"1.0\" min=\"0.01\" step=\"0.01\" style=\"max-width: 260px;\">\n            <p class=\"inline-error\" id=\"targetNError\">Bitte geben Sie eine g\u00fcltige Ziel-Stickstoffmenge gr\u00f6\u00dfer als null ein.<\/p>\n        <\/div>\n        <div class=\"info-card\" style=\"margin-top: 12px;\" id=\"infoCard\">\n            <strong>\ud83d\udccb Agronomie-Referenz:<\/strong> \u00dcbliche Rasenempfehlungen liegen typischerweise zwischen <strong>0,5 und 1,0 lb Stickstoff pro 1,000 sq ft<\/strong>. Gr\u00e4ser der k\u00fchlen Jahreszeit gedeihen oft bei 0,75\u20131,0 lb, w\u00e4hrend Gr\u00e4ser der warmen Jahreszeit eher 0,5\u20130,75 lb pro Anwendung bevorzugen.\n        <\/div>\n    <\/div>\n\n    <hr class=\"section-divider\">\n\n    <!-- Step 4 Controls -->\n    <div style=\"display: flex; gap: 12px; flex-wrap: wrap; align-items: center;\">\n        <button class=\"btn-calculate\" id=\"calculateBtn\" type=\"button\">\ud83e\uddee Berechnen<\/button>\n        <button class=\"btn-reset\" id=\"resetBtn\" type=\"button\">\u21bb Zur\u00fccksetzen<\/button>\n    <\/div>\n\n    <!-- Results Card -->\n    <div class=\"results-card\" id=\"resultsCard\">\n        <div class=\"results-inner\">\n            <h3 style=\"font-weight: 700; color: #1a1a2e; margin: 0 0 6px;\">\ud83d\udcca Ergebnisse<\/h3>\n            <p style=\"font-size: 0.85rem; color: #6b7280; margin: 0 0 18px;\" id=\"resultsSubtitle\"><\/p>\n\n            <div style=\"background: #ffffff; border: 2px solid #1ecad3; border-radius: 12px; padding: 18px 20px; text-align: center; margin-bottom: 18px;\">\n                <span style=\"font-size: 0.85rem; font-weight: 600; color: #6b7280; display: block; margin-bottom: 4px;\">Ben\u00f6tigte D\u00fcngermenge insgesamt<\/span>\n                <span style=\"font-size: 2.2rem; font-weight: 800; color: #1ecad3; letter-spacing: -0.5px;\" id=\"totalFertilizerDisplay\">\u2014<\/span>\n                <span style=\"font-size: 1rem; font-weight: 600; color: #4b5563;\" id=\"totalFertilizerUnit\"><\/span>\n            <\/div>\n\n            <div style=\"margin-bottom: 16px;\">\n                <h4 style=\"font-weight: 700; font-size: 0.95rem; color: #374151; margin: 0 0 12px;\">\ud83d\udd2c N\u00e4hrstoffaufschl\u00fcsselung (insgesamt ausgebracht)<\/h4>\n                <div style=\"display: flex; flex-direction: column; gap: 14px;\">\n                    <div>\n                        <div style=\"display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;\">\n                            <span style=\"font-weight: 600; font-size: 0.85rem; color: #1ecad3;\">Stickstoff (N)<\/span>\n                            <span style=\"font-weight: 700; font-size: 0.9rem; color: #1a1a2e;\" id=\"nApplied\">\u2014<\/span>\n                        <\/div>\n                        <div style=\"background: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden;\">\n                            <div class=\"nutrient-bar n-bar\" id=\"nBar\" style=\"width: 0%;\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <div style=\"display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;\">\n                            <span style=\"font-weight: 600; font-size: 0.85rem; color: #f59e0b;\">Phosphor (P)<\/span>\n                            <span style=\"font-weight: 700; font-size: 0.9rem; color: #1a1a2e;\" id=\"pApplied\">\u2014<\/span>\n                        <\/div>\n                        <div style=\"background: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden;\">\n                            <div class=\"nutrient-bar p-bar\" id=\"pBar\" style=\"width: 0%;\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <div style=\"display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;\">\n                            <span style=\"font-weight: 600; font-size: 0.85rem; color: #8b5cf6;\">Kalium (K)<\/span>\n                            <span style=\"font-weight: 700; font-size: 0.9rem; color: #1a1a2e;\" id=\"kApplied\">\u2014<\/span>\n                        <\/div>\n                        <div style=\"background: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden;\">\n                            <div class=\"nutrient-bar k-bar\" id=\"kBar\" style=\"width: 0%;\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"warning-badge\" id=\"warningBadge\" style=\"display: none;\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ea580c\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/>\n                    <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/>\n                <\/svg>\n                <span><strong>Achtung:<\/strong> Hohe Stickstoffmengen k\u00f6nnen zu D\u00fcngerverbrennungen oder Auswaschung in die Umwelt f\u00fchren. Erw\u00e4gen Sie eine Aufteilung auf mehrere Anwendungen.<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        document.addEventListener('DOMContentLoaded', function() {\n            const container = document.getElementById('lawn-calc-container');\n            if (!container) return;\n\n            const getEl = (id) => container.querySelector('#' + id);\n\n            const unitToggleStep1 = getEl('unitToggleStep1');\n            const unitToggleStep3 = getEl('unitToggleStep3');\n            const lawnAreaInput = getEl('lawnArea');\n            const areaLabel = getEl('areaLabel');\n            const areaError = getEl('areaError');\n            const helperToggle = getEl('helperToggle');\n            const helperPanel = getEl('helperPanel');\n            const helperLengthInput = getEl('helperLength');\n            const helperWidthInput = getEl('helperWidth');\n            const helperApplyBtn = getEl('helperApplyBtn');\n            const helperError = getEl('helperError');\n            const helperLengthLabel = getEl('helperLengthLabel');\n            const helperWidthLabel = getEl('helperWidthLabel');\n            const npkN = getEl('npkN');\n            const npkP = getEl('npkP');\n            const npkK = getEl('npkK');\n            const npkError = getEl('npkError');\n            const targetNInput = getEl('targetN');\n            const targetNLabel = getEl('targetNLabel');\n            const targetNError = getEl('targetNError');\n            const infoCard = getEl('infoCard');\n            const calculateBtn = getEl('calculateBtn');\n            const resetBtn = getEl('resetBtn');\n            const resultsCard = getEl('resultsCard');\n            const resultsSubtitle = getEl('resultsSubtitle');\n            const totalFertilizerDisplay = getEl('totalFertilizerDisplay');\n            const totalFertilizerUnit = getEl('totalFertilizerUnit');\n            const nApplied = getEl('nApplied');\n            const pApplied = getEl('pApplied');\n            const kApplied = getEl('kApplied');\n            const nBar = getEl('nBar');\n            const pBar = getEl('pBar');\n            const kBar = getEl('kBar');\n            const warningBadge = getEl('warningBadge');\n\n            let currentUnit = 'imperial';\n            const IMPERIAL_DEFAULT_TARGET_N = 1.0;\n            const METRIC_DEFAULT_TARGET_N = 0.5;\n            const CONVERSION_FACTOR = 0.49;\n            const HIGH_N_THRESHOLD_IMPERIAL = 1.2;\n            const HIGH_N_THRESHOLD_METRIC = 1.2 * CONVERSION_FACTOR;\n\n            function syncUnitUI(newUnit, updateTargetNValue = true) {\n                currentUnit = newUnit;\n                [unitToggleStep1, unitToggleStep3].forEach(toggle => {\n                    if (!toggle) return;\n                    toggle.querySelectorAll('button').forEach(btn => {\n                        if (btn.dataset.unit === newUnit) btn.classList.add('active');\n                        else btn.classList.remove('active');\n                    });\n                });\n                if (newUnit === 'imperial') {\n                    areaLabel.textContent = 'Gesamte Rasenfl\u00e4che (sq ft)';\n                    targetNLabel.textContent = 'Ziel-Stickstoffmenge (lbs \/ 1,000 sq ft)';\n                    helperLengthLabel.textContent = 'L\u00e4nge (ft)';\n                    helperWidthLabel.textContent = 'Breite (ft)';\n                    lawnAreaInput.placeholder = 'z. B. 5000';\n                    infoCard.innerHTML = '<strong>\ud83d\udccb Agronomie-Referenz:<\/strong> \u00dcbliche Rasenempfehlungen liegen typischerweise zwischen <strong>0,5 und 1,0 lb Stickstoff pro 1,000 sq ft<\/strong>. Gr\u00e4ser der k\u00fchlen Jahreszeit gedeihen oft bei 0,75\u20131,0 lb, w\u00e4hrend Gr\u00e4ser der warmen Jahreszeit eher 0,5\u20130,75 lb pro Anwendung bevorzugen.';\n                } else {\n                    areaLabel.textContent = 'Gesamte Rasenfl\u00e4che (sq m)';\n                    targetNLabel.textContent = 'Ziel-Stickstoffmenge (kg \/ 100 sq m)';\n                    helperLengthLabel.textContent = 'L\u00e4nge (m)';\n                    helperWidthLabel.textContent = 'Breite (m)';\n                    lawnAreaInput.placeholder = 'z. B. 500';\n                    infoCard.innerHTML = '<strong>\ud83d\udccb Agronomie-Referenz:<\/strong> \u00dcbliche Rasenempfehlungen liegen typischerweise zwischen <strong>0,25 und 0,5 kg Stickstoff pro 100 sq m<\/strong>. Gr\u00e4ser der k\u00fchlen Jahreszeit gedeihen oft bei 0,37\u20130,5 kg, w\u00e4hrend Gr\u00e4ser der warmen Jahreszeit eher 0,25\u20130,37 kg pro Anwendung bevorzugen.';\n                }\n                if (updateTargetNValue) {\n                    const currentVal = parseFloat(targetNInput.value);\n                    if (isNaN(currentVal) || currentVal <= 0) {\n                        targetNInput.value = (newUnit === 'imperial') ? IMPERIAL_DEFAULT_TARGET_N : METRIC_DEFAULT_TARGET_N;\n                    } else {\n                        targetNInput.value = (newUnit === 'imperial') ? Math.round((currentVal \/ CONVERSION_FACTOR) * 100) \/ 100 : Math.round((currentVal * CONVERSION_FACTOR) * 100) \/ 100;\n                    }\n                }\n                hideResults();\n                clearErrors();\n            }\n\n            function hideResults() {\n                resultsCard.classList.remove('visible');\n                warningBadge.style.display = 'none';\n            }\n\n            function clearErrors() {\n                [areaError, npkError, targetNError, helperError].forEach(el => { if (el) el.classList.remove('show'); });\n                [lawnAreaInput, npkN, npkP, npkK, targetNInput].forEach(el => { if (el) el.classList.remove('input-error'); });\n            }\n\n            unitToggleStep1.addEventListener('click', e => {\n                const btn = e.target.closest('button');\n                if (btn && btn.dataset.unit !== currentUnit) syncUnitUI(btn.dataset.unit, true);\n            });\n            unitToggleStep3.addEventListener('click', e => {\n                const btn = e.target.closest('button');\n                if (btn && btn.dataset.unit !== currentUnit) syncUnitUI(btn.dataset.unit, true);\n            });\n\n            helperToggle.addEventListener('click', () => {\n                helperPanel.classList.toggle('open');\n                if (!helperPanel.classList.contains('open')) helperError.classList.remove('show');\n            });\n\n            helperApplyBtn.addEventListener('click', () => {\n                const l = parseFloat(helperLengthInput.value), w = parseFloat(helperWidthInput.value);\n                if (isNaN(l) || l <= 0 || isNaN(w) || w <= 0) {\n                    helperError.classList.add('show');\n                    return;\n                }\n                helperError.classList.remove('show');\n                lawnAreaInput.value = Math.round(l * w * 100) \/ 100;\n                areaError.classList.remove('show');\n                lawnAreaInput.classList.remove('input-error');\n                hideResults();\n            });\n\n            calculateBtn.addEventListener('click', () => {\n                clearErrors();\n                let hasError = false;\n\n                const areaVal = parseFloat(lawnAreaInput.value);\n                if (isNaN(areaVal) || areaVal <= 0) {\n                    areaError.classList.add('show');\n                    lawnAreaInput.classList.add('input-error');\n                    hasError = true;\n                }\n\n                const nVal = parseFloat(npkN.value), pVal = parseFloat(npkP.value), kVal = parseFloat(npkK.value);\n                let npkValid = true;\n                if (isNaN(nVal) || nVal < 0 || nVal > 100) npkValid = false;\n                if (isNaN(pVal) || pVal < 0 || pVal > 100) npkValid = false;\n                if (isNaN(kVal) || kVal < 0 || kVal > 100) npkValid = false;\n                if (npkValid && (nVal + pVal + kVal) > 100.01) npkValid = false;\n                if (!npkValid || (npkValid && nVal === 0)) {\n                    npkError.textContent = (npkValid && nVal === 0) ? 'Der Stickstoffanteil (N) muss gr\u00f6\u00dfer als null sein.' : 'N-P-K-Werte m\u00fcssen zwischen 0\u2013100 liegen und ihre Summe darf 100 % nicht \u00fcberschreiten.';\n                    npkError.classList.add('show');\n                    [npkN, npkP, npkK].forEach(el => el.classList.add('input-error'));\n                    hasError = true;\n                }\n\n                const targetNVal = parseFloat(targetNInput.value);\n                if (isNaN(targetNVal) || targetNVal <= 0) {\n                    targetNError.classList.add('show');\n                    targetNInput.classList.add('input-error');\n                    hasError = true;\n                }\n\n                if (hasError) { hideResults(); return; }\n\n                const nFraction = nVal \/ 100;\n                const fertilizerPerUnit = targetNVal \/ nFraction;\n                let totalFertilizer, unitLabel;\n                if (currentUnit === 'imperial') {\n                    totalFertilizer = fertilizerPerUnit * (areaVal \/ 1000);\n                    unitLabel = 'lbs';\n                } else {\n                    totalFertilizer = fertilizerPerUnit * (areaVal \/ 100);\n                    unitLabel = 'kg';\n                }\n                const totalN = totalFertilizer * nFraction;\n                const totalP = totalFertilizer * (pVal \/ 100);\n                const totalK = totalFertilizer * (kVal \/ 100);\n\n                totalFertilizerDisplay.textContent = Math.round(totalFertilizer * 100) \/ 100;\n                totalFertilizerUnit.textContent = unitLabel;\n                resultsSubtitle.textContent = currentUnit === 'imperial' ? `F\u00fcr ${areaVal.toLocaleString()} sq ft bei ${targetNVal} lb N \/ 1,000 sq ft` : `F\u00fcr ${areaVal.toLocaleString()} sq m bei ${targetNVal} kg N \/ 100 sq m`;\n                nApplied.textContent = Math.round(totalN * 100) \/ 100 + ' ' + unitLabel;\n                pApplied.textContent = Math.round(totalP * 100) \/ 100 + ' ' + unitLabel;\n                kApplied.textContent = Math.round(totalK * 100) \/ 100 + ' ' + unitLabel;\n\n                const maxNutrient = Math.max(totalN, totalP, totalK, 0.001);\n                nBar.style.width = ((totalN \/ maxNutrient) * 100).toFixed(1) + '%';\n                pBar.style.width = ((totalP \/ maxNutrient) * 100).toFixed(1) + '%';\n                kBar.style.width = ((totalK \/ maxNutrient) * 100).toFixed(1) + '%';\n\n                resultsCard.classList.add('visible');\n                const threshold = currentUnit === 'imperial' ? HIGH_N_THRESHOLD_IMPERIAL : HIGH_N_THRESHOLD_METRIC;\n                warningBadge.style.display = targetNVal > threshold ? 'flex' : 'none';\n\n                setTimeout(() => resultsCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 150);\n            });\n\n            resetBtn.addEventListener('click', () => {\n                clearErrors();\n                hideResults();\n                lawnAreaInput.value = '';\n                helperLengthInput.value = '';\n                helperWidthInput.value = '';\n                helperPanel.classList.remove('open');\n                npkN.value = ''; npkP.value = ''; npkK.value = '';\n                targetNInput.value = (currentUnit === 'imperial') ? IMPERIAL_DEFAULT_TARGET_N : METRIC_DEFAULT_TARGET_N;\n                nBar.style.width = '0%'; pBar.style.width = '0%'; kBar.style.width = '0%';\n                totalFertilizerDisplay.textContent = '\u2014';\n                totalFertilizerUnit.textContent = '';\n                resultsSubtitle.textContent = '';\n                nApplied.textContent = '\u2014'; pApplied.textContent = '\u2014'; kApplied.textContent = '\u2014';\n                warningBadge.style.display = 'none';\n                container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            });\n\n            [lawnAreaInput, npkN, npkP, npkK, targetNInput].forEach(input => {\n                input.addEventListener('input', () => {\n                    input.classList.remove('input-error');\n                    if (input === lawnAreaInput) areaError.classList.remove('show');\n                    if (input === targetNInput) targetNError.classList.remove('show');\n                    if (input === npkN || input === npkP || input === npkK) {\n                        npkError.classList.remove('show');\n                        [npkN, npkP, npkK].forEach(el => el.classList.remove('input-error'));\n                        npkError.textContent = 'N-P-K-Werte m\u00fcssen zwischen 0\u2013100 liegen und ihre Summe darf 100 % nicht \u00fcberschreiten.';\n                    }\n                    hideResults();\n                });\n            });\n            [helperLengthInput, helperWidthInput].forEach(input => {\n                input.addEventListener('input', () => helperError.classList.remove('show'));\n            });\n\n            syncUnitUI('imperial', false);\n            targetNInput.value = IMPERIAL_DEFAULT_TARGET_N;\n        });\n    })();\n<\/script>\n\n\n<!-- aiper-tool-links -->\n<div class=\"aiper-tool-links\">\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Weitere Tools<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/de\/rasenbelueftung-kostenrechner\/\" class=\"aiper-tl-tag\">Rasenbel\u00fcftung Kostenrechner<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/de\/zaunrechner\/\" class=\"aiper-tl-tag\">Zaunmaterial Rechner<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/de\/pflasterstein-rechner\/\" class=\"aiper-tl-tag\">Pflasterstein Rechner<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Verwandte Artikel<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/de\/kanadagaense-rasen-fernhalten\/\" class=\"aiper-tl-tag\">Kanadag\u00e4nse vom Rasen fernhalten: Was wirklich hilft<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/de\/pilze-im-rasen-loswerden\/\" class=\"aiper-tl-tag\">Pilze im Rasen loswerden: Was wirklich hilft<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/de\/rasen-vertikutieren-filz-erkennen-behandeln\/\" class=\"aiper-tl-tag\">Rasen vertikutieren: Filz erkennen und richtig behandeln<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/de\/gundermann-rasen-bekaempfen\/\" class=\"aiper-tl-tag\">Gundermann im Rasen bek\u00e4mpfen: Was wirklich hilft<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.aiper-tool-links{margin:2.5rem 0 1.5rem;padding:1.5rem 1.75rem;background:linear-gradient(135deg,rgba(148,134,247,.04),rgba(30,202,211,.04));border-radius:12px;border:1px solid rgba(148,134,247,.10)}\n.aiper-tl-section{margin-bottom:1.25rem}\n.aiper-tl-section:last-child{margin-bottom:0}\n.aiper-tl-heading{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8899aa;margin:0 0 .65rem}\n.aiper-tl-tags{display:flex;flex-wrap:wrap;gap:.5rem}\n.aiper-tl-tag{display:inline-block;padding:.4rem .95rem;font-size:.82rem;font-weight:500;line-height:1.35;color:#9486f7;background:rgba(148,134,247,.055);border:1px solid rgba(30,202,211,.25);border-radius:22px;text-decoration:none;transition:all .18s}\n.aiper-tl-tag:hover{background:#1ecad3;color:#fff;border-color:#1ecad3;box-shadow:0 2px 10px rgba(30,202,211,.22)}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>Berechnen Sie genau, wie viel D\u00fcnger Ihr Rasen ben\u00f6tigt \u2013 basierend auf Bodenwissenschaft. 1 Rasenfl\u00e4che Quadratfu\u00df (sq ft) Quadratmeter (sq m) Gesamte Rasenfl\u00e4che (sq ft) Bitte geben Sie eine g\u00fcltige Rasenfl\u00e4che gr\u00f6\u00dfer als null ein. Fl\u00e4che aus L\u00e4nge &amp; Breite berechnen L\u00e4nge (ft) Breite (ft) Fl\u00e4che \u00fcbernehmen Bitte geben Sie g\u00fcltige Werte f\u00fcr L\u00e4nge und [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"aiper_reading_time":2,"aiper_last_reviewed":"","aiper_reviewer":0,"aiper_related_ids":[],"aiper_layout":"","footnotes":""},"class_list":["post-2173","page","type-page","status-publish","hentry"],"lang":"de","translations":{"de":2173,"en":1862,"fr":2174,"es":2175},"_links":{"self":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/comments?post=2173"}],"version-history":[{"count":3,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2173\/revisions"}],"predecessor-version":[{"id":4320,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2173\/revisions\/4320"}],"wp:attachment":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/media?parent=2173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}