{{-- Kaloriendefizit-Rechner (Shortcode [kalorienrechner]). Formel: Mifflin-St Jeor --}}
@php $rid = 'kr' . substr(md5(uniqid('', true)), 0, 6); @endphp
<section class="kalorienrechner" id="{{ $rid }}" aria-labelledby="kaloriendefizit-rechner">
    <h2 id="kaloriendefizit-rechner" class="kalorienrechner__title">Kaloriendefizit-Rechner</h2>
    <p class="kalorienrechner__intro">Berechne Grundumsatz, Gesamtumsatz und dein Kalorienziel zum Abnehmen – in 10 Sekunden, ohne Anmeldung.</p>

    <form class="kalorienrechner__form" novalidate>
        <fieldset class="kr-field kr-field--full">
            <legend>Geschlecht</legend>
            <label class="kr-radio"><input type="radio" name="sex" value="f" checked> Frau</label>
            <label class="kr-radio"><input type="radio" name="sex" value="m"> Mann</label>
        </fieldset>
        <label class="kr-field">Alter <span>(Jahre)</span>
            <input type="number" name="age" min="15" max="100" value="30" inputmode="numeric" required>
        </label>
        <label class="kr-field">Größe <span>(cm)</span>
            <input type="number" name="height" min="120" max="230" value="170" inputmode="numeric" required>
        </label>
        <label class="kr-field">Gewicht <span>(kg)</span>
            <input type="number" name="weight" min="35" max="300" step="0.1" value="75" inputmode="decimal" required>
        </label>
        <label class="kr-field kr-field--full">Aktivität im Alltag
            <select name="pal">
                <option value="1.2">Kaum Bewegung (Bürojob, kein Sport)</option>
                <option value="1.375" selected>Leicht aktiv (1–3× Training pro Woche)</option>
                <option value="1.55">Mäßig aktiv (3–5× Training pro Woche)</option>
                <option value="1.725">Sehr aktiv (6–7× Training oder körperliche Arbeit)</option>
                <option value="1.9">Extrem aktiv (Leistungssport + körperliche Arbeit)</option>
            </select>
        </label>
        <button type="submit" class="btn btn-primary kr-submit">Jetzt berechnen</button>
    </form>

    <div class="kalorienrechner__result" hidden aria-live="polite">
        <div class="kr-grid">
            <div class="kr-card"><span class="kr-label">Grundumsatz</span><span class="kr-value" data-out="bmr"></span><span class="kr-unit">kcal/Tag</span></div>
            <div class="kr-card"><span class="kr-label">Gesamtumsatz</span><span class="kr-value" data-out="tdee"></span><span class="kr-unit">kcal/Tag</span></div>
            <div class="kr-card kr-card--accent"><span class="kr-label">Abnehmen (empfohlen)</span><span class="kr-value" data-out="target"></span><span class="kr-unit">kcal/Tag</span></div>
        </div>
        <table class="kr-table">
            <thead><tr><th>Ziel</th><th>Kalorien pro Tag</th><th>Tempo (ca.)</th></tr></thead>
            <tbody>
                <tr><td>Gewicht halten</td><td data-out="keep"></td><td>–</td></tr>
                <tr><td>Sanft abnehmen (−300 kcal)</td><td data-out="soft"></td><td data-out="soft-rate"></td></tr>
                <tr><td>Moderat abnehmen (−500 kcal)</td><td data-out="mod"></td><td data-out="mod-rate"></td></tr>
            </tbody>
        </table>
        <p class="kr-protein">Protein-Empfehlung: <strong data-out="protein"></strong> pro Tag (1,6–2,2 g pro kg Körpergewicht) – schützt deine Muskeln im Defizit.</p>
        <p class="kr-warning" data-out="warning" hidden></p>
        <p class="kr-note">Schätzwerte nach der Mifflin-St-Jeor-Formel. Prüfe nach 2–3 Wochen deinen Gewichtstrend und passe die Kalorien in Schritten von 100–200 kcal an. Kein Ersatz für ärztliche Beratung – bei Vorerkrankungen, Schwangerschaft oder Essstörungen bitte professionell begleiten lassen.</p>
    </div>
</section>

<script>
(function () {
    var root = document.getElementById(@json($rid));
    if (!root) return;
    var form = root.querySelector('form');
    var result = root.querySelector('.kalorienrechner__result');
    var fmt = new Intl.NumberFormat('de-AT', { maximumFractionDigits: 0 });
    var fmt1 = new Intl.NumberFormat('de-AT', { maximumFractionDigits: 1, minimumFractionDigits: 1 });
    function out(key, text) { root.querySelectorAll('[data-out="' + key + '"]').forEach(function (el) { el.textContent = text; }); }

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var d = new FormData(form);
        var age = parseFloat(d.get('age')), h = parseFloat(d.get('height')), w = parseFloat(String(d.get('weight')).replace(',', '.'));
        var pal = parseFloat(d.get('pal')), sex = d.get('sex');
        if (!(age >= 15 && age <= 100 && h >= 120 && h <= 230 && w >= 35 && w <= 300)) {
            out('warning', 'Bitte gib realistische Werte ein (Alter 15–100, Größe 120–230 cm, Gewicht 35–300 kg).');
            root.querySelector('[data-out="warning"]').hidden = false;
            result.hidden = false;
            return;
        }
        var bmr = 10 * w + 6.25 * h - 5 * age + (sex === 'm' ? 5 : -161);
        var tdee = bmr * pal;
        var soft = tdee - 300, mod = tdee - 500;
        var floor = Math.max(bmr, sex === 'm' ? 1500 : 1200);
        var target = Math.max(mod, floor);

        out('bmr', fmt.format(bmr));
        out('tdee', fmt.format(tdee));
        out('target', fmt.format(target));
        out('keep', fmt.format(tdee) + ' kcal');
        out('soft', fmt.format(soft) + ' kcal');
        out('mod', fmt.format(mod) + ' kcal');
        out('soft-rate', fmt1.format(300 * 7 / 7700) + ' kg/Woche');
        out('mod-rate', fmt1.format(500 * 7 / 7700) + ' kg/Woche');
        out('protein', fmt.format(w * 1.6) + '–' + fmt.format(w * 2.2) + ' g');

        var warn = root.querySelector('[data-out="warning"]');
        if (mod < floor) {
            warn.textContent = 'Hinweis: −500 kcal würden unter deinem Grundumsatz bzw. einer sinnvollen Untergrenze liegen. Die Empfehlung wurde deshalb auf ' + fmt.format(floor) + ' kcal begrenzt – mehr Bewegung im Alltag ist hier der bessere Hebel.';
            warn.hidden = false;
        } else {
            warn.hidden = true;
        }
        result.hidden = false;
        result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

        if (typeof gtag === 'function') {
            gtag('event', 'calculator_use', { calculator: 'kaloriendefizit', page_path: location.pathname });
        }
    });
})();
</script>