<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>

<address>
  <ul class="o-list-bare c-pagefooter__address">
    <li class="c-pagefooter__address-item">
      <svg viewBox="0 0 38.021 38.021">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-white"></use>
      </svg><a class="c-pagefooter__link" href="tel:+49094194302">+49 (0)941 / 943 - 02</a>
    </li>
    <li class="c-pagefooter__address-item">
      <svg viewBox="0 0 38.021 38.021">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-letter-white"></use>
      </svg><a class="c-pagefooter__link" href="mailto:poststelle@oth-regensburg.de">poststelle@oth-regensburg.de</a>
    </li>
    <li class="c-pagefooter__address-item">
      <svg viewBox="0 0 38.774 38">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-location"></use>
      </svg>Seybothstraße 2<br/>93053 Regensburg
    </li>
    <li class="c-pagefooter__address-item">
      <svg viewBox="0 0 36.717 36.96">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-write"></use>
      </svg><a class="c-pagefooter__link" href="#">Kontaktformular</a>
    </li>
  </ul>
</address>

<form action="#" method="post">
  <fieldset>
    <legend class="u-visually-hidden">Formulartitel</legend>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-name" name="name" placeholder="Mustermann"/>
        <label for="demoform-name">Mustermann</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
        <label for="demoform-surname">Max</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-street" name="street" placeholder="Kunstmühlstraße 12"/>
        <label for="demoform-street">Kunstmühlstraße 12</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-zipcity" name="zipcity" placeholder="93047, Regensburg"/>
        <label for="demoform-zipcity">93047, Regensburg</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-phone" name="phone" placeholder="+49 941/000-01"/>
        <label for="demoform-phone">+49 941/000-01</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-fax" name="fax" placeholder="+49 941/000-02"/>
        <label for="demoform-fax">+49 941/000-02</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="text" id="demoform-disabled" name="disabled-field" placeholder="disabled form field" disabled="disabled"/>
        <label for="demoform-disabled">disabled form field</label>
      </div>
    </div>
    <div class="form-group">
      <div class="u-floating-label">
        <input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@oth-regensburg.de"/>
        <label for="demoform-mail">max.mustermann@oth-regensburg.de</label>
      </div>
    </div>
    <div class="form-group">
      <!-- Render regular label, if renderHiddenCheckbox is true, else render span tag with text-->
      <label for="vue-dropdown-1583">Auswahl Singleselect</label>
      <div class="u-dropdown" data-dropdown-injector="{&quot;id&quot;:&quot;vue-dropdown-1583&quot;,&quot;label&quot;:&quot;Auswahl Singleselect&quot;,&quot;renderHiddenSelect&quot;:true,&quot;isRequired&quot;:true,&quot;invalidMessage&quot;:&quot;Hinweis zum Ausfüllen Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&quot;,&quot;multiple&quot;:false,&quot;placeholder&quot;:&quot;Bitte wählen&quot;,&quot;name&quot;:&quot;tx_powermail_pi1[field][vue-dropdown-1583]&quot;,&quot;options&quot;:[{&quot;uid&quot;:1,&quot;text&quot;:&quot;Dropdown menu item 1&quot;,&quot;value&quot;:&quot;1&quot;,&quot;active&quot;:true},{&quot;uid&quot;:2,&quot;text&quot;:&quot;Dropdown menu item 2&quot;,&quot;value&quot;:&quot;2&quot;,&quot;active&quot;:false},{&quot;uid&quot;:3,&quot;text&quot;:&quot;Dropdown menu item 3&quot;,&quot;value&quot;:&quot;3&quot;,&quot;active&quot;:false},{&quot;uid&quot;:4,&quot;text&quot;:&quot;Dropdown menu item 4&quot;,&quot;value&quot;:&quot;4&quot;,&quot;active&quot;:false}]}">
        <button class="u-dropdown__button" aria-haspopup="true" aria-expanded="false" type="button"><span></span>
          <svg class="u-dropdown__button-arrow" viewBox="0 0 25 24" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg>
        </button>
        <!-- Render dummy select field for label, if renderHiddenCheckbox is true, else render nothing-->
        <!-- dummy select, will be replaced later via vue mounting-->
        <select id="vue-dropdown-1583" required="required" style="position: absolute; visibility: hidden;">
          <option value="">Bitte Auswahl treffen</option>
          <option value="1">Dropdown menu item 1</option>
          <option value="2">Dropdown menu item 2</option>
          <option value="3">Dropdown menu item 3</option>
          <option value="4">Dropdown menu item 4</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <!-- Render regular label, if renderHiddenCheckbox is true, else render span tag with text-->
      <label for="vue-dropdown-1683">Auswahl Multiselect</label>
      <div class="u-dropdown" data-dropdown-injector="{&quot;id&quot;:&quot;vue-dropdown-1683&quot;,&quot;label&quot;:&quot;Auswahl Multiselect&quot;,&quot;renderHiddenSelect&quot;:true,&quot;isRequired&quot;:true,&quot;invalidMessage&quot;:&quot;Hinweis zum Ausfüllen Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&quot;,&quot;multiple&quot;:true,&quot;placeholder&quot;:&quot;Bitte wählen&quot;,&quot;name&quot;:&quot;tx_powermail_pi1[field][vue-dropdown-1683][]&quot;,&quot;options&quot;:[{&quot;uid&quot;:1,&quot;text&quot;:&quot;Dropdown menu item 1&quot;,&quot;value&quot;:&quot;1&quot;,&quot;active&quot;:true},{&quot;uid&quot;:2,&quot;text&quot;:&quot;Dropdown menu item 2&quot;,&quot;value&quot;:&quot;2&quot;,&quot;active&quot;:true},{&quot;uid&quot;:3,&quot;text&quot;:&quot;Dropdown menu item 3&quot;,&quot;value&quot;:&quot;3&quot;,&quot;active&quot;:false},{&quot;uid&quot;:4,&quot;text&quot;:&quot;Dropdown menu item 4&quot;,&quot;value&quot;:&quot;4&quot;,&quot;active&quot;:false}]}" data-tag-container="#badge-container-1">
        <button class="u-dropdown__button" aria-haspopup="true" aria-expanded="false" type="button"><span></span>
          <svg class="u-dropdown__button-arrow" viewBox="0 0 25 24" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg>
        </button>
        <!-- Render dummy select field for label, if renderHiddenCheckbox is true, else render nothing-->
        <!-- dummy select, will be replaced later via vue mounting-->
        <select id="vue-dropdown-1683" required="required" style="position: absolute; visibility: hidden;">
          <option value="">Bitte Auswahl treffen</option>
          <option value="1">Dropdown menu item 1</option>
          <option value="2">Dropdown menu item 2</option>
          <option value="3">Dropdown menu item 3</option>
          <option value="4">Dropdown menu item 4</option>
        </select>
      </div>
      <div id="badge-container-1"></div>
    </div>
    <div class="form-group">
      <label for="demoform-upload">Upload</label>
      <div class="u-uploadfield" data-text="Durchsuchen..." data-buttontext="Hochladen">
        <input id="demoform-upload" type="file"/>
      </div>
    </div>
    <div class="form-group">
      <fieldset>
        <legend>Ihr Anliegen betrifft</legend>
        <div class="form-radiogroup">
          <input id="demoform-matter-1" name="matter" type="radio" checked="checked"/>
          <label for="demoform-matter-1"><span>Option 1</span></label>
          <input id="demoform-matter-2" name="matter" type="radio"/>
          <label for="demoform-matter-2"><span>Option 2</span></label>
          <input id="demoform-matter-3" name="matter" type="radio" disabled="disabled"/>
          <label for="demoform-matter-3"><span>Option 3</span></label>
        </div>
      </fieldset>
    </div>
    <div class="form-group">
      <label for="demoform-message">Nachricht</label>
      <textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Schreiben Sie hier Ihre Nachricht"></textarea>
    </div>
    <div class="form-group">
      <input type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
      <label for="checkboxdemo-privacy"><span>Ich habe die <a class="textlink" href="#">Datenschutzerklärung</a> zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage elektronisch erhoben und gespeichert werden.</span></label>
    </div>
    <button class="btn btn--secondary">Abschicken</button>
  </fieldset>
