Calculator: Calorie Requirement

<div class="o-calculator calculator--calorie-requirement js-calculator-calorie-requirement-init ">

    <noscript>
        <div class="calculator__noscript-hint">
            In Ihrem Webbrowser ist JavaScript deaktiviert - Sie können den Rechner zur Ermittlung Ihres Kalorienbedarfs auf dieser Seite daher nicht in interaktiver Form nutzen.
        </div>
    </noscript>

    <div class="calculator__disclaimer">
        <strong>Anmerkung:</strong> Die Ergebnisse solcher Berechnungen sind als Richtwerte zu verstehen, da niemals alle individuellen Faktoren berücksichtigt werden. Sie gelten für gesunde Menschen im normalgewichtigen Bereich ohne weitere Besonderheiten (z. B. Schwangerschaft & Stillzeit, Erkrankungen, hormonelle Störungen, Medikamenteneinnahmen).
    </div>

    <form class="calculator__form" novalidate>
        <div class="calculator__error">
            <h3 class="calculator__error-headline" tabindex="-1">
                <i class="a-icon icon--warning-circle" aria-hidden="true"></i>Beachten Sie Folgendes:
            </h3>
            <ul class="calculator__error-list js-calculator__error-list"></ul>
        </div>
        <fieldset class="calculator__fieldset">
            <legend class="sr-only">Geben Sie Ihr Geschlecht, Alter und Körpergewicht ein und wählen Sie ein Aktivitätsniveau, um ihren Kalorienbedarf zu berechnen.</legend>
            <fieldset class="calculator__form-row" aria-describedby="question_gender">
                <legend class="calculator__fieldname" id="question_gender">Geschlecht</legend>
                <div class="calculator__input-wrapper" id="crc_gender" aria-describedby="crc_form_input_errormessage_crc_gender">
                    <div class="calculator__radio-wrapper">
                        <input required type="radio" class="calculator__input--radio" name="crc_gender" id="crc_gender_f" value="f" aria-describedby="crc_form_input_errormessage_crc_gender">
                        <label for="crc_gender_f" class="calculator__radio-label">weiblich</label>
                    </div>
                    <div class="calculator__radio-wrapper">
                        <input type="radio" class="calculator__input--radio" name="crc_gender" id="crc_gender_m" value="m" aria-describedby="crc_form_input_errormessage_crc_gender">
                        <label for="crc_gender_m" class="calculator__radio-label">männlich</label>
                    </div>
                    <div class="calculator__radio-wrapper">
                        <input type="radio" class="calculator__input--radio" name="crc_gender" id="crc_gender_d" value="d" aria-describedby="crc_form_input_errormessage_crc_gender">
                        <label for="crc_gender_d" class="calculator__radio-label">divers</label>
                    </div>
                </div>
                <div class="calculator__errormessage" id="crc_form_input_errormessage_crc_gender"></div>
            </fieldset>

            <div class=" calculator__form-row" aria-label="Alter in Jahren">
                <label for="crc_age" class="calculator__fieldname" aria-label="Alter in Jahren">Alter</label>
                <div class="calculator__input-wrapper">
                    <input required class="a-input input--number calculator__input calculator__input--half" type="number" step="any" min="1" max="120" name="crc_age" id="crc_age" aria-describedby="crc_form_input_errormessage_crc_age" />
                    <span class="calculator__input-unit">Jahre</span>
                </div>
                <div class="calculator__errormessage" id="crc_form_input_errormessage_crc_age"></div>
            </div>

            <div class=" calculator__form-row" aria-label="Körpergewicht in Kilogramm">
                <label class="calculator__fieldname" for="crc_weight" aria-label="Körpergewicht in Kilogramm.">Körpergewicht</label>
                <div class="calculator__input-wrapper">
                    <input required class="a-input input--number calculator__input calculator__input--half" type="number" step="any" min="10" max="350" name="crc_weight" id="crc_weight" aria-describedby="crc_form_input_errormessage_crc_weight" />
                    <span class="calculator__input-unit">kg</span>
                </div>
                <div class="calculator__errormessage" id="crc_form_input_errormessage_crc_weight"></div>
            </div>

            <div class=" calculator__form-row">
                <label for="crc_pal" class="calculator__fieldname">Aktivitätsniveau</label>
                <div class="calculator__input-wrapper">
                    <select required class="calculator__select" name="crc_pal" id="crc_pal" aria-describedby="crc_form_input_errormessage_crc_pal">
                        <option value="">-- bitte wählen --</option>
                        <option value="a">ausschließlich sitzende oder liegende Lebensweise</option>
                        <option value="b">ausschließlich sitzende Tätigkeit mit wenig oder keiner anstrengenden Freizeitaktivität</option>
                        <option value="c">sitzende, gehende und stehende Tätigkeit, wenig oder keine anstrengende Freizeitaktivität</option>
                        <option value="d">überwiegend gehende und stehende Arbeit</option>
                        <option value="e">körperlich anstrengende berufliche Arbeit oder sehr aktive Freizeittätigkeit</option>
                    </select>
                    <span class="sr-only">Aktivitätsniveau</span>
                </div>
                <div class="calculator__errormessage" id="crc_form_input_errormessage_crc_pal"></div>
            </div>
            <input class="a-btn btn--primary calculator__btn--primary" type="submit" value="Kalorienbedarf berechnen" title="Kalorienbedarf berechnen" id="crc_button">
        </fieldset>
    </form>

    <div class="calculator__result" id="crc_result" style="max-height: 0;"></div>

</div>