Bmi Rechner Simple: Lead Magnets

<!-- START CSS via BAS -->
<style>
    .container {
        margin: 2.25rem 4.1666666667% 0
    }

    .container:after,
    .container:before {
        clear: both;
        content: " ";
        display: table
    }

    @media (min-width: 1024px) {
        .container {
            margin: 3.25rem 8.3333333333% 0
        }

        .container-width {
            width: 996px
        }
    }

    .application {
        line-height: 1.5
    }

    .application fieldset {
        padding: 0;
    }

    .intro {
        padding-bottom: 24px
    }

    .main .richtext-vision {
        color: #4a4a4a;
        -ms-hyphens: auto;
        hyphens: auto;
        word-break: break-word
    }

    @media (min-width: 740px) {
        .main .richtext-vision .wide {
            width: 100%
        }
    }

    .main .richtext-vision h1 {
        display: block;
        font-size: 26px;
        font-weight: 600;
        font-weight: 900;
        line-height: 34px;
        margin: 0;
        padding: 0 0 32px;
    }

    @media (min-width: 740px) {
        .main .richtext-vision h1 {
            font-size: 30px;
            line-height: 38px;
        }
    }

    @media (min-width: 1024px) {
        .main .richtext-vision h1 {
            font-size: 36px;
            line-height: 44px;
        }
    }

    .main .richtext-vision a:not(.btn):not(.panel-toggle):not([class]),
    .main .richtext-vision a:not(.btn):not(.panel-toggle)[class=""] {
        color: #4e8422;
        text-decoration: underline
    }

    .main .richtext-vision a:not(.btn):not(.panel-toggle).bgek-focus-visible {
        outline: 3px solid #747474;
        outline-offset: 4px
    }

    .main .richtext-vision a:not(.btn):not(.panel-toggle):focus,
    .main .richtext-vision a:not(.btn):not(.panel-toggle):hover {
        color: #3e6a1b
    }

    .main .richtext-vision a:not(.btn):not(.panel-toggle):active {
        color: #4e8422
    }

    .form .fieldset .field,
    .form .fieldset p,
    .form fieldset .field,
    .form fieldset p,
    .result .richtext .fieldset .field,
    .result .richtext .fieldset p,
    .result .richtext fieldset .field,
    .result .richtext fieldset p {
        clear: left;
        padding-bottom: 12px;
        position: relative
    }

    .main .richtext p,
    .richtext>div.checkbox {
        font-family: barmer-sans, Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 200;
        line-height: 1.5;
        padding: 0 0 24px
    }

    .application .inputfield,
    .application p {
        padding-bottom: 18px;
    }

    @media (min-width: 740px) {
        .main .richtext p {
            font-size: 16px
        }
    }

    @media (min-width: 1024px) {
        .main .richtext p {
            font-family: barmer-sans, Helvetica, Arial, sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5
        }
    }

    .form .hidden,
    .result .richtext .hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        display: none !important;
        height: 1px;
        overflow: hidden;
        position: absolute;
        visibility: hidden !important;
        white-space: nowrap;
        width: 1px;
    }

    .form label,
    .result .richtext label {
        color: #747474;
        display: block;
        font-family: barmer-sans, Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding-bottom: 5px;
    }

    .form input[type=email],
    .form input[type=password],
    .form input[type=text],
    .form input[type=time],
    .result .richtext input[type=email],
    .result .richtext input[type=password],
    .result .richtext input[type=text],
    .result .richtext input[type=time] {
        appearance: none;
        -webkit-appearance: none;
        background-color: #ededed;
        border: 2px solid #ededed;
        border-bottom-color: #747474;
        border-radius: 4px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        color: #4a4a4a;
        font-size: 18px;
        height: 2.5rem;
        outline: 1px solid transparent;
        padding: 1px 15px 0;
        resize: vertical;
        width: 100%;
    }

    .form .action>a.app.back.enter-submit,
    .form .backbutton>a.app.back.enter-submit,
    .form .btn-back.enter-submit,
    .form .btn.enter-submit,
    .form .cancel>a.app.cancel.enter-submit,
    .form button.enter-submit,
    .form input[type=button].enter-submit,
    .form input[type=submit]:not(.input-reset):not(.search-reset).enter-submit,
    .result .richtext .action>a.app.back.enter-submit,
    .result .richtext .backbutton>a.app.back.enter-submit,
    .result .richtext .btn-back.enter-submit,
    .result .richtext .btn.enter-submit,
    .result .richtext .cancel>a.app.cancel.enter-submit,
    .result .richtext button.enter-submit,
    .result .richtext input[type=button].enter-submit,
    .result .richtext input[type=submit]:not(.input-reset):not(.search-reset).enter-submit {
        margin-bottom: 0
    }

    .form .btn,
    .form button[type=submit],
    .form input[type=button],
    .form input[type=submit]:not(.input-reset):not(.search-reset),
    .result .richtext .btn,
    .result .richtext button[type=submit],
    .result .richtext input[type=button],
    .result .richtext input[type=submit]:not(.input-reset):not(.search-reset) {
        border-radius: 4px
    }

    .form .action>a.app.back,
    .form .backbutton>a.app.back,
    .form .btn,
    .form .btn-back,
    .form .cancel>a.app.cancel,
    .form button,
    .form input[type=button],
    .form input[type=submit]:not(.input-reset):not(.search-reset),
    .result .richtext .action>a.app.back,
    .result .richtext .backbutton>a.app.back,
    .result .richtext .btn,
    .result .richtext .btn-back,
    .result .richtext .cancel>a.app.cancel,
    .result .richtext button,
    .result .richtext input[type=button],
    .result .richtext input[type=submit]:not(.input-reset):not(.search-reset) {
        appearance: none;
        -webkit-appearance: none;
        background-color: #e0e0e0;
        border: 2px solid #e0e0e0;
        color: #292929;
        display: inline-block;
        font-family: barmer-sans, Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        margin: 12px auto;
        padding: 4px 21px;
        text-overflow: ellipsis;
        white-space: normal
    }

    @media screen and (min-width: 1024px) {

        .form .action>a.app.back,
        .form .backbutton>a.app.back,
        .form .btn,
        .form .btn-back,
        .form .cancel>a.app.cancel,
        .form button,
        .form input[type=button],
        .form input[type=submit]:not(.input-reset):not(.search-reset),
        .result .richtext .action>a.app.back,
        .result .richtext .backbutton>a.app.back,
        .result .richtext .btn,
        .result .richtext .btn-back,
        .result .richtext .cancel>a.app.cancel,
        .result .richtext button,
        .result .richtext input[type=button],
        .result .richtext input[type=submit]:not(.input-reset):not(.search-reset) {
            font-size: 18px
        }
    }

    .form .row,
    .result .richtext .row {
        clear: left;
        margin: 0;
        position: relative;
    }

    .form .row [class*=size],
    .result .richtext .row [class*=size] {
        clear: none;
        float: left;
    }

    @media (min-width: 740px) {

        .form .row [class*=size],
        .result .richtext .row [class*=size] {
            padding-right: 12px;
        }
    }

    @media (min-width: 740px) {

        .form .fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL,
        .form fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL,
        .result .richtext .fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL,
        .result .richtext fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL {
            width: 50%;
        }

        .form .fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
        .form fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
        .result .richtext .fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
        .result .richtext fieldset [class*=size]:not([class*=os-host-resize]).sizeL {
            box-sizing: border-box;
        }
    }

    @media (min-width: 1024px) {

        .form .fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL,
        .form fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL,
        .result .richtext .fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL,
        .result .richtext fieldset [class*=size]:not([class*=os-host-resize]).sizeL>.sizeL {
            width: 100%;
        }
    }

    .form .fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
    .form fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
    .result .richtext .fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
    .result .richtext fieldset [class*=size]:not([class*=os-host-resize]).sizeL {
        box-sizing: border-box;
        width: 100%;
    }

    @media (min-width: 740px) {

        .form .fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
        .form fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
        .result .richtext .fieldset [class*=size]:not([class*=os-host-resize]).sizeL,
        .result .richtext fieldset [class*=size]:not([class*=os-host-resize]).sizeL {
            width: 50%;
        }
    }

    .form .btn-submit,
    .form :not(.backbutton) input[type=submit]:not(.btn-back):not(.btn-bluegreen):not(.btn-ghost):not(.input-reset):not(.search-reset):not([disabled]),
    .form button[type=submit],
    .form input[type=button].btn-submit,
    .form input[type=submit]:not(.pdf-dwl):not(.btn-back):not(.btn-bluegreen):not(.btn-dark-green):not(.btn-ghost):not(.input-reset):not(.search-reset):not(.ui-datepicker-trigger):not([disabled]),
    .result .richtext .btn-submit,
    .result .richtext :not(.backbutton) input[type=submit]:not(.btn-back):not(.btn-bluegreen):not(.btn-ghost):not(.input-reset):not(.search-reset):not([disabled]),
    .result .richtext button[type=submit],
    .result .richtext input[type=button].btn-submit,
    .result .richtext input[type=submit]:not(.pdf-dwl):not(.btn-back):not(.btn-bluegreen):not(.btn-dark-green):not(.btn-ghost):not(.input-reset):not(.search-reset):not(.ui-datepicker-trigger):not([disabled]) {
        appearance: none;
        -webkit-appearance: none;
        background-color: #84bd00;
        border-color: #84bd00;
        color: #22372b
    }

    .form p.checkbox,
    .form div.checkbox,
    .form p.radio,
    .result .richtext p.checkbox,
    .result .richtext div.checkbox,
    .result .richtext p.radio {
        padding-left: 36px;
    }

    .form .form-checkbox-js,
    .result .richtext .form-checkbox-js {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: #ededed;
        border: 1px solid #747474;
        border-radius: 4px;
        box-sizing: border-box;
        display: inline-block;
        font-family: bgek-ui-forms;
        font-size: 24px;
        height: 25px;
        line-height: 1px;
        margin-right: 10px;
        padding: 0;
        position: relative;
        -ms-user-select: none;
        user-select: none;
        -moz-user-select: none;
        width: 25px;
    }

    .form div.checkbox .form-checkbox-js,
    .form p.checkbox .form-checkbox-js,
    .result .richtext div.checkbox .form-checkbox-js,
    .result .richtext p.checkbox .form-checkbox-js {
        float: left;
        margin-left: -36px;
        position: relative;
        top: 0
    }

    .form div.checkbox input,
    .form div.radio input:not(.no-js),
    .form p.checkbox input,
    .form p.radio input:not(.no-js),
    .result .richtext div.checkbox input,
    .result .richtext div.radio input:not(.no-js),
    .result .richtext p.checkbox input,
    .result .richtext p.radio input:not(.no-js) {
        float: left;
        height: 24px;
        margin-left: -36px;
        position: relative;
        top: 0;
        width: 24px;
    }

    .form .form-checkbox-js.is-focus-visible,
    .result .richtext .form-checkbox-js.is-focus-visible {
        line-height: 1;
        outline: 3px solid #747474;
        outline-offset: 3px
    }

    .form .form-checkbox-js:before,
    .result .richtext .form-checkbox-js:before {
        border: 1px solid transparent;
        content: "";
        height: 23px;
        left: 0;
        position: absolute;
        top: 0;
        width: 23px
    }

    .form .form-checkbox-js>.border,
    .result .richtext .form-checkbox-js>.border {
        border-radius: 4px;
        bottom: -1px;
        left: -1px;
        position: absolute;
        right: -1px;
        top: -1px
    }

    .form .form-checkbox-js>.check,
    .result .richtext .form-checkbox-js>.check {
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #4a4a4a;
        font-family: bgek-icon;
        font-size: 20px;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        left: 50%;
        line-height: 1;
        position: absolute;
        text-transform: none;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .form .form-checkbox-js.checked,
    .result .richtext .form-checkbox-js.checked {
        background-color: #fff;
        border-color: #747474
    }

    .form .form-checkbox-js>.check:before,
    .result .richtext .form-checkbox-js>.check:before {
        display: table-cell;
        height: 26px;
        line-height: 1;
        text-align: center;
        vertical-align: middle;
        width: 26px
    }

    .form .form-checkbox-js.checked>.check:before,
    .result .richtext .form-checkbox-js.checked>.check:before {
        content: "\e969"
    }

    .form .form-checkbox-js.disabled,
    .form .form-checkbox-js[disabled],
    .result .richtext .form-checkbox-js.disabled,
    .result .richtext .form-checkbox-js[disabled] {
        cursor: not-allowed
    }

    .form .form-checkbox-js.disabled.checked>.check:before,
    .form .form-checkbox-js[disabled].checked>.check:before,
    .result .richtext .form-checkbox-js.disabled.checked>.check:before,
    .result .richtext .form-checkbox-js[disabled].checked>.check:before {
        background-color: #747474
    }
</style>

<!-- END CSS via BAS -->

<!-- START CSS-Snippets for Studio -->

<style>
    .calculator__target .inputfield>input.text {
        background-color: #e6e6e6;
    }

    .calculator__target .intro.richtext-vision,
    .calculator__target .inputfield>label>span,
    .calculator__target .checkbox>label>span {
        color: #000000;
    }

    .o-calculator-package {
        padding: 2.083333333%;
        width: 66.6666666667%;
        margin: 1.5rem auto 0;
        box-sizing: border-box;
        background-color: #F2F0F0;
        border-radius: 12px;
    }

    .o-calculator.calculator--bmi-simple {
        padding: 0;
        width: auto;
        margin: 0;
    }

    .calculator--bmi-simple~.calculator__target>.o-basav {
        background: transparent;
        margin: 0;
        padding: 0;
    }

    @media only screen and (max-width: 40.0625rem) {
        .o-calculator-package {
            padding: 4.1666666667%;
            width: 91.6666666667%;
        }
    }

    @media only screen and (min-width: 40.0625rem) and (max-width: 64rem) {
        .o-calculator-package {
            width: 75%;
        }

        .calculator--bmi-simple~.calculator__target>.o-basav>.container {
            padding-left: 2.0833333333%;
            padding-right: 2.0833333333%;
            box-sizing: border-box;
        }
    }

    @media only screen and (min-width: 64.0625rem) {
        .calculator--bmi-simple~.calculator__target>.o-basav>.container {
            margin-left: 16.666666%;
            /* 8.333333 */
            margin-right: 16.666666%;
            padding-left: 2.0833333333%;
            padding-right: 2.0833333333%;
        }
    }

    .calculator--bmi-simple~.calculator__target>.o-basav>.container {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    #bmiAnalyseForm .submit {
        -webkit-appearance: none;
        appearance: none;
        display: inline-block;
        margin: 12px auto;
        padding: 1rem 1.5rem;
        font-family: barmer-sans, Helvetica, Arial, sans-serif;
        font-size: 1.25rem;
        line-height: 1.25rem;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        border: 2px solid #5a8c00;
        border-radius: 999px;
        background-color: #5a8c00;
        cursor: pointer;
        outline: none;
    }

    #bmiAnalyseForm .submit:hover {
        border-color: #466e00;
        background-color: #466e00;
    }

    #bmiAnalyseForm .submit:active {
        border-color: #325000;
        background-color: #325000;
    }

    #bmiAnalyseForm .submit.is-focus-visible {
        outline: 2px solid #008278;
        outline-offset: 2px;
    }

    .o-calculator .results__categories {
        display: none;
    }