</form>

<div class="u-floating-label">
  <input class="forminput " id="text" type="text" placeholder="Text input"/>
  <label>Text input</label>
</div>

<div class="u-floating-label">
  <input class="forminput" id="password" type="password" placeholder="Type your password"/>
  <label for="password">Type your password</label>
</div>

<div class="u-floating-label">
  <input class="forminput" id="webaddress" type="url" placeholder="https://yoursite.com"/>
  <label for="webaddress">Enter url</label>
</div>

<div class="u-floating-label">
  <input class="forminput" id="emailaddress" type="email" placeholder="name@email.com"/>
  <label for="emailaddress">E-Mail input</label>
</div>

<div class="u-floating-label u-floating-label--search">
  <input class="forminput" id="search" type="search" placeholder="Enter search term"/>
  <label for="search">Enter search term</label>
</div>

<div class="u-floating-label">
  <input class="forminput" id="number" type="number" placeholder="Enter a number" pattern="[0-9]*"/>
  <label for="number">Enter a number</label>
</div>

<input type="color" id="ic" value="#000000"/>

<input type="range" id="ir" value="10"/>

<input class="forminput" type="date" id="idd" value="1970-01-01"/>

<input class="forminput" type="month" id="idm" value="1970-01"/>

<input class="forminput" type="week" id="idw" value="1970-W01"/>

