@extends('layouts.app')
@section('title', 'Körperfett Rechner – Körperfettanteil berechnen | kotsch.tech')
@section('meta_description', 'Körperfett Rechner kostenlos: Körperfettanteil nach der US-Navy-Methode berechnen. Für Männer und Frauen – schnell, einfach und ohne Geräte.')
@section('meta_extra')
<meta name="keywords" content="Körperfett Rechner, Körperfettanteil berechnen, Navy Methode, Fettanteil berechnen, Körperfett messen, KFA Rechner, Körperfett Mann Frau">
@endsection
@section('content')
<style>
    :root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #e11d48; }
    .tool-page { min-height: 100vh; background: linear-gradient(135deg, #fff1f2 0%, #fff 60%); padding-top: 92px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
    .tool-container { width: min(100% - 40px, 680px); margin: 0 auto; padding: 24px 0 60px; }
    .tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(225,29,72,0.12); color: #9f1239; font-size: 0.72rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
    h1.tool-h1 { margin: 18px 0 10px; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -2px; font-weight: 800; }
    .tool-page p.sub { color: var(--muted); line-height: 1.7; margin: 0 0 28px; }
    .panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 24px 60px -32px rgba(15,23,42,0.18); margin-bottom: 16px; }
    .section-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 14px; }
    .gender-toggle { display: flex; gap: 0; margin-bottom: 24px; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; }
    .gender-btn { flex: 1; min-height: 46px; border: none; background: transparent; font: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer; transition: all 0.18s; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
    .gender-btn.active { background: var(--accent); color: #fff; }
    .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .field label { display: block; font-weight: 700; margin-bottom: 7px; font-size: 0.88rem; }
    .field input { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 1rem; outline: 0; box-sizing: border-box; }
    .field input:focus { border-color: var(--accent); outline: 4px solid rgba(225,29,72,0.1); }
    .field input:disabled { background: #f8fafc; color: var(--muted); cursor: not-allowed; }
    .result-box { text-align: center; padding: 10px 0 18px; }
    .res-pct { font-size: 4rem; font-weight: 900; letter-spacing: -3px; line-height: 1; }
    .res-cat { display: inline-block; padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: 0.9rem; margin: 10px 0; }
    .res-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.6; max-width: 380px; margin: 0 auto; }
    .indicator-wrap { margin: 20px 0 8px; }
    .indicator-bar { position: relative; height: 18px; border-radius: 99px; overflow: hidden; display: flex; }
    .ind-seg { height: 100%; flex: 1; }
    .ind-marker { position: absolute; top: -5px; width: 4px; height: 28px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); transition: left 0.5s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
    .ind-labels { display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.7rem; font-weight: 700; color: var(--muted); }
    .cat-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-top: 4px; }
    .cat-table th { text-align: left; padding: 8px 10px; font-size: 0.73rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 2px solid var(--line); }
    .cat-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); font-weight: 600; }
    .cat-table tr:last-child td { border-bottom: none; }
    .cat-table tr.active-cat td { background: rgba(225,29,72,0.06); font-weight: 800; }
    .cat-table tr.active-cat td:first-child { border-left: 3px solid var(--accent); padding-left: 8px; }
    .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
    .placeholder { color: var(--muted); font-size: 0.93rem; text-align: center; padding: 16px 0; }
    .formula-note { font-size: 0.78rem; color: var(--muted); margin-top: 14px; line-height: 1.5; padding: 10px 13px; background: #f8fafc; border-radius: 10px; border: 1px solid var(--line); }
    @media(max-width:520px){ .input-grid { grid-template-columns: 1fr; } }
</style>

<div class="tool-page"><div class="tool-container">
    <section style="margin-bottom:28px">
        <span class="tag">Gesundheit</span>
        <h1 class="tool-h1">Körperfett.</h1>
        <p class="sub">Körperfettanteil berechnen nach der US-Navy-Methode – ohne Waage oder Messgerät.</p>
    </section>

    <div class="panel">
        <div class="section-label">Geschlecht</div>
        <div class="gender-toggle">
            <button class="gender-btn active" id="btn-mann" onclick="setGender('mann')">♂ Mann</button>
            <button class="gender-btn" id="btn-frau" onclick="setGender('frau')">♀ Frau</button>
        </div>

        <div class="input-grid">
            <div class="field">
                <label>Größe (cm)</label>
                <input type="number" id="height" placeholder="z.B. 178" min="100" max="250" oninput="calc()">
            </div>
            <div class="field">
                <label>Gewicht (kg)</label>
                <input type="number" id="weight" placeholder="z.B. 80" min="30" max="300" oninput="calc()">
            </div>
            <div class="field">
                <label>Halsumfang (cm)</label>
                <input type="number" id="neck" placeholder="z.B. 38" min="20" max="80" step="0.5" oninput="calc()">
            </div>
            <div class="field">
                <label>Taillenumfang (cm)</label>
                <input type="number" id="waist" placeholder="z.B. 85" min="40" max="200" step="0.5" oninput="calc()">
            </div>
            <div class="field" id="hip-field">
                <label>Hüftumfang (cm)</label>
                <input type="number" id="hip" placeholder="z.B. 95" min="50" max="200" step="0.5" oninput="calc()">
            </div>
        </div>

        <div class="formula-note">
            ℹ Gemessen wird der Umfang an der engsten Stelle (Taille: nabelnahe Stelle, Hals: unterhalb des Kehlkopfes, Hüfte: an der breitesten Stelle).
        </div>
    </div>

    <div class="panel">
        <div id="res-placeholder" class="placeholder">Bitte alle Felder ausfüllen …</div>

        <div id="res-content" style="display:none">
            <div class="result-box">
                <div class="res-pct" id="res-pct" style="color:var(--accent)">0 %</div>
                <div class="res-cat" id="res-cat">–</div>
                <div class="res-desc" id="res-desc"></div>
            </div>

            <div class="indicator-wrap">
                <div class="indicator-bar" id="ind-bar">
                    <div class="ind-seg" style="background:#3b82f6"></div>
                    <div class="ind-seg" style="background:#22c55e"></div>
                    <div class="ind-seg" style="background:#eab308"></div>
                    <div class="ind-seg" style="background:#f97316"></div>
                    <div class="ind-seg" style="background:#ef4444"></div>
                    <div class="ind-marker" id="ind-marker" style="left:0%"></div>
                </div>
                <div class="ind-labels" id="ind-labels"></div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="section-label">Kategorien</div>
        <table class="cat-table" id="cat-table">
            <thead><tr><th>Kategorie</th><th>Mann</th><th>Frau</th></tr></thead>
            <tbody id="cat-tbody"></tbody>
        </table>
    </div>
</div>@include('tools._ads_banner')</div>

<script>
    let gender = 'mann';

    const catsM = [
        { name: 'Sehr gering',    min: 0,  max: 6,  color: '#3b82f6', desc: 'Sehr niedriger Körperfettanteil – typisch für Wettkampfsportler. Langfristig gesundheitlich bedenklich.' },
        { name: 'Sportlich',      min: 6,  max: 14, color: '#22c55e', desc: 'Sportlicher Bereich. Muskulatur gut sichtbar, sehr gesund und leistungsfähig.' },
        { name: 'Fitness',        min: 14, max: 18, color: '#eab308', desc: 'Fit und gesund. Guter Ausgangsbereich für die meisten Männer.' },
        { name: 'Durchschnitt',   min: 18, max: 25, color: '#f97316', desc: 'Durchschnittlicher Bereich. Leichtes Übergewicht möglich.' },
        { name: 'Übergewichtig',  min: 25, max: 100,color: '#ef4444', desc: 'Erhöhtes Körperfett. Ernährungsumstellung und mehr Bewegung empfohlen.' },
    ];

    const catsF = [
        { name: 'Sehr gering',    min: 0,  max: 14, color: '#3b82f6', desc: 'Sehr niedriger Körperfettanteil – bei Frauen auf Dauer gesundheitsschädlich (Hormonstörungen).' },
        { name: 'Sportlich',      min: 14, max: 21, color: '#22c55e', desc: 'Sportlicher Bereich. Muskelkontur gut sichtbar, sehr fit und gesund.' },
        { name: 'Fitness',        min: 21, max: 25, color: '#eab308', desc: 'Fit und gesund. Guter Bereich für aktive Frauen.' },
        { name: 'Durchschnitt',   min: 25, max: 32, color: '#f97316', desc: 'Durchschnittlicher Bereich. Gesund, aber mit Potenzial zur Verbesserung.' },
        { name: 'Übergewichtig',  min: 32, max: 100,color: '#ef4444', desc: 'Erhöhtes Körperfett. Bewegung und ausgewogene Ernährung empfohlen.' },
    ];

    function setGender(g) {
        gender = g;
        document.getElementById('btn-mann').classList.toggle('active', g === 'mann');
        document.getElementById('btn-frau').classList.toggle('active', g === 'frau');
        const hipField = document.getElementById('hip-field');
        hipField.style.display = g === 'frau' ? 'block' : 'none';
        document.getElementById('hip').disabled = g === 'mann';
        renderCatTable();
        calc();
    }

    function renderCatTable() {
        const cats = gender === 'mann' ? catsM : catsF;
        const tbody = document.getElementById('cat-tbody');
        tbody.innerHTML = cats.map((c, i) =>
            `<tr id="cat-row-${i}">
                <td><span class="dot" style="background:${c.color}"></span>${c.name}</td>
                <td>${catsM[i].min}–${catsM[i].max === 100 ? '&gt;25' : catsM[i].max} %</td>
                <td>${catsF[i].min}–${catsF[i].max === 100 ? '&gt;32' : catsF[i].max} %</td>
            </tr>`
        ).join('');
    }

    function calc() {
        const h = parseFloat(document.getElementById('height').value);
        const w = parseFloat(document.getElementById('weight').value);
        const neck = parseFloat(document.getElementById('neck').value);
        const waist = parseFloat(document.getElementById('waist').value);
        const hip = parseFloat(document.getElementById('hip').value);

        const needHip = gender === 'frau';
        if (!h || !neck || !waist || (needHip && !hip) || waist <= neck) {
            document.getElementById('res-placeholder').style.display = 'block';
            document.getElementById('res-content').style.display = 'none';
            return;
        }

        let bf;
        if (gender === 'mann') {
            // US Navy formula for men
            const log1 = Math.log10(waist - neck);
            const log2 = Math.log10(h);
            bf = 495 / (1.0324 - 0.19077 * log1 + 0.15456 * log2) - 450;
        } else {
            // US Navy formula for women
            if (!hip || waist + hip <= neck) return;
            const log1 = Math.log10(waist + hip - neck);
            const log2 = Math.log10(h);
            bf = 495 / (1.29579 - 0.35004 * log1 + 0.22100 * log2) - 450;
        }

        bf = Math.max(2, Math.min(bf, 60));

        const cats = gender === 'mann' ? catsM : catsF;
        const catIdx = cats.findIndex(c => bf < c.max);
        const cat = cats[catIdx >= 0 ? catIdx : cats.length - 1];
        const effectiveIdx = catIdx >= 0 ? catIdx : cats.length - 1;

        document.getElementById('res-pct').textContent = bf.toFixed(1).replace('.', ',') + ' %';
        document.getElementById('res-pct').style.color = cat.color;

        const catEl = document.getElementById('res-cat');
        catEl.textContent = cat.name;
        catEl.style.background = cat.color + '22';
        catEl.style.color = cat.color;

        document.getElementById('res-desc').textContent = cat.desc;

        // Indicator position
        const maxBf = gender === 'mann' ? 40 : 50;
        const minBf = gender === 'mann' ? 2 : 10;
        const pct = Math.min(Math.max((bf - minBf) / (maxBf - minBf), 0), 1) * 100;
        document.getElementById('ind-marker').style.left = pct + '%';

        const labels = cats.map(c => c.min + '%');
        labels.push(gender === 'mann' ? '25%+' : '32%+');
        document.getElementById('ind-labels').innerHTML = labels.map(l => `<span>${l}</span>`).join('');

        // Highlight active row
        document.querySelectorAll('.cat-table tbody tr').forEach((r, i) => {
            r.classList.toggle('active-cat', i === effectiveIdx);
        });

        document.getElementById('res-placeholder').style.display = 'none';
        document.getElementById('res-content').style.display = 'block';
    }

    // Init
    renderCatTable();
    document.getElementById('hip-field').style.display = 'none';
    document.getElementById('hip').disabled = true;
</script>

@include('tools._seo_content', ['toolSlug' => 'koerperfett-rechner', 'toolName' => 'Körperfett Rechner'])

@endsection