FFMI Rechner v1.3<\/title>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: Arial, sans-serif;\n \n min-height: 100vh;\n padding: 20px;\n }\n\n .glass-card {\n max-width: 700px;\n margin: 0 auto;\n padding: 30px;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 20px;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n color: #2a2a2a;\n }\n\n .glass-card h2 {\n font-size: 1.5rem;\n margin-bottom: 10px;\n }\n\n .glass-card h3 {\n font-size: 1.2rem;\n margin-top: 25px;\n margin-bottom: 10px;\n }\n\n .subtitle {\n font-size: 0.9rem;\n opacity: 0.8;\n margin-bottom: 20px;\n }\n\n .input-group {\n margin-top: 15px;\n }\n\n .input-group label {\n display: block;\n font-weight: bold;\n font-size: 0.9rem;\n margin-bottom: 8px;\n }\n\n input[type=\"number\"],\n select {\n width: 100%;\n padding: 10px;\n margin-top: 6px;\n border: none;\n background-color: #f1f3f8;\n color: #2a2a2a;\n border-radius: 25px;\n text-align: center;\n font-size: 1rem;\n }\n\n input[type=\"range\"] {\n width: 100%;\n margin-top: 10px;\n }\n\n button {\n width: 100%;\n padding: 12px;\n margin-top: 15px;\n background-color: #4a90e2;\n color: white;\n font-weight: bold;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n button:hover {\n background-color: #3366cc;\n }\n\n .toggle-container {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n }\n\n input[type=\"radio\"] {\n display: none;\n }\n\n .toggle-btn {\n flex: 1;\n padding: 16px 10px;\n text-align: center;\n background: #f1f3f8;\n color: #333;\n border-radius: 25px;\n cursor: pointer;\n font-weight: bold;\n transition: background-color 0.3s ease;\n }\n\n input[type=\"radio\"]:checked + .toggle-btn {\n background-color: #4a90e2;\n color: white;\n }\n\n .result-box {\n margin-top: 20px;\n padding: 20px;\n background: rgba(255, 255, 255, 0.4);\n border-radius: 12px;\n text-align: left;\n }\n\n .result-highlight {\n font-size: 1.8rem;\n font-weight: bold;\n margin: 10px 0;\n }\n\n .result-interpretation {\n font-size: 1.1rem;\n margin-top: 10px;\n }\n\n .level-beginner { color: #4CAF50; font-weight: bold; }\n .level-intermediate { color: #2196F3; font-weight: bold; }\n .level-advanced { color: #FF9800; font-weight: bold; }\n .level-elite { color: #F44336; font-weight: bold; }\n\n .divider {\n margin: 30px 0;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .ffmi-scale {\n position: relative;\n height: 80px;\n background: linear-gradient(to right, #4CAF50, #2196F3, #FF9800, #F44336);\n border-radius: 10px;\n margin-top: 15px;\n }\n\n .scale-marker {\n position: absolute;\n top: -25px;\n transform: translateX(-50%);\n }\n\n .scale-marker span {\n font-size: 0.8rem;\n }\n\n .your-marker {\n position: absolute;\n top: 16px;\n background: white;\n color: #333;\n font-weight: bold;\n padding: 6px 10px;\n border-radius: 6px;\n transform: translateX(-50%);\n }\n\n .your-marker::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border: 5px solid transparent;\n border-top-color: white;\n }\n\n .scale-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n font-size: 0.75rem;\n }\n\n .scale-level {\n flex: 1;\n text-align: center;\n padding: 5px 0;\n }\n\n .goal-tabs {\n display: flex;\n margin-top: 10px;\n margin-bottom: 15px;\n gap: 5px;\n }\n\n .tab-btn {\n flex: 1;\n text-align: center;\n padding: 10px 8px;\n background-color: #ddd;\n border-radius: 5px 5px 0 0;\n cursor: pointer;\n font-weight: bold;\n transition: background-color 0.3s ease;\n font-size: 0.9rem;\n }\n\n input#tab-weight:checked ~ label[for=\"tab-weight\"],\n input#tab-bodyfat:checked ~ label[for=\"tab-bodyfat\"],\n input#tab-ffmi:checked ~ label[for=\"tab-ffmi\"] {\n background-color: #4a90e2;\n color: white;\n }\n\n .goal-content {\n position: relative;\n }\n\n .goal-panel {\n display: none;\n }\n\n input#tab-weight:checked ~ .goal-content #weight-goal,\n input#tab-bodyfat:checked ~ .goal-content #bodyfat-goal,\n input#tab-ffmi:checked ~ .goal-content #ffmi-goal {\n display: block;\n }\n\n .info-section {\n margin-top: 25px;\n background: rgba(0, 0, 0, 0.05);\n border-radius: 10px;\n }\n\n .info-toggle {\n padding: 12px;\n font-weight: bold;\n cursor: pointer;\n background: #f1f3f8;\n border-radius: 10px 10px 0 0;\n }\n\n .info-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease;\n padding: 0 15px;\n }\n\n .info-content.active {\n max-height: 1000px;\n padding: 15px;\n }\n\n .info-content ul {\n margin-left: 20px;\n margin-top: 10px;\n }\n\n .text-warning {\n color: #ff9800;\n font-weight: bold;\n }\n\n @media (max-width: 768px) {\n .glass-card {\n padding: 15px;\n margin: 10px;\n }\n \n .glass-card h2 {\n font-size: 1.3rem;\n }\n \n .subtitle {\n font-size: 0.8rem;\n }\n \n .toggle-btn {\n padding: 12px 8px;\n font-size: 0.9rem;\n }\n \n .ffmi-scale {\n height: 60px;\n }\n \n .scale-marker span {\n font-size: 0.7rem;\n }\n \n .scale-level {\n font-size: 0.65rem;\n }\n \n .your-marker {\n font-size: 0.8rem;\n padding: 4px 6px;\n }\n \n .tab-btn {\n font-size: 0.8rem;\n padding: 8px 6px;\n }\n \n .info-toggle {\n padding: 10px;\n font-size: 0.9rem;\n }\n \n .info-content {\n font-size: 0.85rem;\n }\n }\n\n @media (max-width: 480px) {\n .toggle-container {\n flex-direction: column;\n gap: 5px;\n }\n \n .goal-tabs {\n flex-direction: column;\n gap: 5px;\n }\n \n .goal-tabs .tab-btn {\n border-radius: 10px;\n }\n \n .scale-marker {\n display: none;\n }\n \n .scale-level {\n font-size: 0.6rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"glass-card\">\n <h2>\ud83d\udcca FFMI Rechner v1.3<\/h2>\n <p class=\"subtitle\">Wie viel Muskeln hast du wirklich?<\/p>\n\n <div class=\"input-group\">\n <label>Geschlecht:<\/label>\n <div class=\"toggle-container\">\n <input type=\"radio\" id=\"male\" name=\"gender\" value=\"male\" checked>\n <label for=\"male\" class=\"toggle-btn\">M\u00e4nnlich<\/label>\n <input type=\"radio\" id=\"female\" name=\"gender\" value=\"female\">\n <label for=\"female\" class=\"toggle-btn\">Weiblich<\/label>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"height\">K\u00f6rpergr\u00f6\u00dfe (cm):<\/label>\n <input type=\"number\" id=\"height\" placeholder=\"180\">\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"weight\">Gewicht (kg):<\/label>\n <input type=\"number\" id=\"weight\" placeholder=\"80\">\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"bodyfat\">K\u00f6rperfett (%):<\/label>\n <input type=\"number\" id=\"bodyfat\" placeholder=\"15\">\n <div class=\"range-slider\">\n <input type=\"range\" id=\"bodyfat-slider\" min=\"2\" max=\"50\" step=\"0.1\" value=\"15\">\n <\/div>\n <\/div>\n\n <button onclick=\"calculateFFMI()\">FFMI berechnen<\/button>\n\n <div id=\"results\" class=\"result-box\">\n <p>Gib deine Daten ein und starte die Berechnung<\/p>\n <\/div>\n\n <div class=\"divider\"><\/div>\n\n <h3>FFMI-Vergleich<\/h3>\n <div class=\"ffmi-scale\">\n <div class=\"scale-marker\" style=\"left: 0%\"><span>16<\/span><\/div>\n <div class=\"scale-marker\" style=\"left: 25%\"><span>19<\/span><\/div>\n <div class=\"scale-marker\" style=\"left: 50%\"><span>22<\/span><\/div>\n <div class=\"scale-marker\" style=\"left: 75%\"><span>25<\/span><\/div>\n <div class=\"scale-marker\" style=\"left: 100%\"><span>28+<\/span><\/div>\n <div id=\"your-ffmi-marker\" class=\"your-marker\" style=\"left: 50%\">Du<\/div>\n <div class=\"scale-bar\">\n <div class=\"scale-level\">Schlank<\/div>\n <div class=\"scale-level\">Sportlich<\/div>\n <div class=\"scale-level\">Sehr muskul\u00f6s<\/div>\n <div class=\"scale-level\">Extrem muskul\u00f6s<\/div>\n <\/div>\n <\/div>\n\n <div class=\"divider\"><\/div>\n\n <h3>Zielk\u00f6rper berechnen<\/h3>\n <input type=\"radio\" id=\"tab-weight\" name=\"goal-type\" checked>\n <input type=\"radio\" id=\"tab-bodyfat\" name=\"goal-type\">\n <input type=\"radio\" id=\"tab-ffmi\" name=\"goal-type\">\n \n <div class=\"goal-tabs\">\n <label for=\"tab-weight\" class=\"tab-btn\">Zielgewicht<\/label>\n <label for=\"tab-bodyfat\" class=\"tab-btn\">Ziel-KFA<\/label>\n <label for=\"tab-ffmi\" class=\"tab-btn\">Ziel-FFMI<\/label>\n <\/div>\n\n <div class=\"goal-content\">\n <div id=\"weight-goal\" class=\"goal-panel\">\n <label for=\"target-weight\">Zielgewicht (kg):<\/label>\n <input type=\"number\" id=\"target-weight\" placeholder=\"85\">\n <button onclick=\"calculateWeightGoal()\">Berechnen<\/button>\n <\/div>\n\n <div id=\"bodyfat-goal\" class=\"goal-panel\">\n <label for=\"target-bodyfat\">Ziel-KFA (%):<\/label>\n <input type=\"number\" id=\"target-bodyfat\" placeholder=\"10\">\n <div class=\"range-slider\">\n <input type=\"range\" id=\"target-bodyfat-slider\" min=\"2\" max=\"50\" step=\"0.1\" value=\"10\">\n <\/div>\n <button onclick=\"calculateBodyfatGoal()\">Berechnen<\/button>\n <\/div>\n\n <div id=\"ffmi-goal\" class=\"goal-panel\">\n <label for=\"target-ffmi\">Ziel-FFMI:<\/label>\n <input type=\"number\" id=\"target-ffmi\" placeholder=\"23\">\n <button onclick=\"calculateFFMIGoal()\">Berechnen<\/button>\n <\/div>\n <\/div>\n\n <div id=\"goal-results\" class=\"result-box\">\n <p>Gib dein Ziel ein und klicke auf \u201eBerechnen\"<\/p>\n <\/div>\n\n <div class=\"info-section\">\n <div class=\"info-toggle\" onclick=\"toggleInfo()\">\u2139\ufe0f Was ist FFMI?<\/div>\n <div class=\"info-content\" id=\"info-content\">\n <p>Der <strong>Fat-Free Mass Index<\/strong> (FFMI) zeigt, wie viel Muskelmasse du \u2013 unabh\u00e4ngig von Fett \u2013 auf deiner K\u00f6rpergr\u00f6\u00dfe tr\u00e4gst.<\/p>\n <p>Formel: <code>FFMI = fettfreie Masse \/ Gr\u00f6\u00dfe\u00b2<\/code><\/p>\n\n <ul>\n <li>16\u201318: Schlank<\/li>\n <li>18\u201321: Sportlich<\/li>\n <li>21\u201324: Sehr muskul\u00f6s<\/li>\n <li>24+: Extrem (ggf. nicht natural)<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const bodyfatInput = document.getElementById('bodyfat');\n const bodyfatSlider = document.getElementById('bodyfat-slider');\n const targetBodyfatInput = document.getElementById('target-bodyfat');\n const targetBodyfatSlider = document.getElementById('target-bodyfat-slider');\n\n bodyfatSlider.addEventListener('input', () => {\n bodyfatInput.value = bodyfatSlider.value;\n });\n\n bodyfatInput.addEventListener('input', () => {\n bodyfatSlider.value = bodyfatInput.value;\n });\n\n targetBodyfatSlider.addEventListener('input', () => {\n targetBodyfatInput.value = targetBodyfatSlider.value;\n });\n\n targetBodyfatInput.addEventListener('input', () => {\n targetBodyfatSlider.value = targetBodyfatInput.value;\n });\n\n function toggleInfo() {\n const infoContent = document.getElementById('info-content');\n infoContent.classList.toggle('active');\n }\n\n function calculateFFMI() {\n let height = parseFloat(document.getElementById('height').value) \/ 100;\n let weight = parseFloat(document.getElementById('weight').value);\n let bodyfat = parseFloat(document.getElementById('bodyfat').value);\n\n if (isNaN(height) || isNaN(weight) || isNaN(bodyfat)) {\n document.getElementById('results').innerHTML = '<p class=\"text-warning\">Bitte alle Felder ausf\u00fcllen.<\/p>';\n return;\n }\n\n const leanMass = weight * (1 - bodyfat \/ 100);\n const ffmi = leanMass \/ (height * height);\n const heightCorrection = height > 1.8 ? 6.1 * (1.8 - height) : 0;\n const adjustedFFMI = ffmi + heightCorrection;\n\n let interpretation = \"\";\n if (adjustedFFMI < 18) {\n interpretation = \"<span class='level-beginner'>Schlank<\/span>\";\n } else if (adjustedFFMI < 21) {\n interpretation = \"<span class='level-intermediate'>Sportlich<\/span>\";\n } else if (adjustedFFMI < 24) {\n interpretation = \"<span class='level-advanced'>Sehr muskul\u00f6s<\/span>\";\n } else {\n interpretation = \"<span class='level-elite'>Extrem muskul\u00f6s<\/span>\";\n }\n\n document.getElementById('results').innerHTML = `\n <p>Dein FFMI betr\u00e4gt:<\/p>\n <p class=\"result-highlight\">${adjustedFFMI.toFixed(2)}<\/p>\n <p>Deine fettfreie Masse betr\u00e4gt:<\/p>\n <p class=\"result-highlight\">${leanMass.toFixed(1)} kg<\/p>\n <p class=\"result-interpretation\">${interpretation}<\/p>\n `;\n\n const marker = document.getElementById('your-ffmi-marker');\n const markerPosition = Math.min(Math.max(((adjustedFFMI - 16) \/ 12) * 100, 0), 100);\n marker.style.left = markerPosition + \"%\";\n }\n\n function calculateWeightGoal() {\n const targetWeight = parseFloat(document.getElementById('target-weight').value);\n const bodyfat = parseFloat(document.getElementById('bodyfat').value);\n const weight = parseFloat(document.getElementById('weight').value);\n\n if (isNaN(targetWeight) || isNaN(bodyfat)) {\n document.getElementById('goal-results').innerHTML = '<p class=\"text-warning\">Bitte alle Felder ausf\u00fcllen.<\/p>';\n return;\n }\n\n const leanMass = weight * (1 - bodyfat \/ 100);\n const targetBodyfat = ((targetWeight - leanMass) \/ targetWeight) * 100;\n\n document.getElementById('goal-results').innerHTML = `\n <p>Mit einem Zielgewicht von <strong>${targetWeight.toFixed(1)} kg<\/strong> \n w\u00fcrde dein K\u00f6rperfettanteil <strong>${targetBodyfat.toFixed(1)}%<\/strong> betragen.<\/p>\n `;\n }\n\n function calculateBodyfatGoal() {\n const weight = parseFloat(document.getElementById('weight').value);\n const bodyfat = parseFloat(document.getElementById('bodyfat').value);\n const targetBodyfat = parseFloat(document.getElementById('target-bodyfat').value);\n\n if (isNaN(weight) || isNaN(bodyfat) || isNaN(targetBodyfat)) {\n document.getElementById('goal-results').innerHTML = '<p class=\"text-warning\">Bitte alle Felder ausf\u00fcllen.<\/p>';\n return;\n }\n\n const leanMass = weight * (1 - bodyfat \/ 100);\n const targetWeight = leanMass \/ (1 - targetBodyfat \/ 100);\n\n document.getElementById('goal-results').innerHTML = `\n <p>Um einen K\u00f6rperfettanteil von <strong>${targetBodyfat.toFixed(1)}%<\/strong> zu erreichen, \n sollte dein Zielgewicht <strong>${targetWeight.toFixed(1)} kg<\/strong> betragen.<\/p>\n `;\n }\n\n function calculateFFMIGoal() {\n const height = parseFloat(document.getElementById('height').value) \/ 100;\n const targetFFMI = parseFloat(document.getElementById('target-ffmi').value);\n const weight = parseFloat(document.getElementById('weight').value);\n const bodyfat = parseFloat(document.getElementById('bodyfat').value);\n\n if (isNaN(height) || isNaN(targetFFMI) || isNaN(weight) || isNaN(bodyfat)) {\n document.getElementById('goal-results').innerHTML = '<p class=\"text-warning\">Bitte alle Felder ausf\u00fcllen.<\/p>';\n return;\n }\n\n const currentLeanMass = weight * (1 - bodyfat \/ 100);\n const targetLeanMass = targetFFMI * (height * height);\n\n document.getElementById('goal-results').innerHTML = `\n <p>Aktuelle fettfreie Masse: <strong>${currentLeanMass.toFixed(1)} kg<\/strong><\/p>\n <p>Um einen FFMI von <strong>${targetFFMI.toFixed(2)}<\/strong> zu erreichen, \n solltest du eine fettfreie Masse von <strong>${targetLeanMass.toFixed(1)} kg<\/strong> haben.<\/p>\n `;\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FFMI Rechner Wie fortgeschritten bist du wirklich? FFMI Rechner v1.3 \ud83d\udcca FFMI Rechner v1.3 Wie viel Muskeln hast du wirklich? Geschlecht: M\u00e4nnlich Weiblich K\u00f6rpergr\u00f6\u00dfe (cm): Gewicht (kg): K\u00f6rperfett (%): FFMI berechnen Gib deine Daten ein und starte die Berechnung FFMI-Vergleich 16 19 22 25 28+ Du Schlank Sportlich Sehr muskul\u00f6s Extrem muskul\u00f6s Zielk\u00f6rper berechnen Zielgewicht […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1152","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pflhub.de\/index.php?rest_route=\/wp\/v2\/pages\/1152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pflhub.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pflhub.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pflhub.de\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/pflhub.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1152"}],"version-history":[{"count":10,"href":"https:\/\/pflhub.de\/index.php?rest_route=\/wp\/v2\/pages\/1152\/revisions"}],"predecessor-version":[{"id":1175,"href":"https:\/\/pflhub.de\/index.php?rest_route=\/wp\/v2\/pages\/1152\/revisions\/1175"}],"wp:attachment":[{"href":"https:\/\/pflhub.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}