<input class="forminput" type="datetime" id="idt" value="1970-01-01T00:00:00Z"/>

<fieldset>
  <legend>Treffen Sie ihre Auswahl</legend>
  <div class="form-checkboxgroup ">
    <input type="checkbox" id="checkboxdemo-a" name="checkboxdemo-a" checked="checked"/>
    <label for="checkboxdemo-a"><span>Choice A</span></label>
    <input type="checkbox" id="checkboxdemob-b" name="checkboxdemo-b"/>
    <label for="checkboxdemob-b"><span>Choice B</span></label>
  </div>
</fieldset>

<fieldset>
  <legend>Treffen Sie ihre Auswahl</legend>
  <div class="form-radiogroup ">
    <input id="radio1" name="radio1" type="radio" checked="checked"/>
    <label for="radio1"><span>Option 1</span></label>
    <input id="radio2" name="radio2" type="radio"/>
    <label for="radio2"><span>Option 2</span></label>
  </div>
</fieldset>

<div class="u-uploadfield" data-text="Durchsuchen..." data-buttontext="Hochladen">
  <input id="demoform-upload" type="file"/>
</div>

<div class="u-selectfield">
  <select id="select1">
    <option value="" disabled="disabled" selected="selected">Bitte wählen</option>
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
  </select>
</div>

<input class="forminput" type="datetime-local" id="idtl" value="1970-01-01T00:00"/>

templates/output/04-elements/forms/dropdown.html NOT FOUND!

<textarea class="forminput" id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>

<div class="form-group form-error">
  <div class="u-floating-label">
    <input type="text" id="error-demoform-name" name="name" placeholder="Mustermann"/>
    <label for="error-demoform-name">Mustermann</label>
  </div>
  <div class="form-group__error" role="alert">Hinweis zum Ausfüllen Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>

<div class="form-group form-success">
  <div class="u-floating-label">
    <input class="form-success" type="text" id="success-id" name="success-name" placeholder="Success"/>
    <label for="success-id">Form success input field</label>
  </div>
</div>

<button class="btn [modifier class]" title="This is a default title text">Button Text</button>

<button class="btn [modifier class]" title="This is a default title text">Button Text</button>

<input class="btn [modifier class]" type="submit" title="This is a default title text" value="Button text"/>

<!-- START BUTTON WITH ARROW RIGHT-->
<button class="btn btn--arrow btn--arrow-right" title="This is a default title text">
  <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
  </svg>
</button>
<!-- END BUTTON WITH ARROW RIGHT-->

<!-- START BUTTON WITH ARROW RIGHT-->
<button class="btn btn--arrow btn--arrow-left" title="This is a default title text">
  <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
  </svg>
</button>
<!-- END BUTTON WITH ARROW RIGHT-->

<!-- START BUTTON WITH ARROW LEFT/RIGHT-->
<div class="o-flex-line">
  <button class="btn btn--arrow btn--arrow-left" title="This is a default title text">
    <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
    </svg>
  </button>
  <button class="btn btn--arrow btn--arrow-right" title="This is a default title text">
    <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
    </svg>
  </button>
</div>
<!-- END BUTTON WITH ARROW LEFT/RIGHT-->