</style>

<!-- END CSS-Snippets for Studio -->

<article class="p-article ">
    <div class="o-article-head article-head--stage">

        <div class="article-head__stage">
            <!-- nicht als figure, da keine caption ausgespielt wird -->
            <picture class="a-picture ">
                <source media="(max-width: 640px)" srcset="../../images/3x2/mr-right.jpg">
                <source media="(min-width: 641px)" srcset="../../images/36x11/mr-right.jpg">
                <img src="../../images/36x11/mr-right.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
            </picture>

        </div>
        <div class="m-breadcrumb breadcrumb--main">
            <span class="breadcrumb__label sr-only">Sie befinden sich hier:</span>
            <ul class="a-list-basic list--breadcrumb">
                <li class="list__item list__item--breadcrumb">
                    <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                </li>
                <li class="list__item list__item--breadcrumb">
                    <a href="/components/preview/article" class="a-link "><span class="link__inner">Themen-Übersichtseite</span><i class="a-icon icon--lock" aria-label=""></i></a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                </li>
                <li class="list__item list__item--breadcrumb">
                    Barmer So ein Unterthema
                </li>
            </ul>

        </div>

        <div class="article-head__meta">
            <div class="article-head__label">Label und nicht Overline</div>

            <h1 class="article-head__headline">Welche Reiseschutzimpfung ist empfohlen?</h1>
            <div class="article-head__readingtime">
                <i class="a-icon icon--timer" aria-hidden="true"></i>
                Lesedauer unter 6 Minuten
            </div>
        </div>

        <div class="article-head__info">
            <div class="m-list list--authors">

                <i class="a-icon icon--edit" aria-hidden="true"></i>
                <h4 class="list__headline">
                    Autor
                </h4>

                <ul class="a-list-basic ">
                    <li class="list__item ">
                        Birgit Frohn, Diplom-Biologin
                    </li>
                    <li class="list__item ">
                        BARMER Redaktion, Jane Doe (Ich bin der sehr lange Untertitel am Autor)
                    </li>
                    <li class="list__item ">
                        <a href="http://zdf.de" class="a-link ">
                            <span class="link__inner">Martin Zimmerman (Klick um mehr Informationen zu sehen)</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </a>

                    </li>
                </ul>

            </div>

            <div class="m-list list--quality">

                <i class="a-icon icon--check" aria-hidden="true"></i>
                <h4 class="list__headline">
                    Qualitätssicherung
                </h4>

                <ul class="a-list-basic ">
                    <li class="list__item ">
                        Heidi Gunther (Apothekerin bei der BARMER)
                    </li>
                    <li class="list__item ">
                        John Doe QS
                    </li>
                    <li class="list__item ">
                        Almeda GmbH, Ich stehe für Qualität, habe einen langen Namen, Sonderzeichen äöüß, Dr. med Schneider
                    </li>
                    <li class="list__item ">
                        <a href="http://zdf.de" class="a-link ">
                            <span class="link__inner">Anja Keller</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </a>

                    </li>
                </ul>

            </div>

        </div>

    </div>

    <!-- Beispiel Konfiguration
    {
      "bmi_all": "4014",
      "bmi_1": "4012",
      "bmi_2": "4016",
      "bmi_3": "4018",
      "bmi_4": "4024",
      "bmi_5": "4022",
      "bmi_6": "4020"
    }

    Fractal-Config for that:
    "calculatorPackageConfig": "{&quot;bmi_all&quot;:&quot;4014&quot;,&quot;bmi_6&quot;:&quot;4020&quot;,&quot;bmi_5&quot;:&quot;4022&quot;,&quot;bmi_4&quot;:&quot;4024&quot;,&quot;bmi_3&quot;:&quot;4018&quot;,&quot;bmi_2&quot;:&quot;4016&quot;,&quot;bmi_1&quot;:&quot;4012&quot;}"
    -->

    <!-- Auch möglich:
    {
      "bmi_all": "4014"
    }
    -->

    <div class="o-calculator-package js-calculator-targeting" data-calculator-config="{&quot;bmi_all&quot;:&quot;4014&quot;}">

        <div class="o-calculator calculator--bmi-simple js-calculator-bmi-simple-init ">

            <noscript>
                <div class="calculator__noscript-hint">
                    <p>In Ihrem Webbrowser ist JavaScript deaktiviert - Sie können den BMI-Rechner auf dieser Seite daher nicht in interaktiver Form nutzen. Wenn Sie Ihren BMI dennoch ermitteln möchten, können Sie diese allgemeine Formel zu Berechnung verwenden:</p>
                    <p>Körpergewicht in Kilogramm geteilt durch Körpergröße in Metern zum Quadrat</p>
                    <p><strong>Beispiel</strong><br />
                        Körpergewicht: 80 kg, Körpergröße: 1,79 Meter<br />
                        1,79 x 1,79 = 3,2<br />
                        80 / 3,2 = 25<br />
                        Der BMI liegt bei 25.</p>
                    <p>Wichtig: Der BMI-Wert ist mit dieser einfachen Formel nur näherungsweise korrekt, da hier das Geschlecht und Alter nicht berücksichtigt werden, was auf die BMI-Bereiche für Unter-, Normal- und Übergewicht Einfluss hat.</p>
                </div>
            </noscript>

            <div class="calculator__disclaimer">
                Anmerkung: bei der Berechnung Ihres individuellen Body-Mass-Index kann es zu leichten Abweichungen aufgrund von Rundungsdifferenzen kommen.
            </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="js-calculator__error-list"></ul>
                </div>

                <fieldset class="calculator__fieldset">
                    <legend class="sr-only">Geben Sie Ihr Alter, Körpergröße und Körpergewicht ein, um den BMI zu berechnen.</legend>

                    <div class="calculator__form-row">
                        <div class="calculator__fieldname">
                            <label for="bmi_age" aria-label="Ihr Alter in Jahren">Alter</label>
                        </div>

                        <div class="calculator__field">
                            <input class="a-input input--number calculator__input" type="number" required="required" min="0" max="150" name="bmi_age" id="bmi_age" step="any" aria-describedBy="errormessage_bmi_age" value="" />
                            <span class="calculator__input-unit">Jahre</span>
                        </div>

                        <div class="calculator__errormessage" id="errormessage_bmi_age"></div>
                    </div>

                    <div class="calculator__form-row">
                        <div class="calculator__fieldname">
                            <label for="bmi_height" aria-label="Ihre Körpergröße in Zentimetern">Körpergröße</label>
                        </div>

                        <div class="calculator__field">
                            <input class="a-input input--number calculator__input" type="number" required="required" min="50" max="250" name="bmi_height" id="bmi_height" step="any" aria-describedBy="errormessage_bmi_height" value="" /><span class="calculator__input-unit">cm</span>
                        </div>

                        <div class="calculator__errormessage" id="errormessage_bmi_height"></div>
                    </div>

                    <div class="calculator__form-row">
                        <div class="calculator__fieldname">
                            <label for="bmi_weight" aria-label="Ihr Gewicht in Kilogramm">Körpergewicht</label>
                        </div>

                        <div class="calculator__field">
                            <input class="a-input input--number calculator__input" type="number" required="required" min="20" max="350" name="bmi_weight" id="bmi_weight" step="any" aria-describedBy="errormessage_bmi_weight" value="" /><span class="calculator__input-unit">kg</span>
                        </div>

                        <div class="calculator__errormessage" id="errormessage_bmi_weight"></div>
                    </div>

                    <input class="a-btn btn--primary calculator__btn--primary" type="submit" value="BMI berechnen" title="BMI berechnen" id="bmi_button">
                </fieldset>
            </form>

            <div class="calculator__result" id="bmi_result"></div>

        </div>

        <div class="calculator__target" id="4014" hidden>

            <!-- Lead Magnets Form by Jens Kempe -->
            <div class="o-basav ">
                <div class="container space-top clearfix">
                    <div class="main">
                        <div class="application">
                            <div class="application ajax-form">
                                <div class="intro richtext-vision">
                                    <h1>Jetzt kostenlose BMI-Info zu Ihrem Ergebnis erhalten</h1>
                                    Machen Sie den nächsten Schritt für ein gesünderes Leben und erreichen oder halten Sie ihr Wunschgewicht. Die BMI-Info zeigt Ihnen wie es geht: Mit zu Ihrem Ergebnis passenden Ernährungs-und Bewegungstipps und vielen weiteren individuellen Infos. Einfach E-Mail-Adresse eintragen und BMI-Info erhalten.
                                </div>
                                <div class="application">
                                    <form id="bmiAnalyseForm" class="form" action="//www-dev.barmer.de/formClient/barmer-ui-de/test-channel/testseite-bas/1274082/bmi-analyse-anmeldung,step=process.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8">

                                        <fieldset aria-label="Ihre Daten">
                                            <legend>
                                                <strong></strong>
                                            </legend>
                                            <div class="row">
                                                <input id="bmiWert" name="bmiWert" type="hidden" value="30.0">
                                                <input id="bmiKategorie" name="bmiKategorie" type="hidden" value="Übergewicht">
                                                <div class="inputfield sizeL ">
                                                    <label for="email">
                                                        <span>E-Mail-Adresse</span>
                                                    </label>
                                                    <input id="email" name="email" class="text sizeL" type="text" value="" maxlength="100">
                                                </div>
                                            </div>
                                        </fieldset>

                                        <fieldset aria-label="Datenschutzhinweise">
                                            <legend>
                                                <strong></strong>
                                            </legend>
                                            <div class="richtext">
                                                <p>Ja, ich möchte meine individualisierte "BMI-Info-Mail" erhalten und willige in die Verarbeitung durch die BARMER ein. Die <a href="https://www.barmer.de/datenschutz" target="_blank">Datenschutzhinweise</a> habe ich aufmerksam gelesen und zur Kenntnis genommen. Daten werden zur Berechnung des BMI-Wertes im Rahmen der einmaligen BMI-Info-Mail verarbeitet. Meine Angaben sind freiwillig und können jederzeit widerrufen werden.
                                                </p>
                                            </div>

                                            <div class="richtext">
                                                <div class="checkbox">
                                                    <div tabindex="0" role="checkbox" class="form-checkbox-js" id="generated_checkbox_js_id_agreementBarmerNewsletter" aria-labelledby="generated_checkbox_js_label_id_agreementBarmerNewsletter">&nbsp;<span class="border"></span><span class="check" role="presentation"></span><span class="checkbox-wave"></span></div>
                                                    <input id="agreementBarmerNewsletter" name="agreementBarmerNewsletter" type="checkbox" value="true" class="hidden"><input type="hidden" name="_agreementBarmerNewsletter" value="on">
                                                    <label for="agreementBarmerNewsletter" id="generated_checkbox_js_label_id_agreementBarmerNewsletter">
                                                        <span>Ja, ich möchte zusätzlich den BARMER <span lang="en">Newsletter</span> erhalten und willige dafür in die Verarbeitung meiner Daten durch die BARMER ein. Die <a href="https://www.barmer.de/datenschutz" target="_blank">Datenschutzhinweise</a> habe ich aufmerksam gelesen und zur Kenntnis genommen. Eine Weitergabe meiner Daten an Dritte ist ausgeschlossen. Sie werden ausschließlich zum <span lang="en">Newsletter</span>-Versand verwendet. Meine Angaben sind freiwillig und können jederzeit widerrufen werden.</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </fieldset>

                                        <p class="button ">
                                            <input value="Jetzt anmelden" name="actionMarker" title="Jetzt anmelden" formnovalidate="" type="submit" class="submit enter-submit " id="generated_submit_id_actionMarker" data-hideonsubmit="true">
                                        </p>

                                        <p class="button" style="display: none">
                                            <input value="Bitte warten…" name="" title="Bitte warten …" formnovalidate="" type="button" class="btnBitteWarten" hidden="hidden" style="display: none;">
                                        </p>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="o-teaser-collection teaser-collection--certifications js-teaser-targeting-init">

        <h3 class="teaser-collection__headline teaser-collection__headline--h4">Zertifizierung</h3>

        <div class="teaser-collection__text">
            <p>Auf unsere Informationen können Sie sich verlassen. Sie sind hochwertig und zertifiziert. Dafür haben wir Brief und Siegel.</p>

        </div>

        <div class="teaser-collection__teaser-wrapper">
            <a href="" class="o-teaser teaser--icon-image">

                <div class="teaser__image">

                    <img src="../../images/afgis-siegel.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                </div>

            </a>

            <div class="o-teaser teaser--icon-image">

                <div class="teaser__image">

                    <img src="../../images/stiftung-health-on-the-net--hon--siegel.png" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image " loading="lazy">

                </div>

            </div>

        </div>

        <div class="teaser-collection__cta-row">
            <a class="a-btn btn--secondary" href="" title="">
                Redaktionelle Grundsätze
            </a>

        </div>

    </div>

