<div class="af-app">
    <div class="af-steps">
        <div class="af-step">
            <h2 class="af-headline--h2">
                Ich bin eine h2 Überschrift
            </h2>

            <h3 class="af-headline--h3">
                Ich bin eine h3 Überschrift
            </h3>

            <div title="Schritt 0 von 4" class="af-progress-bar">
                <div class="af-progress-bar__progress" style="width: 0%"></div>
            </div>

            <div class="af-infobox">
                <p class="af-text  ">
                    <i class="a-icon icon--info" aria-hidden="true"></i>

                    ich bin ein Text
                </p>

            </div>

            <section class="o-accordion js-accordion-init af-accordion">

                <div class="m-accordion__panel js-accordion-panel ">

                    <button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Panel 1</span><i class="a-icon icon--plus" aria-hidden="true"></i></button>

                    <div class="accordion__panel__body js-accordion-body">
                        <div class="a-richtext richtext--accordion">
                            <table class="af-table">
                                <tr>
                                    <th scope="row">Geschlecht</th>
                                    <td>divers</td>
                                </tr>
                                <tr>
                                    <th scope="row">Name</th>
                                    <td>Max Mustermann</td>
                                </tr>
                                <tr>
                                    <th scope="row">Land / Länderkennzeichen</th>
                                    <td>Deutschland / DE</td>
                                </tr>
                            </table>
                            <div class="af-edit"><a href="#" class="a-link "> <i class="a-icon icon--edit" aria-hidden="true"></i>&nbsp;<span class="link__inner">Angaben korrigieren</span></a></div>
                        </div>

                    </div>
                </div>

                <div class="m-accordion__panel js-accordion-panel ">

                    <button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Panel 2</span><i class="a-icon icon--plus" aria-hidden="true"></i></button>

                    <div class="accordion__panel__body js-accordion-body">
                        <div class="a-richtext richtext--accordion">
                            <table class="af-table">
                                <tr>
                                    <th scope="row">Geschlecht</th>
                                    <td>divers</td>
                                </tr>
                                <tr>
                                    <th scope="row">Name</th>
                                    <td>Max Mustermann</td>
                                </tr>
                                <tr>
                                    <th scope="row">Land / Länderkennzeichen</th>
                                    <td>Deutschland / DE</td>
                                </tr>
                            </table>
                            <div class="af-edit"><a href="#" class="a-link "> <i class="a-icon icon--edit" aria-hidden="true"></i>&nbsp;<span class="link__inner">Angaben korrigieren</span></a></div>
                        </div>

                    </div>
                </div>

            </section>

            <h3 class="af-headline--h4">Familienmitglieder mitversichern</h3>
            <p class="af-text text--small">Nachdem Sie Ihren Antrag abgesendet haben, können Sie ganz einfach Ihre Familienangehörigen mitversichern. Füllen Sie dafür einfach im nächsten Schritt das entsprechende Formular aus.</p>

            <h3 class="af-headline--h4">Datenschutz</h3>
            <p class="af-text text--small">Die Verarbeitung Ihrer Daten erfolgt zum Zweck der Klärung des Versicherungsverhältnisses nach §§ 5 ff. SGB V und zur Beitragserhebung nach §§ 226 ff. SGB V, 57 SGB XI. Die BARMER speichert diese Daten für 9 Jahre. Die mit dem Versicherungsverhältnis zusammenhängenden Daten (§§ 288 SGB V, 99 SGB XI) werden für höchstens 30 Jahre gespeichert. Sie haben, sofern die gesetzlichen Voraussetzungen vorliegen, ein Recht auf Auskunft, Berichtigung und Löschung oder Einschränkung sowie das Recht auf Datenübertragbarkeit. Lesen Sie auch unsere Datenschutzerklärung.</p>

            <div class="af-step__buttons step__buttons--center">
                <button class="a-btn btn--conversion" type="button">Button</button>

            </div>
        </div>
    </div>