<!-- START BUTTON WITH ICON LEFT-->
<button class="btn btn--icon-left" title="This is a default title text">
  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
  </svg><span>Button text</span>
</button>
<!-- END BUTTON WITH ICON LEFT-->
<!-- START DISABLED BUTTON WITH ICON LEFT-->
<button class="btn btn--icon-left" disabled="disabled">
  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-idea"></use>
  </svg><span>Disabled button text</span>
</button>
<!-- END DISABLED BUTTON WITH ICON LEFT-->

<!-- START BUTTON READMORE-->
<button class="btn btn--readmore" title="Read more"><span>Read more</span>
  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
  </svg>
</button>
<!-- END BUTTON READMORE-->
<!-- START DISABLED BUTTON READMORE-->
<button class="btn btn--readmore" disabled="disabled"><span>Disabled read more</span>
  <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
  </svg>
</button>
<!-- END DISABLED BUTTON READMORE-->

<!-- START BUTTON TO TOP-->
<div class="btn--to-top">
  <button class="btn" title="Back to top">
    <svg viewBox="0 0 36 36.013" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-up"></use>
    </svg>
  </button>
</div>
<!-- END BUTTON TO TOP-->

<!-- START BUTTON SERVICE-->
<button class="btn btn--service" title="This is a default title text">
  <svg viewBox="0 0 36.717 36.96" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="Images/svg/sprite.symbol.svg#icon-write"></use>
  </svg><span>Some service button text</span>
</button>
<!-- END BUTTON SERVICE-->

<button class="btn [modifier class]" disabled="disabled">Disabled Button</button>

<h1>Headline H1 Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h2>Headline H2 Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Headline H3 Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h4>Headline H4 Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5>Headline H5 Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h6>Headline H6 Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h1 class="u-topline">Headline H1 Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h2 class="u-topline">Headline H2 Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3 class="u-topline">Headline H3 Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h4 class="u-topline">Headline H4 Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5 class="u-topline">Headline H5 Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h6 class="u-topline">Headline H6 Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<hr/>

<img src="https://picsum.photos/900/600" width="900" height="600" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>

<figure><img src="https://picsum.photos/900/600" width="900" height="600" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/>
  <figcaption>Die erste <a href="https://de.wikipedia.org/wiki/BMW_M3_(E30)">M3-Baureihe</a> wurde der Weltöffentlichkeit erstmals auf der internationalen Automobil-Ausstellung in Frankfurt im Jahre 1985 vorgestellt.</figcaption>
</figure>

<p><a class="morelink" href="#">...Mehr</a> <a class="" href="#">This is a text link</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite></p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
<p><time datetime="2015-05-21T14:32+01:00">21.05.2015 um 14:32 Uhr</time></p>

<ul>
  <li>This is a list item in an unordered list</li>
  <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
  <li>Lists can be nested inside of each other
    <ul>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an unordered list</li>
    </ul>
  </li>
  <li>This is the last list item</li>
</ul>

<ol>
  <li>This is a list item in an ordered list</li>
  <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
  <li>Lists can be nested inside of each
    <ol>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an unordered list</li>
    </ol>
  </li>
  <li>This is the last list item</li>
</ol>

<dl>
  <dt>Definition List</dt>
  <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
  <dt>This is a term.</dt>
  <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
  <dt>Here is another term.</dt>
  <dd>And it gets a definition too, which is this line.</dd>
  <dt>Here is term that shares a definition with the term below.</dt>
  <dd>And it gets a definition too, which is this line.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>

<pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~</pre>

