From 8b81ed92e1e7973673fc309cc99accd54548d730 Mon Sep 17 00:00:00 2001
From: Stephan <klarsichtweise@gmail.com>
Date: Mon, 1 Oct 2018 21:10:58 +0200
Subject: [PATCH] demo.5

* removed double underscore (__) separators in class names
* more LF CR to LF
* new scss config variables
* some little style changes
---
 gulpfile.js                                   |    9 +-
 source/pages/demo.njk                         |    6 +-
 source/pages/demo/elements.njk                |  348 ++++-
 source/pages/demo/error/404.njk               |   50 +-
 source/pages/demo/error/500.njk               |   50 +-
 source/pages/demo/intro.njk                   | 1196 +++++++----------
 source/pages/demo/os.njk                      |   50 +-
 source/style/hippie/elements/_grouping.scss   |   55 +-
 .../style/hippie/elements/_interactive.scss   |    8 +-
 source/style/hippie/elements/_sections.scss   |   15 +-
 source/style/hippie/elements/_tables.scss     |   10 +-
 source/style/hippie/elements/_textlevel.scss  |   30 +-
 source/style/hippie/global/_common.scss       |   16 +-
 source/style/hippie/global/_config.scss       |   17 +-
 source/style/hippie/global/_typography.scss   |  124 +-
 source/style/hippie/mixins/_media_query.scss  |    5 +-
 .../breakpoint/_breakpoint_module.scss        |   23 +-
 .../explanation/_explanation_module.scss      |  230 ++--
 .../maintenance/_maintenance_module.scss      |   38 +-
 .../hippie/modules/media/_media_module.scss   |    6 +
 .../style/hippie/modules/media/_sprites.scss  |   13 +-
 .../modules/navigation/_nav_module.scss       |   28 +-
 .../hippie/modules/tables/_tables_module.scss |  136 +-
 source/style/modules/demo/_demo_module.scss   |   38 +-
 source/templates/hippie/demo-default.njk      |    8 +-
 source/templates/hippie/demo-extended.njk     |   10 +-
 source/templates/hippie/demo-maintenance.njk  |    8 +-
 .../templates/hippie/partials/head-meta.njk   |    8 +
 .../hippie/partials/nav-page-meta.njk         |   13 +-
 .../templates/hippie/partials/page-hover.njk  |    2 +-
 30 files changed, 1288 insertions(+), 1262 deletions(-)
 create mode 100644 source/templates/hippie/partials/head-meta.njk

