diff --git a/source/art/images/demo/bullet.gif b/source/art/images/demo/bullet.gif
new file mode 100644
index 0000000..55a84ab
Binary files /dev/null and b/source/art/images/demo/bullet.gif differ
diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif
new file mode 100644
index 0000000..60aac08
Binary files /dev/null and b/source/art/images/demo/letter.gif differ
diff --git a/source/code/ui.js b/source/code/_intro.js
similarity index 58%
rename from source/code/ui.js
rename to source/code/_intro.js
index e4c1da9..341df5e 100644
--- a/source/code/ui.js
+++ b/source/code/_intro.js
@@ -1,48 +1,128 @@
-let introDelay = 6;
-let hintDelay = 1;
-let isAgree = false;
-
-const steps = {
-	agreement: {
-		element: document.getElementById('agreement'),
-		msgIn: 'Agreement shown.',
-		msgOut: 'Agreement accepted.',
-		msgNo: 'No agreement today.'
+class Intro {
+	constructor(name) {
+		this.name = name;
 	}
-};
-const intro = document.getElementById('intro');
-const agreement = steps.agreement.element;
-const hint = {
-	element: document.getElementById('hint'),
-	delay: hintDelay * 1000,
-	show() {
-		if (typeof this.timeoutId === 'number') {
-			this.cancel();
+
+	init() {
+		return new Promise((resolve) => {
+			console.log('%s Init', this.name);
+
+			resolve();
+		});
+	}
+}
+
+class UI {
+	constructor() {
+		this.introDelay = 6;
+		this.hintDelay = 1;
+		this.isAgree = false;
+		this.steps = {
+			agreement: {
+				element: document.getElementById('agreement'),
+				msgIn: 'Agreement shown.',
+				msgOut: 'Agreement accepted.',
+				msgNo: 'No agreement today.'
+			}
+		};
+		this.intro = document.getElementById('intro');
+		this.agreement = this.steps.agreement.element;
+		this.hint = {
+			element: document.getElementById('hint'),
+			delay: this.hintDelay * 1000
+		};
+		this.loader = document.getElementById('loader');
+	}
+
+	showIntro() {
+		const el = this.intro;
+		const dy = this.introDelay * 1000;
+
+		document.addEventListener('click', hintHandler, false);
+		document.addEventListener('keydown', hintHandler, false);
+
+		return new Promise((resolve, reject) => {
+			if (el) {
+				console.info("Intro begin.");
+
+				el.classList.replace('op_hide', 'op_show');
+				setTimeout(
+					() => {
+						el.classList.replace('op_show', 'op_hide');
+						el.addEventListener('transitionend', () => {
+							console.info("Intro fin.");
+
+							el.classList.add('di_none');
+							resolve("Intro fin.");
+						});
+					},
+					dy
+				);
+			} else {
+				reject('No intro available.');
+			}
+		})
+	}
+
+	showHint() {
+		if (typeof this.hint.timeoutId === 'number') {
+			this.cancelHint();
 		}
 
-		this.element.classList.remove('di_none');
+		this.hint.element.classList.remove('di_none');
 
-		this.timeoutId = setTimeout(
+		this.hint.timeoutId = setTimeout(
 			() => {
-				this.dismiss();
+				this.dismissHint();
 			},
-			this.delay
+			this.hint.delay
 		);
-	},
-	dismiss() {
-		this.element.classList.add('di_none');
-		this.timeoutId = undefined;
-	},
-	cancel() {
-		clearTimeout(this.timeoutId);
 	}
-};
-const loader = document.getElementById('loader');
+
+	dismissHint() {
+		this.hint.element.classList.add('di_none');
+		this.hint.timeoutId = undefined;
+	}
+
+	cancelHint() {
+		clearTimeout(this.hint.timeoutId);
+	}
+
+	showIdle() {
+		const el = document.getElementById('idle');
+
+		return new Promise((resolve, reject) => {
+			if (el) {
+				console.info('Idle.');
+
+				el.classList.replace('op_hide', 'op_show');
+				resolve('Idle.');
+			} else {
+				reject();
+			}
+		})
+	}
+
+	init() {
+		return new Promise((resolve) => {
+			console.log('Init');
+
+			resolve();
+		});
+	}
+}
 
 function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
 
+		// Set all steps to not receive pointer events
+		document.querySelectorAll('.step').forEach(element => {
+			console.log(element);
+			
+			element.style.pointerEvents = 'none';
+		});
+
 		resolve();
 	});
 }
@@ -66,12 +146,16 @@ function showIntro() {
 						console.info("Intro fin.");
 
 						el.classList.add('di_none');
+
 						resolve("Intro fin.");
 					});
 				},
 				dy
 			);
 		} else {
+			document.removeEventListener('click', hintHandler);
+			document.removeEventListener('keydown', hintHandler);
+
 			reject('No intro available.');
 		}
 	})
@@ -88,7 +172,10 @@ function showAgreement() {
 			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+
 			el.addEventListener('click', agreeHandler);
+			document.addEventListener('keydown', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
 		}
@@ -104,7 +191,9 @@ function showAgreement() {
 
 				el.removeEventListener('transitionend', endListener);
 				el.removeEventListener('click', agreeHandler);
+				document.removeEventListener('keydown', agreeHandler);
 				el.classList.add('di_none');
+
 				resolve(steps.agreement.msgOut);
 			});
 		}
@@ -114,13 +203,22 @@ function showAgreement() {
 function showIdle() {
 	const el = document.getElementById('idle');
 
+	document.addEventListener('mouseleave', idleStart, false);
+	document.addEventListener('mouseenter', idleStop, false);
+
 	return new Promise((resolve, reject) => {
 		if (el) {
 			console.info('Idle.');
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+			el.addEventListener('click', idleStart, false);
+
 			resolve('Idle.');
 		} else {
+			document.removeEventListener('mouseleave', idleStart);
+			document.removeEventListener('mouseenter', idleStop);
+
 			reject();
 		}
 	})
@@ -166,6 +264,7 @@ function loadCore() {
 
 					el.removeEventListener('transitionend', endListener);
 					el.classList.add('di_none');
+
 					resolve("Core loaded.");
 				});
 			}
@@ -173,60 +272,6 @@ function loadCore() {
 	});
 }
 