</article>

<div class="o-content-footer">
    <div class="content-footer__info-container">
        <div class="a-plaintext plaintext--webcode">Webcode: a000876</div>

        <div class="m-timestamp "><span class="timestamp__label">Letzte Aktualisierung:</span> <time class="a-datetime ">06.03.2020</time>
        </div>

    </div>
    <div class="content-footer__cta-container">
        <form class="m-user-rating js-user-rating" action="/mock/page-rating-response.json" method="GET" data-success-message="Vielen Dank für Ihr Feedback.">
            <div class="user-rating__stars">
                <h3 class="user-rating__headline">Wie bewerten Sie diesen Artikel?</h3>
                <div class="a-rating-stars" role="group" aria-labelledby="rating-label">
                    <span class="sr-only" id="rating-label">Ihre Bewertung: </span>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="1">
                        <span class="sr-only">Ihre Bewertung: 1 Stern</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="2">
                        <span class="sr-only">Ihre Bewertung: 2 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="3">
                        <span class="sr-only">Ihre Bewertung: 3 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="4">
                        <span class="sr-only">Ihre Bewertung: 4 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                    <label class="rating-stars__star">
                        <input class="sr-only" type="radio" name="rating" value="5">
                        <span class="sr-only">Ihre Bewertung: 5 Sterne</span>
                        <i class="a-icon rating-stars__icon" aria-hidden="true"></i>
                    </label>
                </div>

            </div>

            <div class="user-rating__message" hidden>
                <label class="a-label user-rating__label" for="bm-rating-textarea">
                    Haben Sie noch weitere Anmerkungen zu Ihrer Bewertung?

                    <span class="sr-only">Maximale Zeichenzahl: 1000</span>
                </label>

                <div class="user-rating__textarea-wrapper">
                    <textarea class="a-textarea " id="bm-rating-textarea" name="comment" placeholder="Wir freuen uns über Ihre Anregungen..." autocomplete="off" maxlength="1000"></textarea>

                    <div class="a-counter " data-target="#bm-rating-textarea" hidden>
                        <span class="counter__current"></span>
                        /
                        <span class="counter__max"></span>
                    </div>

                </div>
                <input type="hidden" name="webcode" value="a000876">
                <label class="a-label user-rating__name-label" for="ratingname" aria-hidden="true">
                    Name

                </label>

                <input type="text" value="" class="a-input user-rating__name" id="ratingname" name="name" autocomplete="off" tabindex="-1" aria-hidden="true">

                <button class="a-btn btn--secondary js-rating-cancel" type="button">Abbrechen</button>

                <button class="a-btn btn--primary js-rating-submit" type="submit">Abschicken</button>

            </div>
            <div class="user-rating__success-text" hidden>
                <div class="a-richtext ">
                    <p>Vielen Dank für Ihr Feedback.<br><a href="#" class="bm-richtext-link">Link</a></p>
                </div>

            </div>
        </form>

        <div class="m-list list--socialmedia js-socialmedia">

            <ul class="a-list-basic list--social-icon">
                <li class="list__item ">
                    <a class="a-btn btn--print" href="javascript:window.print();" title="Drucken">
                        <i class="a-icon icon--print" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Twitter teilen" target="_blank" data-service="twitter">
                        <i class="a-icon icon--twitter" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei Facebook teilen" target="_blank" data-service="facebook">
                        <i class="a-icon icon--facebook" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="whatsapp://send?text&#x3D;Krankenkasse%3A%20Starke%20Leistungen%20und%20Top-Service%20%7C%20BARMER%20https%3A%2F%2Fwww.barmer.de%2F" title="Bei Whatsapp teilen" data-service="whatsapp">
                        <i class="a-icon icon--whatsapp" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei XING teilen" target="_blank" data-service="xing">
                        <i class="a-icon icon--xing" aria-hidden="true"></i>
                    </a>

                </li>
                <li class="list__item ">
                    <a class="a-btn btn--socialmedia" href="#" title="Bei LinkedIn teilen" target="_blank" data-service="linkedin">
                        <i class="a-icon icon--linkedin" aria-hidden="true"></i>
                    </a>

                </li>
            </ul>

        </div>

    </div>
