diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
new file mode 100644
index 0000000..9f2778b
--- /dev/null
+++ b/source/screens/demo/examples/10print.liquid
@@ -0,0 +1,73 @@
+---
+title: 10print
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block head %}
+{{ block.super -}}
+<style>
+	canvas {
+		display: block;
+	}
+</style>
+{% endblock %}
+
+{% block body %}
+<canvas id="10print"></canvas>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('10print');
+	const ctx = canvas.getContext('2d');
+
+	const lineWidth = 20;
+	const randomSeed = Math.random;
+
+	// Function to draw the 10PRINT pattern
+	function draw10Print() {
+		// Clear the canvas
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		// Set line style
+		ctx.strokeStyle = 'black';
+		ctx.lineWidth = 2;
+
+		// Loop through the canvas grid
+		for (let x = 0; x < canvas.width; x += lineWidth) {
+			for (let y = 0; y < canvas.height; y += lineWidth) {
+				// Randomly choose between two diagonal lines
+				if (randomSeed() > 0.5) {
+					// Draw line from top-left to bottom-right
+					ctx.beginPath();
+					ctx.moveTo(x, y);
+					ctx.lineTo(x + lineWidth, y + lineWidth);
+					ctx.stroke();
+				} else {
+					// Draw line from top-right to bottom-left
+					ctx.beginPath();
+					ctx.moveTo(x + lineWidth, y);
+					ctx.lineTo(x, y + lineWidth);
+					ctx.stroke();
+				}
+			}
+		}
+	}
+
+	function resizeCanvas() {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	}
+
+	resizeCanvas();
+	draw10Print();
+
+	// window.addEventListener('resize', resizeCanvas);
+	canvas.addEventListener('click', draw10Print);
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/blog.njk b/source/screens/demo/examples/blog.njk
new file mode 100644
index 0000000..0ffe2e8
--- /dev/null
+++ b/source/screens/demo/examples/blog.njk
@@ -0,0 +1,51 @@
+---
+title: Blog
+tags:
+  - demoExample
+---
+{% set pageBase = "../" %}
+{% set pageId = page.fileSlug %}
+
+{% extends "demo/_default.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% import "hippie/macros/_song.njk" as song %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="sec_main_center">
+		<header class="header_txt">
+			<h1>Blog</h1>
+		</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 post in collections.article -%}
+			{{ post.content }}
+		{%- endfor -%}
+		<hr/>
+		<address>{{ ph.name() }}</address>
+	</div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/blog/article.md b/source/screens/demo/examples/blog/article.md
new file mode 100644
index 0000000..0200c08
--- /dev/null
+++ b/source/screens/demo/examples/blog/article.md
@@ -0,0 +1,11 @@
+---
+tags: 
+  - blog
+  - article
+title: "Artikel"
+releaseDate: JJJJ
+description: Text
+---
+# Titel
+
+Inhalt
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
new file mode 100644
index 0000000..da8f5a4
--- /dev/null
+++ b/source/screens/demo/examples/clock.liquid
@@ -0,0 +1,112 @@
+---
+title: Clock
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign bodyClass = "body_clock" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<canvas id="clock" width="512" height="512"></canvas>
+	<p>
+		<button id="toggleFormat">12-Stunden-Format</button>
+	</p>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('clock');
+	const ctx = canvas.getContext('2d');
+	let is24HourFormat = true;
+	const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
+	const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
+	const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
+
+	document.getElementById('toggleFormat').addEventListener('click', () => {
+		is24HourFormat = !is24HourFormat;
+		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+	});
+
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+		const centerX = canvas.width / 2;
+		const centerY = canvas.height / 2;
+		const lineWidth = 16;
+		const lineGap = 8;
+		const maxSize = canvas.width / 2 - lineWidth;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		function drawArc(value, maxValue, radius, strokeStyle) {
+			const startAngle = -0.5 * Math.PI; // Start at the top
+			const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
+
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+			ctx.lineWidth = 16;
+			ctx.strokeStyle = strokeStyle;
+			ctx.stroke();
+		}
+
+		drawArc(
+			(seconds === 0) ? 60 : seconds,
+			60,
+			maxSize,
+			'black'
+		);
+		drawArc(
+			(minutes === 0) ? 60 : minutes,
+			60,
+			maxSize - lineWidth - lineGap,
+			'lightgrey'
+		);
+		drawArc(
+			is24HourFormat ? hours : hours % 12,
+			is24HourFormat ? 24 : 12,
+			maxSize - (lineWidth + lineGap) * 2,
+			'white'
+		);
+		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
+		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
+		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
+	}
+
+	function updateRings() {
+		const currentDate = new Date();
+		const currentSeconds = currentDate.getSeconds();
+		const currentMinutes = currentDate.getMinutes();
+		const currentHours = currentDate.getHours();
+		const currentDayOfWeek = getNumericWeekday(currentDate);
+		const currentDayOfMonth = currentDate.getDate();
+		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
+		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
+
+		drawRings(
+			currentSeconds,
+			currentMinutes,
+			currentHours,
+			currentDayOfWeek,
+			currentDayOfMonth,
+			currentMonth,
+			daysInCurrentMonth
+		);
+	}
+
+	// TODO: Parameter für Wochenstart ergänzen
+	function getNumericWeekday(date) {
+		const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
+		return (weekday === 0) ? 7 : weekday;
+	}
+
+	function daysInMonth(month, year) {
+		return new Date(year, month, 0).getDate();
+	}
+
+	updateRings();
+	setInterval(updateRings, 1000);
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
new file mode 100644
index 0000000..b4b1d98
--- /dev/null
+++ b/source/screens/demo/examples/start.liquid
@@ -0,0 +1,84 @@
+---
+title: Start
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign pageId = page.fileSlug -%}
+{% assign bodyClass = "body_start" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
+		<input id="query" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+		<input class="button_io" value="Suchen" type="submit"/>
+	</form>
+	<div class="blocks">
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+				<ul>
+					<li>
+						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
+					</li>
+				</ul>
+			</section>
+		</article>
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+			</section>
+		</article>
+	</div>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
+	const defaultOptions = {
+		kl: 'de-de',
+		kp: '-2',
+		kz: '-1',
+		// kae: 't',
+		k1: '-1'
+	};
+	let options = Object.assign({}, defaultOptions);
+
+	function setOptions(jsonOptions) {
+		if (!jsonOptions || typeof jsonOptions !== 'object') return;
+
+		options = Object.assign({}, options, jsonOptions);
+	}
+
+	function buildSearchUrl(query) {
+		const base = 'https://duckduckgo.com/';
+		const params = new URLSearchParams({q: query});
+
+		for (const [k, v] of Object.entries(options)) {
+			if (v === undefined || v === null || v === '') continue;
+
+			params.set(k, String(v));
+		}
+
+		return base + '?' + params.toString();
+	}
+
+	document.getElementById('www-search').addEventListener('submit', function (e) {
+		e.preventDefault();
+		const query = document.getElementById('query').value.trim();
+
+		if (!query) return;
+
+		const url = buildSearchUrl(query);
+
+		window.open(url, '_blank', 'noopener');
+	});
+
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/tile.liquid
similarity index 96%
rename from source/screens/demo/examples/ui/start.liquid
rename to source/screens/demo/examples/ui/tile.liquid
index 261cb16..4bcd8c4 100644
--- a/source/screens/demo/examples/ui/start.liquid
+++ b/source/screens/demo/examples/ui/tile.liquid
@@ -1,5 +1,5 @@
 ---
-title: Start
+title: Tile
 tags:
 - ui
 ---
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
new file mode 100644
index 0000000..1f19b26
--- /dev/null
+++ b/source/screens/demo/index.liquid
@@ -0,0 +1,76 @@
+---
+permalink: "/"
+title: Index
+tags:
+- demoIndex
+---
+{% assign pageBase = hippie.pageBase -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "h_full_view" -%}
+{%- layout "hippie/full.liquid" %}
+
+{% block body %}
+<div class="wrap">
+	<div class="hello">
+		<h2>This is {{ hippie.brand | upcase }}</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">
+			{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
+
+			{% for link in pagesByTitle %}
+				<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 %}
+{{ block.super -}}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
+<script>
+	// Page script
+</script>
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk
deleted file mode 100644
index c50c516..0000000
--- a/source/screens/demo/index.njk
+++ /dev/null
@@ -1,82 +0,0 @@
----
-permalink: "/"
-title: Index
-tags:
-  - demoIndex
----
-{% set pageBase = hippie.pageBase %}
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_default.njk" %}
-
-{% block title %}Index{% endblock %}
-{% block head %}
-	{{ 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>
-{% endblock %}
-
-{% block 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/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
new file mode 100644
index 0000000..b6914e5
--- /dev/null
+++ b/source/screens/demo/pages/blank.liquid
@@ -0,0 +1,10 @@
+---
+title: Blank
+---
+{% assign pageBase = "../../" -%}
+{% assign pageId = page.fileSlug -%}
+{%- layout "hippie/full.liquid" %}
+
+{% block body %}
+<!-- {{ title }} -->
+{% endblock %}
diff --git a/source/screens/demo/pages/blank.njk b/source/screens/demo/pages/blank.njk
deleted file mode 100644
index 3ff646f..0000000
--- a/source/screens/demo/pages/blank.njk
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: Blank
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_default.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<!-- {{ page.fileSlug }}.page -->
-{% endblock %}
-
-{% block script %}
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
index 026c6da..5da6a7c 100644
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@@ -1,5 +1,5 @@
 ---
-title: "Default"
+title: Default
 ---
 {% assign pageBase = "../" -%}
 {% assign pageId = page.fileSlug -%}
diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid
new file mode 100644
index 0000000..eb3b98c
--- /dev/null
+++ b/source/screens/demo/pages/error/304.liquid
@@ -0,0 +1,20 @@
+---
+title: 304
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Umleitung</h3>
+<p>Unverändert <dfn>Not Modified</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
+	<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird
+		deshalb nicht übertragen. Zu den Einzelheiten siehe <a
+			href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.
+	</p>
+	<p class="quote_source"><a
+			href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/304.njk b/source/screens/demo/pages/error/304.njk
deleted file mode 100644
index 1d47451..0000000
--- a/source/screens/demo/pages/error/304.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 304
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Umleitung</h3>
-  <p>Unverändert <dfn>Not Modified</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
-    <p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid
new file mode 100644
index 0000000..6d480e8
--- /dev/null
+++ b/source/screens/demo/pages/error/400.liquid
@@ -0,0 +1,17 @@
+---
+title: 400
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/400.njk b/source/screens/demo/pages/error/400.njk
deleted file mode 100644
index 087b9a8..0000000
--- a/source/screens/demo/pages/error/400.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 400
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid
new file mode 100644
index 0000000..3bef772
--- /dev/null
+++ b/source/screens/demo/pages/error/401.liquid
@@ -0,0 +1,18 @@
+---
+title: 401
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt
+		werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/401.njk b/source/screens/demo/pages/error/401.njk
deleted file mode 100644
index f38c3f9..0000000
--- a/source/screens/demo/pages/error/401.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 401
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die Anfrage kann nicht ohne gültige Authentifizierung durchgeführt werden. Wie die Authentifizierung durchgeführt werden soll, wird im „WWW-Authenticate“-Header-Feld der Antwort übermittelt.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid
new file mode 100644
index 0000000..94a245f
--- /dev/null
+++ b/source/screens/demo/pages/error/403.liquid
@@ -0,0 +1,18 @@
+---
+title: 403
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer
+		nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/403.njk b/source/screens/demo/pages/error/403.njk
deleted file mode 100644
index 03904e4..0000000
--- a/source/screens/demo/pages/error/403.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 403
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid
new file mode 100644
index 0000000..eadf7ee
--- /dev/null
+++ b/source/screens/demo/pages/error/404.liquid
@@ -0,0 +1,19 @@
+---
+title: 404
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Hier ist nichts. <dfn>Not Found</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine
+		Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote
+		Links bezeichnet.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/404.njk b/source/screens/demo/pages/error/404.njk
deleted file mode 100644
index bebd4f5..0000000
--- a/source/screens/demo/pages/error/404.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 404
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Hier ist nichts. <dfn>Not Found</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid
new file mode 100644
index 0000000..0e50541
--- /dev/null
+++ b/source/screens/demo/pages/error/408.liquid
@@ -0,0 +1,17 @@
+---
+title: 408
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Client-Fehler</h3>
+<p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
+	<p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/408.njk b/source/screens/demo/pages/error/408.njk
deleted file mode 100644
index c5e10e0..0000000
--- a/source/screens/demo/pages/error/408.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 408
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Client-Fehler</h3>
-  <p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
-    <p>Innerhalb der vom Server erlaubten Zeitspanne wurde keine vollständige Anfrage des Clients empfangen.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid
new file mode 100644
index 0000000..96489d3
--- /dev/null
+++ b/source/screens/demo/pages/error/500.liquid
@@ -0,0 +1,17 @@
+---
+title: 500
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Server-Fehler</h3>
+<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
+	<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/500.njk b/source/screens/demo/pages/error/500.njk
deleted file mode 100644
index d04c5c8..0000000
--- a/source/screens/demo/pages/error/500.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 500
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Server-Fehler</h3>
-  <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
-    <p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid
new file mode 100644
index 0000000..46647d9
--- /dev/null
+++ b/source/screens/demo/pages/error/503.liquid
@@ -0,0 +1,19 @@
+---
+title: 503
+---
+{% assign pageBase = "../../../" -%}
+{% assign bodyClass = "body_status" %}
+{%- layout "hippie/status.liquid" %}
+
+{% block main %}
+{{ block.super -}}
+<h3>Server-Fehler</h3>
+<p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
+<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
+	<p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein
+		„Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage
+		eventuell bearbeitet werden könnte.</p>
+	<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a>
+	</p>
+</blockquote>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/error/503.njk b/source/screens/demo/pages/error/503.njk
deleted file mode 100644
index f215a54..0000000
--- a/source/screens/demo/pages/error/503.njk
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 503
----
-{% set pageBase = "../../" %}
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_status" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<main class="main_site">
-  <h1>{{ title }}</h1>
-  <h3>Server-Fehler</h3>
-  <p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
-  <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
-    <p>Der Server steht temporär nicht zur Verfügung, zum Beispiel wegen Überlastung oder Wartungsarbeiten. Ein „Retry-After“-Header-Feld in der Antwort kann den Client auf einen Zeitpunkt hinweisen, zu dem die Anfrage eventuell bearbeitet werden könnte.</p>
-    <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
-  </blockquote>
-</main>
-{{ super() }}
-{% endblock %}
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid
new file mode 100644
index 0000000..a4943f2
--- /dev/null
+++ b/source/screens/demo/pages/maintenance.liquid
@@ -0,0 +1,13 @@
+---
+title: Maintenance
+---
+{% assign pageBase = "../../" -%}
+{% assign pageClass = "h_full_view" -%}
+{%- layout "hippie/status.liquid" %}
+
+{% block body %}
+<hgroup id="root" class="txt_center">
+	<h1 class="txt_hero txt_gradient">HIPPIE</h1>
+	<p>Diese Seite wird gerade gewartet.</p>
+</hgroup>
+{% endblock %}
diff --git a/source/screens/demo/pages/maintenance.njk b/source/screens/demo/pages/maintenance.njk
deleted file mode 100644
index b9cd3fe..0000000
--- a/source/screens/demo/pages/maintenance.njk
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Maintenance
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_maintenance.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block body %}
-<!-- {{ page.fileSlug }}.page -->
-<div id="root" class="overflow">
-  <h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
-</div>
-{% endblock %}
diff --git a/source/style/demo.scss b/source/style/demo.scss
index 73e17c1..fe2b7e8 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -13,4 +13,6 @@
 @use "modules/portal/portal_module";
 @use "modules/songbook/songbook_module";
 @use "modules/demo/demo_module";
+@use "modules/start";
+@use "modules/clock";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
new file mode 100644
index 0000000..17a1f88
--- /dev/null
+++ b/source/style/modules/_clock.scss
@@ -0,0 +1,26 @@
+@use "../../hippie-style/hippie";
+
+:root {
+	--clock-color-yellow: rgb(250, 216, 3);
+	--clock-color-orange: rgb(242, 175, 19);
+	--clock-color-pink: rgb(211, 10, 81);
+	--clock-color-purple: rgb(142, 31, 104);
+	--clock-color-blue: rgb(39, 63, 139);
+	--clock-color-pblue: rgb(60, 87, 154);
+	--clock-color-lblue: rgb(183, 224, 240);
+	--clock-color-lcyan: rgb(107, 199, 217);
+	--clock-color-cyan: rgb(82, 190, 209);
+}
+
+.body_clock {
+	main {
+		@extend .sec_main_center;
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+	}
+
+	p {
+		text-align: center;
+	}
+}
\ No newline at end of file
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
new file mode 100644
index 0000000..7d790a3
--- /dev/null
+++ b/source/style/modules/_start.scss
@@ -0,0 +1,15 @@
+@use "../../hippie-style/hippie";
+
+.body_start {
+	main {
+		@extend .sec_main_center;
+	}
+
+	#www-search {
+		input[type="text"] {
+			flex: 1;
+			padding: hippie.$padding_basic;
+			line-height: hippie.$line_text_basic;
+		}
+	}
+}
\ No newline at end of file
diff --git a/source/templates/demo/_maintenance.njk b/source/templates/demo/_maintenance.njk
deleted file mode 100644
index da94505..0000000
--- a/source/templates/demo/_maintenance.njk
+++ /dev/null
@@ -1,12 +0,0 @@
-<!-- demo.maintenance.template -->
-{% extends "hippie/_maintenance.njk" %}
-
-{% block meta %}
-	{% 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"/>
-{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk
deleted file mode 100644
index 0741534..0000000
--- a/source/templates/hippie/_maintenance.njk
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- maintenance.template -->
-{% import "hippie/macros/_footer.njk" as footer %}
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% 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>
-
-	<body class="{{ bodyClass }}">
-		{% block body %}
-			{{ footer.status() }}
-		{% endblock %}
-	</body>
-</html>
\ No newline at end of file
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
new file mode 100644
index 0000000..89ba267
--- /dev/null
+++ b/source/templates/hippie/full.liquid
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+{% if pageId %}
+{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
+{% endif -%}
+{% if pageClass %}
+	{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html{{ idAttr }}{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{{ title }}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render "hippie/partials/meta.liquid" %}
+	{% comment %}<base href="/">{% endcomment %}
+	{% endblock -%}
+	{% render "hippie/partials/script-log.liquid" %}
+	{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
+	{% render 'hippie/partials/log-start' -%}
+	{% block links -%}
+	{% render "hippie/partials/links.liquid" %}
+	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
+	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
+	<link rel="stylesheet" media="all" href="{{ pageBase }}css/demo.css" type="text/css"/>
+	{% endblock -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
+{%- block body %}{% endblock -%}
+{% block script -%}
+{% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+<script src="/vendor/jquery.min.js"></script>
+<script>
+	// Full script
+</script>
+{% endblock -%}
+{% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+</body>
+</html>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/footer-status.liquid b/source/templates/hippie/partials/footer-status.liquid
new file mode 100644
index 0000000..b46ecf2
--- /dev/null
+++ b/source/templates/hippie/partials/footer-status.liquid
@@ -0,0 +1,9 @@
+<footer class="pos_abs pin_bottom width_full">
+	<address class="txt_center">Kontakt:
+		<a class="lineLink" href="mailto:{{ email | default: 'admin@domain.tld' }}">{{ email | default: 'admin@domain.tld' }}</a>
+		· Server:
+		{{ app | default: 'Application' }}/{{ version | default: 'ver.s.ion' }}
+		({{ system | default: 'System name' }}) · Domain:
+		{{ domain | default: 'domain.tld:port' }}
+	</address>
+</footer>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/log-assets.liquid b/source/templates/hippie/partials/log-assets.liquid
new file mode 100644
index 0000000..a34b417
--- /dev/null
+++ b/source/templates/hippie/partials/log-assets.liquid
@@ -0,0 +1,3 @@
+<script>
+	assetsLoaded = {{ state | default: false, allow_false: true }};
+</script>
diff --git a/source/templates/hippie/partials/log-log.liquid b/source/templates/hippie/partials/log-log.liquid
new file mode 100644
index 0000000..ba21f2a
--- /dev/null
+++ b/source/templates/hippie/partials/log-log.liquid
@@ -0,0 +1,3 @@
+<script>
+	logPerf('{{ msg }}', {{ arg | default: '' }});
+</script>
diff --git a/source/templates/hippie/partials/log-setup.liquid b/source/templates/hippie/partials/log-setup.liquid
new file mode 100644
index 0000000..04fd9b2
--- /dev/null
+++ b/source/templates/hippie/partials/log-setup.liquid
@@ -0,0 +1,6 @@
+{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
+<script>
+	debugOn = {{ state }};
+	debugOnScreen = {{ display | default: false }};
+	assetsLoaded = {{ assets | default: false }};
+</script>
diff --git a/source/templates/hippie/partials/log-start.liquid b/source/templates/hippie/partials/log-start.liquid
new file mode 100644
index 0000000..e137e33
--- /dev/null
+++ b/source/templates/hippie/partials/log-start.liquid
@@ -0,0 +1,4 @@
+<script>
+	logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+	logPerf('HEAD start  :: Debugging performance...', debugOn);
+</script>
diff --git a/source/templates/hippie/partials/script-log.liquid b/source/templates/hippie/partials/script-log.liquid
new file mode 100644
index 0000000..7e270c7
--- /dev/null
+++ b/source/templates/hippie/partials/script-log.liquid
@@ -0,0 +1,113 @@
+<script>
+  // Entry script at page init
+  let debugOn = {{ hippie.debugMode | default: false, allow_false: true }};
+  let debugOnScreen = false;
+  let assetsLoaded = false;
+
+  // Get the current time difference between page
+  // load and when this func was invoked
+  function getTimeDiff() {
+    return new Date().getTime() - performance.timing.navigationStart;
+  }
+
+  function pad(n, width, z) {
+    z = z || '0';
+    n = n + '';
+
+    return n.length >= width
+      ? n
+      : new Array(width - n.length + 1).join(z) + n;
+  }
+
+  // Log message to console and add
+  // performance measuring information
+  function logPerf(msg, arg) {
+    if (debugOn) {
+      if (debugOnScreen && assetsLoaded) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document
+            .body
+            .prepend(wrap);
+
+          /*
+          $('<div><div></div></div>')
+            .css('position', 'relative')
+            .find('div')
+            .attr('id', 'jsLogPerf')
+            .css({
+              position: 'fixed',
+              bottom: '16px',
+              right: '40px',
+              zIndex: '1000',
+              padding: '0 8px',
+              background: 'rgba(255,255,255,.6)',
+              color: 'rgb(128)',
+              fontSize: '1rem'
+            })
+            .end()
+            .prependTo('body');
+          */
+          // $('body').prepend('<div style="position:relative;"></div>');
+          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
+        }
+
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        document
+          .getElementById('jsLogPerf')
+          .append(code);
+        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+
+        // NOTE: Alternative short-circuit evaluation
+        // needs element in document but prevents error if not
+        // $log = $log || $('#jslogPerf');
+        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+      }
+
+      if (window.console) {
+        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+
+        console.debug(time + msg, (
+          arg
+          ? arg
+          : ''));
+
+        // NOTE: Non standard feature. Not available on IE
+        if (console.timeStamp) {
+          console.timeStamp(msg);
+        }
+      }
+    }
+  }
+
+  function logAdd(msg, listener) {
+    document.addEventListener(listener, function () {
+      logPerf(msg, listener);
+    });
+  }
+</script>
\ No newline at end of file
diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid
new file mode 100644
index 0000000..f2e0ce1
--- /dev/null
+++ b/source/templates/hippie/status.liquid
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+{% if pageClass %}
+{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html id="{{ page.fileSlug }}"{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{{ title }}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render "hippie/partials/meta.liquid" %}
+	{% 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=">
+	<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
+	{% endblock -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{%- block body %}
+<main class="main_site">
+	<h1>{{ title }}</h1>
+	{% block main %}{% endblock -%}
+</main>
+{% render 'hippie/partials/footer-status' %}
+{% endblock -%}
+</body>
+</html>
\ No newline at end of file