@extends('layouts.app')
@section('title', 'BMI Rechner – Body-Mass-Index berechnen | kotsch.tech')
@section('meta_description', 'BMI Rechner kostenlos online: Body-Mass-Index berechnen mit Gewicht und Größe. Sofortige Auswertung mit Normalgewicht-Tabelle. BMI berechnen einfach und schnell.')
@section('meta_extra')
<meta name="keywords" content="BMI Rechner, BMI berechnen, Body Mass Index, Normalgewicht berechnen, BMI Tabelle, Übergewicht berechnen, BMI online">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.bmi-gauge-wrap { position: relative; height: 14px; border-radius: 999px; overflow: hidden;
    background: linear-gradient(to right,#f59e0b 0%,#f59e0b 18.5%,#10b981 18.5%,#10b981 25%,#f97316 25%,#f97316 30%,#ef4444 30%,#ef4444 35%,#dc2626 35%,#dc2626 40%,#991b1b 40%,#991b1b 100%);
    margin: 10px 0 6px; }
.bmi-gauge-pointer { position: absolute; top: -3px; width: 4px; height: 20px;
    background: var(--ink); border-radius: 2px; transform: translateX(-50%);
    transition: left 0.5s; }
.big-bmi { font-size: clamp(3rem, 10vw, 5rem); font-weight: 900; letter-spacing: -3px; line-height: 1; }
.bmi-badge { display: inline-flex; padding: 7px 18px; border-radius: 999px; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.unit-toggle { display: flex; gap: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 20px; width: fit-content; }
.unit-btn { padding: 8px 18px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--muted); transition: all 0.15s; }
.unit-btn.active { background: var(--ink); color: #fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-weight-scale"></i> Gesundheit</span>
        <h1 class="tool-h1">BMI<span>-Rechner.</span></h1>
        <p class="tool-sub">Body-Mass-Index live berechnen – mit WHO-Klassifikation, Idealgewicht und visueller Skala.</p>
    </div>

    <div class="t-panel">
        <div class="unit-toggle">
            <button class="unit-btn active" id="btn-metric" onclick="setUnit('metric')">kg / cm</button>
            <button class="unit-btn" id="btn-imperial" onclick="setUnit('imperial')">lbs / ft</button>
        </div>

        <div class="t-grid-2">
            <div class="t-field">
                <label class="t-label" id="lbl-weight">Gewicht (kg)</label>
                <input type="number" class="t-input" id="val-weight" placeholder="75" min="20" max="300" oninput="calc()">
            </div>
            <div class="t-field">
                <label class="t-label" id="lbl-height">Größe (cm)</label>
                <input type="number" class="t-input" id="val-height" placeholder="175" min="50" max="280" oninput="calc()">
            </div>
        </div>
        <div class="t-info" style="margin-top:14px">Nur grobe Orientierung, keine Diagnose oder medizinische Beratung. Bei Beschwerden, Essstoerung, Schwangerschaft, Kindern oder Extremwerten Fachpersonal fragen.</div>

        <div id="res-empty" style="color:var(--muted);text-align:center;padding:24px 0;font-weight:600">
            Gewicht und Größe eingeben, um den BMI zu berechnen.
        </div>
        <div id="res-block" style="display:none">
            <div style="text-align:center;padding:10px 0 4px">
                <div class="big-bmi" id="bmi-val">—</div>
                <div class="bmi-badge" id="bmi-badge" style="margin:10px auto 0">—</div>
            </div>
            <div class="bmi-gauge-wrap" id="gauge-wrap">
                <div class="bmi-gauge-pointer" id="gauge-ptr" style="left:0"></div>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:0.7rem;color:var(--muted);font-weight:700;margin-bottom:16px">
                <span>15</span><span>18.5</span><span>25</span><span>30</span><span>35</span><span>40+</span>
            </div>
            <div id="bmi-desc" class="t-info" style="margin-bottom:16px;text-align:center"></div>
            <div class="t-grid-2" style="margin-top:8px">
                <div class="t-stat-card">
                    <div class="t-stat-num" id="ideal-low">—</div>
                    <div class="t-stat-lbl">Idealgewicht min.</div>
                </div>
                <div class="t-stat-card accent">
                    <div class="t-stat-num" id="ideal-high">—</div>
                    <div class="t-stat-lbl">Idealgewicht max.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-list"></i> WHO-Klassifikation</div>
        <div id="bmi-table">
            <div class="t-row"><span class="t-row-lbl">Untergewicht</span><span class="t-row-val" data-cat="0">BMI &lt; 18,5</span></div>
            <div class="t-row"><span class="t-row-lbl">Normalgewicht</span><span class="t-row-val" data-cat="1">18,5 – 24,9</span></div>
            <div class="t-row"><span class="t-row-lbl">Präadipositas</span><span class="t-row-val" data-cat="2">25,0 – 29,9</span></div>
            <div class="t-row"><span class="t-row-lbl">Adipositas Grad I</span><span class="t-row-val" data-cat="3">30,0 – 34,9</span></div>
            <div class="t-row"><span class="t-row-lbl">Adipositas Grad II</span><span class="t-row-val" data-cat="4">35,0 – 39,9</span></div>
            <div class="t-row"><span class="t-row-lbl">Adipositas Grad III</span><span class="t-row-val" data-cat="5">≥ 40,0</span></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const cats = [
    { max: 18.5, label:'Untergewicht',     color:'#f59e0b', desc:'Dein BMI liegt unter dem Normalbereich. Ärztliche Beratung kann sinnvoll sein.' },
    { max: 25.0, label:'Normalgewicht',    color:'#10b981', desc:'Du befindest dich im optimalen Gewichtsbereich. Weiter so!' },
    { max: 30.0, label:'Präadipositas',    color:'#f97316', desc:'Leichtes Übergewicht. Etwas mehr Bewegung und bewusste Ernährung können helfen.' },
    { max: 35.0, label:'Adipositas Grad I', color:'#ef4444', desc:'Erhöhtes gesundheitliches Risiko. Ärztlicher Rat zur Gewichtsreduktion empfohlen.' },
    { max: 40.0, label:'Adipositas Grad II',color:'#dc2626', desc:'Deutlich erhöhtes Risiko. Ärztlich begleitete Therapie stark angeraten.' },
    { max:Infinity,label:'Adipositas Grad III',color:'#991b1b',desc:'Sehr hohes Risiko. Bitte zeitnah medizinisches Fachpersonal aufsuchen.' },
];
let unitMode = 'metric';
function setUnit(u) {
    unitMode = u;
    document.getElementById('btn-metric').classList.toggle('active', u === 'metric');
    document.getElementById('btn-imperial').classList.toggle('active', u === 'imperial');
    document.getElementById('lbl-weight').textContent = u === 'metric' ? 'Gewicht (kg)' : 'Gewicht (lbs)';
    document.getElementById('lbl-height').textContent = u === 'metric' ? 'Größe (cm)'   : 'Größe (ft, z.B. 5.9)';
    document.getElementById('val-weight').placeholder = u === 'metric' ? '75' : '165';
    document.getElementById('val-height').placeholder = u === 'metric' ? '175' : '5.9';
    calc();
}
function calc() {
    let w = parseFloat(document.getElementById('val-weight').value);
    let h = parseFloat(document.getElementById('val-height').value);
    if (unitMode === 'imperial') { w = w * 0.453592; h = h * 30.48; }
    const hm = h / 100;
    if (!w || !h || hm < 0.5 || w < 10) {
        document.getElementById('res-empty').style.display = 'block';
        document.getElementById('res-block').style.display = 'none';
        clearActive(); return;
    }
    const bmi = w / (hm * hm);
    let ci = cats.findIndex(c => bmi < c.max); if (ci < 0) ci = 5;
    const cat = cats[ci];
    document.getElementById('bmi-val').textContent  = bmi.toFixed(1).replace('.',',');
    document.getElementById('bmi-val').style.color  = cat.color;
    const badge = document.getElementById('bmi-badge');
    badge.textContent = cat.label;
    badge.style.background = cat.color + '22'; badge.style.color = cat.color;
    document.getElementById('bmi-desc').textContent = cat.desc;
    const minW = (18.5 * hm * hm).toFixed(1).replace('.',',');
    const maxW = (24.9 * hm * hm).toFixed(1).replace('.',',');
    document.getElementById('ideal-low').textContent  = (unitMode === 'imperial' ? (18.5 * hm * hm / 0.453592).toFixed(1) : minW) + (unitMode === 'imperial' ? ' lbs' : ' kg');
    document.getElementById('ideal-high').textContent = (unitMode === 'imperial' ? (24.9 * hm * hm / 0.453592).toFixed(1) : maxW) + (unitMode === 'imperial' ? ' lbs' : ' kg');
    const pct = Math.max(0, Math.min(100, (bmi - 15) / 25 * 100));
    document.getElementById('gauge-ptr').style.left = pct + '%';
    document.getElementById('res-empty').style.display = 'none';
    document.getElementById('res-block').style.display = 'block';
    clearActive();
    const rows = document.querySelectorAll('#bmi-table .t-row');
    if (rows[ci]) rows[ci].style.background = cat.color + '18';
}
function clearActive() {
    document.querySelectorAll('#bmi-table .t-row').forEach(r => r.style.background = '');
}
</script>

@include('tools._seo_content', ['toolSlug' => 'bmi-rechner', 'toolName' => 'BMI Rechner'])

@endsection