</div>

<div class="o-teaser-collection teaser-collection--related-content">

    <h3 class="teaser-collection__headline teaser-collection__headline--h3">Entspannung, Abwechslung und Inspiration - mit unseren digitalen Angeboten</h3>

    <div class="teaser-collection__teaser-wrapper">
        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

                <picture class="a-picture ">
                    <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
                    <source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
                    <img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
                </picture>

            </div>

            <div class="teaser__text">
                Karies: Nicht das einzige Problem für Kinderzähne
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

                <picture class="a-picture ">
                    <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-tablet.jpg">
                    <source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-tablet.jpg">
                    <img src="../../images/16x9/mann-mit-tablet.jpg" alt="Dies ist ein alternativ Text" loading="lazy">
                </picture>

            </div>

            <div class="teaser__text">
                Mit attraktiven Leistungen bei Krankheit und Pflege rundum abgesichert sein
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

        <a href="http://tagesschau.de" class="o-teaser ">

            <div class="teaser__image">

                <picture class="a-picture ">
                    <source media="(max-width: 640px)" srcset="../../images/1x1/barmer-app-yeah.jpg">
                    <source media="(min-width: 641px)" srcset="../../images/16x9/barmer-app-yeah.jpg">
                    <img src="../../images/16x9/barmer-app-yeah.jpg" alt="" loading="lazy">
                </picture>

            </div>

            <div class="teaser__text">
                Mit digitalen Services und vielen Extras kostengünstig krankenversichert sein
                &nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
            </div>

        </a>

    </div>

</div>