{"id":2571,"date":"2026-06-15T04:49:42","date_gmt":"2026-06-15T04:49:42","guid":{"rendered":"https:\/\/aiper.com\/blogs\/?page_id=2571"},"modified":"2026-06-24T04:22:50","modified_gmt":"2026-06-24T04:22:50","slug":"pflanzenabstand-rechner","status":"publish","type":"page","link":"https:\/\/aiper.com\/blogs\/de\/pflanzenabstand-rechner\/","title":{"rendered":"Pflanzenabstand Rechner"},"content":{"rendered":"\n<div class=\"custom-plant-calculator-wp\">\n  <!-- Einheitensystem-Umschalter -->\n  <div class=\"unit-toggle\" role=\"radiogroup\" aria-label=\"Einheitensystem\">\n    <button type=\"button\" class=\"unit-btn active\" data-unit=\"imperial\">Imperial (US)<\/button>\n    <button type=\"button\" class=\"unit-btn\" data-unit=\"metric\">Metrisch (EU\/AU)<\/button>\n  <\/div>\n\n  <!-- Fl\u00e4chentyp-Auswahl -->\n  <div class=\"area-type-section\">\n    <label class=\"section-label\">Fl\u00e4chentyp<\/label>\n    <div class=\"radio-group area-type-radio\" role=\"radiogroup\" aria-label=\"Fl\u00e4chentyp\">\n      <input type=\"radio\" id=\"type-rect\" name=\"areaType\" value=\"rectangular\" checked>\n      <label for=\"type-rect\">Rechteckig \/ Quadratisch<\/label>\n      <input type=\"radio\" id=\"type-circ\" name=\"areaType\" value=\"circular\">\n      <label for=\"type-circ\">Kreisfl\u00e4che<\/label>\n      <input type=\"radio\" id=\"type-area\" name=\"areaType\" value=\"total\">\n      <label for=\"type-area\">Gesamtfl\u00e4che bekannt<\/label>\n    <\/div>\n  <\/div>\n\n  <!-- Dynamische Eingabefelder -->\n  <div class=\"input-fields\" id=\"dynamicInputs\">\n    <!-- Rechteckige Eingaben -->\n    <div class=\"input-group rect-inputs\" id=\"rectInputs\">\n      <div class=\"field\">\n        <label for=\"length\" class=\"unit-label\">L\u00e4nge (<span data-unit-text=\"ft\">ft<\/span>)<\/label>\n        <input type=\"number\" id=\"length\" step=\"any\" min=\"0\" inputmode=\"decimal\" placeholder=\"z. B. 10,5\">\n      <\/div>\n      <div class=\"field\">\n        <label for=\"width\" class=\"unit-label\">Breite (<span data-unit-text=\"ft\">ft<\/span>)<\/label>\n        <input type=\"number\" id=\"width\" step=\"any\" min=\"0\" inputmode=\"decimal\" placeholder=\"z. B. 8\">\n      <\/div>\n    <\/div>\n    <!-- Kreisf\u00f6rmige Eingaben -->\n    <div class=\"input-group circ-inputs\" id=\"circInputs\" style=\"display: none;\">\n      <div class=\"circ-measure-toggle\">\n        <span>Ma\u00dfangabe:<\/span>\n        <label class=\"radio-inline\"><input type=\"radio\" name=\"circMeasure\" value=\"diameter\" checked> Durchmesser<\/label>\n        <label class=\"radio-inline\"><input type=\"radio\" name=\"circMeasure\" value=\"radius\"> Radius<\/label>\n      <\/div>\n      <div class=\"field\">\n        <label for=\"circValue\" class=\"unit-label\" id=\"circLabel\">Durchmesser (<span data-unit-text=\"ft\">ft<\/span>)<\/label>\n        <input type=\"number\" id=\"circValue\" step=\"any\" min=\"0\" inputmode=\"decimal\" placeholder=\"z. B. 12\">\n      <\/div>\n    <\/div>\n    <!-- Gesamtfl\u00e4che Eingabe -->\n    <div class=\"input-group area-input\" id=\"areaInput\" style=\"display: none;\">\n      <div class=\"field\">\n        <label for=\"totalArea\" class=\"unit-label\">Gesamtfl\u00e4che (<span data-unit-text=\"sqft\">sq ft<\/span>)<\/label>\n        <input type=\"number\" id=\"totalArea\" step=\"any\" min=\"0\" inputmode=\"decimal\" placeholder=\"z. B. 100\">\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Pflanzabstand Eingabe -->\n  <div class=\"input-group spacing-group\">\n    <div class=\"field\">\n      <label for=\"spacing\" class=\"unit-label\">Pflanzabstand (<span data-unit-text=\"in\">in<\/span>)<\/label>\n      <input type=\"number\" id=\"spacing\" step=\"any\" min=\"0\" inputmode=\"decimal\" placeholder=\"z. B. 18\">\n    <\/div>\n  <\/div>\n\n  <!-- Pflanzmuster-Auswahl -->\n  <div class=\"layout-section\">\n    <label class=\"section-label\">Pflanzmuster<\/label>\n    <div class=\"radio-group\" role=\"radiogroup\" aria-label=\"Pflanzmuster\">\n      <input type=\"radio\" id=\"pattern-square\" name=\"pattern\" value=\"square\" checked>\n      <label for=\"pattern-square\">Quadrat \/ Raster<\/label>\n      <input type=\"radio\" id=\"pattern-triangular\" name=\"pattern\" value=\"triangular\">\n      <label for=\"pattern-triangular\">Versetzt \/ Dreieckig<\/label>\n    <\/div>\n  <\/div>\n\n  <!-- Puffer \/ \u00dcberbestand -->\n  <div class=\"overage-section\">\n    <label for=\"overage\" class=\"section-label\">Puffer \/ \u00dcberbestand<\/label>\n    <select id=\"overage\">\n      <option value=\"0\">0% (Exakte Anzahl)<\/option>\n      <option value=\"5\">5% Puffer<\/option>\n      <option value=\"10\" selected>10% Puffer (Empfohlen)<\/option>\n      <option value=\"15\">15% Puffer<\/option>\n    <\/select>\n  <\/div>\n\n  <!-- Aktionsbuttons -->\n  <div class=\"button-row\">\n    <button type=\"button\" id=\"calcButton\" class=\"action-btn calc-btn\">Berechnen<\/button>\n    <button type=\"button\" id=\"resetButton\" class=\"action-btn reset-btn\">Zur\u00fccksetzen<\/button>\n  <\/div>\n\n  <!-- Fehlermeldungsbereich -->\n  <div class=\"error-message\" id=\"errorMessage\" role=\"alert\"><\/div>\n\n  <!-- Ergebnisausgabe -->\n  <div class=\"results-panel\" id=\"resultsPanel\" style=\"display: none;\">\n    <h3>Ergebnisse<\/h3>\n    <div class=\"result-item\">\n      <span class=\"result-label\">Berechnete Gesamtfl\u00e4che:<\/span>\n      <span class=\"result-value\" id=\"resultArea\">0 sq ft<\/span>\n    <\/div>\n    <div class=\"result-item\" id=\"baseQtyRow\">\n      <span class=\"result-label\">Grundanzahl Pflanzen (exakt):<\/span>\n      <span class=\"result-value\" id=\"resultBase\">0<\/span>\n    <\/div>\n    <div class=\"result-item\" id=\"overageRow\" style=\"display: none;\">\n      <span class=\"result-label\">Pufferzugabe:<\/span>\n      <span class=\"result-value\" id=\"resultOverageQty\">0<\/span>\n    <\/div>\n    <div class=\"result-item final-count\">\n      <span class=\"result-label\">Ben\u00f6tigte Pflanzen insgesamt:<\/span>\n      <span class=\"result-value\" id=\"resultFinal\">0<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  .custom-plant-calculator-wp {\n    max-width: 720px;\n    margin: 1.5rem auto;\n    background: #ffffff;\n    border-radius: 16px;\n    box-shadow: 0 20px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);\n    padding: 2rem 1.5rem;\n    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\n    color: #1e293b;\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .custom-plant-calculator-wp * {\n    box-sizing: border-box;\n  }\n  .unit-toggle {\n    display: flex;\n    justify-content: center;\n    gap: 0;\n    margin-bottom: 2rem;\n    border-radius: 12px;\n    background: #f1f5f9;\n    padding: 4px;\n  }\n  .unit-btn {\n    flex: 1;\n    padding: 0.7rem 1.2rem;\n    border: none;\n    background: transparent;\n    border-radius: 10px;\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: #475569;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n  }\n  .unit-btn.active {\n    background: #ffffff;\n    color: #0f172a;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  }\n  .section-label {\n    display: block;\n    font-size: 0.9rem;\n    font-weight: 600;\n    margin-bottom: 0.4rem;\n    color: #334155;\n  }\n  .radio-group {\n    display: flex;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    margin-bottom: 1.2rem;\n  }\n  .radio-group input[type=\"radio\"] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .radio-group label {\n    flex: 1 1 100px;\n    text-align: center;\n    padding: 0.7rem 0.8rem;\n    border: 2px solid #e2e8f0;\n    border-radius: 10px;\n    background: #f8fafc;\n    font-size: 0.9rem;\n    font-weight: 500;\n    color: #334155;\n    cursor: pointer;\n    transition: all 0.2s;\n    word-break: break-word;\n    overflow-wrap: break-word;\n  }\n  .radio-group input[type=\"radio\"]:checked + label {\n    border-color: #1ecad3;\n    background: #f0fdfa;\n    color: #0f766e;\n    font-weight: 600;\n  }\n  .circ-measure-toggle {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-bottom: 0.8rem;\n    font-size: 0.9rem;\n    color: #334155;\n    flex-wrap: wrap;\n  }\n  .circ-measure-toggle span {\n    font-weight: 500;\n    margin-right: 0.2rem;\n  }\n  .radio-inline {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.3rem;\n    cursor: pointer;\n    font-size: 0.85rem;\n    font-weight: 500;\n    color: #334155;\n  }\n  .radio-inline input[type=\"radio\"] {\n    accent-color: #1ecad3;\n  }\n  .input-group {\n    display: flex;\n    gap: 1rem;\n    flex-wrap: wrap;\n    margin-bottom: 1.2rem;\n  }\n  .field {\n    flex: 1 1 130px;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n  }\n  .field label {\n    font-size: 0.85rem;\n    font-weight: 600;\n    margin-bottom: 0.3rem;\n    color: #334155;\n  }\n  .field input,\n  select {\n    padding: 0.75rem 0.9rem;\n    border: 2px solid #e2e8f0;\n    border-radius: 10px;\n    font-size: 0.95rem;\n    background: #ffffff;\n    transition: border-color 0.2s;\n    outline: none;\n    width: 100%;\n  }\n  .field input:focus,\n  select:focus {\n    border-color: #1ecad3;\n    box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.15);\n  }\n  .spacing-group {\n    margin-bottom: 1.2rem;\n  }\n  .layout-section,\n  .overage-section {\n    margin-bottom: 1.2rem;\n  }\n  select {\n    width: 100%;\n  }\n  .button-row {\n    display: flex;\n    gap: 1rem;\n    margin: 1.8rem 0 1.2rem;\n    flex-wrap: nowrap;\n  }\n  .action-btn {\n    flex: 1 1 140px;\n    min-width: 140px;\n    padding: 0.85rem 1.5rem;\n    border: none;\n    border-radius: 12px;\n    font-size: 1rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s;\n    letter-spacing: 0.01em;\n    text-align: center;\n  }\n  .calc-btn {\n    background: linear-gradient(135deg, #1ecad3, #9486f7);\n    color: white;\n  }\n  .reset-btn {\n    background: linear-gradient(135deg, rgba(30, 202, 211, 0.25), rgba(148, 134, 247, 0.3));\n    color: #1e293b;\n    border: 2px solid rgba(148, 134, 247, 0.5);\n  }\n  .action-btn:hover {\n    opacity: 0.92;\n    transform: translateY(-1px);\n  }\n  .reset-btn:hover {\n    background: linear-gradient(135deg, rgba(30, 202, 211, 0.4), rgba(148, 134, 247, 0.5));\n  }\n  .error-message {\n    color: #b91c1c;\n    background: #fef2f2;\n    border-left: 4px solid #dc2626;\n    padding: 0.7rem 1rem;\n    border-radius: 8px;\n    font-size: 0.9rem;\n    font-weight: 500;\n    margin: 0.8rem 0;\n    display: none;\n  }\n  .results-panel {\n    background: #f8fafc;\n    border-radius: 12px;\n    padding: 1.5rem;\n    margin-top: 1.8rem;\n    border: 1px solid #e2e8f0;\n  }\n  .results-panel h3 {\n    margin: 0 0 1rem;\n    font-size: 1.2rem;\n    font-weight: 700;\n    color: #0f172a;\n    border-bottom: 1px solid #e2e8f0;\n    padding-bottom: 0.6rem;\n  }\n  .result-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 0.4rem 0;\n    font-size: 0.95rem;\n    border-bottom: 1px solid #f1f5f9;\n    flex-wrap: wrap;\n  }\n  .result-item:last-child {\n    border-bottom: none;\n  }\n  .result-label {\n    color: #475569;\n    font-weight: 500;\n    margin-right: 0.5rem;\n  }\n  .result-value {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1rem;\n  }\n  .final-count .result-value {\n    font-size: 1.2rem;\n    color: #0f766e;\n  }\n  @media (max-width: 500px) {\n    .custom-plant-calculator-wp {\n      padding: 1.5rem 1rem;\n    }\n    .radio-group label {\n      font-size: 0.8rem;\n      padding: 0.6rem 0.4rem;\n    }\n    .circ-measure-toggle {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 0.3rem;\n    }\n    .field {\n      flex: 1 1 100%;\n    }\n    .button-row {\n      gap: 0.5rem;\n    }\n    .action-btn {\n      padding: 0.7rem 0.8rem;\n      font-size: 0.9rem;\n      min-width: 0;\n      flex: 1 1 auto;\n    }\n  }\n<\/style>\n\n<script>\n  (function() {\n    const container = document.querySelector('.custom-plant-calculator-wp');\n    if (!container) return;\n\n    \/\/ Elemente\n    const unitBtns = container.querySelectorAll('.unit-btn');\n    const areaTypeInputs = container.querySelectorAll('input[name=\"areaType\"]');\n    const rectInputs = container.querySelector('.rect-inputs');\n    const circInputs = container.querySelector('.circ-inputs');\n    const areaInput = container.querySelector('.area-input');\n    const circMeasureInputs = container.querySelectorAll('input[name=\"circMeasure\"]');\n    const circLabel = document.getElementById('circLabel');\n    const lengthInput = document.getElementById('length');\n    const widthInput = document.getElementById('width');\n    const circValueInput = document.getElementById('circValue');\n    const totalAreaInput = document.getElementById('totalArea');\n    const spacingInput = document.getElementById('spacing');\n    const patternInputs = container.querySelectorAll('input[name=\"pattern\"]');\n    const overageSelect = document.getElementById('overage');\n    const calcButton = document.getElementById('calcButton');\n    const resetButton = document.getElementById('resetButton');\n    const errorMsg = document.getElementById('errorMessage');\n    const resultsPanel = document.getElementById('resultsPanel');\n    const resultArea = document.getElementById('resultArea');\n    const baseQtyRow = document.getElementById('baseQtyRow');\n    const resultBase = document.getElementById('resultBase');\n    const overageRow = document.getElementById('overageRow');\n    const resultOverageQty = document.getElementById('resultOverageQty');\n    const resultFinal = document.getElementById('resultFinal');\n\n    let currentUnit = 'imperial';\n    let currentAreaType = 'rectangular';\n\n    const unitLabels = {\n      imperial: {\n        lengthUnit: 'ft',\n        spacingUnit: 'in',\n        areaUnit: 'sq ft',\n        circUnit: 'ft'\n      },\n      metric: {\n        lengthUnit: 'm',\n        spacingUnit: 'cm',\n        areaUnit: 'sq m',\n        circUnit: 'm'\n      }\n    };\n\n    function updateUnitUI() {\n      const labels = unitLabels[currentUnit];\n      document.querySelectorAll('[data-unit-text]').forEach(span => {\n        const key = span.getAttribute('data-unit-text');\n        if (key === 'ft' || key === 'm') {\n          span.textContent = labels.lengthUnit;\n        } else if (key === 'in' || key === 'cm') {\n          span.textContent = labels.spacingUnit;\n        } else if (key === 'sqft' || key === 'sqm') {\n          span.textContent = labels.areaUnit;\n        }\n      });\n      updateCircLabel();\n      if (currentUnit === 'imperial') {\n        lengthInput.placeholder = 'z. B. 10,5';\n        widthInput.placeholder = 'z. B. 8';\n        circValueInput.placeholder = 'z. B. 12';\n        spacingInput.placeholder = 'z. B. 18';\n        totalAreaInput.placeholder = 'z. B. 100';\n      } else {\n        lengthInput.placeholder = 'z. B. 3,2';\n        widthInput.placeholder = 'z. B. 2,5';\n        circValueInput.placeholder = 'z. B. 3,6';\n        spacingInput.placeholder = 'z. B. 45';\n        totalAreaInput.placeholder = 'z. B. 25';\n      }\n    }\n\n    function updateCircLabel() {\n      const measure = document.querySelector('input[name=\"circMeasure\"]:checked')?.value || 'diameter';\n      const unit = unitLabels[currentUnit].circUnit;\n      const measureText = measure === 'diameter' ? 'Durchmesser' : 'Radius';\n      circLabel.innerHTML = `${measureText} (<span data-unit-text=\"${unit}\">${unit}<\/span>)`;\n    }\n\n    function updateAreaTypeUI() {\n      const type = document.querySelector('input[name=\"areaType\"]:checked')?.value;\n      currentAreaType = type || 'rectangular';\n      rectInputs.style.display = currentAreaType === 'rectangular' ? 'flex' : 'none';\n      circInputs.style.display = currentAreaType === 'circular' ? 'block' : 'none';\n      areaInput.style.display = currentAreaType === 'total' ? 'block' : 'none';\n      if (currentAreaType === 'circular') {\n        updateCircLabel();\n      }\n    }\n\n    unitBtns.forEach(btn => {\n      btn.addEventListener('click', function() {\n        unitBtns.forEach(b => b.classList.remove('active'));\n        this.classList.add('active');\n        currentUnit = this.getAttribute('data-unit');\n        updateUnitUI();\n        hideResults();\n        clearError();\n      });\n    });\n\n    areaTypeInputs.forEach(input => {\n      input.addEventListener('change', updateAreaTypeUI);\n    });\n\n    circMeasureInputs.forEach(input => {\n      input.addEventListener('change', updateCircLabel);\n    });\n\n    function validateInputs() {\n      clearError();\n      const errors = [];\n      const type = currentAreaType;\n\n      if (type === 'rectangular') {\n        if (!lengthInput.value || parseFloat(lengthInput.value) <= 0) errors.push('Bitte geben Sie eine g\u00fcltige L\u00e4nge gr\u00f6\u00dfer 0 ein.');\n        if (!widthInput.value || parseFloat(widthInput.value) <= 0) errors.push('Bitte geben Sie eine g\u00fcltige Breite gr\u00f6\u00dfer 0 ein.');\n      } else if (type === 'circular') {\n        if (!circValueInput.value || parseFloat(circValueInput.value) <= 0) errors.push('Bitte geben Sie einen g\u00fcltigen Durchmesser oder Radius gr\u00f6\u00dfer 0 ein.');\n      } else if (type === 'total') {\n        if (!totalAreaInput.value || parseFloat(totalAreaInput.value) <= 0) errors.push('Bitte geben Sie eine g\u00fcltige Gesamtfl\u00e4che gr\u00f6\u00dfer 0 ein.');\n      }\n\n      if (!spacingInput.value || parseFloat(spacingInput.value) <= 0) errors.push('Bitte geben Sie einen g\u00fcltigen Pflanzabstand gr\u00f6\u00dfer 0 ein.');\n\n      return errors;\n    }\n\n    function calculateArea() {\n      const type = currentAreaType;\n      let area = 0;\n      if (type === 'rectangular') {\n        const length = parseFloat(lengthInput.value);\n        const width = parseFloat(widthInput.value);\n        area = length * width;\n      } else if (type === 'circular') {\n        const val = parseFloat(circValueInput.value);\n        const measure = document.querySelector('input[name=\"circMeasure\"]:checked')?.value || 'diameter';\n        if (measure === 'diameter') {\n          const radius = val \/ 2;\n          area = Math.PI * radius * radius;\n        } else {\n          area = Math.PI * val * val;\n        }\n      } else if (type === 'total') {\n        area = parseFloat(totalAreaInput.value);\n      }\n      return area;\n    }\n\n    function getSpacingInAreaUnit() {\n      const spacingVal = parseFloat(spacingInput.value);\n      if (currentUnit === 'imperial') {\n        return spacingVal \/ 12;\n      } else {\n        return spacingVal \/ 100;\n      }\n    }\n\n    function performCalculation() {\n      const errors = validateInputs();\n      if (errors.length > 0) {\n        showError(errors.join('<br>'));\n        hideResults();\n        return;\n      }\n\n      const totalArea = calculateArea();\n      const spacing = getSpacingInAreaUnit();\n      const pattern = document.querySelector('input[name=\"pattern\"]:checked')?.value || 'square';\n      const overagePercent = parseFloat(overageSelect.value) || 0;\n\n      const patternFactor = pattern === 'triangular' ? 0.866 : 1;\n      const baseQuantity = totalArea \/ (spacing * spacing * patternFactor);\n      const withOverage = baseQuantity * (1 + overagePercent \/ 100);\n      const finalCount = Math.ceil(withOverage);\n\n      const areaUnit = unitLabels[currentUnit].areaUnit;\n      resultArea.textContent = `${totalArea.toFixed(2)} ${areaUnit}`;\n      resultBase.textContent = baseQuantity.toFixed(2);\n      const overageQty = baseQuantity * (overagePercent \/ 100);\n      if (overagePercent > 0) {\n        overageRow.style.display = 'flex';\n        resultOverageQty.textContent = overageQty.toFixed(2);\n      } else {\n        overageRow.style.display = 'none';\n      }\n      resultFinal.textContent = finalCount;\n      resultsPanel.style.display = 'block';\n      clearError();\n    }\n\n    function showError(msg) {\n      errorMsg.innerHTML = msg;\n      errorMsg.style.display = 'block';\n    }\n\n    function clearError() {\n      errorMsg.style.display = 'none';\n      errorMsg.innerHTML = '';\n    }\n\n    function hideResults() {\n      resultsPanel.style.display = 'none';\n    }\n\n    function resetAll() {\n      currentUnit = 'imperial';\n      unitBtns.forEach(b => b.classList.remove('active'));\n      const imperialBtn = container.querySelector('.unit-btn[data-unit=\"imperial\"]');\n      if (imperialBtn) imperialBtn.classList.add('active');\n      updateUnitUI();\n\n      const rectRadio = document.getElementById('type-rect');\n      if (rectRadio) rectRadio.checked = true;\n      updateAreaTypeUI();\n\n      const diamRadio = container.querySelector('input[name=\"circMeasure\"][value=\"diameter\"]');\n      if (diamRadio) diamRadio.checked = true;\n      updateCircLabel();\n\n      lengthInput.value = '';\n      widthInput.value = '';\n      circValueInput.value = '';\n      totalAreaInput.value = '';\n      spacingInput.value = '';\n\n      const squareRadio = document.getElementById('pattern-square');\n      if (squareRadio) squareRadio.checked = true;\n\n      overageSelect.value = '10';\n\n      hideResults();\n      clearError();\n    }\n\n    calcButton.addEventListener('click', performCalculation);\n    resetButton.addEventListener('click', resetAll);\n\n    updateUnitUI();\n    updateAreaTypeUI();\n    overageSelect.value = '10';\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\/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<a href=\"https:\/\/aiper.com\/blogs\/de\/terrassenrechner\/\" class=\"aiper-tl-tag\">Terrassenrechner<\/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\/pool-alkalitaet-senken\/\" class=\"aiper-tl-tag\">Pool-Alkalit\u00e4t senken: Was wirklich funktioniert<\/a>\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    <\/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>Imperial (US) Metrisch (EU\/AU) Fl\u00e4chentyp Rechteckig \/ Quadratisch Kreisfl\u00e4che Gesamtfl\u00e4che bekannt L\u00e4nge (ft) Breite (ft) Ma\u00dfangabe: Durchmesser Radius Durchmesser (ft) Gesamtfl\u00e4che (sq ft) Pflanzabstand (in) Pflanzmuster Quadrat \/ Raster Versetzt \/ Dreieckig Puffer \/ \u00dcberbestand 0% (Exakte Anzahl)5% Puffer10% Puffer (Empfohlen)15% Puffer Berechnen Zur\u00fccksetzen Ergebnisse Berechnete Gesamtfl\u00e4che: 0 sq ft Grundanzahl Pflanzen (exakt): 0 Pufferzugabe:&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2571","page","type-page","status-publish","hentry"],"lang":"de","translations":{"de":2571,"es":2578,"en":2568,"fr":2576},"_links":{"self":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2571","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=2571"}],"version-history":[{"count":5,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2571\/revisions"}],"predecessor-version":[{"id":4314,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2571\/revisions\/4314"}],"wp:attachment":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/media?parent=2571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}