doc-msp-theme 0.1.0

data/_sass/_totop.md

@@ -0,0 +1,126 @@
+<!--
+//
+//
+// ToTop
+-->
+
+In Anwendungen mit großen Seitenlängen, ist es oft nützlich eine Funktion anzubieten die dem Benutzer erlaubt mit einem Klick an den Seitenanfang zu scrollen. Zur Erstellung eines solchen Scrollverhaltens steht ein jQuery-Plugin: `toTop()` zur Verfügung. Die Einbindung ist wie folgt:
+
+```js
+$(document).ready(function() {
+  $('body').toTop()
+})
+```
+
+Das jQuery-Plugin: `toTop()` verfügt zu dem über Optionen mit denen das verhalten und aussehen angepasst werden kann.
+
+```js
+$(document).ready(function() {
+  $('body').totop({
+    option:{
+      buttonText: { de:'Nach Oben', en:'To Top' },
+      language: 'auto',
+      smallButton: false,
+      scrollOffset: 50,
+      scrollTimeMax: 800,
+      scrollTimeMin: 250,
+      pixelPerSecond: 4000,
+      mobileBreakpoint: 639,
+      dynamicVisibility: true,
+      dynamicVisibilityTime: 2000,
+      theme: '',
+      containerType: 'container-fixed'
+    }
+  })
+})
+```
+
+<table class="table table-small">
+  <caption>Optionen</caption>
+  <thead>
+    <tr>
+      <td>1</td>
+      <td>buttonText</td>
+      <td>Object</td>
+      <td>{ de:'Nach Oben', en:'To Top' }</td>
+      <td>Buttontext in den benötigten Sprachen</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>language*</td>
+      <td>String</td>
+      <td> </td>
+      <td>Der Buttontext wird aus dem Doc-Header gelesen kann aber selber definiert werden!</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>smallButton</td>
+      <td>Bool</td>
+      <td>false</td>
+      <td>Desktop Buttontyp Icon Only oder Icon & Text Button</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>scrollOffset</td>
+      <td>Number</td>
+      <td>50</td>
+      <td>Offset in Px ab wann der Button angezeigt wird</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>scrollTimeMax</td>
+      <td>Number</td>
+      <td>800</td>
+      <td>Maximale Zeit die das scrollen benötigt</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>scrollTimeMin</td>
+      <td>Number</td>
+      <td>250</td>
+      <td>Minimale Zeit die das scrollen benötigt</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>pixelPerSecond</td>
+      <td>Number</td>
+      <td>4000</td>
+      <td>Pixel die pro Sekunde gescrollt werden</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>mobileBreakpoint</td>
+      <td>Number</td>
+      <td>639</td>
+      <td>Breakpoint in Px an dem der Icon Only Button angezeigt wird</td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>dynamicVisibility</td>
+      <td>Bool</td>
+      <td>true</td>
+      <td>Interaktions basiertes Einblenden und Ausblenden. Nicht auf Mobile!</td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>dynamicVisibilityTime</td>
+      <td>Number</td>
+      <td>2000</td>
+      <td>Delay in Millisekunden für interaktions basiertes Ausblenden</td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>theme</td>
+      <td>String</td>
+      <td> </td>
+      <td>Umschließende Css Klasse für optionales Styling Theme z.B. dark</td>
+    </tr>
+    <tr>
+      <td>11</td>
+      <td>containerType</td>
+      <td>String</td>
+      <td>container-fixed</td>
+      <td>container-fixed, container-liquid - Die Position des Button kann je nach GridTyp angepasst werden</td>
+    </tr>
+  </thead>
+</table>

data/_sass/_totop.scss

@@ -0,0 +1,33 @@
+//
+// Default Totop Classes
+// ----------------------------------------
+
+
+.totop {
+  position: fixed;
+  z-index: $z-index-totop;
+  bottom: -50px;
+  opacity: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  transform: translateZ(0);
+
+  -webkit-transition: all 300ms cubic-bezier(.445, .05, .55, .95);
+  -moz-transition: all 300ms cubic-bezier(.445, .05, .55, .95);
+  -o-transition: all 300ms cubic-bezier(.445, .05, .55, .95);
+  transition: all 300ms cubic-bezier(.445, .05, .55, .95);
+
+  .btn {
+    float: right;
+    position: relative;
+    right: 12px;
+    bottom: 48px;
+
+    &.mobile {
+      right: 24px;
+      bottom: 60px;
+    }
+  }
+
+}