</div>
<div class="af-app">
  <div class="af-steps">
    <div class="af-step">
      {{ render '@af-headline--h2' merge=true }}
      {{ render '@af-headline--h3' merge=true }}

      {{render '@af-progress-bar' merge=true }}

      {{ render '@af-infobox' merge=true }}

      {{render '@accordion' partials.accordion merge=true }}

      <h3 class="af-headline--h4">Familienmitglieder mitversichern</h3>
      <p class="af-text text--small">Nachdem Sie Ihren Antrag abgesendet haben, können Sie ganz einfach Ihre Familienangehörigen mitversichern. Füllen Sie dafür einfach im nächsten Schritt das entsprechende Formular aus.</p>

      <h3 class="af-headline--h4">Datenschutz</h3>
      <p class="af-text text--small">Die Verarbeitung Ihrer Daten erfolgt zum Zweck der Klärung des Versicherungsverhältnisses nach §§ 5 ff. SGB V und zur Beitragserhebung nach §§ 226 ff. SGB V, 57 SGB XI. Die BARMER speichert diese Daten für 9 Jahre. Die mit dem Versicherungsverhältnis zusammenhängenden Daten (§§ 288 SGB V, 99 SGB XI) werden für höchstens 30 Jahre gespeichert. Sie haben, sofern die gesetzlichen Voraussetzungen vorliegen, ein Recht auf Auskunft, Berichtigung und Löschung oder Einschränkung sowie das Recht auf Datenübertragbarkeit. Lesen Sie auch unsere Datenschutzerklärung.</p>

      <div class="af-step__buttons step__buttons--center">
        {{ render '@button--conversion' merge=true }}
      </div>
    </div>
  </div>
</div>
{
  "switches": {},
  "viewtypes": {
    "gridSize": {
      "oneThird": "grid__item--2",
      "half": "grid__item--3",
      "twoThird": "grid__item--4",
      "full": "grid__item--6",
      "break": "grid__item--break"
    }
  },
  "content": {},
  "partials": {
    "checkbox": {
      "soon": {
        "partials": {
          "listitems": [
            {
              "viewtypes": {},
              "checkbox": {
                "viewtypes": {
                  "specifier": "af-choice choice--checkbox"
                },
                "content": {
                  "id": "checkbox-1",
                  "name": "checkbox1",
                  "text": "sobald wie möglich"
                }
              }
            }
          ]
        }
      }
    },
    "accordion": {
      "viewtypes": {
        "specifier": "af-accordion"
      },
      "partials": {
        "panels": [
          {
            "partials": {
              "toggle": {
                "content": {
                  "label": "Panel 1"
                },
                "partials": {
                  "iconType": "icon--plus"
                }
              },
              "richtext": {
                "switches": {
                  "hasWrapper": true,
                  "hasDefaultText": false
                },
                "viewtypes": {
                  "specifier": "richtext--accordion"
                },
                "content": {
                  "text": "<table class=\"af-table\"><tr>  <th scope=\"row\">Geschlecht</th>  <td>divers</td></tr><tr>  <th scope=\"row\">Name</th>  <td>Max Mustermann</td></tr><tr>  <th scope=\"row\">Land / Länderkennzeichen</th>  <td>Deutschland / DE</td></tr></table><div class=\"af-edit\"><a href=\"#\" class=\"a-link \">  <i class=\"a-icon icon--edit\" aria-hidden=\"true\"></i>&nbsp;<span class=\"link__inner\">Angaben korrigieren</span></a></div>"
                }
              }
            }
          },
          {
            "partials": {
              "toggle": {
                "content": {
                  "label": "Panel 2"
                },
                "partials": {
                  "iconType": "icon--plus"
                }
              },
              "richtext": {
                "switches": {
                  "hasWrapper": true,
                  "hasDefaultText": false
                },
                "viewtypes": {
                  "specifier": "richtext--accordion"
                },
                "content": {
                  "text": "<table class=\"af-table\"><tr>  <th scope=\"row\">Geschlecht</th>  <td>divers</td></tr><tr>  <th scope=\"row\">Name</th>  <td>Max Mustermann</td></tr><tr>  <th scope=\"row\">Land / Länderkennzeichen</th>  <td>Deutschland / DE</td></tr></table><div class=\"af-edit\"><a href=\"#\" class=\"a-link \">  <i class=\"a-icon icon--edit\" aria-hidden=\"true\"></i>&nbsp;<span class=\"link__inner\">Angaben korrigieren</span></a></div>"
                }
              }
            }
          }
        ]
      }
    }
  }
}

No notes defined.