<!-- Teaser -->
<section class="container container--33-66 container--account">
  <div class="container__inner-wrap t-gray">
    <div class="container__inner">
      <header class="container__headline">
        <h2 class="headline headline--small">Infos für den HelpDesk</h2>
      </header>
      <div class="container__content account__links">
        <div class="link-list">
          <ul class="link-list__list">
            <li class="link-list__link">
              <a class="link-block" href="#account"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Account</span><span class="link-block__hint"><span class="link-block__info">Name, E-Mail, Matrikelnummer, 5-Steller etc.</span></span>
              </a>
            </li>
            <li class="link-list__link">
              <a class="link-block" href="#verlauf"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Verlauf</span><span class="link-block__hint"><span class="link-block__info">Anmerkungen zum Account</span></span>
              </a>
            </li>
            <li class="link-list__link">
              <a class="link-block" href="#aktionen"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Aktionen</span><span class="link-block__hint"><span class="link-block__info">Zugangsdaten versenden, Passwort zurücksetzen etc.</span></span>
              </a>
            </li>
            <li class="link-list__link">
              <a class="link-block" href="#mail"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Mail</span><span class="link-block__hint"><span class="link-block__info">Verteiler etc.</span></span>
              </a>
            </li>
            <li class="link-list__link">
              <a class="link-block" href="#netze"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Netze</span><span class="link-block__hint"><span class="link-block__info">WLAN, eduroam, VPN</span></span>
              </a>
            </li>
            <li class="link-list__link">
              <a class="link-block" href="#dienste"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">weitere Dienste</span><span class="link-block__hint"><span class="link-block__info">Druck, Stud.IP, Löwenportal, Blogs etc.</span></span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="container__content account__tab" id="account">
        <form class="form">
          <div class="form__content">
            <div class="form__text-headline">
              <h3 class="headline headline--6">Account</h3>
            </div>
            <div class="form__fields">
              <div class="form__field">
                <div class="form-group">
                  <label class="label label--disabled form-group__label" for="form-group-9527">Titel
                    <abbr class="label__required" title="Pflichtfeld">*</abbr>
                  </label>
                  <input class="input" id="form-group-9527" name="form-group-9527" required="required" disabled="disabled"></input>
                </div>
              </div>
              <div class="form__field">
                <div class="form-group">
                  <label class="label form-group__label" for="form-group-e518">Vorname
                    <abbr class="label__required" title="Pflichtfeld">*</abbr>
                  </label>
                  <input class="input" id="form-group-e518" name="form-group-e518" value="Franz" required="required"></input>
                </div>
              </div>
              <div class="form__field">
                <div class="form-group">
                  <label class="label form-group__label" for="form-group-159e">Nachname
                    <abbr class="label__required" title="Pflichtfeld">*</abbr>
                  </label>
                  <input class="input" id="form-group-159e" name="form-group-159e" value="Schünzel" required="required"></input>
                </div>
              </div>
              <div class="form__field">
                <div class="form-group">
                  <label class="label form-group__label" for="form-group-30b9">Geburtdatum
                    <abbr class="label__required" title="Pflichtfeld">*</abbr>
                  </label>
                  <input class="input" id="form-group-30b9" name="form-group-30b9" value="14.04.1988" required="required"></input>
                </div>
              </div>
              <div class="form__field">
                <div class="form-group">
                  <label class="checkbox" for="form-group-2aa3">
                    <input class="checkbox__input" type="checkbox" checked="checked" id="form-group-2aa3" name="form-group-2aa3" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Blumen kaufen</span></label>
                </div>
              </div>
              <div class="form__field">
                <div class="form-group">
                  <label class="checkbox" for="form-group-67d5">
                    <input class="checkbox__input" type="checkbox" id="form-group-67d5" name="form-group-67d5" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lied singen</span></label>
                </div>
              </div>
              <div class="form__field">
                <div class="form-group">
                  <label class="switch" for="switch-form-group-2082">
                    <input class="switch__input" type="checkbox" id="switch-form-group-2082" name="form-group-2082" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Geschenk automatisch versenden</span></label>
                </div>
              </div>
            </div>
            <div class="form__buttons">
              <button class="button button--primary" type="submit"><span class="button__text">Speichern</span></button>
            </div>
          </div>
        </form>
      </div>
      <div class="container__content account__tab" id="verlauf">
        <form class="form">
          <div class="form__content">
            <div class="form__text-headline">
              <h3 class="headline headline--6">Verlauf</h3>
            </div>
            <div class="form__fields">
              <div class="form__field">
                <div class="form-group">
                  <label class="label form-group__label" for="form-group-6a5d">Nachricht</label>
                  <textarea class="input input--textarea" id="form-group-6a5d" name="form-group-6a5d" type="textarea" placeholder="Was und warum?"></textarea>
                </div>
              </div>
            </div>
            <div class="form__buttons">
              <button class="button button--primary" type="submit"><span class="button__text">Senden</span></button>
            </div>
          </div>
        </form>
        <section class="accordion">
          <div class="accordion__items" role="presentation">
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-be17-content" id="accordion-item-be17-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">Protokolleinträge</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-be17-content" aria-labelledby="accordion-item-be17-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <div class="text text--small">
                      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
                        <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                      <p>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                        <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a> accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    </div>
                  </div>
                </div>
              </div>
            </article>
            <article class="accordion__item">
              <h3 class="accordion__header">
                <button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-a4d5-content" id="accordion-item-a4d5-headline">
                  <svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-right"></use>
                  </svg>
                  <svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-angle-down"></use>
                  </svg><span class="headline headline--5 accordion__toggle-label">weitere Funktionen</span></button>
              </h3>
              <div class="accordion__content" id="accordion-item-a4d5-content" aria-labelledby="accordion-item-a4d5-headline">
                <div class="accordion__list">
                  <div class="accordion__list-item">
                    <div class="text text--small">
                      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
                        <a class="link link--internal" href="#">justo duo dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                      <p>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                        <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">At vero eos et</a> accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>

{
  "theme": "gray",
  "headline": {
    "text": "Infos für den HelpDesk"
  }
}