data/_sass/_type.md

@@ -0,0 +1,817 @@
+<!--
+//
+//
+// Typografie
+-->
+
+In diesem Kapitel geht es um Textauszeichnungen – von Überschriften bis zu Textlisten.
+
+## Die Überschriften
+
+Es stehen alle vom HTML5-Standard vorgesehenen Überschriften `<h1>` - `<h6>` zur Verfügung. Sie sollten vor allem in Fließtexten eingesetzt werden.
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Die Überschrift `<h1>` sollte aus SEO-Gründen nur einmal pro Seite zum Einsatz kommen.
+</div>
+
+<div class="tc-example">
+  <h1>h1 Überschrift 200% ~36px</h1>
+  <h2>h2 Überschrift 150% ~27px</h2>
+  <h3>h3 Überschrift 133% ~24px</h3>
+  <h4>h4 Überschrift 116% ~21px</h4>
+  <h5>h5 Überschrift 100% ~18px</h5>
+  <h6>h6 Überschrift 83% ~15px</h6>
+</div>
+
+```html
+<h1>h1 Überschrift 200% ~36px</h1>
+<h2>h2 Überschrift 150% ~27px</h2>
+<h3>h3 Überschrift 133% ~24px</h3>
+<h4>h4 Überschrift 116% ~21px</h4>
+<h5>h5 Überschrift 100% ~18px</h5>
+<h6>h6 Überschrift 83% ~15px</h6>
+```
+
+Für jede Überschrift gibt es auch eine leichtgewichtige Variante. Sie wird für Anmerkungen in Überschriften empfohlen, sollte aber nicht alleine stehen.
+
+Erzeugt wird die Variante durch hinzufügen des `<small>`-Tags
+oder der CSS-Klasse `.small`:
+
+<div class="tc-example">
+  <h1>h1 Überschrift <small>leichtgewichtige Variante</small></h1>
+  <h2>h2 Überschrift <small>leichtgewichtige Variante</small></h2>
+  <h3>h3 Überschrift <small>leichtgewichtige Variante</small></h3>
+  <h4>h4 Überschrift <small>leichtgewichtige Variante</small></h4>
+  <h5>h5 Überschrift <small>leichtgewichtige Variante</small></h5>
+  <h6>h6 Überschrift <small>leichtgewichtige Variante</small></h6>
+</div>
+
+```html
+<h1>h1 Überschrift <small>leichtgewichtige Variante</small></h1>
+<h2>h2 Überschrift <small>leichtgewichtige Variante</small></h2>
+<h3>h3 Überschrift <small>leichtgewichtige Variante</small></h3>
+<h4>h4 Überschrift <small>leichtgewichtige Variante</small></h4>
+<h5>h5 Überschrift <small>leichtgewichtige Variante</small></h5>
+<h6>h6 Überschrift <small>leichtgewichtige Variante</small></h6>
+```
+
+
+### Überschrift Dekorationen
+
+Für alle Überschriften stehen außerdem die drei Dekorationen
+Marke (`.brand`), Unterstrichen (`.underline`) und Gruppe (`.cluster`)
+zur Verfügung. Dabei muss lediglich die entsprechende CSS-Klasse auf die Überschift
+angewendet werden:
+
+<div class="tc-example">
+  <h3 class="brand">Marken Überschrift</h3>
+  <hr class="tc-example-divider"/>
+  <h3 class="underline">Unterstrichene Überschrift</h3>
+  <hr class="tc-example-divider"/>
+  <h4 class="cluster">Gruppen Überschrift</h4>
+  <hr class="tc-example-divider"/>
+  <h3 class="thin">Thin Überschrift</h3>
+  <hr class="tc-example-divider"/>
+  <h3 class="marketing-l">Marketing Überschrift 48px</h3>
+  <hr class="tc-example-divider"/>
+  <h3 class="marketing-xl">Marketing Überschrift 60px</h3>
+</div>
+
+```html
+<h3 class="brand">Marken Überschrift</h3>
+<h3 class="underline">Unterstrichene Überschrift</h3>
+<h4 class="cluster">Gruppen Überschrift</h4>
+<h3 class="thin">Gruppen Überschrift</h3>
+<h3 class="marketing-l">Marketing Überschrift 48px</h3>
+<h3 class="marketing-xl">Marketing Überschrift 60px</h3>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Überschriften mit den Klassen `.underline` und
+`.cluster` sind im Styleguide nur in einzeiliger Form definiert.
+Überlängen sollten daher durch die CSS-Klasse `.text-ellipsis` gekürzt werden.
+</div>
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Überschriften können auch mit den weiter unten befindlichen Text-Helfern,
+fett / kursiv Auszeichnungen oder den funktionale Betonungen versehen werden.
+</div>
+
+## Links
+
+<div class="tc-example">
+  <p>Lorem <a href="javascript: void(0);">ipsum dolor</a> sit amet</p>
+</div>
+
+```html
+<a href="#">ipsum dolor</a>
+```
+
+
+## Fließtext
+
+Fließtexte werden in Form von Paragraphen `<p>` dargestellt:
+
+<div class="tc-example">
+  <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 justo
+    duo dolores et ea rebum.
+  </p>
+  <p>
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+    erat, sed diam voluptua.
+  </p>
+  <p>
+    At vero eos et accusam et justo duo dolores
+    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+    Lorem ipsum dolor sit amet.
+  </p>
+</div>
+
+```html
+<p>Lorem ipsum ...</p>
+<p>Stet clita  ...</p>
+<p>At vero ...</p>
+```
+
+## Varianten
+
+Zur gezielteren Gestaltung stehen diverse Modifikatoren zur Verfügung. Da sie meistens nur eine CSS-Eigenschaft verändern und somit nicht die ganze Komponente beinflussen, lassen sie sich in der Regel in fast jedem Kontext verwenden.
+
+<div class="tc-note">
+**Anmerkung:**
+Änderungen von Schrifteigenschaften übertragen sich in CSS nativ auf alle Kind-Elemente. Deshalb wurden viele der Komponenten nochmals mit den grundlegenden Schrifteinstellungen versehen, damit sie keine Seiteneffekte auslösen.
+</div>
+
+### Texte klein und groß
+
+<div class="tc-example">
+  <p class="text-xsmall">
+    <strong>.text-xsmall</strong><br>
+    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 justo
+    duo dolores et ea rebum.
+  </p>
+  <p class="text-small">
+    <strong>.text-small</strong><br>
+    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 justo
+    duo dolores et ea rebum.
+  </p>
+  <p class="text-large">
+    <strong>.text-large</strong><br>
+    At vero eos et accusam et justo duo dolores
+    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+    Lorem ipsum dolor sit amet.
+  </p>
+  <p class="text-xlarge">
+    <strong>.text-xlarge</strong><br>
+    At vero eos et accusam et justo duo dolores
+    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+    Lorem ipsum dolor sit amet.
+  </p>
+</div>
+
+```html
+<p class="text-xsmall">At vero ...</p>
+<p class="text-small">Lorem ipsum ...</p>
+<p class="text-large">At vero ...</p>
+<p class="text-xlarge">At vero ...</p>
+```
+
+### Texte fett und kursiv
+
+Neben der Verwendung der Klassen `.text-semibold` und `.text-bold` können Elemente
+auch durch die HTML-Tags `<strong>` und `<em>` hervorgehoben werden.
+Lediglich für die halbfett-Variante steht nur die CSS-Klasse `.text-semibold`
+zur Verfügung:
+
+<div class="tc-example">
+<!--- <p>Thin: <span class="text-thin">Lorem ipsum dolor sit amet</span>...</p> -->
+  <p>Semibold: <span class="text-semibold">Lorem ipsum dolor sit amet</span>...</p>
+  <p>Bold: <strong>Lorem ipsum dolor sit amet</strong>...</p>
+  <p>Uppercase: <span class="text-uppercase">Lorem ipsum dolor sit amet</span>...</p>
+<!--- <p>Italic: <em>Lorem ipsum dolor sit amet</em>...</p> -->
+</div>
+
+```html
+<!-- .text-semibold -->
+<p>Semibold: <span class="text-semibold">Lorem ipsum dolor sit amet</span>...</p>
+
+<!-- <strong> oder .text-bold -->
+<p>Bold: <strong>Lorem ipsum dolor sit amet</strong>...</p>
+
+<!-- .text-uppercase -->
+<p>Uppercase: <span class="text-uppercase">Lorem ipsum dolor sit amet</span>...</p>
+```
+<!---
+<!-- <thin> oder .text-thin --
+<p>Thin: <span class="text-thin"> Lorem ipsum dolor sit amet</span>...</p
+
+<!-- <em> oder .text-italic --
+<p>Italic: <em>Lorem ipsum dolor sit amet</em>...</p>
+-->
+
+### Definitionen und Abkürzungen / Akronyme
+
+Um Definitionen und Abkürzungen bzw. Akronyme hervorzuheben, wurden die
+entsprechenden HTML-Elemente `<dfn>` und `<abbr>` mit einer gepunkteten
+Linie unterstrichen. Da `<abbr>` eine Abkürzung beschreibt, wird ein `title`-Attribut verlangt, dass den vollen Begriff beinhaltet:
+
+<div class="tc-example">
+  <p>Textilien sind <dfn>gewebte, gestrickte oder gewirkte, aus Faserstoff hergestellte Waren</dfn>.</p>
+  <p>Das Akronym der Cascading Stylesheets ist <abbr title="Cascading Stylesheets">CSS</abbr></p>
+</div>
+
+```html
+<dfn>gewebte, gestrickte oder gewirkte, aus Faserstoff hergestellte Waren</dfn>
+<abbr title="Cascading Stylesheets">CSS</abbr>
+```
+
+<!-- // Enfallen bis eine Einigung über Farben erzielt wurde - 2015-03-19
+### Funktionale Betonungen
+
+Textabschnitte müssen oft hervorgehoben werden. Hierfür werden in der Regel Farben eingesetzt. Die Komponenten stellen dazu vorgefertigte CSS-Klassen zur Verfügung, welche die Beziehung zwischen Farbe und Bedeutung vereinheitlichen:
+
+<div class="tc-example">
+  <p class="text-positive">Erfolgreich - Lorem ipsum dolor sit amet</p>
+  <p class="text-warning">Warnung - Lorem ipsum dolor sit amet</p>
+  <p class="text-negative">Erfolglos - Lorem ipsum dolor sit amet</p>
+  <p class="text-brand">Marke - Lorem ipsum dolor sit amet</p>
+  <p class="text-inactive">Inaktiv - Lorem ipsum dolor sit amet</p>
+</div>
+
+```html
+<p class="text-positive">Erfolgreich - Lorem ipsum dolor sit amet</p>
+<p class="text-warning">Warnung - Lorem ipsum dolor sit amet</p>
+<p class="text-negative">Erfolglos - Lorem ipsum dolor sit amet</p>
+<p class="text-brand">Marke - Lorem ipsum dolor sit amet</p>
+<p class="text-inactive">Inaktiv - Lorem ipsum dolor sit amet</p>
+```
+-->
+
+### Textmarkierungen
+
+Um Stellen in einem Text tatsählich zu markieren wurde das `<mark>`-Tag
+gestaltet:
+
+<div class="tc-example">
+  <p>Dieser Text sollte <mark>markiert</mark> dargestellt werden.</p>
+</div>
+
+```html
+<p>Dieser Text sollte <mark>markiert</mark> dargestellt werden.</p>
+```
+
+## Unsortierte Textlisten
+
+Für einfache Auflistungen im Fließtext gibt es die unsortierte Liste.
+Sie kann durch das bloße anfügen der CSS-Klasse `.list-unordered`
+erzeugt werden:
+
+<div class="tc-example">
+  <ul class="list-unordered">
+    <li>Listeneintrag</li>
+    <li>Listeneintrag</li>
+    <li>Listeneintrag
+      <ul class="list-unordered">
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+      </ul>
+    </li>
+    <li>Listeneintrag</li>
+  </ul>
+</div>
+
+```html
+<ul class="list-unordered">
+  <li>Listeneintrag</li>
+  <li>Listeneintrag</li>
+  <li>Listeneintrag
+    <ul class="list-unordered">
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+    </ul>
+  </li>
+  <li>Listeneintrag</li>
+</ul>
+```
+
+Die unsortiere Liste gibt es auch als Bullet-Variante:
+
+<div class="tc-example">
+  <ul class="list-unordered list-unordered-bullet">
+    <li>Listeneintrag</li>
+    <li>Listeneintrag</li>
+    <li>Listeneintrag
+      <ul class="list-unordered list-unordered-bullet">
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+      </ul>
+    </li>
+    <li>Listeneintrag</li>
+  </ul>
+</div>
+
+```html
+<ul class="list-unordered list-unordered-bullet">
+  <li>Listeneintrag</li>
+  <li>Listeneintrag</li>
+  <li>Listeneintrag
+    <ul class="list-unordered list-unordered-bullet">
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+    </ul>
+  </li>
+  <li>Listeneintrag</li>
+</ul>
+```
+
+Die unsortiere Liste gibt es auch als Plain-Variante:
+
+<div class="tc-example">
+  <ul class="list-unordered-plain">
+    <li>Listeneintrag</li>
+    <li>Listeneintrag</li>
+    <li>Listeneintrag
+      <ul class="list-unordered-plain">
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+      </ul>
+    </li>
+    <li>Listeneintrag</li>
+  </ul>
+</div>
+
+```html
+<ul class="list-unordered-plain">
+  <li>Listeneintrag</li>
+  <li>Listeneintrag</li>
+  <li>Listeneintrag
+    <ul class="list-unordered-plain">
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+    </ul>
+  </li>
+  <li>Listeneintrag</li>
+</ul>
+```
+
+
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Unsortierte Listen können beliebig ineinander gestapelt werden.
+</div>
+
+## Sortierte Textlisten
+
+Für Aufzählungen in Texten bieten die Komponenten die geordneten Listen.
+Sie können durch die CSS-Klasse `.list-ordered` gestaltet werden:
+
+<div class="tc-example">
+  <ol class="list-ordered">
+    <li>Listeneintrag</li>
+    <li>Listeneintrag</li>
+    <li>Listeneintrag
+      <ul class="list-ordered">
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+        <li>Listeneintrag</li>
+      </ul>
+    </li>
+    <li>Listeneintrag</li>
+  </ol>
+</div>
+
+```html
+<ol class="list-ordered">
+  <li>Listeneintrag</li>
+  <li>Listeneintrag</li>
+  <li>Listeneintrag
+    <ul class="list-ordered">
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+      <li>Listeneintrag</li>
+    </ul>
+  </li>
+  <li>Listeneintrag</li>
+</ol>
+```
+
+Die sortierte Liste gibt es außerdem in der Variante _Halbfett_:
+
+<div class="tc-example">
+  <ol class="list-ordered list-ordered-semibold">
+    <li>Halbfett Listeneintrag</li>
+    <li>Halbfett Listeneintrag</li>
+  </ol>
+</div>
+
+```html
+<ol class="list-ordered list-ordered-semibold">
+  <li>...</li>
+</ol>
+```
+
+Soll die Nummerierung erst ab einem bestimmen Index beginnen, muss dies der Liste über das `style-Attribut und die CSS-Eigenschaft `counter-reset mitgeteilt werden. Die angegebene Zahl entspricht sozusagen dem letzten Element:
+
+<div class="tc-example">
+  <ol class="list-ordered" style="counter-reset: list-index 16;">
+    <li>Listeneintrag</li>
+    <li>Listeneintrag</li>
+  </ol>
+</div>
+
+```html
+<ol class="list-ordered" style="counter-reset: list-index 16;">
+  <li>...</li>
+</ol>
+```
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Sortierte Listen können beliebig ineinander gestapelt werden.
+</div>
+
+## Definitions- / Beschreibungslisten
+
+Oft müssen Eigenschaften von Objekten aufgezählt werden. Hierfür eigenen sich Definitionslisten, die mithilfe der Klasse `.list-desc-horizontal` umgesetzt werden. Der Klassenname beschreibt dabei die Umgestaltung der Standard-HTML-Definitionsliste von einer vertikalen hin zu einer horizontalen Anordnung der Elemente. Die Definition selbst `<dt>` wird bei Überlänge autmoatisch gekürzt. Um den Begriff deutlicher hervorzuheben kann die optinale Klasse `.list-desc-semibold` verwendet werden.
+
+<div class="tc-example">
+  <dl class="list-desc-horizontal">
+    <dt>Definition:</dt>
+    <dd>Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.</dd>
+    <dt>Noch eine Definition:</dt>
+    <dd>Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.
+    Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.</dd>
+    <dt>Eine sehr sehr sehr sehr sehr sehr sehr sehr lange Definition:</dt>
+    <dd>Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.
+    Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.</dd>
+  </dl>
+</div>
+
+```html
+<dl class="list-desc-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+```
+
+<div class="tc-example">
+  <dl class="list-desc-horizontal list-desc-semibold">
+    <dt>Definition:</dt>
+    <dd>Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.</dd>
+    <dt>Noch eine Definition:</dt>
+    <dd>Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.
+    Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.</dd>
+    <dt>Eine sehr sehr sehr sehr sehr sehr sehr sehr lange Definition:</dt>
+    <dd>Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.
+    Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy.</dd>
+  </dl>
+</div>
+
+```html
+<dl class="list-desc-horizontal list-desc-semibold">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+```
+
+
+
+## Zitate
+
+Zur Angabe von Zitaten steht das `<figure>`-Tag zur Verfügung.
+Das `<blockquote>`-Tag beinhaltet dabei das Zitat. Der Autor wird im `<figcaption>`
+-Tag festgehalten. Gibt es einen Link zur Quelle, kann diese im `<cite>`-Tag angegeben werden:
+
+<div class="tc-example">
+  <figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
+    <blockquote class="quote" cite="http://example.com/article">
+      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 justo duo dolores et
+      ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+      ipsum dolor sit amet.
+    </blockquote>
+    <figcaption class="quote-author">
+      <span itemprop="author">Autor</span>
+      <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
+      <span itemprop="publisher">Herausgeber</span>
+    </figcaption>
+  </figure>
+</div>
+
+```html
+<figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
+  <blockquote class="quote" cite="http://example.com/article">
+    Lorem ipsum...
+  </blockquote>
+  <figcaption class="quote-author">
+    <span itemprop="author">Autor</span>
+    <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
+    <span itemprop="publisher">Herausgeber</span>
+  </figcaption>
+</figure>
+```
+
+Zitate lassen sich auch in Reihe schalten, um beispielsweise einen Gesprächsverlauf abzubilden:
+
+<div class="tc-example">
+  <ul class="quote-list">
+    <li class="quote-list-item">
+      <figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
+        <blockquote class="quote" cite="http://example.com/article">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+          erat, sed diam voluptua.
+          ipsum dolor sit amet.
+        </blockquote>
+        <figcaption class="quote-author">
+          <span itemprop="author">Autor</span>
+          <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
+          <span itemprop="publisher">Herausgeber</span>
+        </figcaption>
+      </figure>
+    </li>
+    <li class="quote-list-item">
+      <figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
+        <blockquote class="quote" cite="http://example.com/article">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+          erat, sed diam voluptua.
+        </blockquote>
+        <figcaption class="quote-author">
+          <span itemprop="author">Autor</span>
+          <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
+          <span itemprop="publisher">Herausgeber</span>
+        </figcaption>
+      </figure>
+
+      <ul class="quote-list">
+        <li class="quote-list-item">
+          <figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
+            <blockquote class="quote" cite="http://example.com/article">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+              diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+              erat, sed diam voluptua.
+            </blockquote>
+            <figcaption class="quote-author">
+              <span itemprop="author">Autor</span>
+              <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
+              <span itemprop="publisher">Herausgeber</span>
+            </figcaption>
+          </figure>
+        </li>
+        <li class="quote-list-item">
+          <figure class="figure" itemprop="mentions" itemscope itemtype="http://schema.org/Article">
+            <blockquote class="quote" cite="http://example.com/article">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+              diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+              erat, sed diam voluptua.
+            </blockquote>
+            <figcaption class="quote-author">
+              <span itemprop="author">Autor</span>
+              <cite itemprop="name"><a itemprop="url" href="#">Quelle</a></cite>,
+              <span itemprop="publisher">Herausgeber</span>
+            </figcaption>
+          </figure>
+        </li>
+      </ul>
+
+    </li>
+  </ul>
+</div>
+
+```html
+<ul class="quote-list">
+  <li class="quote-list-item">
+    <figure>...</figure>
+  </li>
+  <li class="quote-list-item">
+    <figure>...</figure>
+    <ul class="quote-list">
+      <li class="quote-list-item">
+        <figure>...</figure>
+      </li>
+      <li class="quote-list-item">
+        <figure>...</figure>
+      </li>
+    </ul>
+  </li>
+</ul>
+```
+
+## Adressen
+
+Für eine optimale Auszeichnung ist für Adressen in HTML5 der neue
+`<address>`-Tag vorgesehen. Außerdem ist die maschinelle
+Lesbarkeit ebenso wichtig wie deren Gestaltung. In den Komponenten wurde
+deshalb die Auszeichnung in den Vordergrund gerückt und die Gestaltung auf
+die drei Klassen `.address-header`, `.address-body` und `.address-footer`
+reduziert:
+
+<div class="tc-example">
+  <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
+    <p class="address-header">
+      <span itemprop="name">Deutsche Telekom AG</span><br>
+      <small>Max Müller</small>
+    </p>
+    <p class="address-body">
+      <span itemprop="streetAddress">Friedrich Ebert Alee 142 t</span><br>
+      <span itemprop="postalCode">53113</span>
+      <span itemprop="addressLocality">Bonn</span><br>
+      <span itemprop="addressCountry">Germany</span>
+    </p>
+    <p class="address-footer">
+      <label>Tel.:</label><a href="tel:+492281812262" itemprop="telephone">+49 228 181 22 62</a><br>
+      <label>Mob.:</label><a href="tel:+4916099123069" itemprop="telephone">+49 160 991 23 069</a>
+    </p>
+  </address>
+</div>
+
+```html
+<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
+  <p class="address-header">
+    <span itemprop="name">Deutsche Telekom AG</span><br>
+    <small>Max Müller</small>
+  </p>
+  <p class="address-body">
+    <span itemprop="streetAddress">Friedrich Ebert Alee 142 t</span><br>
+    <span itemprop="postalCode">53113</span>
+    <span itemprop="addressLocality">Bonn</span><br>
+    <span itemprop="addressCountry">Germany</span>
+  </p>
+  <p class="address-footer">
+    <label>Tel.:</label><a href="tel:+492281812262" itemprop="telephone">+49 228 181 22 62</a><br>
+    <label>Mob.:</label><a href="tel:+4916099123069" itemprop="telephone">+49 160 991 23 069</a>
+  </p>
+</address>
+```
+
+Nähere Informationen find Sie im Artikel:
+[SEO und Accessibility](accessibility.html#rich-snippets)
+
+## Preisauszeichnungen
+
+Für Preise ist die CSS-Klasse `.price` vorgesehen. Dabei ist aber auch die
+Beachtung der richtigen Auszeichnung wichtig:
+
+<div class="tc-example">
+  <span class="price">4,<sup>95</sup> €</span>&emsp;&emsp;
+  <span class="price text-semibold">4,<sup>95</sup> €</span>&emsp;&emsp;
+  <span class="price text-bold">4,<sup>95</sup> €</span>
+</div>
+
+```html
+<span class="price">4,<sup>95</sup> €</span>
+<span class="price text-semibold">4,<sup>95</sup> €</span>
+<span class="price text-bold">4,<sup>95</sup> €</span>
+```
+
+### Varianten:
+
+<div class="tc-example">
+  <span class="price text-brand">4,<sup>95</sup> €</span>&emsp;&emsp;
+  <span class="price price-large">4,<sup>95</sup> €</span>&emsp;&emsp;
+  <span class="price price-xlarge">4,<sup>95</sup> €</span>&emsp;&emsp;
+  <span class="price price-expired">
+      <span class="sr-only">nicht mehr gültiger Preis</span>
+      <s>4,95</s> €
+  </span>
+</div>
+
+```html
+<span class="price text-brand">4,<sup>95</sup> €</span>
+<span class="price price-large">4,<sup>95</sup> €</span>
+<span class="price price-xlarge">4,<sup>95</sup> €</span>
+
+<!-- Ein Streich-Preis hat keine hochgestellten Cent Beträge -->
+<!-- Die Zahl wird stattdessen mit <s> als abgelaufen markiert -->
+<!-- Zu beachten ist auch die extra Auszeichnung für Barrierefreiheit -->
+<span class="price price-expired">
+    <span class="sr-only">nicht mehr gültiger Preis</span>
+    <s>4,95</s> €
+</span>
+```
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Die CSS-Klassen der Preise lassen sich miteinander kombinieren:
+</div>
+
+<div class="tc-example">
+  <span class="price price-xlarge text-bold text-brand">4,<sup>95</sup> €</span>&emsp;&emsp;
+  <span class="price price-large text-semibold">4,<sup>95</sup> €</span>
+</div>
+
+```html
+<span class="price price-xlarge text-bold text-brand">4,<sup>95</sup> €</span>
+<span class="price price-large text-semibold">4,<sup>95</sup> €</span>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Suchmaschinen verstehen diese Preisauszeichnung nicht.
+Deshalb folgen Beispiele für korrekte Preisauszeichungen.
+Sie kommen ausschließlich in Zusammenhang mit einem Produkt vor:
+</div>
+
+```html
+<!-- Beispiel für eine aktuelle Produktauszeichnung -->
+<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="name">Produktname</span>
+  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+    <meta itemprop="priceCurrency" content="EUR" />
+    <meta itemprop="price" content="4.95" />
+    <span class="price text-brand">4,<sup>95</sup> €</span>
+  </div>
+</div>
+
+<!-- Beispiel für eine abgelaufene Produktauszeichnung -->
+<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="name">Produktname</span>
+  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+    <meta itemprop="priceCurrency" content="EUR" />
+    <meta itemprop="price" content="4.95" />
+    <meta itemprop="priceValidUntil" content="2014-04-09" />
+    <span class="price price-expired"><span class="sr-only">nicht mehr gültiger Preis</span><s>4,95</s> €</span>
+  </div>
+</div>
+```
+
+Nähere Informationen find Sie im Artikel:
+[SEO und Accessibility](accessibility.html#rich-snippets)
+
+## Text Helfer
+
+Zur weiteren Gestaltung von Texten gibt es noch kleine
+Ausrichtungs-Helfer, diese sind zudem auch responsiv für die Screenklassen 's', 'm', 'l', 'xl' verfügbar und werden wir folgt angewendet: `text-{screenklasse}-{ausrichtung}`.
+
+<div class="tc-example">
+  <p class="text-left">
+    <strong>Linksbündig</strong><br>
+    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 justo
+    duo dolores et ea rebum.
+  </p>
+  <p class="text-center">
+    <strong>Mittig</strong><br>
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+    erat, sed diam voluptua.
+  </p>
+  <p class="text-right">
+    <strong>Rechtsbündig</strong><br>
+    At vero eos et accusam et justo duo dolores
+    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+    Lorem ipsum dolor sit amet.
+  </p>
+  <p class="text-s-center text-m-right text-l-left">
+    <strong>Rechtsbündig</strong><br>
+    At vero eos et accusam et justo duo dolores
+    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+    Lorem ipsum dolor sit amet.
+  </p>
+</div>
+
+```html
+<p class="text-left">Lorem ipsum ...</p>
+<p class="text-center">Stet clita ...</p>
+<p class="text-right">At vero ...</p>
+<p class="text-s-center text-m-right text-l-left">At vero ...</p>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Auf einen Helfer für Blocksatz wurde bewußt verzichtet, da dies nicht dem
+Design Stil der Telekom entspricht.
+</div>