diff --git a/gulpfile.js b/gulpfile.js
index ea69054..5b31e3e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -114,13 +114,16 @@ gulp.task('nunjucks', function() {
 // automagically reload browsers
 gulp.task('syncreload', function() {
   browsersync.init({
+    // ------------------------------------------------------------------------------
+    // comment out the line below to get rid of the demo index page.
+    // ------------------------------------------------------------------------------
+    index: "demo.html",
+    open: false,
+    server: 'build'
     // online: false,
     // logLevel: "info",
     // proxy: "http://verser.vrt/virtual/",
     // watch: true,
-    index: "demo.html",
-    open: false,
-    server: 'build'
   });
 });
 
diff --git a/source/pages/demo.njk b/source/pages/demo.njk
index f6774d8..da591c5 100644
--- a/source/pages/demo.njk
+++ b/source/pages/demo.njk
@@ -16,9 +16,11 @@
   <div class="hello">
     <h2>This is HIPPIE</h2>
     <p>You can start using it by replacing this file with your own index page.</p>
+    <p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
+    <p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
     <p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
     <h3>Overview about all the styles</h3>
-    <ul class="list__link">
+    <ul class="list_link">
       <!-- Loops through "demoadditionallinks" array -->
       {% for link in demoadditionallinks %}
       <li><a href="{{link.href}}">{{link.text}}</a></li>
@@ -31,7 +33,7 @@
 C(")(")</pre>
       <h3>Demo Pages</h3>
   </div>
-    <ul class="list__link">
+    <ul class="list_link">
       <!-- Loops through "demo-links" array -->
       {% for link in demolinks %}
       <li><a href="{{link.href}}">{{link.text}}</a></li>
diff --git a/source/pages/demo/elements.njk b/source/pages/demo/elements.njk
index 559b893..a138837 100644
--- a/source/pages/demo/elements.njk
+++ b/source/pages/demo/elements.njk
@@ -1,69 +1,279 @@
-<!-- page-elements.njk -->
-{% set pageId = "elements" %}
-{% set pageClass = "" %}
-
-{% extends "hippie/demo-extended.njk" %}
-
-{% block title %}Elements{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body_content %}
-<div class="temp__layer">
-  <!-- <div class="exp_overlay_btn exp_help_btn">
-  <span class="span__solo">?</span>
-</div> -->
-{% include "hippie/partials/nav-page-meta.njk" %}
-</div>
-<div id="begin" class="">
-  <article>
-    <header>
-      <h1>Bereiche</h1>
-      <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
-      <nav>
-        <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
-      </nav>
-    </header>
-    <section>
-      <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
-      <p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
-      <p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
-    </section>
-    <div class="overflow">
-      <aside class="left">
-        <p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
-      </aside>
-      <section class="bside">
-        <header>
-          <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
-          <nav>
-            <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
-          </nav>
-        </header>
-        <footer>
-          <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
-        </footer>
-      </section>
-    </div>
-    <footer>
-      <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
-    </footer>
-  </article>
-</div>
-{% include "hippie/partials/footer.njk" %}
-{% endblock %}
-
-{% block script %}
-{{ super() }}
-<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-<script src="../js/all.min.js" type="text/javascript"></script>
-<script type="text/javascript">
-// Page specific
-// ------------------------------------------------------------------------------
-$( document ).ready(function() {
-  console.log('HIPPIE');
-
-});
-</script>
-{% endblock %}
+<!-- page-elements.njk -->
+{% set pageId = "elements" %}
+{% set pageClass = "" %}
+
+{% extends "hippie/demo-extended.njk" %}
+
+{% block title %}Elements{% endblock %}
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+{% block body_content %}
+<div class="temp_layer">
+  <!-- <div class="exp_overlay_btn exp_help_btn">
+  <span class="span_solo">?</span>
+</div> -->
+{% include "hippie/partials/nav-page-meta.njk" %}
+</div>
+<div id="begin" class="">
+  <section class="sec_main_center">
+    <header class="header_txt">
+      <h1>Medienformat Abfragen</h1>
+    </header>
+    <article>
+      <div class="demo__query_example">Umbruch bei&nbsp;</div>
+      <div class="demo__queries">
+        <p class="query_phoneUp">Telefone und größer</p>
+        <p class="query_phoneOnly">Nur Telefone</p>
+        <p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
+        <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
+        <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
+        <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
+        <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
+        <p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
+        <p class="query_bigDesktopUp">Richtige Monitore und größer</p>
+      </div>
+    </article>
+  </section>
+
+  <section class="sec_main_center">
+    <header class="header_txt">
+      <h1>Sammlung formatierter Elemente</h1>
+      <p>Die Elemente werden fortlaufend komplexer</p>
+    </header>
+    <article>
+      <pre class="pre_code"><code>h3.txt_light_color+p</code></pre>
+      <h3 class="txt_light_color">Helle Überschrift</h3>
+      <p>Mit normalem Textabsatz</p>
+      <pre class="pre_code"><code>a>h4</code></pre>
+      <a href=""><h4>Überschrift als Block-Verweis</h4></a>
+      <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
+      <section class="overflow">
+        <div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
+        <p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
+      </section>
+      <pre class="pre_code"><code>div.box_main_indent</code></pre>
+      <div class="box_main_indent">
+        <hr/>
+        <p>Eingerückter Inhalt</p>
+        <hr/>
+      </div>
+      <pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
+      <div class="overflow">
+        <nav class="float_space_left">
+          <ul>
+            <li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
+            <li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
+            <li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
+            <li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
+          </ul>
+        </nav>
+        <nav>
+          <ul>
+            <li><a href="" class="a_button_border">Stufe 1</a></li>
+            <li><a href="" class="a_button_border">Stufe 2</a></li>
+            <li><a href="" class="a_button_border">Stufe 3</a></li>
+            <li><a href="" class="a_button_border">Stufe 4</a></li>
+          </ul>
+        </nav>
+      </div>
+      <pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
+      <nav class="nav_horizontal">
+        <ul>
+          <li><a href="" class="a_button">Abschnitt 1</a></li>
+          <li><a href="" class="a_button">Abschnitt 2</a></li>
+          <li><a href="" class="a_button">Abschnitt 3</a></li>
+          <li><a href="" class="a_button">Abschnitt 4</a></li>
+        </ul>
+      </nav>
+      <div class="overflow">
+        <nav class="nav_center_old">
+          <ul>
+            <li><a href="" class="a_button">Typ 1</a></li>
+            <li><a href="" class="a_button">Typ 2</a></li>
+            <li><a href="" class="a_button">Typ 3</a></li>
+            <li><a href="" class="a_button">Typ 4</a></li>
+          </ul>
+        </nav>
+      </div>
+      <pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
+      <header class="header_page demo__header header_fancy">
+        <h1>Aufmacher</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
+        <nav class="nav_separate_right">
+          <ul>
+            <li><a href="" class="a_button">Mensch</a></li>
+            <li><a href="" class="a_button">Pflanze</a></li>
+          </ul>
+        </nav>
+        <nav class="nav_right">
+          <ul>
+            <li><a href="" class="a_button">Blau</a></li>
+            <li><a href="" class="a_button">Gelb</a></li>
+          </ul>
+        </nav>
+      </header>
+      <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
+      <div class="box_space height_basic">
+        <header id="js_demo_fix" class="header_page demo__header header_fix">
+          <nav class="nav_right">
+            <ul>
+              <li><a href="" class="a_button">Eins</a></li>
+              <li><a href="" class="a_button">Zwei</a></li>
+            </ul>
+          </nav>
+        </header>
+        <div class="pos_abs pin_bottom width_full">
+          <pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
+          <footer id="js_demo_stop" class="demo__footer">
+            <nav class="nav_column nav_separate">
+              <ul>
+                <li><a href="" class="a_button_text">Alpha</a></li>
+                <li><a href="" class="a_button_text">Bravo</a></li>
+                <li><a href="" class="a_button_text">Charlie</a></li>
+                <li><a href="" class="a_button_text">Delta</a></li>
+              </ul>
+            </nav>
+            <p class="txt_center demo__credits"><i class="i_bright">👨‍💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
+          </footer>
+        </div>
+      </div>
+      <div class="flex">
+        <div class="flex_child"></div>
+        <div class="flex_child"></div>
+        <div class="flex_child"></div>
+        <div class="flex_child"></div>
+        <div class="flex_child"></div>
+      </div>
+      <div class="flex_column_wrap">
+        <div class="flex_column"><input value="Undefiniert"/></div>
+        <div class="flex_column"><input type="text" size="8" value="Text"/></div>
+        <div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
+        <div class="flex_column"><input type="button" value="Auswählen"></div>
+        <div class="flex_column"><input type="submit" value="Senden" disabled/></div>
+      </div>
+
+      <h2>Gruppierung</h2>
+      <pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
+      <ul class="list_link">
+        <li><a href=""><img src="./art/letter.gif" alt="">name@domain.tld</a></li>
+        <li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
+        <li><a href="">Projects</a></li>
+      </ul>
+
+      <h2>Tabellen</h2>
+      <pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16  height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
+      <table class="table_link js_pop">
+        <thead>
+          <tr>
+            <th>&nbsp;</th>
+            <th>Ab / Zy</th>
+            <th>Neu / Alt</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
+            <td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
+            <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+          </tr>
+          <tr>
+            <td class="cell_text">
+              <div class="shorten">Beschreibung</div>
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
+            <td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
+            <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+          </tr>
+          <tr>
+            <td class="cell_text">
+              <div class="shorten">Beschreibung</div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>Eingebettet</h2>
+      <div class="box_full_width demo__flag">
+        <svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
+          <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
+          <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
+          <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
+          <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
+          <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
+          <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
+          <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
+          <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
+          <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
+        </svg>
+      </div>
+    </article>
+  </section>
+  <section>
+    <header class="sec_main_center header_txt">
+      <h1>Autarke Seiten</h1>
+      <p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
+    </header>
+    <article>
+      <section class="sec_main_status demo__status">
+        <div class="wrap_center">
+          <h1>404</h1>
+          <p>Hier ist nichts.</p>
+          <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+            <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
+            <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
+          </blockquote>
+        </div>
+        {% include "hippie/partials/footer-status.njk" %}
+      </section>
+      <section class="sec_main_status demo__status">
+        <div class="wrap_center">
+          <h1>403</h1>
+          <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
+          <blockquote>
+            <p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
+            <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
+          </blockquote>
+        </div>
+        {% include "hippie/partials/footer-status.njk" %}
+      </section>
+      <section class="sec_main_status demo__status">
+        <div class="wrap_center">
+          <h1>400</h1>
+          <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
+          <blockquote>
+            <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
+            <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
+          </blockquote>
+        </div>
+        {% include "hippie/partials/footer-status.njk" %}
+      </section>
+    </article>
+  </section>
+
+
+</div>
+{% include "hippie/partials/footer.njk" %}
+{% endblock %}
+
+{% block script %}
+{{ super() }}
+<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+<script src="../js/all.min.js" type="text/javascript"></script>
+<script type="text/javascript">
+// Page specific
+// ------------------------------------------------------------------------------
+$( document ).ready(function() {
+  console.log('HIPPIE');
+
+  // jq-sticky-anything
+  $('#js_demo_fix').stickThis({
+    pushup: '#js_demo_stop'
+  });
+});
+</script>
+{% endblock %}
diff --git a/source/pages/demo/error/404.njk b/source/pages/demo/error/404.njk
index 95c4f43..5ed2efe 100644
--- a/source/pages/demo/error/404.njk
+++ b/source/pages/demo/error/404.njk
@@ -1,25 +1,25 @@
-<!-- page-error-404.njk -->
-{% set pageId = "404" %}
-{% set pageClass = "body__status" %}
-
-{% extends "hippie/demo-maintenance.njk" %}
-
-{% block title %}404{% endblock %}
-{% block head %}
-{{ super() }}
-<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
-<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
-{% endblock %}
-
-{% block body_content %}
-<main class="main__site">
-  <h1>404</h1>
-  <h3>Client-Fehler</h3>
-  <p>Hier ist nichts. <dfn>Not Found</dfn></br>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{% include "hippie/partials/footer-status.njk" %}
-{% endblock %}
+<!-- page-error-404.njk -->
+{% set pageId = "404" %}
+{% set pageClass = "body_status" %}
+
+{% extends "hippie/demo-maintenance.njk" %}
+
+{% block title %}404{% endblock %}
+{% block head %}
+{{ super() }}
+<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
+<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
+{% endblock %}
+
+{% block body_content %}
+<main class="main_site">
+  <h1>404</h1>
+  <h3>Client-Fehler</h3>
+  <p>Hier ist nichts. <dfn>Not Found</dfn></br>
+  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+    <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
+    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
+  </blockquote>
+</main>
+{% include "hippie/partials/footer-status.njk" %}
+{% endblock %}
diff --git a/source/pages/demo/error/500.njk b/source/pages/demo/error/500.njk
index 464751e..dec9770 100644
--- a/source/pages/demo/error/500.njk
+++ b/source/pages/demo/error/500.njk
@@ -1,25 +1,25 @@
-<!-- page-error-500.njk -->
-{% set pageId = "500" %}
-{% set pageClass = "body__status" %}
-
-{% extends "hippie/demo-maintenance.njk" %}
-
-{% block title %}500{% endblock %}
-{% block head %}
-{{ super() }}
-<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
-<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
-{% endblock %}
-
-{% block body_content %}
-<main class="main__site">
-  <h1>500</h1>
-  <h3>Server-Fehler</h3>
-  <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
-    <p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
-    <p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{% include "hippie/partials/footer-status.njk" %}
-{% endblock %}
+<!-- page-error-500.njk -->
+{% set pageId = "500" %}
+{% set pageClass = "body_status" %}
+
+{% extends "hippie/demo-maintenance.njk" %}
+
+{% block title %}500{% endblock %}
+{% block head %}
+{{ super() }}
+<link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
+<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
+{% endblock %}
+
+{% block body_content %}
+<main class="main_site">
+  <h1>500</h1>
+  <h3>Server-Fehler</h3>
+  <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
+  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
+    <p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
+    <p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
+  </blockquote>
+</main>
+{% include "hippie/partials/footer-status.njk" %}
+{% endblock %}
diff --git a/source/pages/demo/intro.njk b/source/pages/demo/intro.njk
index e35d52f..68e8aed 100644
--- a/source/pages/demo/intro.njk
+++ b/source/pages/demo/intro.njk
@@ -1,713 +1,483 @@
-<!-- page-intro.njk -->
-{% set pageId = "intro" %}
-{% set pageClass = "" %}
-
-{% extends "hippie/demo-extended.njk" %}
-
-{% block title %}Intro{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body_content %}
-<div class="temp__layer">
-  <!-- <div class="exp_overlay_btn exp_help_btn">
-  <span class="span__solo">?</span>
-</div> -->
-{% include "hippie/partials/nav-page-meta.njk" %}
-</div>
-
-<div id="begin" class="demo__intro">
-  Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Dies ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
-  <p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
-  <h1>Bereiche</h1>
-  <article>
-    <section>
-      <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
-      <p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
-      <p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
-    </section>
-    <!-- <div class="overflow"> -->
-    <aside class="left">
-      <p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
-    </aside>
-    <section class="bside">
-      <header>
-        <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
-        <nav>
-          <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
-        </nav>
-      </header>
-      <footer>
-        <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
-      </footer>
-    </section>
-    <address>Das Element <code>&lt;address&gt;</code> hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.</address>
-    <!-- </div> -->
-  </article>
-  <article>
-    <p>Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.</p>
-    <h1>Überschrift 1</h1>
-    <p>Eine Überschrift erster Ordnung <code>&lt;h1&gt;</code> ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.</p>
-    <h2>Überschrift 2</h2>
-    <p>Die weiteren Überschriften <code>&lt;h2&gt;</code> bis <code>&lt;h6&gt;</code> gliedern Text und werden auch als Titel für andere Elemente eingesetzt.</p>
-    <h3>Überschrift 3 ist in Großbuchstaben gesetzt</h3>
-    <h4>Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3</h4>
-    <h5>Überschrift 5 ist Überschrift 5</h5>
-    <h6>Überschrift 6</h6>
-    <p>Schließlich eine Überschrift in der Größe des Fließtextes. Allerdings in fett.</p>
-    <h1>Gruppierung</h1>
-    <p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p>
-    <p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p>
-    <p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
-    <p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code__solo">p.txt_center</code></div>
-    <p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code__solo">p.txt_right</code></div>
-    <p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte <code>&lt;hr&gt;</code> Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.</p>
-    <hr/>
-    <p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
-    <hr class="hr__hidden js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__hidden</code></div>
-    <p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
-    <hr class="hr__dotted js_pop" emmet/><div class="exp_pop"><code class="code__solo">hr.hr__dotted</code></div><!--hr.hr__dotted-->
-    <hr class="center_50 js_pop"/><div class="exp_pop"><code class="code__solo">hr.center_50</code></div>
-    <hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
-    <p class="column__2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.column__2</code></div>
-    <p class="column__3 column__line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.column__3.column__line</code></div>
-    <p class="column__3 column__line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
-    <p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
-    <pre>Dadurch<br>	bleiben<br>		Einrückungen<br>			durch<br>				Tabulatoren<br>					erhalten.</pre>
-    <p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
-    <ul>
-      <li>Ungeordnete</li>
-      <li>Listen</li>
-    </ul>
-    <ul class="list__dash">
-      <li>Verschiedener</li>
-      <li>Art</li>
-    </ul>
-    <ol>
-      <li>Geordnete</li>
-      <li>Liste</li>
-    </ol>
-    <dl>
-      <dt>Beschreibungsliste</dt>
-      <dd>Auch Definitionslisten genannt</dd>
-      <dt>Ausdruck</dt>
-      <dd>Beschreibung</dd>
-    </dl>
-    <p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <code>&lt;blockquote&gt;</code> zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
-    <blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/">
-      <p>Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.</p>
-      <p class="quote__source"><a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a></p>
-    </blockquote>
-    <div class="exp_pop"><code class="code__solo">blockquote>p+p.quote__source</code></div>
-    <p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code>&lt;figure&gt;</code> umschlossen und tragen eine Bezeichnung.</p>
-    <figure class="js_pop">
-      <figcaption>Fahne</figcaption>
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10%" height="10%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
-        <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-        <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-        <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-        <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-        <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-        <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-        <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-        <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-        <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-      </svg>
-    </figure>
-    <div class="exp_pop"><code class="code__solo">figure>figcaption+{element}</code></div>
-    <p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <code>&lt;div&gt;</code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
-    <div class="box__info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div>
-    <p>Eine sehr klar definierte Gruppierung stellt das Element <code>&lt;main&gt;</code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
-  </article>
-  <article>
-    <h1 id="textlevel">Textebene</h1>
-    <h2>Verweise</h2>
-    <p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a__line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code__solo">a.a__line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a__line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
-    <p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="a__line" href="#">unterstrichene Varianten</a> sind möglich.</p>
-    <p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p>
-    <h2>Formatierungen</h2>
-    <p>Texte, Wörter oder Zeichen können vielfältig formatiert werden. Sie können <b>fett</b> <code>&lt;b&gt;</code> oder <i>kursiv</i> <code>&lt;i&gt;</code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <b>aussehen</b>, sondern auch <i>eine besondere inhaltliche Bedeutung</i> bekommen, werden sie mit <code>&lt;strong&gt;</code> und <code>&lt;em&gt;</code> ausgezeichnet.</p>
-    <p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.</p>
-    <blockquote class="quote__mark js_pop" cite="">
-      <p>Das kannst du schon so machen aber dann isses halt Kacke.</p>
-      <p class="quote__source">o. V.</p>
-    </blockquote>
-    <div class="exp_pop"><code class="code__solo">blockquote.quote__mark>p+p.quote__source</code></div>
-    <p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p>
-    <p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p>
-    <pre class="pre__code"><code>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br>  &lt;/head&gt;<br>  &lt;body id="root"&gt;<br>    &lt;!-- Content goes here --&gt;<br>    &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;</code></pre>
-    <p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
-    <p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p>
-    <p class="txt_center">Bei<mark class="mark__cursor">spiel zum mark</mark>ieren ^^.</p>
-    <p>Eine Markierung kann, mittels <code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p>
-
-    <h2>Änderungen</h2>
-
-  </article>
-  <article>
-    <h1>Eingebundene Inhalte</h1>
-
-  </article>
-  <article>
-    <h1>Tabellen</h1>
-    <p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert oder richten sich nach ihrem Inhalt. Das gilt auch für die einzelnen Zellen.<span class="wip_txt">...</span></p>
-    <table class="width_full js_pop">
-      <tbody>
-        <tr>
-          <td>Eine</td>
-          <td>einfache</td>
-        </tr>
-        <tr>
-          <td colspan="2">Tabelle</td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="exp_pop"><code class="code__solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div>
-    <div class="overflow">
-      <table class="float_space_left js_pop">
-        <tbody>
-          <tr>
-            <td>Eine</td>
-            <td>fließende</td>
-          </tr>
-          <tr>
-            <td colspan="2">Tabelle</td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="exp_pop"><code class="code__solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
-      <table class="table__blank float_space_left js_pop">
-        <tbody>
-          <tr>
-            <td>Mit</td>
-            <td>ohne</td>
-          </tr>
-          <tr>
-            <td colspan="2">Linien</td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="exp_pop"><code class="code__solo">table.table__blank>tbody>tr>td*2^tr>td[colspan=2]</code></div>
-    </div>
-    <p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
-    <table class="width_full table__fix js_pop">
-      <caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
-      <thead>
-        <tr>
-          <th>Kopfzeile</th>
-          <th>A</th>
-          <th>B</th>
-        </tr>
-      </thead>
-      <tfoot>
-        <tr>
-          <td>Fußzeile</td>
-          <td>A</td>
-          <td>B</td>
-        </tr>
-      </tfoot>
-      <tbody>
-        <tr>
-          <td>Tabelle</td>
-          <td></td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>mit</td>
-          <td>Titel</td>
-          <td></td>
-        </tr>
-        <tr>
-          <td></td>
-          <td>Kopf-</td>
-          <td>und</td>
-        </tr>
-        <tr>
-          <td></td>
-          <td></td>
-          <td>Fußzeile</td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="exp_pop"><code class="code__solo">table.width_full.table__fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
-    <hr class="hr__hidden">
-    <p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p>
-    <table class="width_full js_pop">
-      <thead>
-        <tr>
-          <th class="precol"></th>
-          <th>Kopfzeile</th>
-          <th>A</th>
-          <th>B</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td class="precol">Vorspalte</td>
-          <td>Eine</td>
-          <td></td>
-          <td></td>
-        </tr>
-        <tr>
-          <td class="precol">1</td>
-          <td></td>
-          <td>erweiterte</td>
-          <td></td>
-        </tr>
-        <tr>
-          <td class="precol">2</td>
-          <td></td>
-          <td></td>
-          <td>Tabelle</td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="exp_pop"><code class="code__solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div>
-    <table class="width_full table__stripe table__free">
-      <thead>
-        <tr>
-          <th>Kopfzeile</th>
-          <th>A</th>
-          <th>B</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Tabelle</td>
-          <td></td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>ohne</td>
-          <td>Rahmen</td>
-          <td></td>
-        </tr>
-        <tr>
-          <td></td>
-          <td>jedoch</td>
-          <td>mit</td>
-        </tr>
-        <tr>
-          <td></td>
-          <td></td>
-          <td>Streifen</td>
-        </tr>
-      </tbody>
-    </table>
-    <table class="table__fix">
-      <caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
-      <thead>
-        <tr>
-          <th>Kopfzeile</th>
-          <th>1</th>
-          <th>&gt;9000</th>
-        </tr>
-      </thead>
-      <tfoot>
-        <tr>
-          <td>Fußzeile</td>
-          <td>-</td>
-          <td>-</td>
-        </tr>
-      </tfoot>
-      <tbody>
-        <tr>
-          <td>Alpha</td>
-          <td>0</td>
-          <td>9000</td>
-        </tr>
-        <tr>
-          <td>Bravo</td>
-          <td>1</td>
-          <td>9001</td>
-        </tr>
-        <tr>
-          <td>Charlie</td>
-          <td>0</td>
-          <td>9000</td>
-        </tr>
-      </tbody>
-    </table>
-  </article>
-  <article>
-    <h1>Formulare</h1>
-    <p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span> Üblicherweise stehen alle Formularelemente innerhalb eines <code>&lt;form&gt;</code> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
-    <p>Grundlegend ist das Element <code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
-    <p><input value="Undefiniert"/></p>
-    <p>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element <code>&lt;button&gt;</code> dafür.
-      <p><input type="button" value="Input Button"><button>Button</button></p>
-      <p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p>
-      <p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p>
-      <p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
-      <div class="overflow">
-        <div class="float_half_size">
-          <label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
-        </div>
-        <div class="float_half_size txt_right">
-          <input type="text" id="demo__input" class="input__label_right"><label for="demo__input">Beschriftung</label>
-        </div>
-      </div>
-      <p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code>&lt;fieldset&gt;</code> realisiert.</p>
-      <fieldset>
-        <label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
-      </fieldset>
-      <p>Sie können mittels <code>&lt;legend&gt;</code> auch eine eigene Beschriftung erhalten.</p>
-      <fieldset>
-        <legend>Einfache Eingabefelder</legend>
-        <label>Texteingabe<input type="text" placeholder="Text"></label>
-        <label>Schaltfläche<input type="button" value="Senden"></label>
-      </fieldset>
-      <fieldset>
-        <legend>Weitere Eingabemöglichkeiten</legend>
-        <p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf. Hier nun eine Liste möglicher Arten von Eingabefeldern.</p>
-        <pre class="pre__code"><code>ul>(li>label>input[type="text"])</code></pre>
-        <ul class="list__basic">
-          <li><label for="">Einfache Datumseingabe<input type="date"></label></li>
-          <li><label for="">Einfache Zahleneingabe<input type="number"></label></li>
-          <li><label for="">Einfache @dresseingabe<input type="email" placeholder="@"></label></li>
-          <li><label for="">Einfache Farbauswahl<input type="color"></label></li>
-          <li><label for="">Einfache Dateiauswahl<input type="file"></label></li>
-        </ul>
-        <div class="overflow">
-          <aside class="left">
-            <p>Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</p>
-          </aside>
-          <section class="bside">
-            <label>Mehrzeilige Texteingabe</label>
-            <textarea rows="10"></textarea>
-          </section>
-        </div>
-      </fieldset>
-      <input type="checkbox"/>
-      <input type="datetime"/>
-      <input type="image"/>
-      <input type="month"/>
-      <form action="" method="get">
-        <p class="label">
-        Show me a <select name="F">
-          <option value="0"> Plain list</option>
-          <option value="1" selected="selected"> Fancy list</option>
-          <option value="2"> Table list</option>
-        </select>
-        Sorted by <select name="C">
-          <option value="N" selected="selected"> Name</option>
-          <option value="M"> Date Modified</option>
-          <option value="S"> Size</option>
-          <option value="D"> Description</option>
-        </select>
-        <select name="O">
-          <option value="A" selected="selected"> Ascending</option>
-          <option value="D"> Descending</option>
-        </select>
-        <select name="V">
-          <option value="0" selected="selected"> in Normal order</option>
-          <option value="1"> in Version order</option>
-        </select>
-        Matching <input type="text" name="P" value="*" />
-        <input type="submit" name="X" value="Go" />
-      </p>
-      </form>
-
-      <h2>Interaktive Elemente</h2>
-    </article>
-    <article>
-      <h1>Struktur</h1>
-      <div class="box__placeholder"></div>
-      <hr class="hr__hidden"/>
-      <div class="box__placeholder">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%">
-          <line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
-          <line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
-        </svg>
-      </div>
-      <hr class="hr__hidden"/>
-      <div class="box__placeholder_bkg"></div>
-    </article>
-    <article>
-      <h1>Medien</h1>
-    </article>
-    <article>
-      <h1>Druck</h1>
-    </article>
-
-    <section>
-      <header class="header__txt">
-        <h1>Ende der Einführung</h1>
-        <p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
-      </header>
-    </section>
-  </div>
-
-  <section class="sec__main_center">
-    <header>
-      <h1>HIPPIE Erklärung</h1>
-      <p>Aufbau, Standardwerte</p>
-    </header>
-    <article>
-      <p>&hellip;</p>
-    </article>
-  </section>
-
-  <section class="sec__main_center">
-    <header class="header__txt">
-      <h1>Medienformat Abfragen</h1>
-    </header>
-    <article>
-      <div class="demo__query_example">Umbruch bei&nbsp;</div>
-      <div class="demo__queries">
-        <p class="query__phoneUp">Telefone und größer</p>
-        <p class="query__phoneOnly">Nur Telefone</p>
-        <p class="query__tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
-        <p class="query__tabletPortraitUp">Schreibtafeln und größer</p>
-        <p class="query__tabletLandscapeOnly">Schreibtafeln im Querformat</p>
-        <p class="query__tabletLandscapeUp">Schreibtafeln quer und größer</p>
-        <p class="query__desktopOnly">Nur Arbeitsplatzrechner</p>
-        <p class="query__desktopUp">Arbeitsplatzrechner und größer</p>
-        <p class="query__bigDesktopUp">Richtige Monitore und größer</p>
-      </div>
-    </article>
-  </section>
-  <section class="sec__main_center">
-    <header class="header__txt">
-      <h1>Sammlung formatierter Elemente</h1>
-      <p>Die Elemente werden fortlaufend komplexer</p>
-    </header>
-    <article>
-      <pre class="pre__code"><code>h3.txt_light_color+p</code></pre>
-      <h3 class="txt_light_color">Helle Überschrift</h3>
-      <p>Mit normalem Textabsatz</p>
-      <pre class="pre__code"><code>a>h4</code></pre>
-      <a href="">
-        <h4>Überschrift als Block-Verweis</h4>
-      </a>
-      <pre class="pre__code"><code>section>div.float_space_left>img^p+p</code></pre>
-      <section class="overflow">
-        <div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
-        <p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
-      </section>
-      <pre class="pre__code"><code>div.box__main_indent</code></pre>
-      <div class="box__main_indent">
-        <hr/>
-        <p>Eingerückter Inhalt</p>
-        <hr/>
-      </div>
-      <pre class="pre__code"><code>nav>ul>(li>a.a__button{Punkt $})*4
-        nav>ul>(li>a.a__button_border{Stufe $})*4</code></pre>
-        <div class="overflow">
-          <nav class="float_space_left">
-            <ul>
-              <li><a href="" class="a__button">Punkt 1</a></li>
-              <li><a href="" class="a__button">Punkt 2</a></li>
-              <li><a href="" class="a__button">Punkt 3</a></li>
-              <li><a href="" class="a__button">Punkt 4</a></li>
-            </ul>
-          </nav>
-          <nav>
-            <ul>
-              <li><a href="" class="a__button_border">Stufe 1</a></li>
-              <li><a href="" class="a__button_border">Stufe 2</a></li>
-              <li><a href="" class="a__button_border">Stufe 3</a></li>
-              <li><a href="" class="a__button_border">Stufe 4</a></li>
-            </ul>
-          </nav>
-        </div>
-        <pre class="pre__code"><code>nav.nav__horizontal>ul>(li>a.a__button{Abschnitt $})*4
-          nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
-          <nav class="nav__horizontal">
-            <ul>
-              <li><a href="" class="a__button">Abschnitt 1</a></li>
-              <li><a href="" class="a__button">Abschnitt 2</a></li>
-              <li><a href="" class="a__button">Abschnitt 3</a></li>
-              <li><a href="" class="a__button">Abschnitt 4</a></li>
-            </ul>
-          </nav>
-          <div class="overflow">
-            <nav class="nav__center_old">
-              <ul>
-                <li><a href="" class="a__button">Typ 1</a></li>
-                <li><a href="" class="a__button">Typ 2</a></li>
-                <li><a href="" class="a__button">Typ 3</a></li>
-                <li><a href="" class="a__button">Typ 4</a></li>
-              </ul>
-            </nav>
-          </div>
-          <pre class="pre__code x_long"><code>header.header__page>h1+p+nav.nav__separate_right>ul>(li>a.a__button{Nav $})*4^+nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
-          <header class="header__page demo__header header__fancy">
-            <h1>Aufmacher</h1>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
-            <nav class="nav__separate_right">
-              <ul>
-                <li><a href="" class="a__button">Mensch</a></li>
-                <li><a href="" class="a__button">Pflanze</a></li>
-              </ul>
-            </nav>
-            <nav class="nav__right">
-              <ul>
-                <li><a href="" class="a__button">Blau</a></li>
-                <li><a href="" class="a__button">Gelb</a></li>
-              </ul>
-            </nav>
-          </header>
-          <pre class="pre__code"><code>header.header__page>nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
-          <div class="box__space height_basic">
-            <header id="js_demo_fix" class="header__page demo__header header__fix">
-              <nav class="nav__right">
-                <ul>
-                  <li><a href="" class="a__button">Eins</a></li>
-                  <li><a href="" class="a__button">Zwei</a></li>
-                </ul>
-              </nav>
-            </header>
-            <div class="pos_abs pin_bottom width_full">
-              <pre class="pre__code"><code>footer.pos_abs.pin_bottom>nav.nav__column>ul>(li>a.a__button_text)*4</code></pre>
-              <footer id="js_demo_stop" class="demo__footer">
-                <nav class="nav__column nav__separate">
-                  <ul>
-                    <li><a href="" class="a__button_text">Alpha</a></li>
-                    <li><a href="" class="a__button_text">Bravo</a></li>
-                    <li><a href="" class="a__button_text">Charlie</a></li>
-                    <li><a href="" class="a__button_text">Delta</a></li>
-                  </ul>
-                </nav>
-                <p class="txt_center demo__credits"><i class="i__bright">👨‍💻</i> mit <i class="i__bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
-              </footer>
-            </div>
-          </div>
-          <div class="flex">
-            <div class="flex__child"></div>
-            <div class="flex__child"></div>
-            <div class="flex__child"></div>
-            <div class="flex__child"></div>
-            <div class="flex__child"></div>
-          </div>
-          <div class="flex__column_wrap">
-            <div class="flex__column"><input value="Undefiniert"/></div>
-            <div class="flex__column"><input type="text" size="8" value="Text"/></div>
-            <div class="flex__column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
-            <div class="flex__column"><input type="button" value="Auswählen"></div>
-            <div class="flex__column"><input type="submit" value="Senden" disabled/></div>
-          </div>
-
-          <h2>Gruppierung</h2>
-          <pre class="pre__code"><code>ul.list__link>(li>a>img)*2+li>a</code></pre>
-          <ul class="list__link">
-            <li><a href=""><img src="./art/letter.gif" alt="">name@domain.tld</a></li>
-            <li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
-            <li><a href="">Projects</a></li>
-          </ul>
-
-          <h2>Tabellen</h2>
-          <pre class="pre__code x_long"><code>table.table__link>thead>tr>th{&amp;nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell__icon[rowspan="2"]>img[width=16  height=16]^+td.cell__link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell__date[rowspan="2"]{YYY-MM-DD}^tr>td.cell__text>div.shorten{Beschreibung})*2</code></pre>
-          <table class="table__link js_pop">
-            <thead>
-              <tr>
-                <th>&nbsp;</th>
-                <th>Ab / Zy</th>
-                <th>Neu / Alt</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="cell__icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
-                <td class="cell__link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
-                <td class="cell__date" rowspan="2">YYYY-MM-DD</td>
-              </tr>
-              <tr>
-                <td class="cell__text">
-                  <div class="shorten">Beschreibung</div>
-                </td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr>
-                <td class="cell__icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
-                <td class="cell__link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
-                <td class="cell__date" rowspan="2">YYYY-MM-DD</td>
-              </tr>
-              <tr>
-                <td class="cell__text">
-                  <div class="shorten">Beschreibung</div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <h2>Eingebettet</h2>
-          <div class="box__full_width demo__flag">
-            <svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
-              <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
-              <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
-              <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
-              <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
-              <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
-              <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
-              <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
-              <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
-              <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
-            </svg>
-          </div>
-
-
-        </article>
-      </section>
-      <section>
-        <header class="sec__main_center header__txt">
-          <h1>Autarke Seiten</h1>
-          <p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
-        </header>
-        <article>
-          <section class="sec_main_status demo__status">
-            <div class="wrap_center">
-              <h1>404</h1>
-              <p>Hier ist nichts.</p>
-              <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-                <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
-                <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-              </blockquote>
-            </div>
-            {% include "hippie/partials/footer-status.njk" %}
-          </section>
-          <section class="sec_main_status demo__status">
-            <div class="wrap_center">
-              <h1>403</h1>
-              <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
-              <blockquote>
-                <p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
-                <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-              </blockquote>
-            </div>
-            {% include "hippie/partials/footer-status.njk" %}
-          </section>
-          <section class="sec_main_status demo__status">
-            <div class="wrap_center">
-              <h1>400</h1>
-              <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
-              <blockquote>
-                <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
-                <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-              </blockquote>
-            </div>
-            {% include "hippie/partials/footer-status.njk" %}
-          </section>
-        </article>
-      </section>
-      {% include "hippie/partials/footer.njk" %}
-      {% endblock %}
-
-      {% block script %}
-      {{ super() }}
-      <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-      <script src="../js/all.min.js" type="text/javascript"></script>
-      <script type="text/javascript">
-      // Page specific
-      // ------------------------------------------------------------------------------
-      $( document ).ready(function() {
-        console.log('HIPPIE');
-
-        // jq-sticky-anything
-        $('#js_demo_fix').stickThis({
-          pushup: '#js_demo_stop'
-        });
-      });
-      </script>
-      {% endblock %}
+<!-- page-intro.njk -->
+{% set pageId = "intro" %}
+{% set pageClass = "" %}
+
+{% extends "hippie/demo-extended.njk" %}
+
+{% block title %}Intro{% endblock %}
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+{% block body_content %}
+<div class="temp_layer">
+  <!-- <div class="exp_overlay_btn exp_help_btn">
+  <span class="span_solo">?</span>
+</div> -->
+{% include "hippie/partials/nav-page-meta.njk" %}
+</div>
+
+<div id="begin" class="demo__intro">
+  Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Dies ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
+  <p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
+  <h1 id="sections">Bereiche</h1>
+  {# // body // article // section // nav // aside // h1-h6 // header // footer #}
+  <article>
+    <section>
+      <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
+      <p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
+      <p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
+    </section>
+    <!-- <div class="overflow"> -->
+    <aside class="left">
+      <p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
+    </aside>
+    <section class="bside">
+      <header>
+        <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
+        <nav>
+          <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
+        </nav>
+      </header>
+      <footer>
+        <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
+      </footer>
+    </section>
+    <!-- </div> -->
+    <p>Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.</p>
+    <h1>Überschrift 1</h1>
+    <p>Eine Überschrift erster Ordnung <code>&lt;h1&gt;</code> ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.</p>
+    <h2>Überschrift 2</h2>
+    <p>Die weiteren Überschriften <code>&lt;h2&gt;</code> bis <code>&lt;h6&gt;</code> gliedern Text und werden auch als Titel für andere Elemente eingesetzt.</p>
+    <h3>Überschrift 3 ist in Großbuchstaben gesetzt</h3>
+    <h4>Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3</h4>
+    <h5>Überschrift 5 ist Überschrift 5</h5>
+    <h6>Überschrift 6</h6>
+    <p>Schließlich eine Überschrift in der Größe des Fließtextes. Allerdings in fett.</p>
+  </article>
+  <article>
+    <h1 id="grouping">Gruppierung</h1>
+    {# // p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div #}
+    <p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p>
+    <p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p>
+    <p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
+    <p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code_solo">p.txt_center</code></div>
+    <p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code_solo">p.txt_right</code></div>
+    <address>Das Element <code>&lt;address&gt;</code> hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.</address>
+    <p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte <code>&lt;hr&gt;</code> Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.</p>
+    <hr/>
+    <p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
+    <hr class="hr_hidden js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_hidden</code></div>
+    <p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
+    <hr class="hr_dotted js_pop" emmet/><div class="exp_pop"><code class="code_solo">hr.hr_dotted</code></div><!--hr.hr_dotted-->
+    <hr class="center_50 js_pop"/><div class="exp_pop"><code class="code_solo">hr.center_50</code></div>
+    <hr class="hr_dotted center_25 js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.center_25</code></div>
+    <p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code_solo">p.column_2</code></div>
+    <p class="column_3 column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code_solo">p.column_3.column_line</code></div>
+    <p class="column_3 column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
+    <p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
+    <pre>Dadurch<br>	bleiben<br>		Einrückungen<br>			durch<br>				Tabulatoren<br>					erhalten.</pre>
+    <p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <code>&lt;blockquote&gt;</code> zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
+    <blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/">
+      <p>Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.</p>
+      <p class="quote_source"><a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a></p>
+    </blockquote>
+    <div class="exp_pop"><code class="code_solo">blockquote>p+p.quote_source</code></div>
+    <p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
+    <ul>
+      <li>Ungeordnete</li>
+      <li>Listen</li>
+    </ul>
+    <ul class="list_dash">
+      <li>Verschiedener</li>
+      <li>Art</li>
+    </ul>
+    <ol>
+      <li>Geordnete</li>
+      <li>Liste</li>
+    </ol>
+    <dl>
+      <dt>Beschreibungsliste</dt>
+      <dd>Auch Definitionslisten genannt</dd>
+      <dt>Ausdruck</dt>
+      <dd>Beschreibung</dd>
+    </dl>
+    <p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code>&lt;figure&gt;</code> umschlossen und tragen eine Bezeichnung.</p>
+    <figure class="js_pop">
+      <figcaption>Fahne</figcaption>
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10%" height="10%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
+        <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+        <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+        <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+        <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+        <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+        <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+        <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+        <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+        <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+      </svg>
+    </figure>
+    <div class="exp_pop"><code class="code_solo">figure>figcaption+{element}</code></div>
+    <p>Eine sehr klar definierte Gruppierung stellt das Element <code>&lt;main&gt;</code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
+    <p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <code>&lt;div&gt;</code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
+    <div class="box_info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div>
+  </article>
+  <article>
+    <h1 id="textlevel">Textebene</h1>
+    {# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #}
+    <h2>Verweise</h2>
+    <p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.a_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
+    <p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="a_line" href="#">unterstrichene Varianten</a> sind möglich.</p>
+    <p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p>
+    <h2>Formatierungen</h2>
+    <p>Texte, Wörter oder Zeichen können vielfältig formatiert werden.</p>
+    <p>Sie können <b>fett</b> <code>&lt;b&gt;</code> oder <i>kursiv</i> <code>&lt;i&gt;</code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <strong>aussehen</strong>, sondern auch <em>eine besondere inhaltliche Bedeutung</em> bekommen, werden sie mit <code>&lt;strong&gt;</code> und <code>&lt;em&gt;</code> ausgezeichnet.</p>
+    <p>Das <code>&lt;u&gt;</code> Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie <u>Interaktionsweise</u>, oder die Beschriftung des Textes als falsch geschrieben.</p>
+    <p>Ähnlich ist es mit dem Element <code>&lt;small&gt;</code>. <small>Es steht für Randnotizen wird aber häufig auch kleiner dargestellt.</small></p>
+    <p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.</p>
+    <blockquote class="quote_mark js_pop" cite="">
+      <p>Das kannst du schon so machen aber dann isses halt Kacke.</p>
+      <p class="quote_source">o. V.</p>
+    </blockquote>
+    <div class="exp_pop"><code class="code_solo">blockquote.quote_mark>p+p.quote_source</code></div>
+    <p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p>
+    <p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache.<code>var code = "Das ist code";</code></p>
+    <p>In diesem Beispiel wird die Variable <var>code</var> definiert. Solch ein spezieller Text kann mit dem dafür vorgesehenen Element <code>&lt;var&gt;</code> ausgezeichnet werden.</p>
+    <p>Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p>
+    <pre class="pre_code"><code>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br>  &lt;/head&gt;<br>  &lt;body id="root"&gt;<br>    &lt;!-- Content goes here --&gt;<br>    &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;</code></pre>
+    <p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
+    <p>Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das <code>&lt;samp&gt;</code> Element verwendet. Der Computer hat gesagt: <samp>Ich kann das angegebene Objekt nicht finden</samp>.</p>
+    <p>Benutzereingaben haben ebenfalls ein eigenes Element <code>&lt;kbd&gt;</code>. Damit werden Eingaben durch den Nutzer, wie Drücken Sie gleichzeitig <kbd>Strg</kbd> und <kbd>A</kbd>, gekennzeichnet.</p>
+    <p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p>
+    <p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren ^^.</p>
+    <p>Eine Markierung kann, mittels <code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p>
+    <p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen <bdi>كائن بشري</bdi>, die auch rechtsbündig geschrieben sein können, wird das <code>&lt;bdi&gt;</code> Element eingesetzt.<br>Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem <code>&lt;bdo&gt;</code> Element umgesetzt.</p>
+    <bdo dir="rtl">
+      <ul>
+        <li>كائن بشري</li>
+        <li>إنسان آلي</li>
+      </ul>
+    </bdo>
+    <p>Neben den vielen speziellen Elmenten gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code>&lt;span&gt;</code> Element.<br></p>
+    <p><span class="wip_txt">...</span></p>
+    <h2>Änderungen</h2>
+  </article>
+  <article>
+    <h1>Eingebundene Inhalte</h1>
+
+  </article>
+  <article>
+    <h1>Tabellen</h1>
+    <p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert oder richten sich nach ihrem Inhalt. Das gilt auch für die einzelnen Zellen.<span class="wip_txt">...</span></p>
+    <table class="width_full js_pop">
+      <tbody>
+        <tr>
+          <td>Eine</td>
+          <td>einfache</td>
+        </tr>
+        <tr>
+          <td colspan="2">Tabelle</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="exp_pop"><code class="code_solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div>
+    <div class="overflow">
+      <table class="float_space_left js_pop">
+        <tbody>
+          <tr>
+            <td>Eine</td>
+            <td>fließende</td>
+          </tr>
+          <tr>
+            <td colspan="2">Tabelle</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="exp_pop"><code class="code_solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
+      <table class="table_blank float_space_left js_pop">
+        <tbody>
+          <tr>
+            <td>Mit</td>
+            <td>ohne</td>
+          </tr>
+          <tr>
+            <td colspan="2">Linien</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="exp_pop"><code class="code_solo">table.table_blank>tbody>tr>td*2^tr>td[colspan=2]</code></div>
+    </div>
+    <p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
+    <table class="width_full table_fix js_pop">
+      <caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
+      <thead>
+        <tr>
+          <th>Kopfzeile</th>
+          <th>A</th>
+          <th>B</th>
+        </tr>
+      </thead>
+      <tfoot>
+        <tr>
+          <td>Fußzeile</td>
+          <td>A</td>
+          <td>B</td>
+        </tr>
+      </tfoot>
+      <tbody>
+        <tr>
+          <td>Tabelle</td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mit</td>
+          <td>Titel</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>Kopf-</td>
+          <td>und</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td>Fußzeile</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="exp_pop"><code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
+    <hr class="hr_hidden">
+    <p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p>
+    <table class="width_full js_pop">
+      <thead>
+        <tr>
+          <th class="precol"></th>
+          <th>Kopfzeile</th>
+          <th>A</th>
+          <th>B</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="precol">Vorspalte</td>
+          <td>Eine</td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="precol">1</td>
+          <td></td>
+          <td>erweiterte</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td class="precol">2</td>
+          <td></td>
+          <td></td>
+          <td>Tabelle</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="exp_pop"><code class="code_solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div>
+    <table class="width_full table_stripe table_free">
+      <thead>
+        <tr>
+          <th>Kopfzeile</th>
+          <th>A</th>
+          <th>B</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Tabelle</td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>ohne</td>
+          <td>Rahmen</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>jedoch</td>
+          <td>mit</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td>Streifen</td>
+        </tr>
+      </tbody>
+    </table>
+    <table class="table_fix">
+      <caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
+      <thead>
+        <tr>
+          <th>Kopfzeile</th>
+          <th>1</th>
+          <th>&gt;9000</th>
+        </tr>
+      </thead>
+      <tfoot>
+        <tr>
+          <td>Fußzeile</td>
+          <td>-</td>
+          <td>-</td>
+        </tr>
+      </tfoot>
+      <tbody>
+        <tr>
+          <td>Alpha</td>
+          <td>0</td>
+          <td>9000</td>
+        </tr>
+        <tr>
+          <td>Bravo</td>
+          <td>1</td>
+          <td>9001</td>
+        </tr>
+        <tr>
+          <td>Charlie</td>
+          <td>0</td>
+          <td>9000</td>
+        </tr>
+      </tbody>
+    </table>
+  </article>
+  <article>
+    <h1>Formulare</h1>
+    <p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig. <span class="wip_txt">(Vielleicht ist das auch scheiße, hier darauf einzugehen) ...</span> Üblicherweise stehen alle Formularelemente innerhalb eines <code>&lt;form&gt;</code> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
+    <p>Grundlegend ist das Element <code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
+    <p><input value="Undefiniert"/></p>
+    <p>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element <code>&lt;button&gt;</code> dafür.</p>
+    <p><input type="button" value="Input Button"><button>Button</button></p>
+    <p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p>
+    <p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p>
+    <p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
+    <div class="overflow">
+      <div class="float_half_size">
+        <label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
+      </div>
+      <div class="float_half_size txt_right">
+        <input type="text" id="demo__input" class="input_label_right"><label for="demo__input">Beschriftung</label>
+      </div>
+    </div>
+    <p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code>&lt;fieldset&gt;</code> realisiert.</p>
+    <fieldset>
+      <label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
+    </fieldset>
+    <p>Sie können mittels <code>&lt;legend&gt;</code> auch eine eigene Beschriftung erhalten.</p>
+    <fieldset>
+      <legend>Einfache Eingabefelder</legend>
+      <label>Texteingabe<input type="text" placeholder="Text"></label>
+      <label>Schaltfläche<input type="button" value="Senden"></label>
+    </fieldset>
+    <fieldset>
+      <legend>Weitere Eingabemöglichkeiten</legend>
+      <p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf. Hier nun eine Liste möglicher Arten von Eingabefeldern.</p>
+      <pre class="pre_code"><code>ul>(li>label>input[type="text"])</code></pre>
+      <ul class="list_basic">
+        <li><label for="">Einfache Datumseingabe<input type="date"></label></li>
+        <li><label for="">Einfache Zahleneingabe<input type="number"></label></li>
+        <li><label for="">Einfache @dresseingabe<input type="email" placeholder="@"></label></li>
+        <li><label for="">Einfache Farbauswahl<input type="color"></label></li>
+        <li><label for="">Einfache Dateiauswahl<input type="file"></label></li>
+      </ul>
+      <div class="overflow">
+        <aside class="left">
+          <p>Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</p>
+        </aside>
+        <section class="bside">
+          <label>Mehrzeilige Texteingabe</label>
+          <textarea rows="10"></textarea>
+        </section>
+      </div>
+    </fieldset>
+    <input type="checkbox"/>
+    <input type="datetime"/>
+    <input type="image"/>
+    <input type="month"/>
+    <form action="" method="get">
+      <p class="label">
+        Show me a <select name="F">
+          <option value="0"> Plain list</option>
+          <option value="1" selected="selected"> Fancy list</option>
+          <option value="2"> Table list</option>
+        </select>
+        Sorted by <select name="C">
+          <option value="N" selected="selected"> Name</option>
+          <option value="M"> Date Modified</option>
+          <option value="S"> Size</option>
+          <option value="D"> Description</option>
+        </select>
+        <select name="O">
+          <option value="A" selected="selected"> Ascending</option>
+          <option value="D"> Descending</option>
+        </select>
+        <select name="V">
+          <option value="0" selected="selected"> in Normal order</option>
+          <option value="1"> in Version order</option>
+        </select>
+        Matching <input type="text" name="P" value="*" />
+        <input type="submit" name="X" value="Go" />
+      </p>
+    </form>
+
+    <h2>Interaktive Elemente</h2>
+  </article>
+  <article>
+    <h1>Struktur</h1>
+    <div class="box_placeholder"></div>
+    <hr class="hr_hidden"/>
+    <div class="box_placeholder">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%">
+        <line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
+        <line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
+      </svg>
+    </div>
+    <hr class="hr_hidden"/>
+    <div class="box_placeholder_bkg"></div>
+  </article>
+  <article>
+    <h1>Medien</h1>
+  </article>
+  <article>
+    <h1>Druck</h1>
+  </article>
+
+  <section>
+    <header class="header_txt">
+      <h1>Ende der Einführung</h1>
+      <p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
+    </header>
+  </section>
+</div>
+
+<section class="sec_main_center">
+  <header>
+    <h1>HIPPIE Erklärung</h1>
+    <p>Aufbau, Standardwerte</p>
+  </header>
+  <article>
+    <p>&hellip;</p>
+  </article>
+</section>
+
+{% include "hippie/partials/footer.njk" %}
+{% endblock %}
+
+{% block script %}
+{{ super() }}
+<script src="../js/all.min.js" type="text/javascript"></script>
+<script type="text/javascript">
+// Page specific
+// ------------------------------------------------------------------------------
+$( document ).ready(function() {
+  console.log('HIPPIE');
+
+});
+</script>
+{% endblock %}
diff --git a/source/pages/demo/os.njk b/source/pages/demo/os.njk
index c82fbfc..9df5bc6 100644
--- a/source/pages/demo/os.njk
+++ b/source/pages/demo/os.njk
@@ -12,7 +12,7 @@
 {% block body_content %}
 {# {% include "partials/page-hover.njk" %} #}
 <div class="height_full">
-  <div class="flex__wrap">
+  <div class="flex_wrap">
     <button class="demo__button_32"></button>
     <button class="demo__button_32"></button>
     <button class="demo__button_32"></button>
@@ -21,10 +21,10 @@
     <button class="demo__button_32"></button>
   </div>
   <div class="flex">
-    <div class="flex__child">
-      <!-- (nav>ul.list__data>(li>a>img+p{Punkt $})*6)*2 -->
+    <div class="flex_child">
+      <!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
       <nav>
-        <ul class="list__files">
+        <ul class="list_files">
           <li><a href="">
             <img src="" alt="">
             <p>Punkt 1</p>
@@ -52,7 +52,7 @@
         </ul>
       </nav>
       <nav>
-        <ul class="list__files">
+        <ul class="list_files">
           <li><a href="">
             <img src="" alt="">
             <p>Punkt 1</p>
@@ -80,53 +80,53 @@
         </ul>
       </nav>
     </div>
-    <div class="flex__child_one flex__row">
-      <!-- div.flex__child.box__file_wrp>(div.box__file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex__child>table.table__file_simple>(tr>td>img^+td{Objektname $}+td.cell__file_path{Objektpfad $})*2 -->
-      <div class="flex__child box__file_wrp">
-        <div class="flex__wrap box__file_tile">
-          <div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box__flex_one">
+    <div class="flex_child_one flex_row">
+      <!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
+      <div class="flex_child box_file_wrp">
+        <div class="flex_wrap box_file_tile">
+          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
+          <div class="box_flex_one">
             <p>Dateiname 1</p>
             <p>Auszeichnung 1</p>
           </div>
         </div>
-        <div class="flex__wrap box__file_tile">
-          <div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box__flex_one">
+        <div class="flex_wrap box_file_tile">
+          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
+          <div class="box_flex_one">
             <p>Dateiname 2</p>
             <p>Auszeichnung 2</p>
           </div>
         </div>
-        <div class="flex__wrap box__file_tile">
-          <div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box__flex_one">
+        <div class="flex_wrap box_file_tile">
+          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
+          <div class="box_flex_one">
             <p>Dateiname 3</p>
             <p>Auszeichnung 3</p>
           </div>
         </div>
-        <div class="flex__wrap box__file_tile">
-          <div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box__flex_one">
+        <div class="flex_wrap box_file_tile">
+          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
+          <div class="box_flex_one">
             <p>Dateiname 4</p>
             <p>Auszeichnung 4</p>
           </div>
         </div>
       </div>
-      <div class="flex__child_one">
-        <table class="table__file_simple">
+      <div class="flex_child_one">
+        <table class="table_file_simple">
           <tr>
             <td><img src="" alt=""></td>
             <td>Objektname 1</td>
-            <td class="cell__file_path">Objektpfad 1</td>
+            <td class="cell_file_path">Objektpfad 1</td>
           </tr>
           <tr>
             <td><img src="" alt=""></td>
             <td>Objektname 2</td>
-            <td class="cell__file_path">Objektpfad 2</td>
+            <td class="cell_file_path">Objektpfad 2</td>
           </tr>
         </table>
       </div>
-      <div class="flex__child">
+      <div class="flex_child">
         <p>Status</p>
       </div>
     </div>
diff --git a/source/style/hippie/elements/_grouping.scss b/source/style/hippie/elements/_grouping.scss
index 5cbc119..460515b 100644
--- a/source/style/hippie/elements/_grouping.scss
+++ b/source/style/hippie/elements/_grouping.scss
@@ -45,12 +45,12 @@ hr {
 	border-color: $darkest_color;
 }
 
-.hr__hidden {
+.hr_hidden {
 	@extend hr;
 	border-color: transparent;
 }
 
-.hr__dotted {
+.hr_dotted {
 	@extend hr;
 	border-style: dotted;
 }
@@ -60,8 +60,8 @@ pre {
 	@extend %basic_mono;
 }
 
-.pre__code {
-	// overflow-x: scroll;
+.pre_code {
+	overflow-x: auto;
 	border-color: rgba($brightest_color,.1);
 	border-style: dotted;
 	border-width:  0 0 0 $border_width_4;
@@ -80,14 +80,14 @@ blockquote {
 	padding-left: $basic_indent;
 }
 
-.quote__mark {
+.quote_mark {
 	p::before {
 		content: "\201E \0020";
 	}
 	p::after {
 		content: "\201C \0020";
 	}
-	.quote__source {
+	.quote_source {
 		&::before, &::after {
 			content: "";
 		}
@@ -107,7 +107,7 @@ li, dt, dd {
 	@extend %basic;
 }
 
-dd, .list__basic li {
+dd, .list_basic li {
 	margin-bottom: $basic_space;
 }
 
@@ -144,7 +144,7 @@ div {
 
 // General Classes
 // ------------------------------------------------------------------------------
-.list__dash {
+.list_dash {
 	li {
 		list-style: none;
 		position: relative;
@@ -157,7 +157,7 @@ div {
 	}
 }
 
-.list__link {
+.list_link {
 	li {
 		margin-bottom: $tiny_space * 2;
 		text-transform: uppercase;
@@ -180,52 +180,52 @@ div {
 	}
 }
 
-.list__horizontal {
+.list_horizontal {
 	overflow: auto;
 	li {
 		@extend .float_space_left;
 	}
 }
 
-.box__info {
+.box_info {
 	padding: $double_space $basic_indent;
 	border-right: $basic_space solid rgba($echo_color, 0.6);
 	background-color: rgba($echo_color, 0.1) !important;
 }
 
-.box__main_indent {
+.box_main_indent {
 	margin-left: 25%;
 }
 
-.box__full_width {
+.box_full_width {
 	// position: relative;
 	// overflow: hidden;
 	// width: 100%;
 }
 
 // Columns
-.column__line {
+.column_line {
 	column-rule: $basic_border;
 }
-.column__2, .column__3 {
+.column_2, .column_3 {
 	@extend p;
 }
-.column__2 {
+.column_2 {
 	column-count: 2;
 	column-gap: $space_3;
 }
-.column__3 {
+.column_3 {
 	column-count: 3;
 	column-gap: $space_4;
 }
 
 // Space and placeholders
-.box__space {
+.box_space {
 	position: relative;
 	width: 100%;
 }
 
-.box__cube {
+.box_cube {
 	float: left;
 	display: table;
 	width: $space_4;
@@ -236,7 +236,7 @@ div {
 	}
 }
 
-.box__placeholder {
+.box_placeholder {
 	width: 100%;
 	height: $space_4;
 	border: $border_width_4 solid rgba($alpha_color,.1);
@@ -244,33 +244,34 @@ div {
 	background-color: rgba($alpha_color,.2);
 }
 
-.box__placeholder_bkg {
+.box_placeholder_bkg {
 	width: 100%;
 	height: $space_4 * 2;
 	border: $border_width_4 solid rgba($brightest_color,.1);
 	border-radius: $basic_corner;
 	padding: $basic_space;
 	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
-	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='#FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#FFF' stroke-width='.5'/></svg>") no-repeat;
+	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
 	background-color: rgba($brightest_color,.1);
 }
 
 // Data
-.box__file_tile {
+.box_file_tile {
 	@extend .float_space_left;
 }
 
 // Flex
-.flex__column_wrap {
+.flex_column_wrap {
 	@extend .flex;
+	flex-wrap: wrap;
 
-	.flex__column {
-		@extend .flex__child;
+	.flex_column {
+		@extend .flex_child;
 		flex-grow: 1;
 	}
 }
 
 // Sprites
-.sprite__img {
+.sprite_img {
 	display: inline-block;
 }
diff --git a/source/style/hippie/elements/_interactive.scss b/source/style/hippie/elements/_interactive.scss
index defed38..41b072e 100644
--- a/source/style/hippie/elements/_interactive.scss
+++ b/source/style/hippie/elements/_interactive.scss
@@ -105,7 +105,7 @@ legend {
 }
 
 label + input,
-.input__label_right,
+.input_label_right,
 .label > input,
 .label > select {
 	margin: 0 $basic_space;
@@ -192,7 +192,7 @@ canvas {
 	line-height: 2.5;
 }
 
-.label__table {
+.label_table {
 	display: table;
 
 	input {
@@ -200,10 +200,10 @@ canvas {
 	}
 }
 
-.input__default {
+.input_default {
 
 	label {
-		@extend .label__table;
+		@extend .label_table;
 		margin: $half_space 0;
 
 		input {
diff --git a/source/style/hippie/elements/_sections.scss b/source/style/hippie/elements/_sections.scss
index 3a1ee9e..e03ebec 100644
--- a/source/style/hippie/elements/_sections.scss
+++ b/source/style/hippie/elements/_sections.scss
@@ -38,9 +38,10 @@ body {
 	}
 
 	&:hover {
-
-		.layer__hover {
-			background-color: transparent;
+		
+		.layer_hover {
+			background-color: transparent !important;
+			transition: background-color $double_duration $basic_timing 0s !important;
 		}
 	}
 }
@@ -55,7 +56,7 @@ section {
 
 }
 
-.sec__main_center {
+.sec_main_center {
 	width: $basic_width;
 	margin: 0 auto;
 	padding-top: $space_3;
@@ -71,7 +72,7 @@ section {
 	}
 }
 
-.sec__main_status {
+.sec_main_status {
 	border-top-width: $border_width_8;
 	border-top-style: solid;
 	border-color: $basic_border_color;
@@ -161,11 +162,11 @@ header {
 
 }
 
-.header__page {
+.header_page {
 	overflow: auto;
 }
 
-.header__txt {
+.header_txt {
 	margin-bottom: $space_3;
 	border-bottom: $dotted_border;
 
diff --git a/source/style/hippie/elements/_tables.scss b/source/style/hippie/elements/_tables.scss
index 23159b0..ddd3626 100644
--- a/source/style/hippie/elements/_tables.scss
+++ b/source/style/hippie/elements/_tables.scss
@@ -80,7 +80,7 @@ td:last-child {
 	border-right: $basic_border;
 }
 
-.table__blank {
+.table_blank {
 	border: $basic_border_width solid transparent;
 
 	th, td {
@@ -88,11 +88,11 @@ td:last-child {
 	}
 }
 
-.table__free {
+.table_free {
 	border: $basic_border_width solid transparent;
 }
 
-.table__stripe {
+.table_stripe {
 	td {
 	border-top: 0;
 	border-bottom: 0;
@@ -103,11 +103,11 @@ td:last-child {
 	}
 }
 
-.table__fix {
+.table_fix {
 	table-layout: fixed;
 }
 
 // Data
-.table__file_simple {
+.table_file_simple {
 	@extend .width_full;
 }
diff --git a/source/style/hippie/elements/_textlevel.scss b/source/style/hippie/elements/_textlevel.scss
index 8f1d071..69f06a0 100644
--- a/source/style/hippie/elements/_textlevel.scss
+++ b/source/style/hippie/elements/_textlevel.scss
@@ -52,7 +52,7 @@ a {
 	}
 }
 
-.a__line {
+.a_line {
 	border-bottom-width: $tiny_space;
 	border-bottom-style: dotted;
 	border-color: $basic_border_color;
@@ -68,19 +68,19 @@ a {
 	}
 }
 
-.a__button {
+.a_button {
 	@extend %default_button;
 }
 
-.a__button_text {
+.a_button_text {
 	@extend %default_button;
 	padding: $wide_padding;
 	background-color: transparent;
 	color: $basic_font_color;
 }
 
-.a__button_border {
-	@extend .a__button_text;
+.a_button_border {
+	@extend .a_button_text;
 	border: $cell_border;
 }
 
@@ -90,7 +90,7 @@ i, em {
 	font-style: italic;
 }
 
-.i__bright {
+.i_bright {
 	font-style: normal;
 	color: $brightest_color;
 }
@@ -159,10 +159,10 @@ time {
 // Code
 code {
 	@extend %basic_mono;
-	color: lighten($basic_font_color, 12%);
+	color: lighten($basic_font_color, $basic_color_diff);
 	background-color: rgba($brightest_color,.1);
 }
-.code__solo {
+.code_solo {
 	@extend %basic_mono;
 	padding: $tiny_space $half_space;
 	color: $basic_font_color;
@@ -177,7 +177,15 @@ samp {
 }
 
 kbd {
-
+	@extend %basic_mono;
+	// font-size: .9em;
+	// font-weight: bold;
+	padding: 0 $half_space;
+	border-width: $basic_border_width;
+	border-style: solid;
+	border-color: darken($basic_back_color, $basic_color_diff);
+	border-radius: $basic_corner;
+	color: lighten($basic_font_color, $basic_color_diff);
 }
 
 sub, sup {
@@ -192,7 +200,7 @@ u {
 mark {
 	background-color: $alpha_color;
 }
-.mark__cursor {
+.mark_cursor {
 	color: $basic_highlight_color;
 	background-color: $darkest_color;
 }
@@ -213,7 +221,7 @@ bdi, bdo {
 span {
 
 }
-.span__solo {
+.span_solo {
 	@extend %solo;
 }
 
diff --git a/source/style/hippie/global/_common.scss b/source/style/hippie/global/_common.scss
index 1b71d2e..8fd23aa 100644
--- a/source/style/hippie/global/_common.scss
+++ b/source/style/hippie/global/_common.scss
@@ -189,7 +189,7 @@
 }
 
 .hover_back_change {
-	background-color: darken($basic_back_color, 10%);
+	background-color: darken($basic_back_color, $basic_color_diff);
 	transition: background-color 0.2s ease-in-out;
 
 	&:hover {
@@ -201,7 +201,7 @@
 	@extend %full_viewport;
 	z-index: $z_heaven;
 	background-color: transparentize($darkest_color, 0.5);
-	transition: background-color 0.2s ease-in-out;
+	transition: background-color $extended_duration $basic_timing $extended_duration;
 	pointer-events: none;
 }
 
@@ -209,27 +209,27 @@
 	display: flex;
 }
 
-.flex__wrap {
+.flex_wrap {
 	@extend .flex;
 	flex-wrap: wrap;
 }
 
-.flex__row {
+.flex_row {
 	@extend .flex;
 	flex-direction: column;
 	// align-items: flex-start;
 	justify-content: flex-start;
 }
 
-.flex__child {
+.flex_child {
 	flex:  0 1 auto;
 }
 
-.flex__child_one {
+.flex_child_one {
 	flex:  1;
 }
 
-.flex__child_end {
+.flex_child_end {
 	align-self: flex-end;
 }
 
@@ -237,7 +237,7 @@
 // Colors
 // ------------------------------------------------------------------------------
 .txt_light_color {
-	color: darken($basic_back_color, 10%);
+	color: darken($basic_back_color, $basic_color_diff);
 }
 
 
diff --git a/source/style/hippie/global/_config.scss b/source/style/hippie/global/_config.scss
index 4048996..3e64efb 100644
--- a/source/style/hippie/global/_config.scss
+++ b/source/style/hippie/global/_config.scss
@@ -101,13 +101,13 @@ $basic_link_color: $echo_color !default;
 $basic_highlight_color: $brightest_color !default;
 $basic_action_color: $foxtrot_color !default;
 
-
-
 $basic_border_color: $basic_front_color !default;
 
 // default shadow colors
 // $shadow_color: fade-out($medium_color, 0.5);
 
+$basic_color_diff: 12% !default;
+
 $basic_color_list: ();
 
 @each $key, $value in $color_palette {
@@ -147,8 +147,9 @@ $io_margin: 0 $space_3 !default;
 $basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
 $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
 
-$basic_corner: $tiny_space;
+$basic_corner: $tiny_space * 2;
 
+// Borders
 $basic_border_width: $tiny_space !default;
 $border_width_4: $tiny_space * 4;
 $border_width_8: $tiny_space * 8;
@@ -197,8 +198,8 @@ $basic_focus_list:
 	'textarea:not([disabled])',
 	'*[tabindex]';
 
-$basic_io_font_color: lighten($basic_font_color, 10%);
-$basic_io_back_color: darken($brightest_color, 10%);
+$basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
+$basic_io_back_color: darken($brightest_color, $basic_color_diff);
 $basic_io_border_color: $brightest_color;
 
 $basic_io_border_width: $tiny_space * 2 !default;
@@ -212,8 +213,10 @@ $basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $l
 // ANIMATIONS
 // ------------------------------------------------------------------------------
 
-$basic_duration: 150ms;
-$basic_timing: ease;
+$basic_duration: 250ms;
+$double_duration: 500ms;
+$extended_duration: 2s;
+$basic_timing: ease-out;
 
 
 // HARDWARE BREAKPOINTS
diff --git a/source/style/hippie/global/_typography.scss b/source/style/hippie/global/_typography.scss
index 9a099aa..2986a6d 100644
--- a/source/style/hippie/global/_typography.scss
+++ b/source/style/hippie/global/_typography.scss
@@ -1,62 +1,62 @@
-// Basic styles
-// -----------------------------------------------------------------------------
-
-%basic {
-	font-family: $primary_font_family;
-	font-size: $text_size_1;
-	line-height: $text_line_basic;
-}
-
-%basic_mono {
-	font-family: $monospace_font_family;
-	font-size: $text_size_1;
-	line-height: $text_line_mono;
-}
-
-%basic_print {
-	font-family: $print_font_family;
-	font-size: $text_size_1;
-	line-height: $text_line_basic;
-}
-
-%head_all {
-	color: $basic_head_color;
-}
-
-%head_1 {
-	font-family: $secondary_font_family;
-	font-size: $head_size_1;
-	font-weight: 300;
-	line-height: $head_line_basic;
-}
-
-%head_2 {
-	font-family: $secondary_font_family;
-	font-size: $head_size_2;
-	font-weight: 300;
-	line-height: $head_line_2;
-}
-
-%head_3 {
-	font-family: $secondary_font_family;
-	font-size: $head_size_3;
-	font-weight: 300;
-	line-height: $head_line_3;
-}
-
-%head_4 {
-	font-family: $secondary_font_family;
-	font-size: $head_size_4;
-	font-weight: 300;
-	line-height: $head_line_4;
-}
-
-%solo {
-	@extend %basic;
-}
-
-%short {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	-o-text-overflow: ellipsis; // vendor
-}
+// Basic styles
+// -----------------------------------------------------------------------------
+
+%basic {
+	font-family: $primary_font_family;
+	font-size: $text_size_1;
+	line-height: $text_line_basic;
+}
+
+%basic_mono {
+	font-family: $monospace_font_family;
+	font-size: $text_size_1;
+	line-height: $text_line_mono;
+}
+
+%basic_print {
+	font-family: $print_font_family;
+	font-size: $text_size_1;
+	line-height: $text_line_basic;
+}
+
+%head_all {
+	color: $basic_head_color;
+}
+
+%head_1 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_1;
+	font-weight: 300;
+	line-height: $head_line_basic;
+}
+
+%head_2 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_2;
+	font-weight: 300;
+	line-height: $head_line_2;
+}
+
+%head_3 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_3;
+	font-weight: 300;
+	line-height: $head_line_3;
+}
+
+%head_4 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_4;
+	font-weight: 300;
+	line-height: $head_line_4;
+}
+
+%solo {
+	@extend %basic;
+}
+
+%short {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis; // vendor
+}
diff --git a/source/style/hippie/mixins/_media_query.scss b/source/style/hippie/mixins/_media_query.scss
index 35ffa22..86a4e89 100644
--- a/source/style/hippie/mixins/_media_query.scss
+++ b/source/style/hippie/mixins/_media_query.scss
@@ -1,9 +1,12 @@
 //Sections for Media Queries
+@mixin forPhoneUp {
+  @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
+}
 @mixin forPhoneOnly {
   @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
 }
 @mixin forTabletPortraitUp {
-  @media (min-width: $screen_tiny) { @content; } //600px
+  @media (min-width: $screen_small) { @content; } //600px
 }
 @mixin forTabletPortraitOnly {
   @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
diff --git a/source/style/hippie/modules/breakpoint/_breakpoint_module.scss b/source/style/hippie/modules/breakpoint/_breakpoint_module.scss
index dc9c5a4..fd0174a 100644
--- a/source/style/hippie/modules/breakpoint/_breakpoint_module.scss
+++ b/source/style/hippie/modules/breakpoint/_breakpoint_module.scss
@@ -1,46 +1,47 @@
-.query__goingLarge {
+.query_goingLarge {
   @include goingLarge($screen_tiny) {};
 }
 
-.query__goingSmall {
+.query_goingSmall {
   @include goingSmall($screen_gigantic) {};
 }
 
-.query__phoneUp {
+.query_phoneUp {
+  @include forPhoneUp {}
 }
 
-.query__phoneOnly {
+.query_phoneOnly {
   @include forPhoneOnly {}
 }
 
-.query__tabletPortaitOnly {
+.query_tabletPortaitOnly {
   @include forTabletPortraitOnly {
   }
 }
 
-.query__tabletPortraitUp {
+.query_tabletPortraitUp {
   @include forTabletPortraitUp {
   }
 }
 
-.query__tabletLandscapeOnly {
+.query_tabletLandscapeOnly {
   @include forTabletLandscapeOnly {}
 }
 
-.query__tabletLandscapeUp {
+.query_tabletLandscapeUp {
   @include forTabletLandscapeUp {}
 }
 
-.query__desktopOnly {
+.query_desktopOnly {
   @include forDesktopOnly {
   }
 }
 
-.query__desktopUp {
+.query_desktopUp {
   @include forDesktopUp {
   }
 }
 
-.query__bigDesktopUp {
+.query_bigDesktopUp {
   @include forBigDesktopUp {}
 }
diff --git a/source/style/hippie/modules/explanation/_explanation_module.scss b/source/style/hippie/modules/explanation/_explanation_module.scss
index a12aee9..1538405 100644
--- a/source/style/hippie/modules/explanation/_explanation_module.scss
+++ b/source/style/hippie/modules/explanation/_explanation_module.scss
@@ -1,115 +1,115 @@
-// Custom extends and mixins
-// ------------------------------------------------------------------------------
-@import "mixins";
-@import "extends";
-
-// Explanation module styles
-// ------------------------------------------------------------------------------
-
-%expose_after {
-  &::after {
-    content: "";
-    display: block;
-    height: 48px;
-    background-color: rgba($delta_color, 0.1) !important;
-  }
-}
-%expose_before {
-  &::before {
-    content: "";
-    display: block;
-    height: 48px;
-    background-color: rgba($delta_color, 0.1) !important;
-  }
-}
-%expose {
-  &::before, &::after {
-    content: "";
-    display: block;
-    height: 48px;
-    background-color: rgba($delta_color, 0.1) !important;
-  }
-}
-%exp {
-}
-%exp_hidden {
-  display: none;
-}
-
-.exp_wrap {
-  position: relative;
-}
-
-.exp_pop {
-  @extend %exp_hidden !optional;
-  position: absolute;
-  z-index: 100;
-  top: $space_5;
-  left: $space_5;
-  padding: $half_space;
-  border: 4px solid $basic_back_color;
-  border-radius: 4px;
-  background-color: $basic_back_color;
-  pointer-events: none;
-}
-.exp_marker_pop {
-  position: absolute;
-  top: -$basic_size / 4 * 3;
-  right: -$basic_size / 2;
-  width: $basic_size;
-  height: $basic_size;
-  border: $tiny_space solid $basic_highlight_color;
-  border-radius: $basic_size;
-  color: $basic_highlight_color;
-  background-color: $darkest_color;
-}
-
-.exp_expose {
-  @extend %expose !optional;
-}
-.exp_expose_pre {
-  @extend %expose_after;
-}
-.exp_expose_post {
-  @extend %expose_before;
-}
-
-.exp_overlay_btn {
-  position: fixed;
-  width: 3em;
-  height: 2em;
-	// padding: $basic_space $basic_space * 2;
-  cursor: pointer;
-}
-.exp_help_btn {
-  display: table;
-  right: $double_space;
-  bottom: $double_space;
-  background-color: rgba($darkest_color, 0.4);
-  &:hover {
-    background-color: $brightest_color;
-    > .span__solo {
-      color: $darkest_color;
-    }
-  }
-  .span__solo {
-    display: table-cell;
-    color: rgba($brightest_color, 0.8);
-		font-family: $monospace_font_family;
-		font-size: 1.4em;
-    text-align: center;
-    vertical-align: middle;
-  }
-}
-
-
-
-.expose_height {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba($delta_color, 0.1) !important;
-  @include vendor-prefix(transition, height 0.5s ease);
-}
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Explanation module styles
+// ------------------------------------------------------------------------------
+
+%expose_after {
+  &::after {
+    content: "";
+    display: block;
+    height: 48px;
+    background-color: rgba($delta_color, 0.1) !important;
+  }
+}
+%expose_before {
+  &::before {
+    content: "";
+    display: block;
+    height: 48px;
+    background-color: rgba($delta_color, 0.1) !important;
+  }
+}
+%expose {
+  &::before, &::after {
+    content: "";
+    display: block;
+    height: 48px;
+    background-color: rgba($delta_color, 0.1) !important;
+  }
+}
+%exp {
+}
+%exp_hidden {
+  display: none;
+}
+
+.exp_wrap {
+  position: relative;
+}
+
+.exp_pop {
+  @extend %exp_hidden !optional;
+  position: absolute;
+  z-index: 100;
+  top: $space_5;
+  left: $space_5;
+  padding: $half_space;
+  border: 4px solid $basic_back_color;
+  border-radius: 4px;
+  background-color: $basic_back_color;
+  pointer-events: none;
+}
+.exp_marker_pop {
+  position: absolute;
+  top: -$basic_size / 4 * 3;
+  right: -$basic_size / 2;
+  width: $basic_size;
+  height: $basic_size;
+  border: $tiny_space solid $basic_highlight_color;
+  border-radius: $basic_size;
+  color: $basic_highlight_color;
+  background-color: $darkest_color;
+}
+
+.exp_expose {
+  @extend %expose !optional;
+}
+.exp_expose_pre {
+  @extend %expose_after;
+}
+.exp_expose_post {
+  @extend %expose_before;
+}
+
+.exp_overlay_btn {
+  position: fixed;
+  width: 3em;
+  height: 2em;
+	// padding: $basic_space $basic_space * 2;
+  cursor: pointer;
+}
+.exp_help_btn {
+  display: table;
+  right: $double_space;
+  bottom: $double_space;
+  background-color: rgba($darkest_color, 0.4);
+  &:hover {
+    background-color: $brightest_color;
+    > .span_solo {
+      color: $darkest_color;
+    }
+  }
+  .span_solo {
+    display: table-cell;
+    color: rgba($brightest_color, 0.8);
+		font-family: $monospace_font_family;
+		font-size: 1.4em;
+    text-align: center;
+    vertical-align: middle;
+  }
+}
+
+
+
+.expose_height {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($delta_color, 0.1) !important;
+  @include vendor-prefix(transition, height 0.5s ease);
+}
diff --git a/source/style/hippie/modules/maintenance/_maintenance_module.scss b/source/style/hippie/modules/maintenance/_maintenance_module.scss
index 96660a7..bbd4c3f 100644
--- a/source/style/hippie/modules/maintenance/_maintenance_module.scss
+++ b/source/style/hippie/modules/maintenance/_maintenance_module.scss
@@ -1,19 +1,19 @@
-.body__status {
-  @extend .sec__main_status;
-  height: 100vh;
-  border-color: $foxtrot_color;
-
-  .main__site {
-    @extend .wrap_center;
-    & > h1:first-of-type {
-      margin-top: 0;
-      margin-bottom: 0;
-      font-weight: bold;
-      line-height: 1;
-    }
-    & > h1 + h3 {
-      margin-top: 0;
-      margin-bottom: $space_3;
-    }
-  }
-}
+.body_status {
+  @extend .sec_main_status;
+  height: 100vh;
+  border-color: $foxtrot_color;
+
+  .main_site {
+    @extend .wrap_center;
+    & > h1:first-of-type {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-weight: bold;
+      line-height: 1;
+    }
+    & > h1 + h3 {
+      margin-top: 0;
+      margin-bottom: $space_3;
+    }
+  }
+}
diff --git a/source/style/hippie/modules/media/_media_module.scss b/source/style/hippie/modules/media/_media_module.scss
index 62bff9f..e166783 100644
--- a/source/style/hippie/modules/media/_media_module.scss
+++ b/source/style/hippie/modules/media/_media_module.scss
@@ -1,3 +1,9 @@
 .up {
 	@include sprite($up);
 }
+.down {
+	@include sprite($down);
+}
+.meta {
+	@include sprite($meta);
+}
diff --git a/source/style/hippie/modules/media/_sprites.scss b/source/style/hippie/modules/media/_sprites.scss
index ae0484a..5aefabd 100644
--- a/source/style/hippie/modules/media/_sprites.scss
+++ b/source/style/hippie/modules/media/_sprites.scss
@@ -20,6 +20,17 @@ $down-total-width: 64px;
 $down-total-height: 64px;
 $down-image: 'sprites.png';
 $down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, 'sprites.png', 'down', );
+$meta-name: 'meta';
+$meta-x: 32px;
+$meta-y: 32px;
+$meta-offset-x: -32px;
+$meta-offset-y: -32px;
+$meta-width: 32px;
+$meta-height: 32px;
+$meta-total-width: 64px;
+$meta-total-height: 64px;
+$meta-image: 'sprites.png';
+$meta: (32px, 32px, -32px, -32px, 32px, 32px, 64px, 64px, 'sprites.png', 'meta', );
 $up-name: 'up';
 $up-x: 0px;
 $up-y: 0px;
@@ -34,7 +45,7 @@ $up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, 'sprites.png', 'up', );
 $spritesheet-width: 64px;
 $spritesheet-height: 64px;
 $spritesheet-image: 'sprites.png';
-$spritesheet-sprites: ($down, $up, );
+$spritesheet-sprites: ($down, $meta, $up, );
 $spritesheet: (64px, 64px, 'sprites.png', $spritesheet-sprites, );
 
 // The provided mixins are intended to be used with the array-like variables
diff --git a/source/style/hippie/modules/navigation/_nav_module.scss b/source/style/hippie/modules/navigation/_nav_module.scss
index 789496d..a43c6df 100644
--- a/source/style/hippie/modules/navigation/_nav_module.scss
+++ b/source/style/hippie/modules/navigation/_nav_module.scss
@@ -10,7 +10,7 @@ nav {
 	}
 }
 
-.nav__horizontal {
+.nav_horizontal {
 	ul {
 		@extend .overflow;
 
@@ -30,7 +30,7 @@ nav {
 	}
 }
 
-.nav__right {
+.nav_right {
 	float: right;
 	margin-left: $basic_space;
 
@@ -39,7 +39,7 @@ nav {
 	}
 }
 
-.nav__separate {
+.nav_separate {
 	li {
 		position: relative;
 		padding-left: $tiny_space;
@@ -59,7 +59,7 @@ nav {
 	}
 }
 
-.nav__separate_right {
+.nav_separate_right {
 	float: right;
 	li {
 		position: relative;
@@ -81,8 +81,8 @@ nav {
 	}
 }
 
-.nav__center_old {
-	@extend .nav__horizontal;
+.nav_center_old {
+	@extend .nav_horizontal;
 	float: right;
 	position: relative;
 	left: -50%;
@@ -94,7 +94,7 @@ nav {
 	}
 }
 
-.nav__column {
+.nav_column {
 	position: relative;
 	margin: $basic_space 0;
 
@@ -103,7 +103,7 @@ nav {
 		margin: 0 $space_5;
 
 		li {
-			@extend .flex__child;
+			@extend .flex_child;
 			flex-grow: 1;
 			margin: 0;
 			text-align: center;
@@ -115,7 +115,7 @@ nav {
 	}
 }
 
-.nav__page_meta {
+.nav_page_meta {
 	position: fixed;
 	// display: table;
 	// width: 3em;
@@ -128,13 +128,14 @@ nav {
 
 	li {
 		margin-bottom: 0;
+		line-height: 1;
 	}
 	button {
 		width: 32px;
 		margin-right: 0;
 		margin-left: 0;
 	}
-	.a__button_meta {
+	.a_button_meta {
 		// display: table-cell;
 		display: inline-block;
 
@@ -147,12 +148,15 @@ nav {
 			background-color: $basic_action_color;
 		}
 	}
+	.sprite_img {
+		vertical-align: top;
+	}
 }
 
-.header__page {
+.header_page {
 
 	nav {
-		@extend .nav__horizontal;
+		@extend .nav_horizontal;
 
 		a {
 
diff --git a/source/style/hippie/modules/tables/_tables_module.scss b/source/style/hippie/modules/tables/_tables_module.scss
index f6e625c..f653e11 100644
--- a/source/style/hippie/modules/tables/_tables_module.scss
+++ b/source/style/hippie/modules/tables/_tables_module.scss
@@ -1,68 +1,68 @@
-.table__link {
-	width: 100%;
-	border: 0;
-	table-layout: auto;
-
-	tbody {
-		border-bottom: $cell_border;
-
-		&:hover {
-			background-color: $bright_color;
-		}
-	}
-
-	th, td {
-		border: 0;
-	}
-
-	.cell__icon {
-		width: 48px;
-		text-align: center;
-		img {
-			vertical-align: text-top;
-		}
-	}
-
-	.cell__link {
-		padding-right: $basic_space;
-		padding-left: $basic_space;
-
-		&:hover {
-			background-color: $foxtrot_color;
-			a:first-child {
-				display: none;
-			}
-			a:last-child {
-				display: block;
-				color: $basic_highlight_color;
-			}
-		}
-
-		a {
-			display: block;
-		}
-
-		a:last-child {
-			display: none;
-		}
-	}
-
-	th:last-child, .cell__date {
-		width: 16%;
-		text-align: center;
-	}
-
-	.cell__text {
-		padding-right: $basic_space;
-		padding-left: $basic_space;
-
-		div {
-			width: 100%;
-		}
-
-		.shorten {
-			@extend %short;
-			max-height: 44px;
-		}
-	}
-}
+.table_link {
+	width: 100%;
+	border: 0;
+	table-layout: auto;
+
+	tbody {
+		border-bottom: $cell_border;
+
+		&:hover {
+			background-color: $bright_color;
+		}
+	}
+
+	th, td {
+		border: 0;
+	}
+
+	.cell_icon {
+		width: 48px;
+		text-align: center;
+		img {
+			vertical-align: text-top;
+		}
+	}
+
+	.cell_link {
+		padding-right: $basic_space;
+		padding-left: $basic_space;
+
+		&:hover {
+			background-color: $foxtrot_color;
+			a:first-child {
+				display: none;
+			}
+			a:last-child {
+				display: block;
+				color: $basic_highlight_color;
+			}
+		}
+
+		a {
+			display: block;
+		}
+
+		a:last-child {
+			display: none;
+		}
+	}
+
+	th:last-child, .cell_date {
+		width: 16%;
+		text-align: center;
+	}
+
+	.cell_text {
+		padding-right: $basic_space;
+		padding-left: $basic_space;
+
+		div {
+			width: 100%;
+		}
+
+		.shorten {
+			@extend %short;
+			max-height: 44px;
+		}
+	}
+}
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index 6fa414f..add8138 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -1,10 +1,10 @@
 .demo__intro {
-	@extend .sec__main_center;
-	@extend .sec__main_status;
+	@extend .sec_main_center;
+	@extend .sec_main_status;
 }
 
 .demo__status {
-	@extend .sec__main_status;
+	@extend .sec_main_status;
 	position: relative;
 	min-height: 50vh;
 	border-color: $foxtrot_color;
@@ -32,7 +32,7 @@
 	}
 }
 
-.header__fancy {
+.header_fancy {
 	background-color: transparentize($bravo_color, 0.4);
 
 	nav {
@@ -51,7 +51,7 @@
 	}
 }
 
-.header__fix {
+.header_fix {
 	position: relative;
 	top: 0;
 	left: 0;
@@ -101,6 +101,13 @@
 	background-position: 0 0;
 }
 
+.demo__sprite_meta {
+	width: 32px;
+	height: 32px;
+	background-image: url(../art/sprites.png);
+	background-position: -32px 32px;
+}
+
 .demo__avatar {
 
 	img {
@@ -133,39 +140,39 @@
   padding: $basic_padding;
 }
 
-.query__phoneUp {
-  background-color: rgba($basic_front_color, 0.2);
+.query_phoneUp {
+  @include forPhoneUp {background-color: rgba($basic_front_color, 0.2)};
 }
 
-.query__phoneOnly {
+.query_phoneOnly {
   @include forPhoneOnly { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__tabletPortaitOnly {
+.query_tabletPortaitOnly {
   @include forTabletPortraitOnly { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__tabletPortraitUp {
+.query_tabletPortraitUp {
   @include forTabletPortraitUp { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__tabletLandscapeOnly {
+.query_tabletLandscapeOnly {
   @include forTabletLandscapeOnly { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__tabletLandscapeUp {
+.query_tabletLandscapeUp {
   @include forTabletLandscapeUp { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__desktopOnly {
+.query_desktopOnly {
   @include forDesktopOnly { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__desktopUp {
+.query_desktopUp {
   @include forDesktopUp { background-color: rgba($basic_front_color, 0.2); }
 }
 
-.query__bigDesktopUp {
+.query_bigDesktopUp {
   @include forBigDesktopUp { background-color: rgba($basic_front_color, 0.2); }
 }
 
@@ -200,6 +207,7 @@
 		content: '< 768px';
 		padding: $basic_padding;
 		border-radius: $basic_corner_radius;
+		color: $brightest_color;
 		background-color: rgba($basic_front_color, 0.2);
 	}
 }
diff --git a/source/templates/hippie/demo-default.njk b/source/templates/hippie/demo-default.njk
index e735637..8612521 100644
--- a/source/templates/hippie/demo-default.njk
+++ b/source/templates/hippie/demo-default.njk
@@ -7,13 +7,7 @@
   {% block head %}
   <title>{% block title %}{% endblock %} - HIPPIE</title>
 
-  <meta name="author" content="Interaktionsweise">
-  <meta name="description" content="hippie">
-  <meta name="generator" content="Notepad++, Atom">
-  <meta name="robots" content="noindex">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+  {% include "hippie/partials/head-meta.njk" %}
 
   <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
diff --git a/source/templates/hippie/demo-extended.njk b/source/templates/hippie/demo-extended.njk
index 1ea1399..a089c5c 100644
--- a/source/templates/hippie/demo-extended.njk
+++ b/source/templates/hippie/demo-extended.njk
@@ -16,13 +16,7 @@
   <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
   <!--Only use one of the above!-->
 
-  <meta name="author" content="Interaktionsweise">
-  <meta name="description" content="hippie example">
-  <meta name="generator" content="Notepad++, Atom">
-  <meta name="robots" content="noindex">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+  {% include "hippie/partials/head-meta.njk" %}
 
   <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
@@ -33,7 +27,7 @@
   {% endblock %}
 </head>
 
-<body id="{{ pageId }}" class="body__demo">
+<body id="{{ pageId }}" class="{{ pageClass }} body_demo">
   {% include "hippie/partials/page-hover.njk" %}
   <div id="root">
   <header id="js_head" class="header_site">
diff --git a/source/templates/hippie/demo-maintenance.njk b/source/templates/hippie/demo-maintenance.njk
index c79248e..959493a 100644
--- a/source/templates/hippie/demo-maintenance.njk
+++ b/source/templates/hippie/demo-maintenance.njk
@@ -7,13 +7,7 @@
   {% block head %}
   <title>{% block title %}{% endblock %}</title>
 
-  <meta name="author" content="Interaktionsweise">
-  <meta name="description" content="hippie http status">
-  <meta name="generator" content="Notepad++, Atom">
-  <meta name="robots" content="noindex">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+  {% include "hippie/partials/head-meta.njk" %}
 
   <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
diff --git a/source/templates/hippie/partials/head-meta.njk b/source/templates/hippie/partials/head-meta.njk
new file mode 100644
index 0000000..f38f8ae
--- /dev/null
+++ b/source/templates/hippie/partials/head-meta.njk
@@ -0,0 +1,8 @@
+<!-- head-meta.partial -->
+<meta name="author" content="Interaktionsweise">
+<meta name="description" content="hippie">
+<meta name="generator" content="Notepad++, Atom">
+<meta name="robots" content="noindex">
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
diff --git a/source/templates/hippie/partials/nav-page-meta.njk b/source/templates/hippie/partials/nav-page-meta.njk
index 4e6886f..9722a3d 100644
--- a/source/templates/hippie/partials/nav-page-meta.njk
+++ b/source/templates/hippie/partials/nav-page-meta.njk
@@ -1,16 +1,21 @@
 <!-- nav-page-meta.partial -->
-<nav class="nav__page_meta">
+<nav class="nav_page_meta">
 	<ul>
 		<li class="magic">
 			<a href="#begin" id="js_scrolltop" class="a_button_meta">
-				<div class="sprite__img demo__sprite_up"></div>
+				<div class="sprite_img demo__sprite_up"></div>
 				{# <img src="../art/up.png" alt="" width="32" height="64"> #}
 			</a>
 		</li>
-		<li><button class="">Show Meta Information</button></li>
+		<li>
+			{# <button class="">Show Meta Information</button> #}
+			<a href="#meta" class="a_button_meta">
+				<div class="sprite_img demo__sprite_meta meta"></div>
+			</a>
+		</li>
 		<li>
 			<a href="#end" id="js_scrolldown" class="a_button_meta">
-				<div class="sprite__img demo__sprite_down"></div>
+				<div class="sprite_img demo__sprite_down"></div>
 				{# <img src="../art/down.png" alt="" width="32" height="32"> #}
 			</a>
 		</li>
diff --git a/source/templates/hippie/partials/page-hover.njk b/source/templates/hippie/partials/page-hover.njk
index 0b20403..c1558e8 100644
--- a/source/templates/hippie/partials/page-hover.njk
+++ b/source/templates/hippie/partials/page-hover.njk
@@ -1,2 +1,2 @@
 <!-- page-hover.partial -->
-<div id="js_tph" class="layer__hover"></div>
+<div id="js_tph" class="layer_hover"></div>