-init()
-	.then(loadCore)
-	.then(showIntro)
-	.catch(er => console.error(er))
-	.then(showAgreement)
-	.then(showIdle)
-	.catch(er => console.error(er))
-	.finally(() => {
-		console.debug('Init end.', isAgree);
-		// location = 'demo/examples/ui/new.html';
-	});
-
-// document.addEventListener('DOMContentLoaded', () => {
-// 	const barEl = document.getElementById('bar');
-// 	const bar = document.getElementById('progress');
-// 	const status = document.getElementById('status');
-// 	const spinnerEl = document.getElementById('spinner');
-// 	const spinner = document.getElementById('spinner').querySelector('span');
-
-// 	let progress = 0;
-
-// 	function updateProgressBar() {
-// 		let increment = randomIntFrom(1, 9);
-// 		progress += increment;
-
-// 		if (progress >= 100) progress = 100;
-// 		console.log(progress);
-
-// 		bar.style.width = progress + '%';
-// 		status.textContent = progress + '%';
-
-// 		if (progress < 100) {
-// 			setTimeout(updateProgressBar, 100);
-// 		} else {
-// 			bar.style.width = '100%';
-// 			spinner.style.animationPlayState = 'paused';
-// 			spinnerEl.style.color = 'white';
-// 			spinnerEl.style.backgroundColor = 'black';
-// 		}
-// 	}
-
-// 	updateProgressBar();
-
-// 	window.addEventListener('load', () => {
-// 		// progressEl.style.width = '100%';
-// 		// setTimeout(() => {
-// 		// 		progressBar.style.opacity = 0;
-// 		// 		setTimeout(() => {
-// 		// 				progressBar.style.display = 'none';
-// 		// 		}, 500);
-// 		// }, 2000);
-// 	});
-// });
-
 /**
  * Gibt eine Zahl zwischen <min> und <max> aus.
  * Die Werte <min> und <max> sind dabei mit eingeschlossen.
@@ -252,6 +297,14 @@ function hintHandler() {
 	hint.show();
 }
 
+function idleStart() {
+	idle.cycle();
+}
+
+function idleStop() {
+	idle.cancel();
+}
+
 /**
  * Blendet einen Schritt aus.
  * 
@@ -268,6 +321,7 @@ function stepHandler(e) {
 			console.info(msg);
 
 			el.removeEventListener('transitionend', endListener);
+			
 			resolve(msg);
 		});
 	})
diff --git a/source/code/_ui.js b/source/code/_ui.js
new file mode 100644
index 0000000..24e034a
--- /dev/null
+++ b/source/code/_ui.js
@@ -0,0 +1,113 @@
+// Creates a div element which is draggable
+class NewDiv {
+  constructor(x, y, width, height, backgroundColor) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.backgroundColor = backgroundColor;
+    this.element = null;
+  }
+
+  // Create the div element
+  createDiv() {
+    this.element = document.createElement('div');
+    this.element.style.position = 'absolute';
+    this.element.style.left = `${this.x}px`;
+    this.element.style.top = `${this.y}px`;
+    this.element.style.width = `${this.width}px`;
+    this.element.style.height = `${this.height}px`;
+    this.element.style.background = this.backgroundColor;
+    this.element.style.cursor = 'move';
+
+    // Add event listeners for dragging
+    let isDown = false;
+    let offset = [0, 0];
+
+    this
+      .element
+      .addEventListener('mousedown', (event) => {
+        if (event.button === 0) { // Left mouse button
+          isDown = true;
+          offset = [
+            this.element.offsetLeft - event.clientX,
+            this.element.offsetTop - event.clientY
+          ];
+        }
+      });
+
+    document.addEventListener('mouseup', () => {
+      isDown = false;
+    });
+
+    document.addEventListener('mousemove', (event) => {
+      if (isDown) {
+        const maxX = window.innerWidth - this.element.offsetWidth;
+        const maxY = window.innerHeight - this.element.offsetHeight;
+        let x = event.clientX + offset[0];
+        let y = event.clientY + offset[1];
+
+        // Boundary checks
+        if (x < 0)
+          x = 0;
+        if (y < 0)
+          y = 0;
+        if (x > maxX)
+          x = maxX;
+        if (y > maxY)
+          y = maxY;
+
+        this.element.style.left = `${x}px`;
+        this.element.style.top = `${y}px`;
+      }
+    });
+
+    // Save position and size
+    const saveData = () => {
+      const data = {
+        x: this.element.offsetLeft,
+        y: this.element.offsetTop,
+        width: this.element.offsetWidth,
+        height: this.element.offsetHeight
+      };
+      // Save data to local storage or a database
+      localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
+    };
+
+    // Load saved data
+    const loadData = () => {
+      const data = localStorage.getItem(`divData${this.element.id}`);
+      if (data) {
+        const parsedData = JSON.parse(data);
+        this.element.style.left = `${parsedData.x}px`;
+        this.element.style.top = `${parsedData.y}px`;
+        this.element.style.width = `${parsedData.width}px`;
+        this.element.style.height = `${parsedData.height}px`;
+      }
+    };
+
+    // Call the save function when the user stops dragging
+    document.addEventListener('mouseup', saveData);
+
+    // Load saved data on page load
+    loadData();
+  }
+
+  // Append the div to the space
+  appendToFrame(space) {
+    this.element.id = `newDiv${space.children.length}`;
+    space.appendChild(this.element);
+  }
+}
+
+// Function to generate a random color
+function getRandomColor() {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+
+  return color;
+}
diff --git a/source/code/app.js b/source/code/app.js
index 5ce57d0..8632638 100644
--- a/source/code/app.js
+++ b/source/code/app.js
@@ -1,22 +1,22 @@
 //NEW
 
-function Clock(id){
+function Clock(id) {
 	this.id = id;
-	
+
 	var that = this;
-	setInterval(function(){that.updateClock();}, 1000);
+	setInterval(function () { that.updateClock(); }, 1000);
 	this.updateClock();
 }
 
-Clock.prototype.updateClock = function(){
+Clock.prototype.updateClock = function () {
 	var date = new Date();
 	var clock = document.getElementById(this.id);
 	//console.log(this);
 	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
 };
-	
-Clock.prototype.formatDigits = function(val){
-	if(val<10) val = "0" + val;
+
+Clock.prototype.formatDigits = function (val) {
+	if (val < 10) val = "0" + val;
 
 	return val;
 }
@@ -28,7 +28,7 @@ var floor = Math.floor;
 function ongoing() {
 
 	var now = new Date();
-	
+
 	var w = Math.floor(now.getDay());
 	var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
 	var DNumb = Math.floor(now.getDate());
@@ -36,157 +36,114 @@ function ongoing() {
 	var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
 	var y = Math.floor(now.getYear());
 	if (y < 999) y += 1900;
-	
+
 	var ms = Math.floor(now.getMilliseconds());
 	var s = Math.floor(now.getSeconds());
 	var m = Math.floor(now.getMinutes() + s / 60);
 	var h = Math.floor(now.getHours() + m / 60);
 
 	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
-	j2000.setUTCFullYear(2000,0,1);
-	j2000.setUTCHours(0,0,0,0);
+	j2000.setUTCFullYear(2000, 0, 1);
+	j2000.setUTCHours(0, 0, 0, 0);
 
 	var utc = new Date();
-	utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-	utc.setUTCHours(h,m,s,ms);
+	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+	utc.setUTCHours(h, m, s, ms);
 
 	var utc0 = new Date();
-	utc0.setUTCFullYear(y,MNumb,DNumb);
-	utc0.setUTCHours(0,0,0,0);
+	utc0.setUTCFullYear(y, MNumb, DNumb);
+	utc0.setUTCHours(0, 0, 0, 0);
+
+	var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+	var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
 
-	var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
-	var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
-	
 	var N = jd - 2451545.0;
 	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
 	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
-	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);
+	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
 	var e = 23.439 - 0.0000004 * N;
-	var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el));
-	
+	var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
+
 	var T = (jdUTC0 - 2451545.0) / 36525;
-	var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600;
-	
+	var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
+
 	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
 	var hWGMT = stGMT2 * 15;
 	var hW = hWGMT + 11.9566185772;
-	
-	var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden
+
+	var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
 	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
 	var stH = Math.floor(st24);
 	var stM = Math.floor((st24 % 1) * 60);
 	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
-	
+
 	var travelWidth = document.body.clientWidth;
 	var travelHeight = document.body.clientHeight;
 	var sunPosX = 0;
 	var sunPosY = 0;
 	var moonPosX = 0;
 	var moonPosY = 0;
-	
+
 	var sun = $("#sun").css({
 		"left": (s / 60) * travelWidth,
 		"top": (m / 60) * travelHeight
 	});
-	
+
 	$("#day").text(D[w]);
 	$("#dayNumb").text(DNumb);
 	$("#month").text(M[MNumb]);
 	$("#year").text(y);
 	$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
-	
+
 	$("#julian").text(jd.toFixed(6));
 	//$("#star").text(stH + ':' + stM + ':' + stS);
 	$("#star").text(stH + ':' + stM);
 	$("#star1").text(stGMT);
 	$("#star2").text(stGMT2);
-	
+
 }
 
-function zeroFill( number, width ){
+function zeroFill(number, width) {
 	width -= number.toString().length;
-	if ( width > 0 ){
-		return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
+	if (width > 0) {
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
 	}
 	return number + ""; // always return a string
 }
 
-// create emails
-function composeMail(tag, name, prov, suffix, text, topic) {
-	var trigger = tag.indexOf(".");
-	var mailString = name + '@' + prov + '.' + suffix;
-	var textString = mailString.replace(/@/g, "(at)");
-	var descString = "Nachricht an " + mailString;
-	if (trigger == -1) {
-		if (!text) {
-			text = mailString;
-		} else if (text == "at") {
-			text = textString;
-		} else if (text == "to") {
-			text = descString;
-		}
-		if (!topic) {
-			topic = "";
-		} else {
-			topic = "?subject=" + topic;
-		}
-		var old = $('#'+tag).html();
-		$('#'+tag).html(old + text);
-		$('#'+tag).attr("href", "mailto:" + mailString + topic);
-	} else {
-		$(tag).each(function() {
-			if (!text) {
-				text = mailString;
-			} else if (text == "at") {
-				text = textString;
-			} else if (text == "to") {
-				text = descString;
-			}
-			if (!topic) {
-				topic = "";
-			} else {
-				topic = "?subject=" + topic;
-			}
-			var old = $(this).html();
-			$(this).html(old + text);
-			$(this).attr("href", "mailto:" + mailString + topic);
-		});
-	}
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;
 	var g = G;
 	var w = W;
-	var p = ( w / g ) * 100;
-	var newW = s * ( p /100 );
+	var p = (w / g) * 100;
+	var newW = s * (p / 100);
 
 	return newW;
 }
 //String Element erweitern
-String.prototype.transform = function() { 
-	return parseFloat(this.replace(',', '.')); 
+String.prototype.transform = function () {
+	return parseFloat(this.replace(',', '.'));
 }
 //Array Element erweitern
-Array.prototype.arrayAdd = function() {
+Array.prototype.arrayAdd = function () {
 	return eval(this.join("+"));
 }
 //Speicherplatz in Prozent berechnen
 function percentage(total, gigs, round) {
-		var totalSpace = total;
-		var singleSpace = gigs;
-		var z = round;
-		var p = singleSpace / ( totalSpace / 100 );
-		
-		return p;
+	var totalSpace = total;
+	var singleSpace = gigs;
+	var z = round;
+	var p = singleSpace / (totalSpace / 100);
+
+	return p;
 }
 //Speicherplatz in GB berechnen
 function gigabytes(percent, total, round) {
-		var occupiedPercent = percent;
-		var singleSpace = total;
-		var z = round;
-		var g = (singleSpace / 100 ) * occupiedPercent;
-		
-		return g;
+	var occupiedPercent = percent;
+	var singleSpace = total;
+	var z = round;
+	var g = (singleSpace / 100) * occupiedPercent;
+
+	return g;
 }
diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js
index 602ca13..cdca2f2 100644
--- a/source/code/hippie/functions.js
+++ b/source/code/hippie/functions.js
@@ -1,149 +1,188 @@
 // This is called everytime
 function setup() {
-  'use strict';
+	'use strict';
 
-  console.group('Document information');
-  console.info('\n', hippie.brand, '\n\n');
-  console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
-  console.groupEnd();
-  if (debugOn) {
-    console.group('Debug information');
-    console.dir(hippie);
-    console.groupEnd();
-  }
+	console.group('Document information');
+	console.info('\n', hippie.brand, '\n\n');
+	console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
+	console.groupEnd();
+	if (debugOn) {
+		console.group('Debug information');
+		console.dir(hippie);
+		console.groupEnd();
+	}
 
-  // WANNABE MODULE Mouse over effect
-  // With CSS only
-  if ($('#js_mob').length && viewHover) {
-    $('#js_mob').addClass('mouse_over');
-  }
-  // if (viewHover) {
-  // 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
-  // }
-  // With JS
+	// WANNABE MODULE Mouse over effect
+	// With CSS only
+	if ($('#js_mob').length && viewHover) {
+		$('#js_mob').addClass('mouse_over');
+	}
+	// if (viewHover) {
+	// 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
+	// }
+	// With JS
 }
 
 // MODULE Scroll navigation
 // Using constructor function
 function HippieScroll($tp, $dn) {
-  'use strict';
+	'use strict';
 
-  // this.$tp = $tp;
-  // Define initial situation
-  let initLeft = false;
-  const initY = hippie.screen.vh;
+	// this.$tp = $tp;
+	// Define initial situation
+	let initLeft = false;
+	const initY = hippie.screen.vh;
 
-  $tp.addClass('di_none');
+	$tp.addClass('di_none');
 
-  // Check scroll position and toggle element
-  this.check = function () {
-    hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
-    if (hippie.screen.y > initY) {
-      if (!initLeft) {
-        $tp.removeClass('di_none');
-        console.info('Initial viewport left');
-      }
-      initLeft = true;
-    } else {
-      if (initLeft) {
-        $tp.addClass('di_none');
-        console.info('Initial viewport entered');
-      }
-      initLeft = false;
-    }
-  };
+	// Check scroll position and toggle element
+	this.check = function () {
+		hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
+		if (hippie.screen.y > initY) {
+			if (!initLeft) {
+				$tp.removeClass('di_none');
+				console.info('Initial viewport left');
+			}
+			initLeft = true;
+		} else {
+			if (initLeft) {
+				$tp.addClass('di_none');
+				console.info('Initial viewport entered');
+			}
+			initLeft = false;
+		}
+	};
 
-  // Add events to navigation elements
-  $tp.click(function (event) {
-    event.preventDefault();
-    $('html, body').stop().animate({
-      scrollTop: 0
-    }, basicEase);
-    // console.log('Scrolled to top');
-  });
-  $dn.click(function (event) {
-    event.preventDefault();
-    var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
-    $('html').scrollTop(pos);
-    // document.documentElement.scrollTop = pos;
-    console.info('Scrolled down to', pos);
-  });
+	// Add events to navigation elements
+	$tp.click(function (event) {
+		event.preventDefault();
+		$('html, body').stop().animate({
+			scrollTop: 0
+		}, basicEase);
+		// console.log('Scrolled to top');
+	});
+	$dn.click(function (event) {
+		event.preventDefault();
+		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
+		$('html').scrollTop(pos);
+		// document.documentElement.scrollTop = pos;
+		console.info('Scrolled down to', pos);
+	});
 }
 
 // MODULE Meta elements
 function HippieMeta($ma, $pp) {
-  'use strict';
+	'use strict';
 
-  let metaOn = false;
+	let metaOn = false;
 
-  $ma.click(function () {
-    var $wrap, $pop;
+	$ma.click(function () {
+		var $wrap, $pop;
 
-    // if (metaOn !== true) {
-    if (!metaOn) {
-      metaOn = true;
+		// if (metaOn !== true) {
+		if (!metaOn) {
+			metaOn = true;
 
-      $pp.each(function () {
-        // if ($(this).css('position') === 'static') {
-        // 	$(this).addClass('js_changed_pos');
-        // 	$(this).css('position', 'relative');
-        // }
-        // $pop = $(this).next('.exp_pop').detach();
-        // $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
-        // $wrap.after($pop);
+			$pp.each(function () {
+				// if ($(this).css('position') === 'static') {
+				// 	$(this).addClass('js_changed_pos');
+				// 	$(this).css('position', 'relative');
+				// }
+				// $pop = $(this).next('.exp_pop').detach();
+				// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
+				// $wrap.after($pop);
 
-        $('<div></div>').addClass('exp_overlay').css({
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0
-        }).appendTo($(this).addClass('exp_wrap'));
+				$('<div></div>').addClass('exp_overlay').css({
+					position: 'absolute',
+					width: '100%',
+					height: '100%',
+					top: 0,
+					left: 0
+				}).appendTo($(this).addClass('exp_wrap'));
 
-        // Displays explanation popup following the mouse
-        $(this).on({
-          mouseenter: function () {
-            // if ($(this).attr('emmet')) {
-            //
-            // }
-            $(this).next('.exp_pop').show();
-          },
-          mouseleave: function () {
-            $(this).next('.exp_pop').hide();
-          },
-          mousemove: function (event) {
-            $(this).next('.exp_pop').css({
-              'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
-              'left': event.pageX + 8
-              // 'left': event.pageX - $(this).offset().left + 8
-            });
-          }
-        });
-      });
+				// Displays explanation popup following the mouse
+				$(this).on({
+					mouseenter: function () {
+						// if ($(this).attr('emmet')) {
+						//
+						// }
+						$(this).next('.exp_pop').show();
+					},
+					mouseleave: function () {
+						$(this).next('.exp_pop').hide();
+					},
+					mousemove: function (event) {
+						$(this).next('.exp_pop').css({
+							'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
+							'left': event.pageX + 8
+							// 'left': event.pageX - $(this).offset().left + 8
+						});
+					}
+				});
+			});
 
-    } else {
-      $pp.each(function () {
-        $(this).off('mouseenter mouseleave mousemove');
+		} else {
+			$pp.each(function () {
+				$(this).off('mouseenter mouseleave mousemove');
 
-        $(this).removeClass('exp_wrap').find('.exp_overlay').remove();
-        // $wrap = $(this).parent('.exp_wrap');
-        // $pop = $wrap.next('.exp_pop').detach();
-        // $wrap.find('.exp_marker_pop').remove();
-        // $(this).unwrap('.exp_wrap');
-        // $(this).after($pop);
-        // if ($(this).hasClass('js_changed_pos')) {
-        // 	$(this).css('position', '');
-        // 	if ($(this).attr('style') === '') {
-        // 		$(this).removeAttr('style');
-        // 	}
-        // 	$(this).removeClass('js_changed_pos');
-        // }
-      });
+				$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
+				// $wrap = $(this).parent('.exp_wrap');
+				// $pop = $wrap.next('.exp_pop').detach();
+				// $wrap.find('.exp_marker_pop').remove();
+				// $(this).unwrap('.exp_wrap');
+				// $(this).after($pop);
+				// if ($(this).hasClass('js_changed_pos')) {
+				// 	$(this).css('position', '');
+				// 	if ($(this).attr('style') === '') {
+				// 		$(this).removeAttr('style');
+				// 	}
+				// 	$(this).removeClass('js_changed_pos');
+				// }
+			});
 
-      metaOn = false;
-    }
-    console.log('Explanation mode', metaOn);
-  });
+			metaOn = false;
+		}
+		console.log('Explanation mode', metaOn);
+	});
+}
+
+// Sets the href attribute to mailto: with given information
+function composeMail(tag, name, prov, suffix, text, topic) {
+	let trigger = tag.indexOf(".");
+	let mailString = name + '@' + prov + '.' + suffix;
+	let textString = mailString.replace(/@/g, "(at)");
+	let descString = "Nachricht an " + mailString;
+
+	if (!text) {
+		text = mailString;
+	} else if (text === "at") {
+		text = textString;
+	} else if (text === "to") {
+		text = descString;
+	}
+
+	if (topic) {
+		topic = "?subject=" + topic;
+	} else {
+		topic = "";
+	}
+
+	if (trigger === -1) {
+		const el = document.getElementById(tag);
+		const elContent = el.innerHTML;
+
+		el.innerHTML = elContent + text;
+		el.setAttribute("href", "mailto:" + mailString + topic);
+	} else {
+		const els = document.getElementsByClassName(tag.slice(1));
+
+		for (let el of els) {
+			const elContent = el.innerHTML;
+
+			el.innerHTML = elContent + text;
+			el.setAttribute("href", "mailto:" + mailString + topic);
+		};
+	}
 }
 
 // get document coordinates of the element
diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js
index ef61ad7..0b05906 100644
--- a/source/code/hippie/global.js
+++ b/source/code/hippie/global.js
@@ -1,3 +1,3 @@
 // Setup
 // -----------------------------------------------------------------------------
-// setup();
+setup();
diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js
index bf6f4bc..e1f77e7 100644
--- a/source/code/hippie/variables.js
+++ b/source/code/hippie/variables.js
@@ -1,20 +1,30 @@
-var hippie = {
-  brand: "|-| | |^ |^ | [- ",
-  screen: {
-    w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
-    vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
-    dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
-    y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
-    // hippie.screen.y: document.documentElement.scrollTop
-  },
-  body: {
-    w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
-    h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
-  }
+let hippie = {
+	brand: "|-| | |^ |^ | [- ",
+	screen: {
+		w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
+		vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
+		dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
+		y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
+		// hippie.screen.y: document.documentElement.scrollTop
+	},
+	body: {
+		w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
+		h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
+	}
 };
+let viewHover = true;
+let basicEase = 600;
 
-var viewHover = true;
-var basicEase = 600;
-
-var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
-var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
+const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
+const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
+const flagColors = [
+	'fad803',
+	'f2af13',
+	'd30a51',
+	'8e1f68',
+	'273f8b',
+	'3c579a',
+	'b7e0f0',
+	'6bc7d9',
+	'52bed1'
+]
\ No newline at end of file
diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 566d527..d8cf064 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -10,889 +10,860 @@ tags:
 
 {% block title %}Grundlagen{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="demo__intro">
+		Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
+		<article>
+			<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 #}
+			<section>
+				<p>Ein 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>
+			<hgroup>
+				<h6>Überschrift 6</h6>
+				<p>Überschriften können mit dem Element <code>&lt;hgroup&gt;</code> mit Absätzen gruppiert werden um beispielsweise Untertitel abzubilden.</p>
+			</hgroup>
+		</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. Dies ist allerdings ein Element der Textebene und keine Gruppierung.</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"/>
+			<div class="exp_pop">
+				<code class="code_solo">hr.hr_dotted</code>
+			</div>
+			<!--hr.hr_dotted-->
+			<hr class="space_even_half js_pop"/>
+			<div class="exp_pop">
+				<code class="code_solo">hr.space_even_half</code>
+			</div>
+			<hr class="hr_dotted space_even_fourth js_pop"/>
+			<div class="exp_pop">
+				<code class="code_solo">hr.hr_dotted.space_even_fourth</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.<br>Auch das zeigen 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>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>
+			<h2>Listen</h2>
+			<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, welche mit
+				<code>&lt;figcaption&gt;</code>
+				ausgezeichnet wird.</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">
+					<desc>Flag</desc>
+					<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>
+			<hr class="hr_hidden">
+			<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="div_info js_pop">
+				<p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p>
+			</div>
+			<div class="exp_pop">
+				<code class="code_solo">div.div_info>p</code>
+			</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 <a href="">Verweise</a>
+				<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_internal 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_external" href="http://de.wikipedia.org">Externe Verweise</a>
+				verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis
+				<b>Alles</b>
+				auslösen. Anweisungen werden im
+				<a href="https://tools.ietf.org/html/rfc1738">URL-Standard</a>
+				übergeben.</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 class="a_internal" href="#">Farbige</a>
+				oder
+				<a class="a_line" href="#">unterstrichene Varianten</a>
+				sind einfache Beispiele.</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. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
+			<nav>
+				<p>
+					<a class="a_button_text" href="#textlevel">↥</a>
+					(Zum Anfang des Abschnitts springen)
+					<a class="a_button_text" href="#">⇫</a>
+					(Zum Anfang der Seite springen)</p>
+			</nav>
+			<nav class="nav_center_old">
+				<ul>
+					<li>
+						<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
+					</li>
+					<li>
+						<a href="" class="a_button a_internal">Hilfe</a>
+					</li>
+					<li>
+						<a href="" class="a_button">⌨</a>
+					</li>
+					<li>
+						<a href="" class="a_button">⋯</a>
+					</li>
+				</ul>
+			</nav>
+			<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
+				<u>flasch</u>
+				(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>Ist ein Text nicht mehr korrekt oder relevant kann er mit
+				<code>&lt;s&gt;</code>
+				markiert werden:<br>
+				<s>Die Erde ist eine Scheibe.</s>
+			</p>
+			<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit
+				<code>&lt;cite&gt;</code>
+				ausgezeichnet werden.
+				<cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
+			<p>Um ein Zitat direkt im Text zu verwenden benutzt man das
+				<code>&lt;q&gt;</code>
+				Element. Es platziert Anführungszeichen um die Aussage:</p>
+			<p>Sie sagte:
+				<q>Du wolltest staubsaugen!</q><br>Er sagte:
+				<q>Mach' ich morgen.</q>
+			</p>
+			<p>Mit dem
+				<code>&lt;dfn&gt;</code>
+				Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen
+				<code>&lt;abbr&gt;</code>
+				gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut
+				<code>title</code>
+				stehen. Dies ist ein globales Attribut das erklärende Informationen zu dem Element enthält. Diese wird typischerweise beim darauf Zeigen eingeblendet.</p>
+			<p>
+				<dfn>
+					<abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr>
+				</dfn>
+				is an recursive acronym for
+				<dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
+			<p>Die besondere Auszeichnung
+				<code>&lt;ruby&gt;</code>
+				<q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q>
+				Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
+			<dl>
+				<dt>
+					<code>&lt;rb&gt;</code>
+				</dt>
+				<dd>Basis Textkomponente</dd>
+				<dt>
+					<code>&lt;rt&gt;</code>
+				</dt>
+				<dd>Annotation</dd>
+				<dt>
+					<code>&lt;rtc&gt;</code>
+				</dt>
+				<dd>Einzelne Komponente einer Annotation</dd>
+				<dt>
+					<code>&lt;rp&gt;</code>
+				</dt>
+				<dd>Alternative bei fehlender Unterstützung</dd>
+			</dl>
+			<hr class="hr_dotted space_even_half">
+			<div class="txt_center">
+				<ruby class="space_right_small">
+					<rb>Basis</rb>
+					<rt>Auszeichnung</rt>
+				</ruby>
+				<ruby class="space_right_small">
+					<rb>今日</rb>
+					<rt>きょう</rt>
+				</ruby>
+				<ruby>
+					♥<rp>:
+					</rp>
+					<rt>Herz</rt>
+					<rp>,
+					</rp>
+					<rtc>
+						<rt lang="fr">Cœur</rt>
+					</rtc>
+					<rp>.</rp>
+					☘<rp>:
+					</rp>
+					<rt>Kleeblatt</rt>
+					<rp>,
+					</rp>
+					<rtc>
+						<rt lang="fr">Trèfle</rt>
+					</rtc>
+					<rp>.</rp>
+					✶<rp>:
+					</rp>
+					<rt>Stern</rt>
+					<rp>,
+					</rp>
+					<rtc>
+						<rt lang="fr">Étoile</rt>
+					</rtc>
+					<rp>.</rp>
+				</ruby>
+			</div>
+			<hr class="hr_dotted space_even_half">
+			<p>Wikipedia erklärt dies ausführlicher unter
+				<a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
+			<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente
+				<code>&lt;data&gt;</code>
+				und
+				<code>&lt;time&gt;</code>
+				enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
+			<dl>
+				<dt>
+					<data value="0">0</data>
+					≠
+					<data value="">NULL</data>
+				</dt>
+				<dd>
+					<code>&lt;data&gt;0&lt;/data&gt; ≠ &lt;data&gt;NULL&lt;/data&gt;</code>
+				</dd>
+				<dt>Der Wert
+					<data value="NULL">NULL</data>
+					mit Attribut</dt>
+				<dd>
+					<code>&lt;data value="NULL"&gt;NULL&lt;/data&gt;</code>
+				</dd>
+				<dt>
+					<time>2018-10-08</time>
+				</dt>
+				<dd>
+					<code>&lt;time&gt;2018-10-08&lt;/time&gt;</code>
+				</dd>
+				<dt>Die Zeitangabe
+					<i>
+						<time datetime="2018-10-08">Gestern</time>
+					</i>
+					mit Attribut</dt>
+				<dd>
+					<code>&lt;time datetime="2018-10-08"&gt;Gestern&lt;/time&gt;</code>
+				</dd>
+			</dl>
+			<p>Die Auszeichnung
+				<code>&lt;code&gt;</code>
+				wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.</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>
+				<code>var def = "Definition einer Variablen";</code>
+			</p>
+			<p>In diesem Beispiel wird die Variable
+				<var>def</var>
+				definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element
+				<code>&lt;var&gt;</code>
+				ausgezeichnet werden.</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 zum Beispiel
+				<q>Drücken Sie gleichzeitig
+					<kbd>Strg</kbd>
+					und
+					<kbd>A</kbd>
+				</q>, gekennzeichnet.</p>
+			<p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente
+				<code>&lt;sup&gt;</code>
+				und
+				<code>&lt;sub&gt;</code>
+				repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:</p>
+			<p>Beispielsweise die Formel
+				<var>E</var>=<var>m</var>
+				<var>c</var>
+				<sup>2</sup>
+				oder das Element H<sub>2</sub>O</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. Die Richtung wird dann mit dem Attribut
+				<code>dir</code>
+				angegeben.</p>
+			<ul>
+				<li>
+					<bdo dir="rtl">كائن بشري</bdo>
+				</li>
+				<li>
+					<bdo dir="rtl">إنسان آلي</bdo>
+				</li>
+			</ul>
+			<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das
+				<code>&lt;span&gt;</code>
+				Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen
+				<code>id</code>
+				oder
+				<code>class</code>
+				werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache
+				<abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+			<p>Mit der Einführung von Absätzen wurde auch schon das
+				<code>&lt;br&gt;</code>
+				Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.</p>
+			<p>Eine besondere Form des Zeilenumbruchs kann mit
+				<code>&lt;wbr&gt;</code>
+				eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.</p>
+			<p>Und der Löwe brüllte "RRRR<wbr>rrrr<wbr>oooooooo<wbr>aaaa<wbr>AAAAAAAA<wbr>HHHH<wbr>hhhh<wbr>rrrrrrrrr"!
+			</p>
+			<p>Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen</p>
+			<h2>Änderungen</h2>
+			<p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
+			<aside>
+				<ins>Dies ist auch wichtig.</ins>
+			</aside>
+			<p>Der Inhalt wird dann mit
+				<code>&lt;ins&gt;</code>
+				ausgezeichnet. Wird Text entfernt, kommt 
+				<code>&lt;del&gt;</code>
+				zum Einsatz.</p>
+			<h6>Zu Tun</h6>
+			<ul>
+				<li>Fahrrad reparieren</li>
+				<li>
+					<del>Staubsaugen</del>
+				</li>
+				<li>Tisch bauen</li>
+			</ul>
+		</article>
+		<article>
+			<h1 id="embedded">Eingebundene Inhalte</h1>
+			{# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #}
+			<img src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=" width="128" height="80" alt="Fahne von Interaktionsweise">
+			<p>Dies ist ein Bild. Es wird mit dem Element
+				<code>&lt;img&gt;</code>
+				eingebunden. Solch ein Bild hat üblicherweise die Attribute
+				<code>width</code>
+				und
+				<code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut
+				<code>alt</code>
+				für eine alternative Beschreibung in Textform verwendet werden.</p>
+			<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut
+				<code>src</code>
+				angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente
+				<code>&lt;source&gt;</code>
+				und
+				<code>&lt;picture&gt;</code>
+				in Kombination verwendet werden.</p>
+			<picture>
+				<source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
+				<img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
+			</picture>
+		</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 (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.</p>
+			<table class="width_full js_pop">
+				<tr>
+					<td>Eine</td>
+					<td>einfache</td>
+				</tr>
+				<tr>
+					<td colspan="2">Tabelle</td>
+				</tr>
+			</table>
+			<div class="exp_pop">
+				<code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code>
+			</div>
+			<div class="overflow">
+				<table class="float_space_left js_pop">
+					<tr>
+						<td>Eine</td>
+						<td>freie (nicht fixierte)</td>
+					</tr>
+					<tr>
+						<td colspan="2">Tabelle</td>
+					</tr>
+				</table>
+				<div class="exp_pop">
+					<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
+				</div>
+				<table class="table_blank float_space_left js_pop">
+					<tr>
+						<td>Mit</td>
+						<td>ohne</td>
+					</tr>
+					<tr>
+						<td colspan="2">Linien</td>
+					</tr>
+				</table>
+				<div class="exp_pop">
+					<code class="code_solo">table.table_blank>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>
+				<tbody>
+					<tr>
+						<td>Tabelle</td>
+						<td colspan="2"></td>
+					</tr>
+					<tr>
+						<td>mit</td>
+						<td>Titel</td>
+						<td></td>
+					</tr>
+					<tr>
+						<td rowspan="2"></td>
+						<td>Kopf-</td>
+						<td>und</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Fußzeile</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th scope="row">Fußzeile</th>
+						<td>A</td>
+						<td>B</td>
+					</tr>
+				</tfoot>
+			</table>
+			<div class="exp_pop">
+				<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
+			</div>
+			<p>Viele weitere Formate sind möglich.</p>
+		</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.<br>Üblicherweise stehen alle Bedienelemente 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"/><input class="io_input" value="Undefiniert mit Stil"/></p>
+			<p>Ein spezieller Typ des Eingabefeldes hat die Funktion 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><input class="io_button" type="button" value="Input Button">
+				<button class="io_button">Button</button>
+			</p>
+			<p>Interaktive Elemente können durch das Attribut
+				<code>readonly</code>
+				nur lesbar gemacht werden oder mittels
+				<code>disabled</code>
+				gänzlich deaktiviert werden.</p>
+			{# // TODO: Abstände, besonders margin generell überarbeiten #}
+			<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button disabled="disabled">Deaktivierte Schaltfläche</button>
+			</p>
+			<p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button class="io_button" disabled="disabled">Deaktivierte Schaltfläche</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>
+			<p>
+				<label>Beschriftung:<input type="text"></label>
+			</p>
+			<div class="overflow">
+				<div class="float_left">
+					<table class="table_fix table_blank">
+						<tr>
+							<td>
+								<label for="demo__raw_a">Alpha:</label>
+							</td>
+							<td><input type="text" id="demo__raw_a"></td>
+						</tr>
+						<tr>
+							<td>
+								<label for="demo__raw_b">Beta:</label>
+							</td>
+							<td><input type="text" id="demo__raw_b"></td>
+						</tr>
+					</table>
+				</div>
+				<table class="float_right">
+					<tr>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
+						<td class="demo__td_pr">
+							<label for="demo__io_a">x</label>
+						</td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
+						<td class="demo__td_pr">
+							<label for="demo__io_a">Breite</label>
+						</td>
+					</tr>
+					<tr>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
+						<td class="demo__td_pr">
+							<label for="demo__io_b">y</label>
+						</td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
+						<td class="demo__td_pr">
+							<label for="demo__io_b">Tiefe</label>
+						</td>
+					</tr>
+					<tr>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
+						<td class="demo__td_pr">
+							<label for="demo__io_c">z</label>
+						</td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
+						<td class="demo__td_pr">
+							<label for="demo__io_c">Höhe</label>
+						</td>
+					</tr>
+				</table>
+			</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>
+				<div class="grid grid_column_2">
+					<label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly="readonly" id="demo__input">
+					<label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly="readonly" id="demo__output">
+				</div>
+			</fieldset>
+			<p>Sie können mittels
+				<code>&lt;legend&gt;</code>
+				auch eine eigene Beschriftung erhalten.</p>
+			<fieldset>
+				<legend>Einfache Eingabeelemente</legend>
+				<div class="grid grid_column_2">
+					<label>Schaltflächen:</label>
+					<div>
+						<button>Senden</button><input type="reset" value="Abbrechen"></div>
+					<label>Zeicheneingaben:</label>
+					<div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
+					<label>Einzelauswahl:</label>
+					<div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio" name="direction" value="down"/></div>
+					<label>Mehrfachauswahl:</label>
+					<div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox" name="speed" value="fast"/></div>
+					<label>Auswahllisten:</label>
+					<div>
+						<select class="txt_top">
+							<option value="A" selected="selected">Option A</option>
+							<option value="B">Option B</option>
+						</select>
+						<select class="txt_top" size="3">
+							<option value="red" selected="selected">Rot</option>
+							<option value="green">Grün</option>
+							<option value="blue">Blau</option>
+						</select>
+					</div>
+					<label>Textfeld:</label>
+					<textarea rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
+				</div>
+			</fieldset>
+			<fieldset>
+				<legend>Einfache Eingabeelemente mit Stil</legend>
+				<div class="grid grid_column_2">
+					<label>Schaltflächen:</label>
+					<div>
+						<button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
+					<label>Zeicheneingaben:</label>
+					<div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
+					<label>Einzelauswahl:</label>
+					<div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
+					<label>Mehrfachauswahl:</label>
+					<div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input class="io_check" type="checkbox" name="speed" value="fast"/></div>
+					<label>Auswahllisten:</label>
+					<div>
+						<select class="io_select txt_top">
+							<option value="A" selected="selected">Option A</option>
+							<option value="B">Option B</option>
+						</select>
+						<select class="io_select txt_top" size="3">
+							<option value="red" selected="selected">Rot</option>
+							<option value="green">Grün</option>
+							<option value="blue">Blau</option>
+						</select>
+					</div>
+					<label>Textfeld:</label>
+					<textarea class="io_textarea" rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
+				</div>
+			</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.</p>
+				<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
+				<div class="grid grid_column_2">
+					<label class="">Farbauswahl<br>
+						<code>&lt;input[type="color"]&gt;</code>
+					</label>
+					<div><input class="" type="color"></div>
+					<label class="">Bereichsauswahl<br>
+						<code>&lt;input[type="range"]&gt;</code>
+					</label>
+					<div><input class="" type="range"></div>
+					<label class="">Datum<br>
+						<code>&lt;input[type="date"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="date"></div>
+					<label class="">Uhrzeit<br>
+						<code>&lt;input[type="time"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="time"></div>
+					<label class="">Datum und Zeit<br>
+						<code>&lt;input[type="datetime-local"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="datetime-local"></div>
+					<label class="">Kalendermonat<br>
+						<code>&lt;input[type="month"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="month"></div>
+					<label class="">Kalenderwoche<br>
+						<code>&lt;input[type="week"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="week"></div>
+					<label class="">@dresse<br>
+						<code>&lt;input[type="email"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="email" placeholder="@"></div>
+					<label class="">Passwort<br>
+						<code>&lt;input[type="password"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="password" value="admin"></div>
+					<label class="">Telefonnummer<br>
+						<code>&lt;input[type="tel"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="tel" value="0190123456"></div>
+					<label class="">URL<br>
+						<code>&lt;input[type="url"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="url" placeholder="url://"></div>
+					<label class="">Suche<br>
+						<code>&lt;input[type="search"]&gt;</code>
+					</label>
+					<div><input class="io_input" type="search"></div>
+					<label class="">Datei<br>
+						<code>&lt;input[type="file"]&gt;</code>
+					</label>
+					<div><input class="" type="file"></div>
+					<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
+				</div>
+			</fieldset>
 
-  <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>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
-    <article>
-      <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 #}
-      <section>
-        <p>Ein 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>
-      <hgroup>
-        <h6>Überschrift 6</h6>
-        <p>Überschriften können mit dem Element <code>&lt;hgroup&gt;</code> mit Absätzen gruppiert werden um beispielsweise Untertitel abzubilden.</p>
-      </hgroup>
-    </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. Dies ist allerdings ein Element der Textebene und keine Gruppierung.</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"/>
-      <div class="exp_pop">
-        <code class="code_solo">hr.hr_dotted</code>
-      </div>
-      <!--hr.hr_dotted-->
-      <hr class="space_even_half js_pop"/>
-      <div class="exp_pop">
-        <code class="code_solo">hr.space_even_half</code>
-      </div>
-      <hr class="hr_dotted space_even_fourth js_pop"/>
-      <div class="exp_pop">
-        <code class="code_solo">hr.hr_dotted.space_even_fourth</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.<br>Auch das zeigen 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>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>
-      <h2>Listen</h2>
-      <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, welche mit
-        <code>&lt;figcaption&gt;</code>
-        ausgezeichnet wird.</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">
-          <desc>Flag</desc>
-          <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>
-      <hr class="hr_hidden">
-      <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="div_info js_pop">
-        <p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p>
-      </div>
-      <div class="exp_pop">
-        <code class="code_solo">div.div_info>p</code>
-      </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 <a href="">Verweise</a>
-        <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_internal 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_external" href="http://de.wikipedia.org">Externe Verweise</a>
-        verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis
-        <b>Alles</b>
-        auslösen. Anweisungen werden im
-        <a href="https://tools.ietf.org/html/rfc1738">URL-Standard</a>
-        übergeben.</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 class="a_internal" href="#">Farbige</a>
-        oder
-        <a class="a_line" href="#">unterstrichene Varianten</a>
-        sind einfache Beispiele.</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. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
-      <nav>
-        <p>
-          <a class="a_button_text" href="#textlevel">↥</a>
-          (Zum Anfang des Abschnitts springen)
-          <a class="a_button_text" href="#begin">⇫</a>
-          (Zum Anfang der Seite springen)</p>
-      </nav>
-      <nav class="nav_center_old">
-        <ul>
-          <li>
-            <a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
-          </li>
-          <li>
-            <a href="" class="a_button a_internal">Hilfe</a>
-          </li>
-          <li>
-            <a href="" class="a_button">⌨</a>
-          </li>
-          <li>
-            <a href="" class="a_button">⋯</a>
-          </li>
-        </ul>
-      </nav>
-      <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
-        <u>flasch</u>
-        (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>Ist ein Text nicht mehr korrekt oder relevant kann er mit
-        <code>&lt;s&gt;</code>
-        markiert werden:<br>
-        <s>Die Erde ist eine Scheibe.</s>
-      </p>
-      <p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit
-        <code>&lt;cite&gt;</code>
-        ausgezeichnet werden.
-        <cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
-      <p>Um ein Zitat direkt im Text zu verwenden benutzt man das
-        <code>&lt;q&gt;</code>
-        Element. Es platziert Anführungszeichen um die Aussage:</p>
-      <p>Sie sagte:
-        <q>Du wolltest staubsaugen!</q><br>Er sagte:
-        <q>Mach' ich morgen.</q>
-      </p>
-      <p>Mit dem
-        <code>&lt;dfn&gt;</code>
-        Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen
-        <code>&lt;abbr&gt;</code>
-        gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut
-        <code>title</code>
-        stehen. Dies ist ein globales Attribut das erklärende Informationen zu dem Element enthält. Diese wird typischerweise beim darauf Zeigen eingeblendet.</p>
-      <p>
-        <dfn>
-          <abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr>
-        </dfn>
-        is an recursive acronym for
-        <dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
-      <p>Die besondere Auszeichnung
-        <code>&lt;ruby&gt;</code>
-        <q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q>
-        Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
-      <dl>
-        <dt>
-          <code>&lt;rb&gt;</code>
-        </dt>
-        <dd>Basis Textkomponente</dd>
-        <dt>
-          <code>&lt;rt&gt;</code>
-        </dt>
-        <dd>Annotation</dd>
-        <dt>
-          <code>&lt;rtc&gt;</code>
-        </dt>
-        <dd>Einzelne Komponente einer Annotation</dd>
-        <dt>
-          <code>&lt;rp&gt;</code>
-        </dt>
-        <dd>Alternative bei fehlender Unterstützung</dd>
-      </dl>
-      <hr class="hr_dotted space_even_half">
-      <div class="txt_center">
-        <ruby class="space_right_small">
-          <rb>Basis</rb>
-          <rt>Auszeichnung</rt>
-        </ruby>
-        <ruby class="space_right_small">
-          <rb>今日</rb>
-          <rt>きょう</rt>
-        </ruby>
-        <ruby>
-          ♥<rp>:
-          </rp>
-          <rt>Herz</rt>
-          <rp>,
-          </rp>
-          <rtc>
-            <rt lang="fr">Cœur</rt>
-          </rtc>
-          <rp>.</rp>
-          ☘<rp>:
-          </rp>
-          <rt>Kleeblatt</rt>
-          <rp>,
-          </rp>
-          <rtc>
-            <rt lang="fr">Trèfle</rt>
-          </rtc>
-          <rp>.</rp>
-          ✶<rp>:
-          </rp>
-          <rt>Stern</rt>
-          <rp>,
-          </rp>
-          <rtc>
-            <rt lang="fr">Étoile</rt>
-          </rtc>
-          <rp>.</rp>
-        </ruby>
-      </div>
-      <hr class="hr_dotted space_even_half">
-      <p>Wikipedia erklärt dies ausführlicher unter
-        <a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
-      <p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente
-        <code>&lt;data&gt;</code>
-        und
-        <code>&lt;time&gt;</code>
-        enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
-      <dl>
-        <dt>
-          <data value="0">0</data>
-          ≠
-          <data value="">NULL</data>
-        </dt>
-        <dd>
-          <code>&lt;data&gt;0&lt;/data&gt; ≠ &lt;data&gt;NULL&lt;/data&gt;</code>
-        </dd>
-        <dt>Der Wert
-          <data value="NULL">NULL</data>
-          mit Attribut</dt>
-        <dd>
-          <code>&lt;data value="NULL"&gt;NULL&lt;/data&gt;</code>
-        </dd>
-        <dt>
-          <time>2018-10-08</time>
-        </dt>
-        <dd>
-          <code>&lt;time&gt;2018-10-08&lt;/time&gt;</code>
-        </dd>
-        <dt>Die Zeitangabe
-          <i>
-            <time datetime="2018-10-08">Gestern</time>
-          </i>
-          mit Attribut</dt>
-        <dd>
-          <code>&lt;time datetime="2018-10-08"&gt;Gestern&lt;/time&gt;</code>
-        </dd>
-      </dl>
-      <p>Die Auszeichnung
-        <code>&lt;code&gt;</code>
-        wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.</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>
-        <code>var def = "Definition einer Variablen";</code>
-      </p>
-      <p>In diesem Beispiel wird die Variable
-        <var>def</var>
-        definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element
-        <code>&lt;var&gt;</code>
-        ausgezeichnet werden.</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 zum Beispiel
-        <q>Drücken Sie gleichzeitig
-          <kbd>Strg</kbd>
-          und
-          <kbd>A</kbd>
-        </q>, gekennzeichnet.</p>
-      <p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente
-        <code>&lt;sup&gt;</code>
-        und
-        <code>&lt;sub&gt;</code>
-        repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:</p>
-      <p>Beispielsweise die Formel
-        <var>E</var>=<var>m</var>
-        <var>c</var>
-        <sup>2</sup>
-        oder das Element H<sub>2</sub>O</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. Die Richtung wird dann mit dem Attribut
-        <code>dir</code>
-        angegeben.</p>
-      <ul>
-        <li>
-          <bdo dir="rtl">كائن بشري</bdo>
-        </li>
-        <li>
-          <bdo dir="rtl">إنسان آلي</bdo>
-        </li>
-      </ul>
-      <p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das
-        <code>&lt;span&gt;</code>
-        Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen
-        <code>id</code>
-        oder
-        <code>class</code>
-        werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache
-        <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
-      <p>Mit der Einführung von Absätzen wurde auch schon das
-        <code>&lt;br&gt;</code>
-        Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.</p>
-      <p>Eine besondere Form des Zeilenumbruchs kann mit
-        <code>&lt;wbr&gt;</code>
-        eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.</p>
-      <p>Und der Löwe brüllte "RRRR<wbr>rrrr<wbr>oooooooo<wbr>aaaa<wbr>AAAAAAAA<wbr>HHHH<wbr>hhhh<wbr>rrrrrrrrr"!
-      </p>
-      <p>Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen</p>
-      <h2>Änderungen</h2>
-      <p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
-      <aside>
-        <ins>Dies ist auch wichtig.</ins>
-      </aside>
-      <p>Der Inhalt wird dann mit
-        <code>&lt;ins&gt;</code>
-        ausgezeichnet. Wird Text entfernt, kommt 
-        <code>&lt;del&gt;</code>
-        zum Einsatz.</p>
-      <h6>Zu Tun</h6>
-      <ul>
-        <li>Fahrrad reparieren</li>
-        <li>
-          <del>Staubsaugen</del>
-        </li>
-        <li>Tisch bauen</li>
-      </ul>
-    </article>
-    <article>
-      <h1 id="embedded">Eingebundene Inhalte</h1>
-      {# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #}
-      <img src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=" width="128" height="80" alt="Fahne von Interaktionsweise">
-      <p>Dies ist ein Bild. Es wird mit dem Element
-        <code>&lt;img&gt;</code>
-        eingebunden. Solch ein Bild hat üblicherweise die Attribute
-        <code>width</code>
-        und
-        <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut
-        <code>alt</code>
-        für eine alternative Beschreibung in Textform verwendet werden.</p>
-      <p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut
-        <code>src</code>
-        angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente
-        <code>&lt;source&gt;</code>
-        und
-        <code>&lt;picture&gt;</code>
-        in Kombination verwendet werden.</p>
-      <picture>
-        <source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
-        <img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
-      </picture>
-    </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 (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.</p>
-      <table class="width_full js_pop">
-        <tr>
-          <td>Eine</td>
-          <td>einfache</td>
-        </tr>
-        <tr>
-          <td colspan="2">Tabelle</td>
-        </tr>
-      </table>
-      <div class="exp_pop">
-        <code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code>
-      </div>
-      <div class="overflow">
-        <table class="float_space_left js_pop">
-          <tr>
-            <td>Eine</td>
-            <td>freie (nicht fixierte)</td>
-          </tr>
-          <tr>
-            <td colspan="2">Tabelle</td>
-          </tr>
-        </table>
-        <div class="exp_pop">
-          <code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
-        </div>
-        <table class="table_blank float_space_left js_pop">
-          <tr>
-            <td>Mit</td>
-            <td>ohne</td>
-          </tr>
-          <tr>
-            <td colspan="2">Linien</td>
-          </tr>
-        </table>
-        <div class="exp_pop">
-          <code class="code_solo">table.table_blank>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>
-        <tbody>
-          <tr>
-            <td>Tabelle</td>
-            <td colspan="2"></td>
-          </tr>
-          <tr>
-            <td>mit</td>
-            <td>Titel</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td rowspan="2"></td>
-            <td>Kopf-</td>
-            <td>und</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>Fußzeile</td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <th scope="row">Fußzeile</th>
-            <td>A</td>
-            <td>B</td>
-          </tr>
-        </tfoot>
-      </table>
-      <div class="exp_pop">
-        <code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
-      </div>
-      <p>Viele weitere Formate sind möglich.</p>
-    </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.<br>Üblicherweise stehen alle Bedienelemente 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"/><input class="io_input" value="Undefiniert mit Stil"/></p>
-      <p>Ein spezieller Typ des Eingabefeldes hat die Funktion 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><input class="io_button" type="button" value="Input Button">
-        <button class="io_button">Button</button>
-      </p>
-      <p>Interaktive Elemente können durch das Attribut
-        <code>readonly</code>
-        nur lesbar gemacht werden oder mittels
-        <code>disabled</code>
-        gänzlich deaktiviert werden.</p>
-      <p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
-        <button disabled="disabled">Deaktivierte Schaltfläche</button>
-      </p>
-      <p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
-        <button class="io_button" disabled="disabled">Deaktivierte Schaltfläche</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>
-      <p>
-        <label>Beschriftung:<input type="text"></label>
-      </p>
-      <div class="overflow">
-        <div class="float_left">
-          <table class="table_fix table_blank">
-            <tr>
-              <td>
-                <label for="demo__raw_a">Alpha:</label>
-              </td>
-              <td><input type="text" id="demo__raw_a"></td>
-            </tr>
-            <tr>
-              <td>
-                <label for="demo__raw_b">Beta:</label>
-              </td>
-              <td><input type="text" id="demo__raw_b"></td>
-            </tr>
-          </table>
-        </div>
-        <table class="float_right">
-          <tr>
-            <td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
-            <td class="demo__td_pr">
-              <label for="demo__io_a">x</label>
-            </td>
-            <td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
-            <td class="demo__td_pr">
-              <label for="demo__io_a">Breite</label>
-            </td>
-          </tr>
-          <tr>
-            <td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
-            <td class="demo__td_pr">
-              <label for="demo__io_b">y</label>
-            </td>
-            <td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
-            <td class="demo__td_pr">
-              <label for="demo__io_b">Tiefe</label>
-            </td>
-          </tr>
-          <tr>
-            <td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
-            <td class="demo__td_pr">
-              <label for="demo__io_c">z</label>
-            </td>
-            <td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
-            <td class="demo__td_pr">
-              <label for="demo__io_c">Höhe</label>
-            </td>
-          </tr>
-        </table>
-      </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>
-        <div class="grid grid_column_2">
-          <label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly="readonly" id="demo__input">
-          <label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly="readonly" id="demo__output">
-        </div>
-      </fieldset>
-      <p>Sie können mittels
-        <code>&lt;legend&gt;</code>
-        auch eine eigene Beschriftung erhalten.</p>
-      <fieldset>
-        <legend>Einfache Eingabeelemente</legend>
-        <div class="grid grid_column_2">
-          <label>Schaltflächen:</label>
-          <div>
-            <button>Senden</button><input type="reset" value="Abbrechen"></div>
-          <label>Zeicheneingaben:</label>
-          <div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
-          <label>Einzelauswahl:</label>
-          <div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio" name="direction" value="down"/></div>
-          <label>Mehrfachauswahl:</label>
-          <div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox" name="speed" value="fast"/></div>
-          <label>Auswahllisten:</label>
-          <div>
-            <select class="txt_top">
-              <option value="A" selected="selected">Option A</option>
-              <option value="B">Option B</option>
-            </select>
-            <select class="txt_top" size="3">
-              <option value="red" selected="selected">Rot</option>
-              <option value="green">Grün</option>
-              <option value="blue">Blau</option>
-            </select>
-          </div>
-          <label>Textfeld:</label>
-          <textarea rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>Einfache Eingabeelemente mit Stil</legend>
-        <div class="grid grid_column_2">
-          <label>Schaltflächen:</label>
-          <div>
-            <button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
-          <label>Zeicheneingaben:</label>
-          <div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
-          <label>Einzelauswahl:</label>
-          <div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
-          <label>Mehrfachauswahl:</label>
-          <div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input class="io_check" type="checkbox" name="speed" value="fast"/></div>
-          <label>Auswahllisten:</label>
-          <div>
-            <select class="io_select txt_top">
-              <option value="A" selected="selected">Option A</option>
-              <option value="B">Option B</option>
-            </select>
-            <select class="io_select txt_top" size="3">
-              <option value="red" selected="selected">Rot</option>
-              <option value="green">Grün</option>
-              <option value="blue">Blau</option>
-            </select>
-          </div>
-          <label>Textfeld:</label>
-          <textarea class="io_textarea" rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
-        </div>
-      </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.</p>
-        <p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
-        <div class="grid grid_column_2">
-          <label class="">Farbauswahl<br>
-            <code>&lt;input[type="color"]&gt;</code>
-          </label>
-          <div><input class="" type="color"></div>
-          <label class="">Bereichsauswahl<br>
-            <code>&lt;input[type="range"]&gt;</code>
-          </label>
-          <div><input class="" type="range"></div>
-          <label class="">Datum<br>
-            <code>&lt;input[type="date"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="date"></div>
-          <label class="">Uhrzeit<br>
-            <code>&lt;input[type="time"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="time"></div>
-          <label class="">Datum und Zeit<br>
-            <code>&lt;input[type="datetime-local"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="datetime-local"></div>
-          <label class="">Kalendermonat<br>
-            <code>&lt;input[type="month"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="month"></div>
-          <label class="">Kalenderwoche<br>
-            <code>&lt;input[type="week"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="week"></div>
-          <label class="">@dresse<br>
-            <code>&lt;input[type="email"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="email" placeholder="@"></div>
-          <label class="">Passwort<br>
-            <code>&lt;input[type="password"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="password" value="admin"></div>
-          <label class="">Telefonnummer<br>
-            <code>&lt;input[type="tel"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="tel" value="0190123456"></div>
-          <label class="">URL<br>
-            <code>&lt;input[type="url"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="url" placeholder="url://"></div>
-          <label class="">Suche<br>
-            <code>&lt;input[type="search"]&gt;</code>
-          </label>
-          <div><input class="io_input" type="search"></div>
-          <label class="">Datei<br>
-            <code>&lt;input[type="file"]&gt;</code>
-          </label>
-          <div><input class="" type="file"></div>
-          <label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
-        </div>
-      </fieldset>
+			<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>
 
-      <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 Komponenten mit Kombinationen und erweiterten Formatierungen.</p>
-      </header>
-    </section>
-  </div>
-
-{% endblock %}
-
-{% block script %}
-  {{ super() }}
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  <script>
-    assetsLoaded = true;
-    logPerf('Assets loaded.', assetsLoaded);
-    // Page specific
-    // ------------------------------------------------------------------------------
-    // Create instance of object made by contructor function
-    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
-
-    $(document).ready(function () {
-      logPerf('JQ document ready event fired.');
-    });
-
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
-    logPerf('Application ready... not.');
-  </script>
+		<section>
+			<header class="header_txt">
+				<h1>Ende der Einführung</h1>
+				<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und erweiterten Formatierungen.</p>
+			</header>
+		</section>
+	</div>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 795e41f..5890112 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -7,201 +7,380 @@ tags:
 {% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_footer.njk" as footer %}
 
 {% block title %}Komponenten{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="temp_layer">
-    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
-    {% include "hippie/partials/_body_nav.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>
+	<!-- {{ page.fileSlug }}.page -->
+	<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>Übersicht aller Elemente</h1>
-        <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
-        <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
-      </header>
-      <pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre>
-      <article>
-        <h1 id="sections">Bereiche</h1>
-        <p>Elemente:</p>
-        <pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
-        <h2>&lt;body&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
-        <h2>&lt;article&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
-        <h2>&lt;section&gt;</h2>
-        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
-        <h4>Varianten</h4>
-        <pre class="pre_code"><code>section.sec_main_center</code></pre>
-        <pre class="pre_code"><code>section.sec_main_status</code></pre>
-        <h2>&lt;h3&gt;</h2>
-        <h2>&lt;h4&gt;</h2>
-      </article>
-      <article>
-        <h1 id="grouping">Gruppierung</h1>
-        <p>Elemente:</p>
-        <pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
-        <h2>&lt;p&gt;</h2>
-        <h4>Varianten</h4>
-        <pre class="pre_code"><code>p.txt_center</code></pre>
-        <pre class="pre_code"><code>p.txt_right</code></pre>
-        <pre class="pre_code"><code>p.column_2</code></pre>
-        <pre class="pre_code"><code>p.column_3.column_line</code></pre>
-        <h2>&lt;hr&gt;</h2>
-        <h4>Varianten</h4>
-        <pre class="pre_code"><code>hr.hr_hidden</code></pre>
-        <pre class="pre_code"><code>hr.hr_dotted</code></pre>
-        <pre class="pre_code"><code>hr.space_even_half</code></pre>
-        <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
-        <h2>&lt;blockquote&gt;</h2>
-        <pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
-        <h2>&lt;figure&gt;</h2>
-        <pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
-        <h2>&lt;div&gt;</h2>
-        <pre class="pre_code"><code>div.div_info>p</code></pre>
-        <h4>Varianten</h4>
-      </article>
-      <article>
-        <h1 id="tabularData">Tabellen</h1>
-        <p>Elemente:</p>
-        <pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
-        <h2>&lt;table&gt;</h2>
-        <h4>Varianten</h4>
-        <pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
-        <table class="width_full table_fix js_pop">
-          <thead>
-            <tr>
-              <th class="cell_pre" scope="col"></th>
-              <th scope="col">Kopfzeile</th>
-              <th scope="col">A</th>
-              <th scope="col">B</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="cell_pre">Vorspalte</td>
-              <td>Eine</td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td class="cell_pre">1</td>
-              <td></td>
-              <td>erweiterte</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td class="cell_pre">2</td>
-              <td></td>
-              <td></td>
-              <td>Tabelle</td>
-            </tr>
-          </tbody>
-        </table>
-        <pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
-        <table class="width_full table_stripe table_fix table_free">
-          <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>
-        </table>
-        <pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
-        <table>
-          <caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
-          <thead>
-            <tr>
-              <th scope="col">Bezeichnung</th>
-              <th scope="col">Menge</th>
-              <th scope="col">Wert</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Alpha</td>
-              <td>1</td>
-              <td class="txt_right">8990</td>
-            </tr>
-            <tr>
-              <td>Bravo</td>
-              <td>10</td>
-              <td class="txt_right">1</td>
-            </tr>
-            <tr>
-              <td>Charlie</td>
-              <td>1</td>
-              <td class="txt_right">1</td>
-            </tr>
-          </tbody>
-          <tfoot>
-            <tr>
-              <th colspan="2" class="txt_right" scope="row">Summe</th>
-              <td class="txt_right" title=">9000">9001</td>
-            </tr>
-          </tfoot>
-        </table>
-      </article>
-    </section>
-  </div>
+	<section class="sec_main_center">
+		<header class="header_txt">
+			<h1>Übersicht aller Elemente</h1>
+			<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
+			<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
+		</header>
+		<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
+		<article>
+			<h1 id="sections">Bereiche</h1>
+			<p>Elemente:</p>
+			<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
+			<h2>&lt;body&gt;</h2>
+			<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
+			<h2>&lt;article&gt;</h2>
+			<article>Ein Artikel.</article>
+			<h2>&lt;section&gt;</h2>
+			<section>Ein Bereich.</section>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>section.sec_main_center</code></pre>
+			<section class="sec_main_center">
+				<p class="float_right">Ende.</p>
+				<p>Zentrierter Bereich.</p>
+			</section>
+			<pre class="pre_code"><code>section.sec_main_status</code></pre>
+			<section class="sec_main_status">Status-Bereich</section>
+			<h2>&lt;nav&gt;</h2>
+			<nav>Navigation</nav>
+			<h2>&lt;aside&gt;</h2>
+			<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
+			<pre class="pre_code"><code>aside.right+div.bside</code></pre>
+			<section>
+				<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
+				<div class="bside">Hauptbereich</div>
+			</section>
+			<h2>&lt;h*&gt;</h2>
+			<h1>Überschrift 1</h1>
+			<h2>Überschrift 2</h2>
+			<h3>Überschrift 3</h3>
+			<h4>Überschrift 4</h4>
+			<h5>Überschrift 5</h5>
+			<hgroup>
+				<h6>Überschrift 6</h6>
+				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
+			</hgroup>
+			<h2>&lt;header&gt;</h2>
+			<header>Kopfbereich</header>
+			<pre class="pre_code"><code>header.header_page</code></pre>
+			<pre class="pre_code"><code>header.header_txt>h1</code></pre>
+			<header class="header_txt">
+				<h1>Überschrift 1</h1>
+				<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
+			</header>
+			<h2>&lt;footer&gt;</h2>
+			<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
+			<footer>Fußbereich</footer>
+			<div style="position:relative;height:256px;background-color:#b7e0f0;">
+				{{ footer.pinned() }}
+			</div>
+		</article>
+		<article>
+			<h1 id="grouping">Gruppierung</h1>
+			<p>Elemente:</p>
+			<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
+			<h2>&lt;p&gt;</h2>
+			<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>p.column_2</code></pre>
+			<p class="column_2">Spalten können angegeben werden.</p>
+			<pre class="pre_code"><code>p.column_3.column_line</code></pre>
+			<p class="column_3 column_line">Spalten können angegeben werden.</p>
+			<h2>&lt;address&gt;</h2>
+			<address>Anschrift, mit bestimmtem, ##### Format.</address>
+			<h2>&lt;hr&gt;</h2>
+			<hr>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
+			<hr class="hr_hidden">
+			<hr class="hr_dotted">
+			<hr class="hr_double">
+			<h2>&lt;pre&gt;</h2>
+			<pre>Vorformatierter Text.
+	erhält Umbrüche und Einrückung.
+			</pre>
+			<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
+			<pre class="pre_code"><code>let variable = true;</code>
+<code>()(){}</code></pre>
+			<h2>&lt;blockquote&gt;</h2>
+			<blockquote>Ein Zitat ist eingerückt.</blockquote>
+			<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
+			<blockquote class="quote_mark">
+				<p>Zitat mit automatischen Anführungszeichen</p>
+				<p class="quote_source">und Quellenangabe.</p>
+			</blockquote>
+			<h2>&lt;dl&gt;, &lt;ol&gt;, &lt;ul&gt;</h2>
+			<dl>
+				<dt>Begriff</dt>
+				<dd>Definition</dd>
+			</dl>
+			<ol>
+				<li>Eins</li>
+				<li>Zwei</li>
+			</ol>
+			<ul class="horizontal">
+				<li>Obst</li>
+				<li>Gemüse</li>
+			</ul>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
+			<ul class="list_basic list_dash">
+				<li>Mehr Abstand und</li>
+				<li>mit Unterstrichen.</li>
+			</ul>
+			<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
+			<ul class="list_link">
+				<li><a href="">Mit</a></li>
+				<li><a href="">Verweisen</a></li>
+			</ul>
+			<h2>&lt;figure&gt;</h2>
+			<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
+			<figure>
+				<figcaption>Bezeichnung</figcaption>
+				Grafisches Element.
+			</figure>
+			<h2>&lt;main&gt;</h2>
+			<main>Hauptbereich</main>
+			<h2>&lt;div&gt;</h2>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>div.div_info>p</code></pre>
+			<div class="div_info">
+				<p>Absatz in Informationsbox.</p>
+			</div>
+			<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
+			<div class="box_space">
+				<div class="box_cube"><span>Text</span></div>
+			</div>
+			<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
+			<div class="box_placeholder"></div>
+			<hr>
+			<div class="box_placeholder_bkg"></div>
+		</article>
+		<article>
+			<h1 id="tabularData">Tabellen</h1>
+			<p>Elemente:</p>
+			<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
+			<h2>&lt;table&gt;</h2>
+			<h4>Varianten</h4>
+			<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
+			<table class="width_full table_fix">
+				<thead>
+					<tr>
+						<th class="cell_pre" scope="col"></th>
+						<th scope="col">Kopfzeile</th>
+						<th scope="col">A</th>
+						<th scope="col">B</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td class="cell_pre">Vorspalte</td>
+						<td>Eine</td>
+						<td></td>
+						<td></td>
+					</tr>
+					<tr>
+						<td class="cell_pre">1</td>
+						<td></td>
+						<td>erweiterte</td>
+						<td></td>
+					</tr>
+					<tr>
+						<td class="cell_pre">2</td>
+						<td></td>
+						<td></td>
+						<td>Tabelle</td>
+					</tr>
+				</tbody>
+			</table>
+			<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
+			<table class="width_full table_stripe table_fix table_free">
+				<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>
+			</table>
+			<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+			<table>
+				<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
+				<thead>
+					<tr>
+						<th scope="col">Bezeichnung</th>
+						<th scope="col">Menge</th>
+						<th scope="col">Wert</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Alpha</td>
+						<td>1</td>
+						<td class="txt_right">8990</td>
+					</tr>
+					<tr>
+						<td>Bravo</td>
+						<td>10</td>
+						<td class="txt_right">1</td>
+					</tr>
+					<tr>
+						<td>Charlie</td>
+						<td>1</td>
+						<td class="txt_right">1</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th colspan="2" class="txt_right" scope="row">Summe</th>
+						<td class="txt_right" title=">9000">9001</td>
+					</tr>
+				</tfoot>
+			</table>
+		</article>
+		<article>
+			<h1 id="forms">Formulare</h1>
+			<p>Elemente:</p>
+			<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
+			<h2>&lt;input&gt;</h2>
+			<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="disabled"/></div>
+				<div class="flex_column"><input type="button" value="Auswählen"></div>
+				<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
+			</div>
+			<h4>Varianten</h4>
+			<div id="capsCheck">
+				<form action="">
+					<input type="password" onkeypress="capLock(event)"/>
+					<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
+					<input type="text"/>
+					<span id="error">Caps Lock is ON.</span>
+				</form>
+			</div>
+			<h2>&lt;select&gt;</h2>
+			<select name="F">
+				<option value="0">
+						Plain list</option>
+				<option value="1" selected="selected">
+						Fancy list</option>
+				<option value="2">
+						Table list</option>
+			</select>
+		</article>
+	</section>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  {{ log.asset(true) }}
-  {{ log.log('Assets loaded.', assetsLoaded) }}
-  <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      // jq-sticky-anything
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-    });
-  </script>
+	{{ super() }}
+	<script>
+		function capLock(e) {
+			console.log('capLock');
+			kc = e.keyCode
+				? e.keyCode
+				: e.which;
+			sk = e.shiftKey
+				? e.shiftKey
+				: (
+					(kc == 16)
+					? true
+					: false);
+
+			if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
+				document
+					.getElementById('hint')
+					.style
+					.visibility = 'visible';
+			} else {
+				document
+					.getElementById('hint')
+					.style
+					.visibility = 'hidden';
+			}
+		}
+
+		function capsDetect() {
+			const body = document.getElementsByTagName('body')[0];
+			const capsWarning = document.getElementById('error');
+			let isShiftPressed = false;
+			let isCapsOn = false;
+
+			console.log(body);
+			body.addEventListener('keydown', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode === 16) {
+					isShiftPressed = true;
+				}
+			});
+			body.addEventListener('keyup', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode === 16) {
+					isShiftPressed = false;
+				}
+				if (keyCode === 20) {
+					if (isCapsOn) {
+						isCapsOn = false;
+						capsWarning.style.display = 'none';
+					} else {
+						isCapsOn = true;
+						capsWarning.style.display = 'inline-block';
+					}
+				}
+			});
+			body.addEventListener('keypress', function (e) {
+				var keyCode = e.keyCode
+					? e.keyCode
+					: e.which;
+				if (keyCode <= 40) 
+					return;
+				if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
+					isCapsOn = true;
+					capsWarning.style.display = 'inline-block';
+				} else {
+					capsWarning.style.display = 'none';
+				}
+			});
+		}
+
+		// TODO: Beide Varianten lauffähig machen
+		// capsDetect();
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
index 353fed9..7db860b 100644
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -9,105 +9,91 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="card_bkg">
-    <div id="dither"></div>
-    <svg version="1.1" id="flag" 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">
-      {# <defs>
-      <filter id="turb3">
-        <feColorMatrix type="saturate" values="1" />
-        <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-      </filter>
-      <symbol id="triangle-5">
-        <rect y="0" fill="#273F8B" width="1920" height="1200"/>
-      </symbol>
-    </defs>
-    <g>
-      <use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-    </g> #}
-      <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>
-    {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-  </div>
-  <div class="card_box">
-    <div id="jsCardHover">
-      <p>Titel<br/>und Beschreibung</p>
-      <h1>{{ ph.name() }}</h1>
-      <p>
-        {{ ph.email('card_address') }}<br/>
-        {{ ph.link('decent', 'site.tld') }}
-        &middot;
-        {{ ph.address('decent') }}</p>
-    </div>
-  </div>
+
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="card_bkg">
+		<div id="dither"></div>
+		<svg version="1.1" id="flag" 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">
+			{# <defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" />
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g> #}
+			<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>
+		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
+	</div>
+	<div class="card_box">
+		<div id="js_content">
+			<p>Titel<br/>und Beschreibung</p>
+			<h1>{{ ph.name() }}</h1>
+			<p>
+				{{ ph.email('card_address') }}<br/>
+				{{ ph.link('decent', 'site.tld') }}
+				&middot;
+				{{ ph.address('decent') }}</p>
+		</div>
+	</div>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  <script>
-    $(document).ready(function () {
-      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+	<script>
+		const flag = document.getElementById("flag");
+		let colors = new Array();
+		let iId = undefined;
+		let position = 0;
 
-      var colors = new Array();
-      var position = 0;
+		for (let i = 1; i <= flag.childElementCount; i++) {
+			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
+		}
 
-      for (var i = 1; i <= $("#flag").children().length; i++) {
-        colors.push($("#triangle-" + i).attr("fill"));
-      }
+		// console.log(colors);
 
-      $('#jsCardHover').on({
-        mouseenter: function () {
-          // $('#flag').addClass('effect');
-          // $('#flag').css('opacity', 0);
-          $('#flag')
-            .stop()
-            .fadeOut(10000);
-          this.iid = setInterval(function () {
-            for (var i = 1; i <= colors.length; i++) {
-              position++;
-              if (position >= colors.length) {
-                position = 0;
-              }
-              $("#triangle-" + i).attr("fill", colors[position]);
-            }
-            position++;
-            if (position >= colors.length) {
-              position = 0;
-            }
-          }, 600);
-        },
-        mouseleave: function () {
-          // $('#flag').removeClass('effect');
-          // $('#flag').css('opacity', 1);
-          $('#flag')
-            .stop()
-            .fadeIn(1000);
-          this.iid && clearInterval(this.iid);
-        },
-        click: function () {
-          $("#dither").toggle();
-        }
-      });
-    });
-  </script>
+		document.getElementById('js_content').addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+		document.getElementById('js_content').addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/portal.njk b/source/screens/demo/examples/portal.njk
index 5b96681..8f949f2 100644
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@@ -9,32 +9,33 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_gate.njk" as gate %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="portal">
-    {{ gate.list(
-    'Tor mit Symbol und Liste',
-    '../demo', {
-      src: '/art/demo/flag_websafe_128x80.gif',
-      alt: 'Flag of Interaktionsweise'
-    }, [
-      {
-        name: '1',
-        href: 'http://domain.tld',
-        img: '../art/bullet.gif'
-      }, {
-        name: 'Zwei',
-        href: 'http://domain.tld',
-        img: '../art/bullet.gif'
-      }
-    ]
-    ) }}
-    {{ gate.simple('Tor', '../demo') }}
-  </div>
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="portal">
+		{{ gate.list(
+		'Tor mit Symbol und Liste',
+		'../demo', {
+			src: '/art/demo/flag_websafe_128x80.gif',
+			alt: 'Flag of Interaktionsweise'
+		}, [
+			{
+				name: '1',
+				href: 'http://domain.tld',
+				img: '../art/bullet.gif'
+			}, {
+				name: 'Zwei',
+				href: 'http://domain.tld',
+				img: '../art/bullet.gif'
+			}
+		]
+		) }}
+		{{ gate.simple('Tor', '../demo') }}
+	</div>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk
index 0b91499..69f26b9 100755
--- a/source/screens/demo/examples/songbook.njk
+++ b/source/screens/demo/examples/songbook.njk
@@ -10,42 +10,43 @@ tags:
 {% import "hippie/macros/_placeholder.njk" as ph %}
 {% import "hippie/macros/_song.njk" as song %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="sec_main_center">
-    <header class="header_txt">
-      <h1>Titel</h1>
-      <p>Jahr</p>
-    </header>
-    <nav role="doc-toc">
-      <h2>Inhaltsverzeichnis</h2>
-      <ul>
-        {%- for song in collections.song -%}
-          <li>
-            <a href="{{ song.page.url }}">{{ song.data.title }}</a>
-          </li>
-        {%- endfor -%}
-      </ul>
-    </nav>
-    <h2>Vorwort</h2>
-    <p>Liederbuch für
-      <em>Name</em>.</p>
-    <p>Gibt es gebunden und hier
-      {{ ph.link() }}.<br/>
-      Bestellungen bitte an
-      {{ ph.name() }}
-      richten.</p>
-    <hr class="hr_double hr_dotted">
-    {%- for piece in collections.song -%}
-      {{ song.simple(loop.index0, piece.data, piece.content) }}
-    {%- endfor -%}
-    <hr/>
-    <address>{{ ph.name() }}</address>
-  </div>
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="sec_main_center">
+		<header class="header_txt">
+			<h1>Titel</h1>
+			<p>Jahr</p>
+		</header>
+		<nav role="doc-toc">
+			<h2>Inhaltsverzeichnis</h2>
+			<ul>
+				{%- for song in collections.song -%}
+					<li>
+						<a href="{{ song.page.url }}">{{ song.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
+		<h2>Vorwort</h2>
+		<p>Liederbuch für
+			<em>Name</em>.</p>
+		<p>Gibt es gebunden und hier
+			{{ ph.link() }}.<br/>
+			Bestellungen bitte an
+			{{ ph.name() }}
+			richten.</p>
+		<hr class="hr_double hr_dotted">
+		{%- for piece in collections.song -%}
+			{{ song.simple(loop.index0, piece.data, piece.content) }}
+		{%- endfor -%}
+		<hr/>
+		<address>{{ ph.name() }}</address>
+	</div>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 15c24b1..09266b9 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -9,7 +9,8 @@ tags:
 
 {% extends "demo/_app.njk" %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block links %}
   {{ super() }}
@@ -22,123 +23,18 @@ tags:
 
 {% block body %}
   <div id="space"></div>
-  <button id="addFrame">Add</button>
+  <button data-action="add">Add</button>
 {% endblock %}
 
 {%- block script %}
+  <script src="{{ pageBase }}js/_ui.js"></script>
   <script>
-    // Define the NewDiv class
-    class NewDiv {
-      constructor(x, y, width, height, backgroundColor) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-        this.backgroundColor = backgroundColor;
-        this.element = null;
-      }
-
-      // Create the div element
-      createDiv() {
-        this.element = document.createElement('div');
-        this.element.style.position = 'absolute';
-        this.element.style.left = `${this.x}px`;
-        this.element.style.top = `${this.y}px`;
-        this.element.style.width = `${this.width}px`;
-        this.element.style.height = `${this.height}px`;
-        this.element.style.background = this.backgroundColor;
-        this.element.style.cursor = 'move';
-
-        // Add event listeners for dragging
-        let isDown = false;
-        let offset = [0, 0];
-
-        this.element.addEventListener('mousedown', (event) => {
-          if (event.button === 0) { // Left mouse button
-            isDown = true;
-            offset = [
-              this.element.offsetLeft - event.clientX,
-              this.element.offsetTop - event.clientY
-            ];
-          }
-        });
-
-        document.addEventListener('mouseup', () => {
-          isDown = false;
-        });
-
-        document.addEventListener('mousemove', (event) => {
-          if (isDown) {
-            const maxX = window.innerWidth - this.element.offsetWidth;
-            const maxY = window.innerHeight - this.element.offsetHeight;
-            let x = event.clientX + offset[0];
-            let y = event.clientY + offset[1];
-
-            // Boundary checks
-            if (x < 0) x = 0;
-            if (y < 0) y = 0;
-            if (x > maxX) x = maxX;
-            if (y > maxY) y = maxY;
-
-            this.element.style.left = `${x}px`;
-            this.element.style.top = `${y}px`;
-          }
-        });
-
-        // Save position and size
-        const saveData = () => {
-          const data = {
-            x: this.element.offsetLeft,
-            y: this.element.offsetTop,
-            width: this.element.offsetWidth,
-            height: this.element.offsetHeight
-          };
-          // Save data to local storage or a database
-          localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
-        };
-
-        // Load saved data
-        const loadData = () => {
-          const data = localStorage.getItem(`divData${this.element.id}`);
-          if (data) {
-            const parsedData = JSON.parse(data);
-            this.element.style.left = `${parsedData.x}px`;
-            this.element.style.top = `${parsedData.y}px`;
-            this.element.style.width = `${parsedData.width}px`;
-            this.element.style.height = `${parsedData.height}px`;
-          }
-        };
-
-        // Call the save function when the user stops dragging
-        document.addEventListener('mouseup', saveData);
-
-        // Load saved data on page load
-        loadData();
-      }
-
-      // Append the div to the space
-      appendToFrame(space) {
-        this.element.id = `newDiv${space.children.length}`;
-        space.appendChild(this.element);
-      }
-    }
-
-    // Function to generate a random color
-    function getRandomColor() {
-      const letters = '0123456789ABCDEF';
-      let color = '#';
-      for (let i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    }
-
     // Get the space element
     const space = document.getElementById('space');
-    const addFrameButton = document.getElementById('addFrame');
+    const add = document.querySelector('[data-action=add]');
 
     // Add event listener to the add space button
-    addFrameButton.addEventListener('click', () => {
+    add.addEventListener('click', () => {
       const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
       newDiv.createDiv();
       newDiv.appendToFrame(space);
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
new file mode 100644
index 0000000..b9adc45
--- /dev/null
+++ b/source/screens/demo/examples/ui/form.njk
@@ -0,0 +1,68 @@
+---
+title: Form
+tags: 
+  - demoExample
+  - ui
+---
+{% set bodyClass = "body_form" %}
+
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<div id="head">
+		<h1>Formulare</h1>
+		<button data-action="add">Hinzufügen</button>
+		<button data-action="change">Ändern</button>
+		<hr>
+	</div>
+	<form id="form" action="">
+		<div id="grid">
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		</div>
+	</form>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		const add = document.querySelector('[data-action=add]');
+		const change = document.querySelector('[data-action=change]');
+		const grid = document.getElementById('grid');
+
+		add.addEventListener('click', (e) => {
+				const item = document.createElement('div');
+
+				item.style.backgroundColor = '#f0f';
+				item.textContent = 'c'
+				
+				grid.appendChild(item);
+		});
+
+		change.addEventListener('click', (e) => {
+				changeLayout(grid);
+		});
+
+		function changeLayout(grid) {
+			const currentTemplate = grid.style.gridTemplateColumns;
+
+			if (currentTemplate === 'repeat(4, 1fr)') {
+				grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
+			} else {
+				grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
+			}
+		}
+	</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 9af9edc..f7534f3 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -5,56 +5,147 @@ tags:
   - index
   - ui
 ---
+
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
+{% block title %}
+	{{ title }}
 {% endblock %}
 
 {% block links %}
-		<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
 {% block head %}
-		{{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-		<div id="loader" class="step op_show">
-			<div id="bar">
-				<div id="spinner"><span>I</span></div>
-				<div id="wrap">
-					<div id="progress"></div>
-				</div>
-				<div id="status">0%</div>
+	<div id="loader" class="step op_show">
+		<div id="bar">
+			<div id="spinner">
+				<span>I</span>
 			</div>
+			<div id="wrap">
+				<div id="progress"></div>
+			</div>
+			<div id="status">0%</div>
 		</div>
+	</div>
+	<div id="intro" class="step op_hide">
 		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold <kbd>space</kbd> to skip.</p>
-		</div>
-		<div id="intro" class="step op_hide">
-			{{ ph.brand('brand') }}
-			<p>Powered by</p>
-			<ul class="tech-stack">
-				<li>Vendor</li>
-				<li>IDE</li>
-				<li>Engine</li>
-			</ul>
-		</div>
-		<div id="agreement" class="step op_hide">
-			<h1>Agreement</h1>
-			<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
-		</div>
-		<div id="idle" class="step op_hide">
-			<div class="hello">Hello World!</div>
-			<p class="hello">Only left mouse click or any key</p>
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
 		</div>
+		{{ ph.brand('brand') }}
+		<p>Powered by</p>
+		<ul class="tech-stack">
+			<li>Vendor</li>
+			<li>IDE</li>
+			<li>Engine</li>
+		</ul>
+	</div>
+	<div id="agreement" class="step op_hide">
+		<h1>Agreement</h1>
+		<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
+	</div>
+	<div id="idle" class="step op_hide">
+		<div class="mouse_over"></div>
+		<div class="hello">Hello World!</div>
+		<p class="hello">Only left mouse click or any key</p>
+	</div>
 {% endblock %}
 
 {%- block script %}
-		{{ super() }}
-		<script src="{{ pageBase }}js/ui.js"></script>
+	{{ super() }}
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
+
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
+
+		let introDelay = 6;
+		let hintDelay = 1;
+		let cycleDelay = 2;
+		let isAgree = false;
+		const steps = {
+			agreement: {
+				element: document.getElementById('agreement'),
+				msgIn: 'Agreement shown.',
+				msgOut: 'Agreement accepted.',
+				msgNo: 'No agreement today.'
+			}
+		};
+		const intro = document.getElementById('intro');
+		const agreement = steps.agreement.element;
+		const hint = {
+			element: document.getElementById('hint'),
+			delay: hintDelay * 1000,
+			show() {
+				if (typeof this.timeoutId === 'number') {
+					this.cancel();
+				}
+				this
+					.element
+					.classList
+					.remove('di_none');
+				this.timeoutId = setTimeout(() => {
+					this.dismiss();
+				}, this.delay);
+			},
+			dismiss() {
+				this
+					.element
+					.classList
+					.add('di_none');
+				this.timeoutId = undefined;
+			},
+			cancel() {
+				clearTimeout(this.timeoutId);
+			}
+		};
+		const loader = document.getElementById('loader');
+		const idle = {
+			element: document.getElementById('idle'),
+			delay: cycleDelay * 1000,
+			position: 0,
+			cycle() {
+				if (typeof this.intervalId === 'number') {
+					this.cancel();
+				}
+				this.intervalId = setInterval(() => {
+					this.position++;
+					if (this.position >= flagColors.length) {
+						this.position = 0;
+					}
+					this.element.style.backgroundColor = '#' + flagColors[this.position];
+				}, this.delay);
+			},
+			cancel() {
+				this.intervalId && clearInterval(this.intervalId);
+			}
+		}
+		init()
+			.then(loadCore)
+			.then(showIntro)
+			.catch(er => console.error(er))
+			.then(showAgreement)
+			.then(showIdle)
+			.catch(er => console.error(er))
+			. finally(() => {
+				console.debug('Init end.', isAgree);
+				// location = 'demo/examples/ui/new.html';
+			});
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk
index 7037dce..c50c516 100644
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@@ -12,80 +12,71 @@ tags:
 
 {% block title %}Index{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="wrap">
-    <div class="hello">
-      <h2>This is
-        {{ hippie.brand | upper }}</h2>
-      <p>You can start using it by replacing this file with your own index page.</p>
-      <p>To do this you need to create a file
-        <code>/index.njk</code>
-        inside the
-        <i>source/screens</i>
-        folder. You can also create a
-        <code>data.json</code>
-        file inside the
-        <i>source/templates</i>
-        folder as a data source for your nunjucks files.</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
-        <i>/source/screens/demo</i>.</p>
-      <p>The
-        <i>source/demo</i>
-        folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
-      <div class="pos_rel">
-        <pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
-        <h3>Overview</h3>
-      </div>
-      <nav>
-        <ul class="list_link">
-          {% for link in collections.demoIndex %}
-            <li>
-              <a href="{{ link.page.url }}">{{ link.data.title }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      </nav>
-      <h3>Page</h3>
-      <ul class="list_link">
-        {% for link in collections.demoPage | sort(false, false, 'data.title') %}
-          <li>
-            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-      <h3>Example</h3>
-      <ul class="list_link">
-        {% for link in collections.demoExample %}
-          <li>
-            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="wrap">
+		<div class="hello">
+			<h2>This is
+				{{ hippie.brand | upper }}</h2>
+			<p>You can start using it by replacing this file with your own index page.</p>
+			<p>To do this you need to create a file
+				<code>/index.njk</code>
+				inside the
+				<i>source/screens</i>
+				folder. You can also create a
+				<code>data.json</code>
+				file inside the
+				<i>source/templates</i>
+				folder as a data source for your nunjucks files.</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
+				<i>/source/screens/demo</i>.</p>
+			<p>The
+				<i>source/demo</i>
+				folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
+			<div class="pos_rel">
+				<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
+				<h3>Overview</h3>
+			</div>
+			<nav>
+				<ul class="list_link">
+					{% for link in collections.demoIndex %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</nav>
+			<h3>Page</h3>
+			<ul class="list_link">
+				{% for link in collections.demoPage | sort(false, false, 'data.title') %}
+					<li>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+			<h3>Example</h3>
+			<ul class="list_link">
+				{% for link in collections.demoExample %}
+					<li>
+						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</div>
+	</div>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  {# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  <script>
-    assetsLoaded = true;
-    logPerf('BODY        :: Assets loaded, running page specific script...');
-    // Page specific
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      logPerf('EVENT       :: jQuery \'ready\' event fired.');
-      setup();
-    });
-    logPerf('Application ready... not.');
-  </script>
+	{{ super() }}
+	<script>
+		assetsLoaded = true;
+		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
+		// Page specific
+		// ------------------------------------------------------------------------------
+		logPerf('Application ready... not.');
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk
index 3d82d76..f1a9752 100644
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -10,49 +10,38 @@ tags:
 
 {% block title %}Einführung{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
-
-  <section class="sec_main_center">
-    <header>
-      <hgroup>
-        <h1>Introduction to HIPPIE</h1>
-        <p>Hippie interweaves preeminent personal interface elements.</p>
-      </hgroup>
-    </header>
-    <article>
-      <p>&hellip;</p>
-    </article>
-  </section>
+	<!-- {{ page.fileSlug }}.page -->
+	<section class="sec_main_center">
+		<header>
+			<hgroup>
+				<h1>Introduction to HIPPIE</h1>
+				<p>Hippie interweaves preeminent personal interface elements.</p>
+			</hgroup>
+		</header>
+		<article>
+			<p>&hellip;</p>
+			<p>Contact: <a id="special" href=""></a>
+			</p>
+			<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
+			</p>
+		</article>
+	</section>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  <script>
-    assetsLoaded = true;
-    logPerf('Assets loaded.', assetsLoaded);
-    // Page specific
-    // ------------------------------------------------------------------------------
-    // Create instance of object made by contructor function
-    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+	{{ super() }}
+	<script>
+		assetsLoaded = true;
+		logPerf('Assets loaded.', assetsLoaded);
+		// Page specific
+		// ------------------------------------------------------------------------------
+		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+		composeMail('.general', 'name', 'domain', 'tld', '', '')
 
-    $(document).ready(function () {
-      logPerf('JQ document ready event fired.');
-    });
-
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
-    logPerf('Application ready... not.');
-  </script>
+		logPerf('Application ready... not.');
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index 2683443..a45a817 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -10,331 +10,326 @@ tags:
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="temp_layer">
-    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
-    {% include "hippie/partials/_body_nav.njk" %}
-  </div>
-  <div id="begin" class="">
-    <section class="sec_main_center">
-      <header class="header_txt">
-        <h1>Sammlung formatierter Elemente</h1>
-        <p>Die Elemente werden fortlaufend komplexer</p>
-      </header>
-      <article>
-        <h2>&lt;h3&gt;</h2>
-        <h4>Beispiele</h4>
-        <pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
-        <h3 class="txt_color_dark">Dunkle Überschrift</h3>
-        <p>Mit normalem Textabsatz</p>
-        <h2>&lt;h4&gt;</h2>
-        <h4>Beispiele</h4>
-        <pre class="pre_code"><code>a>h4</code></pre>
-        <a href="">
-          <h4>Überschrift als Block-Verweis</h4>
-        </a>
-        <h2>&lt;section&gt;</h2>
-        <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="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></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.space_left_fourth</code></pre>
-        <div class="space_left_fourth">
-          <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 h_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="disabled"/></div>
-          <div class="flex_column"><input type="button" value="Auswählen"></div>
-          <div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
-        </div>
-        <form 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>
+	<!-- {{ page.fileSlug }}.page -->
+	<section class="sec_main_center">
+		<header class="header_txt">
+			<h1>Sammlung formatierter Elemente</h1>
+			<p>Die Elemente werden fortlaufend komplexer</p>
+		</header>
+		<article>
+			<h2>Bereiche</h2>
+			<h3>section</h3>
+			<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
+			<section class="overflow">
+				<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></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.space_left_fourth>(hr+p+hr)</code></pre>
+			<div class="space_left_fourth">
+				<hr/>
+				<p>Eingerückter Inhalt</p>
+				<hr/>
+			</div>
+			<pre class="pre_code"><code>div.overflow>(nav.float_space_left>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" 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 $})*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>
+			<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
+			<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 h_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="disabled"/></div>
+				<div class="flex_column"><input type="button" value="Auswählen"></div>
+				<div class="flex_column"><input type="submit" value="Senden" disabled="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="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
-          </li>
-          <li>
-            <a href="">Work</a>
-          </li>
-          <li>
-            <a href="">Projects</a>
-          </li>
-        </ul>
+			<form 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>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="/art/bullet.gif" 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="/art/bullet.gif" 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="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">
-            <desc>Background flag</desc>
-            <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>
-  </div>
+			<h2>Gruppierung</h2>
+			<h3>p</h3>
+			<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
+			<p class="txt_right">Rechts</p>
+			<p class="txt_center">Mittig</p>
+			<p class="txt_left">Links</p>
+			<h3>h*</h3>
+			<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
+			<h3 class="txt_color_dark">Dunkle Überschrift</h3>
+			<p class="txt_tiny">Mit winzigem Textabsatz</p>
+			<pre class="pre_code"><code>a>h4</code></pre>
+			<a href="">
+				<h4>Überschrift als Block-Verweis</h4>
+			</a>
+			<h1>Überschrift 1</h1>
+			<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
+			<h2>Überschrift 2</h2>
+			<h2>kann das ebenso.</h2>
+
+			<h3>hr</h3>
+			<pre class="pre_code"><code>hr.space_even_half</code></pre>
+			<hr class="space_even_half">
+			<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
+			<hr class="hr_dotted space_even_fourth">
+			<h3>ul</h3>
+			<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="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
+				</li>
+				<li>
+					<a href="">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="/art/demo/bullet.gif" 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="/art/demo/bullet.gif" 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="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">
+					<desc>Background flag</desc>
+					<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>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-  <!-- build:js js/main.concat.min.js -->
-  <script src="{{ pageBase }}js/variables.js"></script>
-  <script src="{{ pageBase }}js/functions.js"></script>
-  <script src="{{ pageBase }}js/global.js"></script>
-  {{ log.asset(true) }}
-  {{ log.log('Assets loaded.', assetsLoaded) }}
-  <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      // jq-sticky-anything
-      $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
-    });
-  </script>
+	{{ super() }}
+	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+	{{ log.asset(true) }}
+	{{ log.log('Assets loaded.', assetsLoaded) }}
+	<script>
+		// Page specific
+		// ------------------------------------------------------------------------------
+		$(document).ready(function () {
+			// jq-sticky-anything
+			$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
+		});
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 9f3797f..a1a4bd4 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
+Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index ac1dc6c..3942e0a 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,18 +1,18 @@
 .body_drag {
 	height: 100vh;
 	// padding: $space_basic;
+
+	button {
+		@extend .io_button;
+		position: fixed;
+		top: 8px;
+		right: 8px;
+		margin: 0;
+	}
 }
 
 #space {
 	position: relative;
 	height: 100%;
 	background-color: $color-dark;
-}
-
-#addFrame {
-	@extend .io_button;
-	position: fixed;
-	top: 8px;
-	right: 8px;
-	margin: 0;
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
new file mode 100644
index 0000000..e52b8af
--- /dev/null
+++ b/source/style/modules/ui/_form_module.scss
@@ -0,0 +1,38 @@
+.body_form {
+	margin: 0;
+	background-color: $color-dark;
+}
+
+#head {
+	// display: flex;
+
+	button {
+			@extend .io_button;
+	}
+
+	h1 {
+		margin: 0;
+	}
+}
+
+#grid {
+	display: grid;
+	gap: 8px;
+	grid-template-columns: repeat(4, 1fr);
+	grid-auto-rows: minmax(64px, auto);
+	margin-inline: $space_small;
+}
+
+#grid>div {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	background-color: aquamarine;
+}
+
+#grid>div:first-child {
+	grid-column: 1 / 3;
+	background-color: violet;
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index e6886e8..645e1f5 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -44,7 +44,6 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: white;
-	pointer-events: none;
 }
 
 #bar {
@@ -113,7 +112,6 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: black;
-	pointer-events: none;
 
 	h1,
 	p,
@@ -154,19 +152,27 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	height: 100vh;
-	background-color: $color_back_basic;
 }
 
 #agreement {
 	flex-direction: column;
+	background-color: $bravo_color;
+	user-select: none;
 
 	h1 {
 		margin-top: 0;
+		color: $color_brightest;
 	}
 }
 
 #idle {
-	pointer-events: none;
+	background-color: $color_back_basic;
+	transition: background-color 4s;
+
+	&:hover>.mouse_over {
+		background-color: transparent !important;
+		transition: background-color $duration_basic $timing_basic 0s !important;
+	}
 }
 
 .toast {
@@ -188,10 +194,11 @@ $z-indexes: (
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	// background-color: rgba(black, .25);
-	background-color: $color_darker;
+	background-color: rgba($color_bright, .5);
+	font-family: $family_text_mono;
 }
 
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
\ No newline at end of file
+@import "modules/ui/drag_module";
+@import "modules/ui/form_module";
\ No newline at end of file
diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk
index 0939550..1d948a2 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@@ -1,29 +1,30 @@
 <!-- demo.app.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">
 
-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% block meta %}
-        {% include "demo/partials/_meta.njk" %}
-        <base href="/">
-      {% endblock %}
+			{% block meta %}
+				{% include "demo/partials/_meta.njk" %}
+				<base href="/">
+			{% endblock %}
 
-      {% block links %}
-      {% endblock %}
+			{% block links %}{% endblock %}
 
-    {% endblock %}
-  </head>
+		{% endblock %}
+	</head>
 
-  <body class="{{ bodyClass }}">
-    {% block body %}{% endblock %}
+	<body class="{{ bodyClass }}">
+		{% block body %}{% endblock %}
 
-    {% block script %}
-    {% endblock %}
+		{% block script %}
+			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+			<script src="{{ pageBase }}js/variables.js"></script>
+		{% endblock %}
 
-  </body>
+	</body>
 </html>
\ No newline at end of file
diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk
index 3801125..c8aeed3 100644
--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@@ -2,18 +2,18 @@
 {% extends "hippie/_default.njk" %}
 
 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	{% include "demo/partials/_meta.njk" %}
+	<base href="/">
 {% endblock %}
 
 {% block links %}
-  {{ super() }}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-  {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
-  {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
+	{{ super() }}
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+	{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
+	{# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+	{{ super() }}
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/demo/_main.njk b/source/templates/demo/_main.njk
index c0d545d..c2797e8 100644
--- a/source/templates/demo/_main.njk
+++ b/source/templates/demo/_main.njk
@@ -2,25 +2,20 @@
 {% extends "hippie/_main.njk" %}
 
 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	{% include "demo/partials/_meta.njk" %}
+	<base href="/">
 {% endblock %}
 
 {% block links %}
-  {{ super() }}
-{% if hippie.legacyMode %}
-  <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
-  <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
-  <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
-  <!--Only use one of the above!-->
-{% endif %}
+	{{ super() }}
+	{% if hippie.legacyMode %}
+		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
+		<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
+		<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
+		<!--Only use one of the above!-->
+	{% endif %}
 
-  <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
-  <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-  <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
-{% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-{% endblock %}
+	<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+	<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/demo/_maintenance.njk b/source/templates/demo/_maintenance.njk
index 539b432..da94505 100644
--- a/source/templates/demo/_maintenance.njk
+++ b/source/templates/demo/_maintenance.njk
@@ -2,11 +2,11 @@
 {% extends "hippie/_maintenance.njk" %}
 
 {% block meta %}
-  {% include "demo/partials/_meta.njk" %}
-  <base href="/">
+	{% include "demo/partials/_meta.njk" %}
+	<base href="/">
 {% endblock %}
 
 {% block links %}
-  {{ super() }}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
+	{{ super() }}
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/_default.njk b/source/templates/hippie/_default.njk
index 2fcbcd1..8756e7f 100644
--- a/source/templates/hippie/_default.njk
+++ b/source/templates/hippie/_default.njk
@@ -1,5 +1,7 @@
 <!-- default.template -->
-{% import "hippie/macros/_log.njk" as log %}
+{# {% if hippie.debugMode %} #}
+  {% import "hippie/macros/_log.njk" as log %}
+{# {% endif %} #}
 
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk
index 9a76aad..443b555 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -3,46 +3,67 @@
 
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">
 
-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% block meta %}
+				{% include "hippie/partials/_head_meta.njk" %}
+			{% endblock %}
 
-      {% include "hippie/partials/_head_script.njk" %}
-      {{ log.debug(hippie.debugMode, true) }}
-      {{ log.start() }}
+			{% include "hippie/partials/_head_script.njk" %}
+			{{ log.debug(hippie.debugMode, true) }}
+			{{ log.start() }}
 
-      {% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
+			{% block links %}
+				{% include "hippie/partials/_head_links.njk" %}
+			{% endblock %}
 
-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
-  </head>
+			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+		{% endblock %}
+	</head>
 
-  <body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
-    {% include "hippie/partials/_body_hover.njk" %}
-    <div id="root">
-      {% include "hippie/partials/_header.njk" %}
+	<body class="{{ bodyClass }}">
+		{{ log.log('BODY start') }}
+		{% include "hippie/partials/_body_hover.njk" %}
+		{% include "hippie/partials/_body_nav.njk" %}
+		<div id="root">
+			{% include "hippie/partials/_header.njk" %}
 
-      <main class="main_site">
-        {% block main %}{% endblock %}
-      </main>
+			<main class="main_site">
+				{% block main %}{% endblock %}
+			</main>
 
-      {% include "hippie/partials/_footer.njk" %}
-    </div>
+			{% include "hippie/partials/_footer.njk" %}
+		</div>
 
-    {% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
-    {% endblock %}
+		{% block script %}
+			{{ log.log('BODY        :: Loading script assets...') }}
+			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+			<!-- build:js js/main.concat.min.js -->
+			{# // TODO: Remove dependecy to jQuery; at least maek it optional #}
+			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+			<script src="{{ pageBase }}js/variables.js"></script>
+			<script src="{{ pageBase }}js/functions.js"></script>
+			<script src="{{ pageBase }}js/global.js"></script>
+			<script>
+				// Create instances of objects made by contructor functions
+				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
 
-    {{ log.log('BODY end    :: Page script might still be loading.') }}
-  </body>
+				document.addEventListener('scroll', () => {
+					scrollUi.check();
+				});
+
+				$(document).ready(function () {
+					logPerf('EVENT       :: jQuery \'ready\' event fired.');
+				});
+			</script>
+		{% endblock %}
+
+		{{ log.log('BODY end    :: Page script might still be loading.') }}
+	</body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk
index 975874b..0741534 100644
--- a/source/templates/hippie/_maintenance.njk
+++ b/source/templates/hippie/_maintenance.njk
@@ -1,27 +1,27 @@
 <!-- maintenance.template -->
-{% import "hippie/macros/footer-status.njk" as status %}
+{% import "hippie/macros/_footer.njk" as footer %}
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">
 
-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% block meta %}
+				{% include "hippie/partials/_head_meta.njk" %}
+			{% endblock %}
 
-      {% block links %}
-        <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
-      {% endblock %}
-    {% endblock %}
-  </head>
+			{% block links %}
+				<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
+			{% endblock %}
+		{% endblock %}
+	</head>
 
-  <body class="{{ bodyClass }}">
-    {% block body %}
-      {{ status.footer() }}
-    {% endblock %}
-  </body>
+	<body class="{{ bodyClass }}">
+		{% block body %}
+			{{ footer.status() }}
+		{% endblock %}
+	</body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_footer.njk b/source/templates/hippie/macros/_footer.njk
new file mode 100644
index 0000000..4b27499
--- /dev/null
+++ b/source/templates/hippie/macros/_footer.njk
@@ -0,0 +1,23 @@
+{% macro status(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port') %}
+	<footer class="pos_abs pin_bottom width_full">
+		<address class="txt_center">Kontakt:
+			<a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
+			* Server:
+			{{ app }}/{{ version }}
+			({{ system }}) * Domain:
+			{{ domain }}
+		</address>
+	</footer>
+{% endmacro %}
+
+{% macro pinned(pos = 'bottom') %}
+	<footer class="pos_abs pin_{{ pos }} pin_right pin_left">
+		<p class="txt_center">Unten fixiert</p>
+	</footer>
+{% endmacro %}
+
+{% macro main() %}
+	<footer class="footer_site">
+		<div id="end"></div>
+	</footer>
+{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_gate.njk b/source/templates/hippie/macros/_gate.njk
index f273edb..3ae1247 100644
--- a/source/templates/hippie/macros/_gate.njk
+++ b/source/templates/hippie/macros/_gate.njk
@@ -1,31 +1,30 @@
-<!-- gates.macro -->
 {% macro list(name, url, image, links) %}
-  <article class="portal__entry">
-    <section>
-      <h2>
-        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
-      </h2>
-      <a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
-        <img src="{{ image.src }}" alt="{{ image.alt }}"/>
-      </a>
-      {% if links %}
-        <ul class="portal__list">
-          {% for link in links %}
-            <li>
-              <a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </section>
-  </article>
+	<article class="portal__entry">
+		<section>
+			<h2>
+				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+			</h2>
+			<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+				<img src="{{ image.src }}" alt="{{ image.alt }}"/>
+			</a>
+			{% if links %}
+				<ul class="portal__list">
+					{% for link in links %}
+						<li>
+							<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			{% endif %}
+		</section>
+	</article>
 {% endmacro %}
 {% macro simple(name, url) %}
-  <article class="portal__entry">
-    <section>
-      <h2>
-        <a class="a_discreet" href="{{ url }}">{{ name }}</a>
-      </h2>
-    </section>
-  </article>
+	<article class="portal__entry">
+		<section>
+			<h2>
+				<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+			</h2>
+		</section>
+	</article>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_header.njk b/source/templates/hippie/macros/_header.njk
new file mode 100644
index 0000000..19cac15
--- /dev/null
+++ b/source/templates/hippie/macros/_header.njk
@@ -0,0 +1,5 @@
+{% macro main() %}
+	<header class="header_site">
+		<div id="begin"></div>
+	</header>
+{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_log.njk b/source/templates/hippie/macros/_log.njk
index 98ceaa3..e469527 100644
--- a/source/templates/hippie/macros/_log.njk
+++ b/source/templates/hippie/macros/_log.njk
@@ -1,24 +1,24 @@
 {% macro start() %}
-  <script>
-    logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
-    logPerf('HEAD start  :: Debugging performance...', debugOn);
-  </script>
+	<script>
+		logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+		logPerf('HEAD start  :: Debugging performance...', debugOn);
+	</script>
 {% endmacro %}
 {% macro log(msg, arg = '') %}
-  <script>
-    logPerf('{{ msg }}', {{ arg }});
-  </script>
+	<script>
+		logPerf('{{ msg }}', {{ arg }});
+	</script>
 {% endmacro %}
 {% macro debug(state = false, display = false, assets = false) %}
-  {# {{ set hippie.debugMode = state }} #}
-  <script>
-    debugOn = {{ state }};
-    debugOnScreen = {{ display }};
-    assetsLoaded = {{ assets }};
-  </script>
+	{# {{ set hippie.debugMode = state }} #}
+	<script>
+		debugOn = {{ state }};
+		debugOnScreen = {{ display }};
+		assetsLoaded = {{ assets }};
+	</script>
 {% endmacro %}
 {% macro asset(state = false) %}
-  <script>
-    assetsLoaded = {{ state }};
-  </script>
+	<script>
+		assetsLoaded = {{ state }};
+	</script>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_nav.njk b/source/templates/hippie/macros/_nav.njk
index 4f04ad4..4fc5d93 100644
--- a/source/templates/hippie/macros/_nav.njk
+++ b/source/templates/hippie/macros/_nav.njk
@@ -1,13 +1,13 @@
 {% macro main(data, active = '') %}
-  <nav>
-    <ul>
-      {% for link in data %}
-        <li{%if active == link.text %} class="active_txt" {% endif %}>
-          {%if active == link.text %}{{ link.text }}{%else%}
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
+	<nav>
+		<ul>
+			{% for link in data %}
+				<li{%if active == link.text %} class="active_txt" {% endif %}>
+					{%if active == link.text %}{{ link.text }}{%else%}
+						<a href="{{ link.href }}">{{ link.text }}</a>
+					{% endif %}
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk
index 0097328..2e8d298 100644
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@@ -1,43 +1,47 @@
-{% macro email(class='', text='name@domain.tld') %}
-<a class="{{ class }}" href="">{{ text }}</a>
-{# {{ 'name@domain.tld' | urlize | safe }} #}
+{% macro email(class = '', text = 'name@domain.tld') %}
+	<a class="{{ class }}" href="">{{ text }}</a>
+	{# {{ 'name@domain.tld' | urlize | safe }} #}
 {% endmacro %}
-{% macro link(class='', text='domain.tld', href='http://domain.internal') %}
-<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
+
+{% macro link(class = '', text = 'domain.tld', href = 'http://domain.internal') %}
+	<a class="{{ class }}" href="{{ href }}">{{ text }}</a>
 {% endmacro %}
-{% macro name(class='', text='Vorname Nachname') %}
-<span class="{{ class }}">{{ text }}</span>
+
+{% macro name(class = '', text = 'Vorname Nachname') %}
+	<span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
-{% macro address(class='', text='Straße Nr., PLZ Ort') %}
-<span class="{{ class }}">{{ text }}</span>
+
+{% macro address(class = '', text = 'Straße Nr., PLZ Ort') %}
+	<span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
-{% macro brand(class='', name='Marke') %}
-<div class="{{ class }}">
-	{# <img src="" alt="Brand logo"> #}
-	<svg
+
+{% macro brand(class = '', name = 'Marke') %}
+	<div class="{{ class }}">
+		{# <img src="" alt="Brand logo"> #}
+		<svg
 		width="128"
 		height="128"
 		viewBox="0 0 128 128"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
 		xmlns:svg="http://www.w3.org/2000/svg">
-		<g>
-			<rect
+			<g>
+				<rect
 				style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
 				width="126"
 				height="126"
 				x="1"
-				y="1" />
-			<circle
+				y="1"/>
+				<circle
 				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
 				cx="64"
 				cy="64"
-				r="63" />
-			<path
+				r="63"/>
+				<path
 				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
-		</g>
-	</svg>
-	<h1>{{ name }}</h1>
-</div>
+				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
+			</g>
+		</svg>
+		<h1>{{ name }}</h1>
+	</div>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_song.njk b/source/templates/hippie/macros/_song.njk
index 79083c0..28c83d4 100644
--- a/source/templates/hippie/macros/_song.njk
+++ b/source/templates/hippie/macros/_song.njk
@@ -1,12 +1,12 @@
 {% macro simple(index, data, content) %}
-  <article class="songbook_song">
-    <header>
-      <h2>{{ data.title }}</h2>
-      <h6>{{ data.releaseDate }}</h6>
-      <p>{{ data.description }}</p>
-    </header>
-    {# <pre class="pre_code"><code>{{ content }}</code></pre> #}
-    {{ content | safe }}
-    <footer>{{ index }}</footer>
-  </article>
+	<article class="songbook_song">
+		<header>
+			<h2>{{ data.title }}</h2>
+			<h6>{{ data.releaseDate }}</h6>
+			<p>{{ data.description }}</p>
+		</header>
+		{# <pre class="pre_code"><code>{{ content }}</code></pre> #}
+		{{ content | safe }}
+		<footer>{{ index }}</footer>
+	</article>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_state.njk b/source/templates/hippie/macros/_state.njk
index 3b3a333..63671d4 100644
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@@ -1,15 +1,14 @@
-<!-- states.macro -->
-{% macro coord(id, text='X: #, Y: ##') %}
-  <span id="{{ id }}">{{ text }}</span>
+{% macro coord(id, text = 'X: #, Y: ##') %}
+	<span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
-{% macro time(id, text='00:00:00', postfix=' Uhr') %}
-  <span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
+{% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
+	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
 {% macro date() %}
-  <span id="{{ id }}">
-    <span id="day">Wochentag</span>,
-    <span id="dayNumb">##</span>.
-    <span id="month">Monat</span>
-    <span id="year">####</span>
-  </span>
+	<span id="{{ id }}">
+		<span id="day">Wochentag</span>,
+		<span id="dayNumb">##</span>.
+		<span id="month">Monat</span>
+		<span id="year">####</span>
+	</span>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/footer-status.njk b/source/templates/hippie/macros/footer-status.njk
deleted file mode 100644
index 6668607..0000000
--- a/source/templates/hippie/macros/footer-status.njk
+++ /dev/null
@@ -1,17 +0,0 @@
-{% macro footer(email = 'admin@domain.tld', app = 'Application', version = 'ver.s.ion', system = 'System Name', domain = 'domain.tld:port', type) %}
-
-  {% if not type or type == 'status' %}
-    <footer class="pos_abs pin_bottom width_full">
-      <address class="txt_center">Kontakt:
-        <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a>
-        * Server:
-        {{ app }}/{{ version }}
-        ({{ system }}) * Domain:
-        {{ domain }}</address>
-    </footer>
-  {% else %}
-    <footer class="pos_abs pin_bottom width_full">
-      <p>Platzhalter unten fixiert</p>
-    </footer>
-  {% endif %}
-{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/_body_hover.njk b/source/templates/hippie/partials/_body_hover.njk
index b76167d..08311a3 100644
--- a/source/templates/hippie/partials/_body_hover.njk
+++ b/source/templates/hippie/partials/_body_hover.njk
@@ -1,2 +1,2 @@
-<!-- body_hover.partial -->
+<!-- hover.partial -->
 <div id="js_mob"></div>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk
index 58fed6d..632054f 100644
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@@ -1,4 +1,4 @@
-<!-- body_nav.partial -->
+<!-- nav.partial -->
 <div class="pos_rel">
   <nav class="nav_page_meta">
     <ul>
diff --git a/source/templates/hippie/partials/_footer.njk b/source/templates/hippie/partials/_footer.njk
index 30fb517..3b56531 100644
--- a/source/templates/hippie/partials/_footer.njk
+++ b/source/templates/hippie/partials/_footer.njk
@@ -1,4 +1,3 @@
 <!-- footer.partial -->
-<footer class="footer_site">
-  <div id="end"></div>
-</footer>
\ No newline at end of file
+{% import "hippie/macros/_footer.njk" as footer %}
+{{ footer.main() }}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/_head_links.njk b/source/templates/hippie/partials/_head_links.njk
index b7afb2d..c95a39b 100644
--- a/source/templates/hippie/partials/_head_links.njk
+++ b/source/templates/hippie/partials/_head_links.njk
@@ -1,4 +1,4 @@
-<!-- head.links.partial -->
+<!-- links.partial -->
 {# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
 <link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
 <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">
diff --git a/source/templates/hippie/partials/_head_meta.njk b/source/templates/hippie/partials/_head_meta.njk
index b55c7c2..a21d094 100644
--- a/source/templates/hippie/partials/_head_meta.njk
+++ b/source/templates/hippie/partials/_head_meta.njk
@@ -1,4 +1,4 @@
-<!-- head.meta.partial -->
+<!-- meta.partial -->
 <meta name="robots" content="noindex">
 <meta name="generator" content="{{ eleventy.generator }}">
 <meta name="author" content="">
diff --git a/source/templates/hippie/partials/_head_script.njk b/source/templates/hippie/partials/_head_script.njk
index ccb6ddc..7002ee5 100644
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@@ -1,4 +1,4 @@
-<!-- head.script.partial -->
+<!-- script.partial -->
 <script>
   // Entry script at page init
   let debugOn = {{ hippie.debugMode }};
diff --git a/source/templates/hippie/partials/_header.njk b/source/templates/hippie/partials/_header.njk
index d21c54c..2531200 100644
--- a/source/templates/hippie/partials/_header.njk
+++ b/source/templates/hippie/partials/_header.njk
@@ -1,2 +1,3 @@
 <!-- header.partial -->
-<header class="header_site"></header>
\ No newline at end of file
+{% import "hippie/macros/_header.njk" as header %}
+{{ header.main() }}
\ No newline at end of file