<div class="table-container">
  <ul class="table-mobile o-list-bare u-hide@desktop">
    <li class="table-mobile__item">
      <ul class="o-list-bare">
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Arbeiterunfallversicherungsgesetz</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Aenean commodo</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Bundesausbildungsförderungsgesetz</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Behindertengleichstellungsgesetz</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Kraftfahrzeug-Haftpflichtversicherung</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Steuervergünstigungsabbaugesetz</strong>
          <p class="table-mobile__child-value">Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Nahrungsmittelunverträglichkeit</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
      </ul>
    </li>
    <li class="table-mobile__item">
      <ul class="o-list-bare">
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Arbeiterunfallversicherungsgesetz</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Aenean commodo</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Bundesausbildungsförderungsgesetz</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Behindertengleichstellungsgesetz</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Kraftfahrzeug-Haftpflichtversicherung</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Steuervergünstigungsabbaugesetz</strong>
          <p class="table-mobile__child-value"></p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Nahrungsmittelunverträglichkeit</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
      </ul>
    </li>
    <li class="table-mobile__item">
      <ul class="o-list-bare">
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Arbeiterunfallversicherungsgesetz</strong>
          <p class="table-mobile__child-value">dolor sit amet</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Aenean commodo</strong>
          <p class="table-mobile__child-value"></p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Bundesausbildungsförderungsgesetz</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Behindertengleichstellungsgesetz</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Kraftfahrzeug-Haftpflichtversicherung</strong>
          <p class="table-mobile__child-value">penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Steuervergünstigungsabbaugesetz</strong>
          <p class="table-mobile__child-value">Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
        </li>
        <li class="table-mobile__child"><strong class="table-mobile__child-title">Nahrungsmittelunverträglichkeit</strong>
          <p class="table-mobile__child-value">consectetuer adipiscing elit</p>
        </li>
      </ul>
    </li>
  </ul>
  <div class="table-rwd">
    <div class="table-rwd__overflow">
      <table class="u-hide--mobile-only">
        <thead>
          <tr>
            <th>
              <p>Arbeiterunfallversicherungsgesetz</p>
            </th>
            <th>
              <p>Aenean commodo</p>
            </th>
            <th>
              <p>Bundesausbildungsförderungsgesetz</p>
            </th>
            <th>
              <p>Behindertengleichstellungsgesetz</p>
            </th>
            <th>
              <p>Kraftfahrzeug-Haftpflichtversicherung</p>
            </th>
            <th>
              <p>Steuervergünstigungsabbaugesetz</p>
            </th>
            <th>
              <p>Nahrungsmittelunverträglichkeit</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p>dolor sit amet</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>dolor sit amet</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p></p>
            </td>
            <td>
              <p>dolor sit amet</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>dolor sit amet</p>
            </td>
            <td>
              <p></p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
            <td>
              <p>penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </td>
            <td>
              <p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>
            </td>
            <td>
              <p>consectetuer adipiscing elit</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<figure class="video">
  <div class="video-embed">
    <iframe class="video-embed-item" src="https://player.vimeo.com/video/367599716?title=0&amp;amp;byline=0&amp;amp;portrait=0" allowfullscreen="allowfullscreen" width="1200" height="675" title="" allow="fullscreen"></iframe>
  </div>
</figure>

<div class="c-socialmedia-icon"><svg viewBox="0 0 36 36">
  <path class="shape" fill="none" d="M1 1h34v34H1z"/>
  <path class="icon icon--youtube" fill="currentcolor" d="M18 10s-6.254 0-7.814.418a2.503 2.503 0 0 0-1.768 1.768C8 13.746 8 18 8 18s0 4.254.418 5.814c.23.861.908 1.538 1.768 1.768C11.746 26 18 26 18 26s6.254 0 7.814-.418a2.505 2.505 0 0 0 1.768-1.768C28 22.254 28 18 28 18s0-4.254-.418-5.814a2.505 2.505 0 0 0-1.768-1.768C24.254 10 18 10 18 10Zm0 2c2.882 0 6.49.134 7.297.35a.508.508 0 0 1 .353.353c.241.898.35 3.639.35 5.297s-.109 4.398-.35 5.297a.508.508 0 0 1-.353.353c-.805.216-4.415.35-7.297.35-2.881 0-6.49-.134-7.297-.35a.508.508 0 0 1-.353-.353C10.109 22.399 10 19.658 10 18s.109-4.399.35-5.299a.505.505 0 0 1 .353-.351c.805-.216 4.415-.35 7.297-.35Zm-2 2.535v6.93L22 18Z"/>
</svg>

</div>

<figure class="video">
  <div class="video-embed">
    <video class="video-embed-item" width="1200" controls="">
      <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"/>
    </video>
  </div>
</figure>

<figure class="video">
  <div class="video-embed">
    <video class="video-embed-item" width="1200" controls="">
      <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"/>
    </video>
  </div>
  <figcaption class="video-caption"><span class="u-display-block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span><a href="https://example.com"><small>Copyright</small></a></figcaption>
</figure>