From 2e2091a179f37eb6df5f900efd2c57ec25d61c75 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 12 Apr 2025 16:41:47 +0200
Subject: [PATCH 001/253] feat: Add soungbook example

- Add songbook to demo
- Add macro for song
- Add style module
---
 source/screens/demo/examples/songbook.njk     | 51 +++++++++++++++++++
 .../demo/examples/songbook/0_artist-title.md  | 26 ++++++++++
 source/style/demo.scss                        |  1 +
 .../modules/songbook/_songbook_module.scss    | 20 ++++++++
 source/templates/hippie/macros/_song.njk      | 12 +++++
 5 files changed, 110 insertions(+)
 create mode 100755 source/screens/demo/examples/songbook.njk
 create mode 100755 source/screens/demo/examples/songbook/0_artist-title.md
 create mode 100755 source/style/modules/songbook/_songbook_module.scss
 create mode 100644 source/templates/hippie/macros/_song.njk

diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk
new file mode 100755
index 0000000..0b91499
--- /dev/null
+++ b/source/screens/demo/examples/songbook.njk
@@ -0,0 +1,51 @@
+---
+title: Songbook
+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>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/songbook/0_artist-title.md b/source/screens/demo/examples/songbook/0_artist-title.md
new file mode 100755
index 0000000..ccf1b5c
--- /dev/null
+++ b/source/screens/demo/examples/songbook/0_artist-title.md
@@ -0,0 +1,26 @@
+---
+tags: 
+  - songbook
+  - song
+title: "Interpret - Titel"
+releaseDate: JJJJ
+description: Text
+---
+~~~
+[verse 1]
+strophe 1
+
+[chorus]
+refrain
+
+[verse 2]
+strophe 2
+
+[chorus]
+[bridge]
+überleitung
+
+[interlude]
+[chorus]
+[outro]
+~~~
diff --git a/source/style/demo.scss b/source/style/demo.scss
index e46a622..b3d4100 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -11,5 +11,6 @@
 // -----------------------------------------------------------------------------
 @import "modules/card/card_module";
 @import "modules/portal/portal_module";
+@import "modules/songbook/songbook_module";
 @import "modules/demo/demo_module";
 // @import "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/songbook/_songbook_module.scss b/source/style/modules/songbook/_songbook_module.scss
new file mode 100755
index 0000000..321f8bd
--- /dev/null
+++ b/source/style/modules/songbook/_songbook_module.scss
@@ -0,0 +1,20 @@
+.songbook_song {
+	pre {
+		@extend .pre_code
+	}
+
+	header {
+		h2 {
+			margin-bottom: $space_basic;
+		}
+
+		h6 {
+			color: $color_brightest;
+		}
+
+		h2+h6 {
+			margin-top: 0;
+			margin-bottom: $space_small;
+		}
+	}
+}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_song.njk b/source/templates/hippie/macros/_song.njk
new file mode 100644
index 0000000..79083c0
--- /dev/null
+++ b/source/templates/hippie/macros/_song.njk
@@ -0,0 +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>
+{% endmacro %}
\ No newline at end of file

From 2c61450238d13b88b5997c50517ba3157fe2028f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 14 Apr 2025 20:16:10 +0200
Subject: [PATCH 002/253] feat: Separate style for drag example

---
 source/style/modules/ui/_drag_module.scss | 18 ++++++++++++++++++
 source/style/modules/ui/_new_module.scss  | 22 ++--------------------
 source/style/ui.scss                      |  1 +
 3 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 source/style/modules/ui/_drag_module.scss

diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
new file mode 100644
index 0000000..ac1dc6c
--- /dev/null
+++ b/source/style/modules/ui/_drag_module.scss
@@ -0,0 +1,18 @@
+.body_drag {
+	height: 100vh;
+	// padding: $space_basic;
+}
+
+#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/_new_module.scss b/source/style/modules/ui/_new_module.scss
index 100284b..1c0d5a9 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -5,11 +5,6 @@ $module_top_height: 32px;
 	padding: $module_top_height + $space_basic $space_basic $space_basic;
 }
 
-.body_drag {
-	height: 100vh;
-	// padding: $space_basic;
-}
-
 .container {
 	display: grid;
 	height: 100%;
@@ -29,7 +24,8 @@ $module_top_height: 32px;
 	}
 }
 
-.menu, #top {
+.menu,
+#top {
 	nav ul {
 		margin: 0;
 	}
@@ -112,18 +108,4 @@ $module_top_height: 32px;
 		margin-right: 16px;
 		text-align: right;
 	}
-}
-
-#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/ui.scss b/source/style/ui.scss
index 0a36d0d..d088323 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -3,3 +3,4 @@
 
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
+@import "modules/ui/drag_module";

From a43def2e92ee4e6d511c05cfa0890c3f8ebe7e0c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 14 Apr 2025 20:16:32 +0200
Subject: [PATCH 003/253] feat: New order for meta elements

---
 source/templates/hippie/partials/_head_meta.njk | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/source/templates/hippie/partials/_head_meta.njk b/source/templates/hippie/partials/_head_meta.njk
index 00c2efd..b55c7c2 100644
--- a/source/templates/hippie/partials/_head_meta.njk
+++ b/source/templates/hippie/partials/_head_meta.njk
@@ -1,7 +1,8 @@
 <!-- head.meta.partial -->
-<meta name="author" content="">
-<meta name="generator" content="{{ eleventy.generator }}">
-<meta name="description" content="">
 <meta name="robots" content="noindex">
+<meta name="generator" content="{{ eleventy.generator }}">
+<meta name="author" content="">
+<meta name="description" content="">
+<meta name="keywords" content="">
 
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
\ No newline at end of file

From 58cb0eba2c6ba4ccc10024a4251d1cc054db63af Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 14 Apr 2025 20:50:23 +0200
Subject: [PATCH 004/253] feat: Add sprite folder to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index d958f01..5e89ea2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 ###################
 build/**
 reports/**
+source/art/sprites/
 source/art/images/sprite.*
 
 # https://gist.github.com/octocat/9257657

From 37986e7b4b5537993bbc4f6343fa9ef097c9107c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 2 May 2025 14:05:33 +0200
Subject: [PATCH 005/253] feat: Reflect style changes in hippie-style

- Update submodule
- Rename changed classes
---
 source/code/hippie/functions.js                | 6 +++---
 source/style/hippie-style                      | 2 +-
 source/templates/hippie/partials/_body_nav.njk | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js
index 2e80761..602ca13 100644
--- a/source/code/hippie/functions.js
+++ b/source/code/hippie/functions.js
@@ -33,20 +33,20 @@ function HippieScroll($tp, $dn) {
   let initLeft = false;
   const initY = hippie.screen.vh;
 
-  $tp.addClass('hide');
+  $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('hide');
+        $tp.removeClass('di_none');
         console.info('Initial viewport left');
       }
       initLeft = true;
     } else {
       if (initLeft) {
-        $tp.addClass('hide');
+        $tp.addClass('di_none');
         console.info('Initial viewport entered');
       }
       initLeft = false;
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 2e100f7..9f3797f 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 2e100f72a90d9b29fdd1a053059631b8644d91dd
+Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk
index f38e940..db7ea52 100644
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@@ -2,7 +2,7 @@
 <div class="pos_rel">
   <nav class="nav_page_meta js_">
     <ul>
-      <li class="js_scrolltop hide">
+      <li class="js_scrolltop di_none">
         <a href="#begin" class="a_button_meta">
           <div class="sprite_img demo__sprite_up"></div>
           {# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}

From 234f4e6e7d630579946404ada804fc7e63deaf91 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 2 May 2025 19:50:26 +0200
Subject: [PATCH 006/253] feat: New ui index

Init example starts like an application with fullscreen steps leading to an idle or menu state.
Each step has specific events to trigger the next step.

- Add index screen to ui
- Add own script
- Update ui style
---
 source/code/ui.js                             |  77 +++++++++++++
 source/screens/demo/examples/ui/index.njk     |  73 ++++++++++++
 source/style/ui.scss                          | 109 +++++++++++++++++-
 .../templates/hippie/partials/_body_nav.njk   |   2 +-
 4 files changed, 259 insertions(+), 2 deletions(-)
 create mode 100644 source/code/ui.js
 create mode 100644 source/screens/demo/examples/ui/index.njk

diff --git a/source/code/ui.js b/source/code/ui.js
new file mode 100644
index 0000000..0fc9338
--- /dev/null
+++ b/source/code/ui.js
@@ -0,0 +1,77 @@
+let introDelay = 6;
+let hintDelay = 1;
+
+const intro = {
+	element: document.getElementById('intro'),
+	delay: introDelay * 1000,
+	show() {
+		if (typeof this.timeoutId === 'number') {
+			this.cancel();
+		}
+
+		console.info("Intro begin.");
+		this.element.classList.replace('op_hide', 'op_show');
+
+		this.timeoutId = setTimeout(
+			() => {
+				this.dismiss();
+			},
+			this.delay
+		)
+	},
+	dismiss() {
+		this.element.classList.replace('op_show', 'op_hide');
+		this.timeoutId = undefined;
+
+		this.element.addEventListener('transitionend', () => {
+			console.info("Intro fin.");
+			agree();
+		});
+	},
+	cancel() {
+		clearTimeout(this.timeoutId);
+	}
+};
+const agreement = document.getElementById('agreement');
+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);
+	}
+};
+
+window.addEventListener('click', () => hint.show());
+window.addEventListener('keydown', () => hint.show());
+
+if (intro.element) intro.show();
+
+function agree() {
+	if (agreement) {
+		console.info("Agreement show.");
+		agreement.classList.replace('op_hide', 'op_show');
+
+		setTimeout(() => {
+			agreement.classList.replace('op_show', 'op_hide');
+			console.info("Agreement closed.");
+		}, introDelay * 1000)
+	}
+}
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
new file mode 100644
index 0000000..46c2827
--- /dev/null
+++ b/source/screens/demo/examples/ui/index.njk
@@ -0,0 +1,73 @@
+---
+title: Init
+tags: 
+  - demoExample
+  - index
+  - ui
+---
+{% set pageId = "init" %}
+{% set pageClass = "html_ui" %}
+
+{% 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="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="op_hide">
+			<div class="brand">
+				{# <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
+							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
+							style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+							cx="64"
+							cy="64"
+							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>Brand name</h1>
+			</div>
+			<p>Powered by</p>
+			<ul class="tech-stack">
+				<li>Vendor</li>
+				<li>IDE</li>
+				<li>Engine</li>
+			</ul>
+		</div>
+		<div id="agreement" class="op_hide">
+				<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>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index d088323..ee5186b 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -1,6 +1,113 @@
+@use "sass:map";
+
 @import "demo_config";
 @import "hippie-style/hippie";
 
+$z-indexes: (
+	"default": 0,
+	"content-bottom": 1,
+	"content-low": 2,
+	"content-med": 3,
+	"content-high": 4,
+	"content-top": 10,
+	"modal-low": 11,
+	"modal-med": 12,
+	"modal-high": 13,
+	"toast": 100
+);
+
+.op_show {
+	transition: $transition_show;
+}
+
+.op_hide {
+	transition: $transition_hide;
+}
+
+.html_ui {
+	height: 100%;
+
+	body {
+		position: relative;
+		min-height: 100%;
+		background-color: black;
+	}
+}
+
+#intro {
+	@extend %full_parent;
+
+	z-index: map.get($z-indexes, "content-top");
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: black;
+
+	h1,
+	p,
+	li {
+		color: white;
+	}
+}
+
+.brand {
+	text-align: center;
+
+	img {
+		display: inline-block;
+		width: 128px;
+		height: 128px;
+		background-color: white;
+	}
+
+	*+h1 {
+		margin-top: $space_small;
+		margin-bottom: $space_large;
+	}
+}
+
+.tech-stack {
+	display: flex;
+	padding-left: 0;
+
+	li {
+		list-style: none;
+		padding-inline: $space_double;
+	}
+}
+
+#agreement {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	background-color: $color_back_basic;
+}
+
+.toast {
+	z-index: map.get($z-indexes, "toast");
+	position: fixed;
+  right: $space_half;
+  bottom: $space_double;
+
+	p {
+		color: white;
+	}
+
+	kbd {
+		border-color: $color_brighter;
+		color: $color_back_io;
+	}
+}
+
+.hello {
+	flex: 0 1 auto;
+	padding: 1em 2em;
+	background-color: rgba(black, .25);
+}
+
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
+@import "modules/ui/drag_module";
\ 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 db7ea52..58fed6d 100644
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@@ -1,6 +1,6 @@
 <!-- body_nav.partial -->
 <div class="pos_rel">
-  <nav class="nav_page_meta js_">
+  <nav class="nav_page_meta">
     <ul>
       <li class="js_scrolltop di_none">
         <a href="#begin" class="a_button_meta">

From 2c001aaa4e0979bd23914275b9cb0c460b99b8c3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 2 May 2025 20:35:58 +0200
Subject: [PATCH 007/253] feat: Refactor ui steps as promises

---
 source/code/ui.js | 102 +++++++++++++++++++++++++++++++---------------
 1 file changed, 69 insertions(+), 33 deletions(-)

diff --git a/source/code/ui.js b/source/code/ui.js
index 0fc9338..5dac415 100644
--- a/source/code/ui.js
+++ b/source/code/ui.js
@@ -1,37 +1,7 @@
 let introDelay = 6;
 let hintDelay = 1;
 
-const intro = {
-	element: document.getElementById('intro'),
-	delay: introDelay * 1000,
-	show() {
-		if (typeof this.timeoutId === 'number') {
-			this.cancel();
-		}
-
-		console.info("Intro begin.");
-		this.element.classList.replace('op_hide', 'op_show');
-
-		this.timeoutId = setTimeout(
-			() => {
-				this.dismiss();
-			},
-			this.delay
-		)
-	},
-	dismiss() {
-		this.element.classList.replace('op_show', 'op_hide');
-		this.timeoutId = undefined;
-
-		this.element.addEventListener('transitionend', () => {
-			console.info("Intro fin.");
-			agree();
-		});
-	},
-	cancel() {
-		clearTimeout(this.timeoutId);
-	}
-};
+const intro = document.getElementById('intro');
 const agreement = document.getElementById('agreement');
 const hint = {
 	element: document.getElementById('hint'),
@@ -62,8 +32,6 @@ const hint = {
 window.addEventListener('click', () => hint.show());
 window.addEventListener('keydown', () => hint.show());
 
-if (intro.element) intro.show();
-
 function agree() {
 	if (agreement) {
 		console.info("Agreement show.");
@@ -75,3 +43,71 @@ function agree() {
 		}, introDelay * 1000)
 	}
 }
+
+function init() {
+	return new Promise((resolve) => {
+		console.log('Init');
+		resolve();
+	});
+}
+
+function showIntro() {
+	const el = intro;
+	const dy = introDelay * 1000;
+
+	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.");
+						resolve("Intro fin.");
+					});
+				},
+				dy
+			);
+		} else {
+			reject('No intro available.');
+		}
+	})
+}
+
+function showAgreement() {
+	const el = agreement;
+	const dy = introDelay * 1000;
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info("Agreement show.");
+			el.classList.replace('op_hide', 'op_show');
+
+			setTimeout(
+				() => {
+					el.classList.replace('op_show', 'op_hide');
+
+					el.addEventListener('transitionend', () => {
+						console.info("Agreement closed.");
+						resolve("closed");
+					});
+				},
+				dy
+			)
+		} else {
+			reject('No agreement today.');
+		}
+	})
+}
+
+init()
+	.then(showIntro)
+	.catch(er => console.error(er))
+	.then(showAgreement)
+	.catch(er => console.error(er))
+	.finally(() => {
+		console.debug('Init end.');
+	});
\ No newline at end of file

From 7255b009b9371093b407b7a772718e3895c0748e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 3 May 2025 12:34:23 +0200
Subject: [PATCH 008/253] feat: Add loader step

- Add loader element with progress display
- Add styles for loader, spinner and bar
- Move event listeners for hint to intro step
- Add loadCore function to simulate loader
- Keep alternative progress bar for document loading display
---
 source/code/ui.js                         | 126 ++++++++++++++++++++--
 source/screens/demo/examples/ui/index.njk |   9 ++
 source/style/ui.scss                      |  72 ++++++++++++-
 3 files changed, 196 insertions(+), 11 deletions(-)

diff --git a/source/code/ui.js b/source/code/ui.js
index 5dac415..dc2ec60 100644
--- a/source/code/ui.js
+++ b/source/code/ui.js
@@ -28,17 +28,17 @@ const hint = {
 		clearTimeout(this.timeoutId);
 	}
 };
-
-window.addEventListener('click', () => hint.show());
-window.addEventListener('keydown', () => hint.show());
+const loader = document.getElementById('loader');
 
 function agree() {
 	if (agreement) {
 		console.info("Agreement show.");
+
 		agreement.classList.replace('op_hide', 'op_show');
 
 		setTimeout(() => {
 			agreement.classList.replace('op_show', 'op_hide');
+
 			console.info("Agreement closed.");
 		}, introDelay * 1000)
 	}
@@ -47,6 +47,7 @@ function agree() {
 function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
+
 		resolve();
 	});
 }
@@ -55,17 +56,20 @@ function showIntro() {
 	const el = intro;
 	const dy = introDelay * 1000;
 
+	window.addEventListener('click', () => hint.show());
+	window.addEventListener('keydown', () => hint.show());
+
 	return new Promise((resolve, reject) => {
 		if (el) {
 			console.info("Intro begin.");
-			el.classList.replace('op_hide', 'op_show');
 
+			el.classList.replace('op_hide', 'op_show');
 			setTimeout(
 				() => {
 					el.classList.replace('op_show', 'op_hide');
-
 					el.addEventListener('transitionend', () => {
 						console.info("Intro fin.");
+
 						resolve("Intro fin.");
 					});
 				},
@@ -84,14 +88,14 @@ function showAgreement() {
 	return new Promise((resolve, reject) => {
 		if (el) {
 			console.info("Agreement show.");
-			el.classList.replace('op_hide', 'op_show');
 
+			el.classList.replace('op_hide', 'op_show');
 			setTimeout(
 				() => {
 					el.classList.replace('op_show', 'op_hide');
-
 					el.addEventListener('transitionend', () => {
 						console.info("Agreement closed.");
+
 						resolve("closed");
 					});
 				},
@@ -103,11 +107,115 @@ function showAgreement() {
 	})
 }
 
+function loadCore() {
+	const el = loader;
+	const bar = loader.querySelector('#progress');
+	const status = loader.querySelector('#status');
+	const spinner = loader.querySelector('#spinner');
+	const sp = spinner.querySelector('span');
+
+	let progress = 0;
+
+	return new Promise((resolve) => {
+		console.info("Core loading.");
+
+		updateProgressBar();
+
+		function updateProgressBar() {
+			let increment = randomIntFrom(1, 19);
+
+			progress += increment;
+
+			if (progress >= 100) progress = 100;
+			// console.log(progress);
+
+			bar.style.width = progress + '%';
+			status.textContent = progress + '%';
+
+			if (progress < 100) {
+				setTimeout(updateProgressBar, 800);
+			} else {
+				bar.style.width = '100%';
+				sp.style.animationPlayState = 'paused';
+				spinner.style.color = 'white';
+				spinner.style.backgroundColor = 'black';
+				el.classList.replace('op_show', 'op_hide');
+				el.addEventListener('transitionend', () => {
+					console.info("Core loaded.");
+
+					resolve("Core loaded.");
+				});
+			}
+		}
+	});
+}
+
 init()
+	.then(loadCore)
 	.then(showIntro)
 	.catch(er => console.error(er))
 	.then(showAgreement)
 	.catch(er => console.error(er))
 	.finally(() => {
-		console.debug('Init end.');
-	});
\ No newline at end of file
+		console.debug('Init end.', loader, intro, agreement);
+	});
+
+// 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.
+ * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
+ * 
+ * @param {number} min 
+ * @param {number} max 
+ * @param {number} pos 
+ * @returns {number}
+ */
+function randomIntFrom(min, max, pos = 0) {
+	pos = Math.pow(10, pos);
+	min = Math.ceil(min);
+	max = Math.floor(max);
+
+	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
+}
\ 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 46c2827..2ad7bd2 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -22,6 +22,15 @@ tags:
 {% endblock %}
 
 {% block body %}
+		<div id="loader" class="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="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
 			<p>Hold <kbd>space</kbd> to skip.</p>
 		</div>
diff --git a/source/style/ui.scss b/source/style/ui.scss
index ee5186b..7f59080 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -34,6 +34,74 @@ $z-indexes: (
 	}
 }
 
+#loader {
+	@extend %full_parent;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+}
+
+#bar {
+	display: flex;
+	justify-content: space-between;
+	width: 50%;
+}
+
+#wrap {
+	flex: 1;
+	background-color: $color_back_basic;
+}
+
+#progress {
+	width: 0%;
+	height: 100%;
+	background-color: black;
+}
+
+#status,
+#spinner {
+	@extend %basic;
+	
+	display: flex;
+	flex-grow: 0;
+	flex-shrink: 0;
+	justify-content: center;
+	align-items: center;
+	margin-inline: $space_half;
+	padding-block: calc($space_half - 1px) $space_half;
+	line-height: $line_basic;
+	text-align: center;
+}
+
+#status {
+	width: 4em;
+	background-color: black;
+	color: white;
+}
+
+#spinner {
+	width: 2.5em;
+	background-color: $color_back_basic;
+	color: black;
+
+	span {
+		animation: rotate 1s linear infinite;
+	}
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
 #intro {
 	@extend %full_parent;
 
@@ -89,8 +157,8 @@ $z-indexes: (
 .toast {
 	z-index: map.get($z-indexes, "toast");
 	position: fixed;
-  right: $space_half;
-  bottom: $space_double;
+	right: $space_half;
+	bottom: $space_double;
 
 	p {
 		color: white;

From fa5e74a100722f4520bada0cfad1d980a7ced63a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 3 May 2025 15:12:16 +0200
Subject: [PATCH 009/253] feat: Refactor listeners

- Add handler functions for event listeners
- Change agreement step to wait for interaction
- Remove listeners after each step
- Add steps object
---
 source/code/ui.js    | 105 +++++++++++++++++++++++++++++--------------
 source/style/ui.scss |   2 +
 2 files changed, 73 insertions(+), 34 deletions(-)

diff --git a/source/code/ui.js b/source/code/ui.js
index dc2ec60..2ed681e 100644
--- a/source/code/ui.js
+++ b/source/code/ui.js
@@ -1,8 +1,17 @@
 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.'
+	}
+};
 const intro = document.getElementById('intro');
-const agreement = document.getElementById('agreement');
+const agreement = steps.agreement.element;
 const hint = {
 	element: document.getElementById('hint'),
 	delay: hintDelay * 1000,
@@ -30,20 +39,6 @@ const hint = {
 };
 const loader = document.getElementById('loader');
 
-function agree() {
-	if (agreement) {
-		console.info("Agreement show.");
-
-		agreement.classList.replace('op_hide', 'op_show');
-
-		setTimeout(() => {
-			agreement.classList.replace('op_show', 'op_hide');
-
-			console.info("Agreement closed.");
-		}, introDelay * 1000)
-	}
-}
-
 function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
@@ -56,8 +51,8 @@ function showIntro() {
 	const el = intro;
 	const dy = introDelay * 1000;
 
-	window.addEventListener('click', () => hint.show());
-	window.addEventListener('keydown', () => hint.show());
+	document.addEventListener('click', hintHandler, false);
+	document.addEventListener('keydown', hintHandler, false);
 
 	return new Promise((resolve, reject) => {
 		if (el) {
@@ -70,6 +65,7 @@ function showIntro() {
 					el.addEventListener('transitionend', () => {
 						console.info("Intro fin.");
 
+						el.classList.add('di_none');
 						resolve("Intro fin.");
 					});
 				},
@@ -82,27 +78,35 @@ function showIntro() {
 }
 
 function showAgreement() {
+	document.removeEventListener('click', hintHandler);
+	document.removeEventListener('keydown', hintHandler);
 	const el = agreement;
 	const dy = introDelay * 1000;
 
 	return new Promise((resolve, reject) => {
 		if (el) {
-			console.info("Agreement show.");
+			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
-			setTimeout(
-				() => {
-					el.classList.replace('op_show', 'op_hide');
-					el.addEventListener('transitionend', () => {
-						console.info("Agreement closed.");
-
-						resolve("closed");
-					});
-				},
-				dy
-			)
+			el.addEventListener('click', agreeHandler);
 		} else {
-			reject('No agreement today.');
+			reject(steps.agreement.msgNo);
+		}
+
+		function agreeHandler() {
+			const el = agreement;
+
+			isAgree = true;
+
+			el.classList.replace('op_show', 'op_hide');
+			el.addEventListener('transitionend', function endListener() {
+				console.info(steps.agreement.msgOut);
+
+				el.removeEventListener('transitionend', endListener);
+				el.removeEventListener('click', agreeHandler);
+				el.classList.add('di_none');
+				resolve(steps.agreement.msgOut);
+			});
 		}
 	})
 }
@@ -122,7 +126,9 @@ function loadCore() {
 		updateProgressBar();
 
 		function updateProgressBar() {
-			let increment = randomIntFrom(1, 19);
+			const maxChunk = 33;
+			const time = 400;
+			let increment = randomIntFrom(1, maxChunk);
 
 			progress += increment;
 
@@ -133,16 +139,18 @@ function loadCore() {
 			status.textContent = progress + '%';
 
 			if (progress < 100) {
-				setTimeout(updateProgressBar, 800);
+				setTimeout(updateProgressBar, time);
 			} else {
 				bar.style.width = '100%';
 				sp.style.animationPlayState = 'paused';
 				spinner.style.color = 'white';
 				spinner.style.backgroundColor = 'black';
 				el.classList.replace('op_show', 'op_hide');
-				el.addEventListener('transitionend', () => {
+				el.addEventListener('transitionend', function endListener() {
 					console.info("Core loaded.");
 
+					el.removeEventListener('transitionend', endListener);
+					el.classList.add('di_none');
 					resolve("Core loaded.");
 				});
 			}
@@ -157,7 +165,8 @@ init()
 	.then(showAgreement)
 	.catch(er => console.error(er))
 	.finally(() => {
-		console.debug('Init end.', loader, intro, agreement);
+		console.debug('Init end.', isAgree);
+		// location = 'demo/examples/ui/new.html';
 	});
 
 // document.addEventListener('DOMContentLoaded', () => {
@@ -218,4 +227,32 @@ function randomIntFrom(min, max, pos = 0) {
 	max = Math.floor(max);
 
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
+}
+
+/**
+ * Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
+ */
+function hintHandler() {
+	hint.show();
+}
+
+/**
+ * Blendet einen Schritt aus.
+ * 
+ * @param {*} e 
+ * @returns 
+ */
+function stepHandler(e) {
+	const el = e.target;
+	const msg = steps[el.id].msgOut;
+
+	return new Promise(function (resolve) {
+		el.classList.replace('op_show', 'op_hide');
+		el.addEventListener('transitionend', function endListener() {
+			console.info(msg);
+
+			el.removeEventListener('transitionend', endListener);
+			resolve(msg);
+		});
+	})
 }
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 7f59080..74aa70e 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -42,6 +42,7 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: white;
+	pointer-events: none;
 }
 
 #bar {
@@ -112,6 +113,7 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: black;
+	pointer-events: none;
 
 	h1,
 	p,

From b0bb338bee27b74efddb0bc31fb633509fc439c5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 4 May 2025 22:25:03 +0200
Subject: [PATCH 010/253] feat: New idle step

- Add idle step after agreement
- New content for agreement
- Move brand information to macro
- New step class for common style
---
 source/code/ui.js                             | 16 +++++++
 source/screens/demo/examples/ui/index.njk     | 44 +++++--------------
 source/style/ui.scss                          | 26 ++++++++---
 .../templates/hippie/macros/_placeholder.njk  | 30 +++++++++++++
 4 files changed, 77 insertions(+), 39 deletions(-)

diff --git a/source/code/ui.js b/source/code/ui.js
index 2ed681e..e4c1da9 100644
--- a/source/code/ui.js
+++ b/source/code/ui.js
@@ -111,6 +111,21 @@ function showAgreement() {
 	})
 }
 
+function 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();
+		}
+	})
+}
+
 function loadCore() {
 	const el = loader;
 	const bar = loader.querySelector('#progress');
@@ -163,6 +178,7 @@ init()
 	.then(showIntro)
 	.catch(er => console.error(er))
 	.then(showAgreement)
+	.then(showIdle)
 	.catch(er => console.error(er))
 	.finally(() => {
 		console.debug('Init end.', isAgree);
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 2ad7bd2..9af9edc 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -9,6 +9,7 @@ tags:
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}{{ title }}
 {% endblock %}
@@ -22,7 +23,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-		<div id="loader" class="op_show">
+		<div id="loader" class="step op_show">
 			<div id="bar">
 				<div id="spinner"><span>I</span></div>
 				<div id="wrap">
@@ -34,35 +35,8 @@ tags:
 		<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="op_hide">
-			<div class="brand">
-				{# <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
-							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
-							style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-							cx="64"
-							cy="64"
-							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>Brand name</h1>
-			</div>
+		<div id="intro" class="step op_hide">
+			{{ ph.brand('brand') }}
 			<p>Powered by</p>
 			<ul class="tech-stack">
 				<li>Vendor</li>
@@ -70,9 +44,13 @@ tags:
 				<li>Engine</li>
 			</ul>
 		</div>
-		<div id="agreement" class="op_hide">
-				<div class="hello">Hello World!</div>
-				<p class="hello">Only left mouse click or any key</p>
+		<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>
 		</div>
 {% endblock %}
 
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 74aa70e..e6886e8 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -34,9 +34,11 @@ $z-indexes: (
 	}
 }
 
-#loader {
+.step {
 	@extend %full_parent;
+}
 
+#loader {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -65,7 +67,7 @@ $z-indexes: (
 #status,
 #spinner {
 	@extend %basic;
-	
+
 	display: flex;
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -104,8 +106,6 @@ $z-indexes: (
 }
 
 #intro {
-	@extend %full_parent;
-
 	z-index: map.get($z-indexes, "content-top");
 	overflow: hidden;
 	display: flex;
@@ -148,7 +148,8 @@ $z-indexes: (
 	}
 }
 
-#agreement {
+#agreement,
+#idle {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -156,6 +157,18 @@ $z-indexes: (
 	background-color: $color_back_basic;
 }
 
+#agreement {
+	flex-direction: column;
+
+	h1 {
+		margin-top: 0;
+	}
+}
+
+#idle {
+	pointer-events: none;
+}
+
 .toast {
 	z-index: map.get($z-indexes, "toast");
 	position: fixed;
@@ -175,7 +188,8 @@ $z-indexes: (
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	background-color: rgba(black, .25);
+	// background-color: rgba(black, .25);
+	background-color: $color_darker;
 }
 
 @import "modules/ui/new_module";
diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk
index 52f35be..0097328 100644
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@@ -11,3 +11,33 @@
 {% 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
+		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
+				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
+				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+				cx="64"
+				cy="64"
+				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>
+{% endmacro %}
\ No newline at end of file

From 79ad6f452d226cacf1d8d058964e1d18b2e8ca9e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 4 May 2025 22:25:55 +0200
Subject: [PATCH 011/253] feat: Add empty default page

---
 source/screens/demo/pages/default.njk | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 source/screens/demo/pages/default.njk

diff --git a/source/screens/demo/pages/default.njk b/source/screens/demo/pages/default.njk
new file mode 100644
index 0000000..a898098
--- /dev/null
+++ b/source/screens/demo/pages/default.njk
@@ -0,0 +1,21 @@
+---
+title: Default
+---
+{% set pageBase = "../" %}
+{% set pageId = page.fileSlug %}
+
+{% extends "hippie/_default.njk" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+{% block body %}
+<!-- {{ page.fileSlug }}.page -->
+{% endblock %}
+
+{% block script %}
+{{ super() }}
+{% endblock %}

From ad150fadf223db5d2f57e71ad4b6b071d5a614eb Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 14 May 2025 19:00:13 +0200
Subject: [PATCH 012/253] feat: Add form ui example

Test css grid system for form fields.
---
 source/screens/demo/examples/ui/form.njk  | 45 +++++++++++++++++++++++
 source/style/modules/ui/_form_module.scss | 33 +++++++++++++++++
 source/style/ui.scss                      |  3 +-
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 source/screens/demo/examples/ui/form.njk
 create mode 100644 source/style/modules/ui/_form_module.scss

diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
new file mode 100644
index 0000000..60162ce
--- /dev/null
+++ b/source/screens/demo/examples/ui/form.njk
@@ -0,0 +1,45 @@
+---
+title: Form
+tags: 
+  - demoExample
+  - ui
+---
+{% 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>
+	</div>
+	<div id="grid">
+		<div>a</div>
+		<div>b</div>
+	</div>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		const add = document.querySelector('[data-action=add]');
+
+		add.addEventListener('click', (e) => {
+				const grid = document.getElementById('grid');
+				const item = document.createElement('div');
+
+				item.style.backgroundColor = '#f0f';
+				item.textContent = 'c'
+				grid.appendChild(item);
+		});
+	</script>
+{% endblock %}
\ 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..265663c
--- /dev/null
+++ b/source/style/modules/ui/_form_module.scss
@@ -0,0 +1,33 @@
+#form body {
+	margin: 0;
+	background-color: #808080;
+}
+
+#head {
+	// display: flex;
+}
+
+h1 {
+	margin: 0;
+}
+
+#grid {
+	display: grid;
+	gap: 8px;
+	grid-template-columns: repeat(4, 1fr);
+	grid-auto-rows: minmax(64px, auto);
+}
+
+#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..f74e666 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -194,4 +194,5 @@ $z-indexes: (
 
 @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

From 8937b36a1e768d57720cdcf65caf7927d7d2c002 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 15 May 2025 20:00:51 +0200
Subject: [PATCH 013/253] feat: Changes to ui form and drag

- Use common styles
- Move NewDiv class to external script
- Align script for form and drag pages
---
 source/code/_ui.js                        | 113 +++++++++++++++++++++
 source/screens/demo/examples/ui/drag.njk  | 116 ++--------------------
 source/screens/demo/examples/ui/form.njk  |  33 +++++-
 source/style/modules/ui/_drag_module.scss |  16 +--
 source/style/modules/ui/_form_module.scss |  15 ++-
 5 files changed, 165 insertions(+), 128 deletions(-)
 create mode 100644 source/code/_ui.js

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/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
index 60162ce..b9adc45 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -4,6 +4,8 @@ tags:
   - demoExample
   - ui
 ---
+{% set bodyClass = "body_form" %}
+
 {% extends "demo/_app.njk" %}
 
 {% block title %}{{ title }}
@@ -21,25 +23,46 @@ tags:
 	<div id="head">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
+		<button data-action="change">Ändern</button>
+		<hr>
 	</div>
-	<div id="grid">
-		<div>a</div>
-		<div>b</div>
-	</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 grid = document.getElementById('grid');
 				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/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
index 265663c..e52b8af 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,14 +1,18 @@
-#form body {
+.body_form {
 	margin: 0;
-	background-color: #808080;
+	background-color: $color-dark;
 }
 
 #head {
 	// display: flex;
-}
 
-h1 {
-	margin: 0;
+	button {
+			@extend .io_button;
+	}
+
+	h1 {
+		margin: 0;
+	}
 }
 
 #grid {
@@ -16,6 +20,7 @@ h1 {
 	gap: 8px;
 	grid-template-columns: repeat(4, 1fr);
 	grid-auto-rows: minmax(64px, auto);
+	margin-inline: $space_small;
 }
 
 #grid>div {

From 6cfe5b21e1453c6915b44a8fd0ba915c3ab84c6f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 17 May 2025 11:06:45 +0200
Subject: [PATCH 014/253] feat: Consolidate intro scripts

- Change script source from ui to intro
- Test variants with classes
- Move active scripts parts to index
- Remove old ui script
---
 source/code/{ui.js => _intro.js}          | 191 ++++++++++++----------
 source/screens/demo/examples/ui/index.njk |  66 +++++++-
 2 files changed, 170 insertions(+), 87 deletions(-)
 rename source/code/{ui.js => _intro.js} (64%)

diff --git a/source/code/ui.js b/source/code/_intro.js
similarity index 64%
rename from source/code/ui.js
rename to source/code/_intro.js
index e4c1da9..71db197 100644
--- a/source/code/ui.js
+++ b/source/code/_intro.js
@@ -1,43 +1,116 @@
-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) => {
@@ -173,60 +246,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.
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 9af9edc..c01cb81 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -56,5 +56,69 @@ tags:
 
 {%- block script %}
 		{{ super() }}
-		<script src="{{ pageBase }}js/ui.js"></script>
+		<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 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');
+
+			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

From 8942dc3632db93f7d7400bf8257b0b89da7eec54 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 17 May 2025 13:04:31 +0200
Subject: [PATCH 015/253] refactor: Move script parts around

- Run setup function in global script
- Move common script assets to hippie main template
- Remove unused scrcipt from components page
---
 source/code/hippie/global.js          |  2 +-
 source/screens/demo/basics.njk        |  5 -----
 source/screens/demo/components.njk    | 13 -------------
 source/screens/demo/examples/card.njk |  5 -----
 source/screens/demo/index.njk         |  6 ------
 source/screens/demo/introduction.njk  |  5 -----
 source/screens/demo/layouts.njk       |  5 -----
 source/templates/demo/_main.njk       | 17 ++++++-----------
 source/templates/hippie/_default.njk  |  4 +++-
 source/templates/hippie/_main.njk     |  7 +++++++
 10 files changed, 17 insertions(+), 52 deletions(-)

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/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 566d527..8206a8c 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -872,11 +872,6 @@ tags:
 
 {% 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);
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 795e41f..b1f6ed3 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -189,19 +189,6 @@ tags:
 {% 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>
 {% 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..ee7011a 100644
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -59,11 +59,6 @@ tags:
 
 {% 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', '', '');
diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk
index 7037dce..16ecac9 100644
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@@ -72,11 +72,6 @@ tags:
 
 {% 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...');
@@ -84,7 +79,6 @@ tags:
     // ------------------------------------------------------------------------------
     $(document).ready(function () {
       logPerf('EVENT       :: jQuery \'ready\' event fired.');
-      setup();
     });
     logPerf('Application ready... not.');
   </script>
diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk
index 3d82d76..792967e 100644
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -32,11 +32,6 @@ tags:
 
 {% 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);
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index 2683443..82d97e1 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -322,11 +322,6 @@ tags:
 {% 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>
diff --git a/source/templates/demo/_main.njk b/source/templates/demo/_main.njk
index c0d545d..10bde89 100644
--- a/source/templates/demo/_main.njk
+++ b/source/templates/demo/_main.njk
@@ -8,19 +8,14 @@
 
 {% 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 %}
+  {% 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 %}
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..b7d305a 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -41,6 +41,13 @@
 
     {% 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>
     {% endblock %}
 
     {{ log.log('BODY end    :: Page script might still be loading.') }}

From fe2261fda512d53084896987fe6becd88abc6486 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 11:17:48 +0200
Subject: [PATCH 016/253] feat: Change app template

- Add global variables to app template
- Add flag colors to global variables
- Change var declaration
---
 source/code/hippie/variables.js | 22 ++++++++++++++++------
 source/templates/demo/_app.njk  |  2 ++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js
index bf6f4bc..7ab6556 100644
--- a/source/code/hippie/variables.js
+++ b/source/code/hippie/variables.js
@@ -1,4 +1,4 @@
-var hippie = {
+let hippie = {
   brand: "|-| | |^ |^ | [- ",
   screen: {
     w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
@@ -12,9 +12,19 @@ var hippie = {
     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/templates/demo/_app.njk b/source/templates/demo/_app.njk
index 0939550..ca7a37c 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@@ -23,6 +23,8 @@
     {% block body %}{% 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>

From 13b9318f562e92aa435cd9319c335c4c98f31b13 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 11:20:48 +0200
Subject: [PATCH 017/253] feat: Changes to event handling and steps

- New idle object
- New handlers for idle state
- Idle uses global colors
- Add mouse over style to idle
- Set pointer events style from js
- Reindent ui index
---
 source/code/_intro.js                     |  25 +++
 source/screens/demo/examples/ui/index.njk | 218 ++++++++++++----------
 source/style/hippie-style                 |   2 +-
 source/style/ui.scss                      |  17 +-
 4 files changed, 159 insertions(+), 103 deletions(-)

diff --git a/source/code/_intro.js b/source/code/_intro.js
index 71db197..426bb57 100644
--- a/source/code/_intro.js
+++ b/source/code/_intro.js
@@ -116,6 +116,13 @@ 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();
 	});
 }
@@ -161,6 +168,8 @@ function showAgreement() {
 			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+
 			el.addEventListener('click', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
@@ -187,13 +196,21 @@ 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();
 		}
 	})
@@ -271,6 +288,14 @@ function hintHandler() {
 	hint.show();
 }
 
+function idleStart() {
+	idle.cycle();
+}
+
+function idleStop() {
+	idle.cancel();
+}
+
 /**
  * Blendet einen Schritt aus.
  * 
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index c01cb81..fdd8d97 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -1,124 +1,150 @@
 ---
 title: Init
 tags: 
-  - demoExample
-  - index
-  - ui
+	- demoExample
+	- 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 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>
-		</div>
+	</div>
+	<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="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/_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)); #}
+	{{ super() }}
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
 
-			let introDelay = 6;
-			let hintDelay = 1;
-			let isAgree = false;
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
 
-			const steps = {
-				agreement: {
-					element: document.getElementById('agreement'),
-					msgIn: 'Agreement shown.',
-					msgOut: 'Agreement accepted.',
-					msgNo: 'No agreement today.'
+		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.'
+			}
+		};
+		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();
 				}
-			};
-			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: 2000,
+			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.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');
-
-			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>
+					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/style/hippie-style b/source/style/hippie-style
index 9f3797f..d17f966 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
+Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f74e666..65b6b0b 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,26 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	height: 100vh;
-	background-color: $color_back_basic;
 }
 
 #agreement {
 	flex-direction: column;
+	background-color: $bravo_color;
 
 	h1 {
 		margin-top: 0;
+		color: $color_brightest;
 	}
 }
 
 #idle {
-	pointer-events: none;
+	background-color: $color_back_basic;
+	transition: background-color 1s;
+
+	&:hover>.mouse_over {
+		background-color: transparent !important;
+		transition: background-color $duration_basic $timing_basic 0s !important;
+	}
 }
 
 .toast {
@@ -188,8 +193,8 @@ $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";

From ba063b0760d9de4795eac34220cecd070fffa999 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 11:45:26 +0200
Subject: [PATCH 018/253] fix: Indentation for frontmatter

---
 source/screens/demo/examples/ui/index.njk | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index fdd8d97..83b1518 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -1,9 +1,9 @@
 ---
 title: Init
 tags: 
-	- demoExample
-	- index
-	- ui
+  - demoExample
+  - index
+  - ui
 ---
 
 {% set pageId = "init" %}

From 9ff731395aaac7b1fecb4537925478de2ebe2f62 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 12:07:10 +0200
Subject: [PATCH 019/253] feat: Improve details

- Prevent text selection for agreement step
- Extend mouse out time
- Hint toast is now part of intro step
- Agreement step can now be solved with keyboard
- Remove more event listeners when step is solved
---
 source/code/_intro.js                     | 10 ++++++++++
 source/screens/demo/examples/ui/index.njk | 13 +++++++------
 source/style/ui.scss                      |  3 ++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/source/code/_intro.js b/source/code/_intro.js
index 426bb57..341df5e 100644
--- a/source/code/_intro.js
+++ b/source/code/_intro.js
@@ -146,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.');
 		}
 	})
@@ -171,6 +175,7 @@ function showAgreement() {
 			el.style.pointerEvents = '';
 
 			el.addEventListener('click', agreeHandler);
+			document.addEventListener('keydown', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
 		}
@@ -186,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);
 			});
 		}
@@ -206,6 +213,7 @@ function showIdle() {
 			el.classList.replace('op_hide', 'op_show');
 			el.style.pointerEvents = '';
 			el.addEventListener('click', idleStart, false);
+
 			resolve('Idle.');
 		} else {
 			document.removeEventListener('mouseleave', idleStart);
@@ -256,6 +264,7 @@ function loadCore() {
 
 					el.removeEventListener('transitionend', endListener);
 					el.classList.add('di_none');
+
 					resolve("Core loaded.");
 				});
 			}
@@ -312,6 +321,7 @@ function stepHandler(e) {
 			console.info(msg);
 
 			el.removeEventListener('transitionend', endListener);
+			
 			resolve(msg);
 		});
 	})
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 83b1518..f7534f3 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -35,12 +35,12 @@ tags:
 			<div id="status">0%</div>
 		</div>
 	</div>
-	<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">
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
+		</div>
 		{{ ph.brand('brand') }}
 		<p>Powered by</p>
 		<ul class="tech-stack">
@@ -77,6 +77,7 @@ tags:
 
 		let introDelay = 6;
 		let hintDelay = 1;
+		let cycleDelay = 2;
 		let isAgree = false;
 		const steps = {
 			agreement: {
@@ -117,7 +118,7 @@ tags:
 		const loader = document.getElementById('loader');
 		const idle = {
 			element: document.getElementById('idle'),
-			delay: 2000,
+			delay: cycleDelay * 1000,
 			position: 0,
 			cycle() {
 				if (typeof this.intervalId === 'number') {
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 65b6b0b..645e1f5 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -157,6 +157,7 @@ $z-indexes: (
 #agreement {
 	flex-direction: column;
 	background-color: $bravo_color;
+	user-select: none;
 
 	h1 {
 		margin-top: 0;
@@ -166,7 +167,7 @@ $z-indexes: (
 
 #idle {
 	background-color: $color_back_basic;
-	transition: background-color 1s;
+	transition: background-color 4s;
 
 	&:hover>.mouse_over {
 		background-color: transparent !important;

From 9fbc19388f1ed600868469cb30220306a8f4a52e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 12:44:47 +0200
Subject: [PATCH 020/253] feat: Update card script

- Use vanilla instead of jQuery
- Remove super script
- Remove event for dither variant
- Reindent
---
 source/screens/demo/examples/card.njk | 161 ++++++++++++--------------
 1 file changed, 76 insertions(+), 85 deletions(-)

diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
index ee7011a..7db860b 100644
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -9,100 +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>
-    $(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

From 875041bacfe0254fc1889df38065400cdf6583b2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 13:02:30 +0200
Subject: [PATCH 021/253] feat: Update composeMail function

- Move function to hippie functions
- Use vanilla instead of jQuery
- Add examples to introduction page
- Reindent
---
 source/code/app.js                   | 143 +++++---------
 source/code/hippie/functions.js      | 279 +++++++++++++++------------
 source/screens/demo/introduction.njk |   4 +
 3 files changed, 213 insertions(+), 213 deletions(-)

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/screens/demo/introduction.njk b/source/screens/demo/introduction.njk
index 792967e..d74be33 100644
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -26,6 +26,8 @@ tags:
     </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 %}
@@ -43,6 +45,8 @@ tags:
 
     $(document).ready(function () {
       logPerf('JQ document ready event fired.');
+      composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+      composeMail('.general', 'name', 'domain', 'tld', '', '')
     });
 
     $(document).scroll(function () {

From 8f15664d577f605fcc66b0dbe46dee900da4a493 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 13:08:58 +0200
Subject: [PATCH 022/253] style: Spaces to tabs

---
 source/code/hippie/variables.js           |   42 +-
 source/screens/demo/basics.njk            | 1736 ++++++++++-----------
 source/screens/demo/components.njk        |  348 ++---
 source/screens/demo/examples/portal.njk   |   47 +-
 source/screens/demo/examples/songbook.njk |   67 +-
 source/screens/demo/index.njk             |  128 +-
 source/screens/demo/introduction.njk      |   72 +-
 source/screens/demo/layouts.njk           |  628 ++++----
 source/templates/demo/_app.njk            |   39 +-
 source/templates/demo/_default.njk        |   16 +-
 source/templates/demo/_main.njk           |   26 +-
 source/templates/demo/_maintenance.njk    |    8 +-
 12 files changed, 1580 insertions(+), 1577 deletions(-)

diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js
index 7ab6556..e1f77e7 100644
--- a/source/code/hippie/variables.js
+++ b/source/code/hippie/variables.js
@@ -1,16 +1,16 @@
 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),
-  }
+	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;
@@ -18,13 +18,13 @@ let basicEase = 600;
 const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
 const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
 const flagColors = [
-  'fad803',
-  'f2af13',
-  'd30a51',
-  '8e1f68',
-  '273f8b',
-  '3c579a',
-  'b7e0f0',
-  '6bc7d9',
-  '52bed1'
+	'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 8206a8c..2d962aa 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -10,884 +10,884 @@ tags:
 
 {% block title %}Grundlagen{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
+	<!-- {{ page.fileSlug }}.page -->
+	{% include "hippie/partials/_body_nav.njk" %}
 
-  <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>
+	<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>
+		<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>
-    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
+		// ------------------------------------------------------------------------------
+		// 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).ready(function () {
+			logPerf('JQ document ready event fired.');
+		});
 
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
-    logPerf('Application ready... not.');
-  </script>
+		$(document).scroll(function () {
+			scrollUi.check();
+		});
+		logPerf('Application ready... not.');
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index b1f6ed3..b4d27f5 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -10,185 +10,185 @@ tags:
 
 {% 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 -->
+	<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>
 
-    <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://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>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
-  {{ log.asset(true) }}
-  {{ log.log('Assets loaded.', assetsLoaded) }}
+	{{ super() }}
+	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
+	{{ log.asset(true) }}
+	{{ log.log('Assets loaded.', assetsLoaded) }}
 {% 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/index.njk b/source/screens/demo/index.njk
index 16ecac9..02b2677 100644
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@@ -12,74 +12,74 @@ 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>
-    assetsLoaded = true;
-    logPerf('BODY        :: Assets loaded, running page specific script...');
-    // Page specific
-    // ------------------------------------------------------------------------------
-    $(document).ready(function () {
-      logPerf('EVENT       :: jQuery \'ready\' event fired.');
-    });
-    logPerf('Application ready... not.');
-  </script>
+	{{ super() }}
+	<script>
+		assetsLoaded = true;
+		logPerf('BODY        :: Assets loaded, running page specific script...');
+		// Page specific
+		// ------------------------------------------------------------------------------
+		$(document).ready(function () {
+			logPerf('EVENT       :: jQuery \'ready\' event fired.');
+		});
+		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 d74be33..4fffb89 100644
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -10,48 +10,50 @@ tags:
 
 {% block title %}Einführung{% endblock %}
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block main %}
-<!-- {{ page.fileSlug }}.page -->
-  {% include "hippie/partials/_body_nav.njk" %}
+	<!-- {{ 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>
-      <p>Contact: <a id="special" href=""></a></p>
-      <p>More: <a class="general" href=""></a>, <a class="general" href=""></a></p>
-    </article>
-  </section>
+	<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>
-    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
+		// ------------------------------------------------------------------------------
+		// 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.');
-      composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
-      composeMail('.general', 'name', 'domain', 'tld', '', '')
-    });
+		$(document).ready(function () {
+			logPerf('JQ document ready event fired.');
+			composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+			composeMail('.general', 'name', 'domain', 'tld', '', '')
+		});
 
-    $(document).scroll(function () {
-      scrollUi.check();
-    });
-    logPerf('Application ready... not.');
-  </script>
+		$(document).scroll(function () {
+			scrollUi.check();
+		});
+		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 82d97e1..810c823 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -10,326 +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 -->
+	<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>
 
-        <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>
+				<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>
 
-        <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>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>
 {% endblock %}
 
 {% block 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>
+	{{ 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/templates/demo/_app.njk b/source/templates/demo/_app.njk
index ca7a37c..1d948a2 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@@ -1,31 +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 %}
-      <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 %}
+		{% 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 10bde89..c2797e8 100644
--- a/source/templates/demo/_main.njk
+++ b/source/templates/demo/_main.njk
@@ -2,20 +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 %}
+	<!-- <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

From 4fcd7742a854a30c599e25086220e65ea2e95777 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 18 Jun 2025 19:31:37 +0200
Subject: [PATCH 023/253] feat: Consolidate body navigation

- Update html spec in components page
- Add form components
- Add JS for components which is not globally available
- Move body navigation to main template
- Reformat main template
---
 source/screens/demo/basics.njk       |  26 +-----
 source/screens/demo/components.njk   | 120 ++++++++++++++++++++++++---
 source/screens/demo/index.njk        |   5 +-
 source/screens/demo/introduction.njk |  16 +---
 source/screens/demo/layouts.njk      |   4 -
 source/templates/hippie/_main.njk    |  92 +++++++++++---------
 6 files changed, 167 insertions(+), 96 deletions(-)

diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 2d962aa..3df91dd 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -15,8 +15,6 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	{% include "hippie/partials/_body_nav.njk" %}
-
 	<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>
@@ -647,6 +645,7 @@ tags:
 				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>
@@ -867,27 +866,4 @@ tags:
 			</header>
 		</section>
 	</div>
-
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-	<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>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index b4d27f5..443999b 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -15,10 +15,6 @@ tags:
 
 {% 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">
@@ -43,10 +39,10 @@ tags:
 		<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>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+h4{Varianten}</code></pre>
+			<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>
@@ -94,7 +90,7 @@ tags:
 				<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">
+				<table class="width_full table_fix">
 					<thead>
 						<tr>
 							<th class="cell_pre" scope="col"></th>
@@ -182,13 +178,117 @@ tags:
 					</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>
 	</div>
 {% endblock %}
 
 {% block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
-	{{ log.asset(true) }}
-	{{ log.log('Assets loaded.', assetsLoaded) }}
+	<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/index.njk b/source/screens/demo/index.njk
index 02b2677..c50c516 100644
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@@ -74,12 +74,9 @@ tags:
 	{{ super() }}
 	<script>
 		assetsLoaded = true;
-		logPerf('BODY        :: Assets loaded, running page specific script...');
+		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
 		// Page specific
 		// ------------------------------------------------------------------------------
-		$(document).ready(function () {
-			logPerf('EVENT       :: jQuery \'ready\' event fired.');
-		});
 		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 4fffb89..f1a9752 100644
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -15,8 +15,6 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	{% include "hippie/partials/_body_nav.njk" %}
-
 	<section class="sec_main_center">
 		<header>
 			<hgroup>
@@ -41,19 +39,9 @@ tags:
 		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'));
+		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+		composeMail('.general', 'name', 'domain', 'tld', '', '')
 
-		$(document).ready(function () {
-			logPerf('JQ document ready event fired.');
-			composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
-			composeMail('.general', 'name', 'domain', 'tld', '', '')
-		});
-
-		$(document).scroll(function () {
-			scrollUi.check();
-		});
 		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 810c823..9672ea8 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -15,10 +15,6 @@ tags:
 
 {% 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">
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk
index b7d305a..443b555 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -3,53 +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...') }}
-      {# <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>
-    {% 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

From 7f84235f0828cdb18f3db8fe514794e01eff186a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 11:07:54 +0200
Subject: [PATCH 024/253] fix: Clean up small things

- Rename footer macro
- Remove unnecessary div in components page
- Rename file comments
---
 source/screens/demo/components.njk              |  2 --
 source/templates/hippie/_maintenance.njk        |  2 +-
 .../templates/hippie/macros/footer-status.njk   | 17 -----------------
 .../templates/hippie/partials/_body_hover.njk   |  2 +-
 source/templates/hippie/partials/_body_nav.njk  |  2 +-
 .../templates/hippie/partials/_head_links.njk   |  2 +-
 source/templates/hippie/partials/_head_meta.njk |  2 +-
 .../templates/hippie/partials/_head_script.njk  |  2 +-
 8 files changed, 6 insertions(+), 25 deletions(-)
 delete mode 100644 source/templates/hippie/macros/footer-status.njk

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 443999b..e6ad058 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -15,7 +15,6 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	<div id="begin" class="">
 		<section class="sec_main_center">
 			<header class="header_txt">
 				<h1>Medienformat Abfragen</h1>
@@ -210,7 +209,6 @@ tags:
 				</select>
 			</article>
 		</section>
-	</div>
 {% endblock %}
 
 {% block script %}
diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk
index 975874b..2bbc5e6 100644
--- a/source/templates/hippie/_maintenance.njk
+++ b/source/templates/hippie/_maintenance.njk
@@ -1,5 +1,5 @@
 <!-- maintenance.template -->
-{% import "hippie/macros/footer-status.njk" as status %}
+{% import "hippie/macros/_footer.njk" as status %}
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
   <head>
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/_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 }};

From 07f51e80a239ca87e0888bbc3a78f0ed7769e672 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 12:02:06 +0200
Subject: [PATCH 025/253] feat: Add macros

- New footer macros
- New header macro
- Use macros in partials
---
 source/screens/demo/components.njk           |  5 +++
 source/templates/hippie/_maintenance.njk     | 38 ++++++++++----------
 source/templates/hippie/macros/_footer.njk   | 23 ++++++++++++
 source/templates/hippie/macros/_header.njk   |  5 +++
 source/templates/hippie/partials/_footer.njk |  5 ++-
 source/templates/hippie/partials/_header.njk |  3 +-
 6 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 source/templates/hippie/macros/_footer.njk
 create mode 100644 source/templates/hippie/macros/_header.njk

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index e6ad058..57da584 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -7,6 +7,7 @@ tags:
 {% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_footer.njk" as footer %}
 
 {% block title %}Komponenten{% endblock %}
 {% block head %}
@@ -57,6 +58,10 @@ tags:
 				<pre class="pre_code"><code>section.sec_main_status</code></pre>
 				<h2>&lt;h3&gt;</h2>
 				<h2>&lt;h4&gt;</h2>
+				<h2>&lt;footer&gt;</h2>
+				<div style="position:relative;height:256px;background-color:#b7e0f0;">
+					{{ footer.pinned() }}
+				</div>
 			</article>
 			<article>
 				<h1 id="grouping">Gruppierung</h1>
diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk
index 2bbc5e6..0741534 100644
--- a/source/templates/hippie/_maintenance.njk
+++ b/source/templates/hippie/_maintenance.njk
@@ -1,27 +1,27 @@
 <!-- maintenance.template -->
-{% import "hippie/macros/_footer.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/_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/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/_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

From c98ebb44caf4ac9e6fdded2654f99651a7b377d5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 12:02:32 +0200
Subject: [PATCH 026/253] style: Reindent and reformat

---
 source/templates/hippie/macros/_gate.njk      | 53 +++++++++----------
 source/templates/hippie/macros/_log.njk       | 32 +++++------
 source/templates/hippie/macros/_nav.njk       | 22 ++++----
 .../templates/hippie/macros/_placeholder.njk  | 52 +++++++++---------
 source/templates/hippie/macros/_song.njk      | 20 +++----
 source/templates/hippie/macros/_state.njk     | 21 ++++----
 6 files changed, 101 insertions(+), 99 deletions(-)

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/_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

From 4d00d34d630d56d90edbedd14f30f06b023fb7ff Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 12:36:56 +0200
Subject: [PATCH 027/253] feat: Add content for components page

- New elements in sections part
- Reindent
---
 source/screens/demo/basics.njk     |   4 +-
 source/screens/demo/components.njk | 394 +++++++++++-----------
 source/screens/demo/layouts.njk    | 515 ++++++++++++++---------------
 3 files changed, 461 insertions(+), 452 deletions(-)

diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 3df91dd..d8cf064 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -15,7 +15,7 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	<div id="begin" class="demo__intro">
+	<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
@@ -243,7 +243,7 @@ tags:
 				<p>
 					<a class="a_button_text" href="#textlevel">↥</a>
 					(Zum Anfang des Abschnitts springen)
-					<a class="a_button_text" href="#begin">⇫</a>
+					<a class="a_button_text" href="#">⇫</a>
 					(Zum Anfang der Seite springen)</p>
 			</nav>
 			<nav class="nav_center_old">
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 57da584..87c7a3c 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -16,204 +16,226 @@ tags:
 
 {% block main %}
 	<!-- {{ 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>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://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>
-				<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>
-				<h2>&lt;footer&gt;</h2>
-				<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>
-				<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">
-					<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">
+	<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;footer&gt;</h2>
+			<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>
+			<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">
+				<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>
-						<td></td>
-						<td></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>ohne</td>
-						<td>Rahmen</td>
-						<td></td>
+						<td>Bravo</td>
+						<td>10</td>
+						<td class="txt_right">1</td>
 					</tr>
 					<tr>
-						<td></td>
-						<td>jedoch</td>
-						<td>mit</td>
+						<td>Charlie</td>
+						<td>1</td>
+						<td class="txt_right">1</td>
 					</tr>
+				</tbody>
+				<tfoot>
 					<tr>
-						<td></td>
-						<td></td>
-						<td>Streifen</td>
+						<th colspan="2" class="txt_right" scope="row">Summe</th>
+						<td class="txt_right" title=">9000">9001</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">
+				</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">
+				<option value="1" selected="selected">
 						Fancy list</option>
-					<option value="2">
+				<option value="2">
 						Table list</option>
-				</select>
-			</article>
-		</section>
+			</select>
+		</article>
+	</section>
 {% endblock %}
 
 {% block script %}
@@ -243,7 +265,7 @@ tags:
 					.visibility = 'hidden';
 			}
 		}
-		
+
 		function capsDetect() {
 			const body = document.getElementsByTagName('body')[0];
 			const capsWarning = document.getElementById('error');
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index 9672ea8..ab80554 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -15,304 +15,291 @@ tags:
 
 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	<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">
+	<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">Abschnitt 1</a>
+							<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
 						</li>
 						<li>
-							<a href="" class="a_button">Abschnitt 2</a>
+							<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
 						</li>
 						<li>
-							<a href="" class="a_button">Abschnitt 3</a>
+							<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
 						</li>
 						<li>
-							<a href="" class="a_button">Abschnitt 4</a>
+							<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</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>
+					<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">Blau</a>
+								<a href="" class="a_button">Eins</a>
 							</li>
 							<li>
-								<a href="" class="a_button">Gelb</a>
+								<a href="" class="a_button">Zwei</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">
+				<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">Eins</a>
+									<a href="" class="a_button_text">Alpha</a>
 								</li>
 								<li>
-									<a href="" class="a_button">Zwei</a>
+									<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>
-					</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>
+						<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>
+						</p>
+					</footer>
 				</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>
+			</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>
 
-				<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>
+			<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>
 
-				<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>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>
 {% endblock %}
 
 {% block script %}

From 7950d23b145b4dffe5a11fbc7ea660f3456f919b Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 14:20:56 +0200
Subject: [PATCH 028/253] feat: More content for components and layouts

- Update hippie styles
- Add demo images
- New components content
- New layout structure and content
---
 source/art/images/demo/bullet.gif  | Bin 0 -> 67 bytes
 source/art/images/demo/letter.gif  | Bin 0 -> 77 bytes
 source/screens/demo/components.njk |  83 ++++++++++++++++++++++++++---
 source/screens/demo/layouts.njk    |  55 ++++++++++++-------
 source/style/hippie-style          |   2 +-
 5 files changed, 112 insertions(+), 28 deletions(-)
 create mode 100644 source/art/images/demo/bullet.gif
 create mode 100644 source/art/images/demo/letter.gif

diff --git a/source/art/images/demo/bullet.gif b/source/art/images/demo/bullet.gif
new file mode 100644
index 0000000000000000000000000000000000000000..55a84abda4f23c8a666c7407220b5d6c3d29b233
GIT binary patch
literal 67
zcmZ?wbhEHb6krfwXkcWJmzQT?U{L(Y!pOkD$e;sc1H}ax7?`Ab`d6NQo8K^JQeako
VY}IPMlvx!MC0dqgMKLf~0|2-%5Q+c*

literal 0
HcmV?d00001

diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif
new file mode 100644
index 0000000000000000000000000000000000000000..60aac08875a890ca2123c56ff6c0187c3a02f6ca
GIT binary patch
literal 77
zcmZ?wbhEHb6krfwXkcW30L7myKqe!D4u}hqVPI0}>0f#JEkEy!En%E@rYNp|)7o`I
YR<3>C(^+cLPFXANM1GT&Wo57i0C18ONdN!<

literal 0
HcmV?d00001

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 87c7a3c..5890112 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -80,7 +80,17 @@ tags:
 				<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>
@@ -90,24 +100,81 @@ tags:
 			<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.txt_center</code></pre>
-			<pre class="pre_code"><code>p.txt_right</code></pre>
 			<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</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>
+			<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>
-			<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
+			<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>
-			<pre class="pre_code"><code>div.div_info>p</code></pre>
 			<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>
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index ab80554..a45a817 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -21,19 +21,9 @@ tags:
 			<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>
+			<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>
@@ -41,13 +31,13 @@ tags:
 					<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>
+			<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>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
+			<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>
@@ -82,7 +72,7 @@ tags:
 					</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>
+			<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4</code></pre>
 			<nav class="nav_horizontal">
 				<ul>
 					<li>
@@ -99,6 +89,7 @@ tags:
 					</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>
@@ -199,6 +190,7 @@ tags:
 				<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
@@ -229,10 +221,34 @@ tags:
 			</form>
 
 			<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/letter.gif" alt="">name@domain.tld</a>
+					<a href=""><img src="{{ pageBase }}art/demo/letter.gif" alt="">name@domain.tld</a>
 				</li>
 				<li>
 					<a href="">Work</a>
@@ -254,7 +270,7 @@ tags:
 				</thead>
 				<tbody>
 					<tr>
-						<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
+						<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>
@@ -269,7 +285,7 @@ tags:
 				</tbody>
 				<tbody>
 					<tr>
-						<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
+						<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>
@@ -283,6 +299,7 @@ tags:
 					</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">
diff --git a/source/style/hippie-style b/source/style/hippie-style
index d17f966..a1a4bd4 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71
+Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2

From 08e258d7aa09a9108e84be83db5862451584ff15 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 16:13:22 +0200
Subject: [PATCH 029/253] feat: Create new ui index

- New index page for ui collection
- Move intro to examples and rename
---
 source/screens/demo/examples/intro.njk    | 149 ++++++++++++++++++++++
 source/screens/demo/examples/ui/index.njk | 137 ++------------------
 2 files changed, 161 insertions(+), 125 deletions(-)
 create mode 100644 source/screens/demo/examples/intro.njk

diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
new file mode 100644
index 0000000..07eb1a1
--- /dev/null
+++ b/source/screens/demo/examples/intro.njk
@@ -0,0 +1,149 @@
+---
+title: Intro
+tags: 
+  - demoExample
+---
+
+{% set pageId = "init" %}
+{% set pageClass = "html_ui" %}
+
+{% extends "demo/_app.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% 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="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>
+		{{ 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/_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/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index f7534f3..4a0dfed 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -1,9 +1,8 @@
 ---
-title: Init
+title: UI
 tags: 
   - demoExample
   - index
-  - ui
 ---
 
 {% set pageId = "init" %}
@@ -24,128 +23,16 @@ tags:
 {% 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>
+	<div class="sec_main_center">
+		<nav role="doc-toc">
+			<h1>Inhaltsverzeichnis</h1>
+			<ul class="list_link">
+				{%- for ui in collections.ui -%}
+					<li>
+						<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
 	</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>
-		{{ 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/_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

From 3b380e954acd6beec2f346ec20edcdc03839424d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 16:21:09 +0200
Subject: [PATCH 030/253] feat: Changes to style and logic for ui parts

- Update hippie styles
- Move top element for new page to header macro
- Reassign ui and example collections
---
 source/screens/demo/basics.njk                | 50 +++++++++----------
 source/screens/demo/examples/ui/drag.njk      |  2 +-
 source/screens/demo/examples/ui/form.njk      |  3 +-
 source/screens/demo/examples/ui/new.njk       | 31 +++---------
 source/screens/demo/examples/ui/settings.njk  |  5 +-
 source/style/hippie-style                     |  2 +-
 source/style/modules/ui/_drag_module.scss     | 15 +++---
 source/style/modules/ui/_form_module.scss     |  7 +--
 source/style/modules/ui/_settings_module.scss |  6 ---
 source/style/ui.scss                          | 20 +++-----
 source/templates/demo/_app.njk                |  1 -
 source/templates/hippie/macros/_header.njk    | 25 ++++++++++
 source/templates/hippie/macros/_state.njk     |  4 +-
 13 files changed, 79 insertions(+), 92 deletions(-)

diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index d8cf064..8ab604a 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -629,7 +629,7 @@ tags:
 				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><input value="Undefiniert"/><input class="input_io" 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>
@@ -637,8 +637,8 @@ tags:
 			<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><input class="button_io" type="button" value="Input Button">
+				<button class="button_io">Button</button>
 			</p>
 			<p>Interaktive Elemente können durch das Attribut
 				<code>readonly</code>
@@ -649,8 +649,8 @@ tags:
 			<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><input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
 			<p>Das Element
 				<code>&lt;label&gt;</code>
@@ -677,31 +677,31 @@ tags:
 				</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="txt_right demo__td_no_br demo__td_pl"><input class="input_io" 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="txt_right demo__td_no_br demo__td_pl"><input class="input_io" 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="txt_right demo__td_no_br demo__td_pl"><input class="input_io" 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="txt_right demo__td_no_br demo__td_pl"><input class="input_io" 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="txt_right demo__td_no_br demo__td_pl"><input class="input_io" 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="txt_right demo__td_no_br demo__td_pl"><input class="input_io" 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>
@@ -713,8 +713,8 @@ tags:
 				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">
+					<label for="demo__input">Input:</label><input class="input_io" type="text" value="love" readonly="readonly" id="demo__input">
+					<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness" readonly="readonly" id="demo__output">
 				</div>
 			</fieldset>
 			<p>Sie können mittels
@@ -753,9 +753,9 @@ tags:
 				<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>
+						<button class="button_io">Senden</button><input class="button_io" 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>
+					<div><input class="input_io" type="text" placeholder="Text"><input class="input_io" 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>
@@ -792,43 +792,43 @@ tags:
 					<label class="">Datum<br>
 						<code>&lt;input[type="date"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="date"></div>
+					<div><input class="input_io" type="date"></div>
 					<label class="">Uhrzeit<br>
 						<code>&lt;input[type="time"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="time"></div>
+					<div><input class="input_io" 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>
+					<div><input class="input_io" type="datetime-local"></div>
 					<label class="">Kalendermonat<br>
 						<code>&lt;input[type="month"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="month"></div>
+					<div><input class="input_io" type="month"></div>
 					<label class="">Kalenderwoche<br>
 						<code>&lt;input[type="week"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="week"></div>
+					<div><input class="input_io" type="week"></div>
 					<label class="">@dresse<br>
 						<code>&lt;input[type="email"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="email" placeholder="@"></div>
+					<div><input class="input_io" 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>
+					<div><input class="input_io" 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>
+					<div><input class="input_io" 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>
+					<div><input class="input_io" 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>
+					<div><input class="input_io" type="search"></div>
 					<label class="">Datei<br>
 						<code>&lt;input[type="file"]&gt;</code>
 					</label>
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 09266b9..ac2276e 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -1,7 +1,7 @@
 ---
 title: Drag
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index b9adc45..1ab3145 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -1,10 +1,9 @@
 ---
 title: Form
 tags: 
-  - demoExample
   - ui
 ---
-{% set bodyClass = "body_form" %}
+{% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index c567309..536583d 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -1,14 +1,14 @@
 ---
 title: New
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
 {% extends "demo/_app.njk" %}
-{% import "hippie/macros/_state.njk" as state %}
+{% import "hippie/macros/_header.njk" as header %}
 
 {% block title %}{{ title }}
 {% endblock %}
@@ -23,27 +23,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-  <div id="top">
-    <h1 class="brand">
-      <a href="#">{{ hippie.brand | upper }}</a>
-    </h1>
-    <nav>
-      <ul>
-        {% for link in new %}
-          <li>
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    <div class="state">
-      <p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-    </div>
-  </div>
+  {{ header.status(hippie, new) }}
   <div class="container">
     <div class="area menu">
       <nav class="nav_horizontal">
@@ -74,8 +54,9 @@ tags:
     let clock = new Clock('time');
 
     document.addEventListener('mousemove', (event) => {
-      document.getElementById('log')
-      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+      document
+        .getElementById('log')
+        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
     });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index da61f8a..cb4f6aa 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -1,7 +1,6 @@
 ---
 title: Settings
 tags:
-  - demoExample
   - ui
 ---
 {% set pageId = page.fileSlug %}
@@ -25,8 +24,8 @@ tags:
 {% block body %}
 <div id="frame" class="frame-flex">
   <div class="title-bar">
-    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
-    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
+    <div>title-bar<button class="button_io">menu</button class="button_io"><button class="button_io">search</button class="button_io"></div>
+    <div><button class="button_io">minimize</button class="button_io"><button class="button_io">maximize</button class="button_io"><button class="button_io">close</button class="button_io"></div>
   </div>
   <main>
     <aside class="left">aside
diff --git a/source/style/hippie-style b/source/style/hippie-style
index a1a4bd4..3eab0f0 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
+Subproject commit 3eab0f095603236be4519081203e51bc2916801e
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index 3942e0a..03b3de8 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,18 +1,17 @@
 .body_drag {
-	height: 100vh;
-	// padding: $space_basic;
+	@extend .body_ui;
 
 	button {
-		@extend .io_button;
+		@extend .button_io;
 		position: fixed;
 		top: 8px;
 		right: 8px;
 		margin: 0;
 	}
-}
 
-#space {
-	position: relative;
-	height: 100%;
-	background-color: $color-dark;
+	#space {
+		position: relative;
+		height: 100%;
+		background-color: $color-dark;
+	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
index e52b8af..c571126 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,13 +1,8 @@
-.body_form {
-	margin: 0;
-	background-color: $color-dark;
-}
-
 #head {
 	// display: flex;
 
 	button {
-			@extend .io_button;
+			@extend .button_io;
 	}
 
 	h1 {
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
index 9b9dc1b..ffe8d7d 100755
--- a/source/style/modules/ui/_settings_module.scss
+++ b/source/style/modules/ui/_settings_module.scss
@@ -1,9 +1,3 @@
-$module_top_height: 32px;
-
-.body_ui {
-	height: 100vh;
-}
-
 #frame {
 	position: relative;
 	height: 100%;
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 645e1f5..99fb3cb 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -1,21 +1,11 @@
 @use "sass:map";
 
+$color_text_basic: white;
+$color_head_basic: white;
+
 @import "demo_config";
 @import "hippie-style/hippie";
 
-$z-indexes: (
-	"default": 0,
-	"content-bottom": 1,
-	"content-low": 2,
-	"content-med": 3,
-	"content-high": 4,
-	"content-top": 10,
-	"modal-low": 11,
-	"modal-med": 12,
-	"modal-high": 13,
-	"toast": 100
-);
-
 .op_show {
 	transition: $transition_show;
 }
@@ -34,6 +24,10 @@ $z-indexes: (
 	}
 }
 
+.body_ui {
+	height: 100vh;
+}
+
 .step {
 	@extend %full_parent;
 }
diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk
index 1d948a2..73a8dd0 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@@ -25,6 +25,5 @@
 			<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>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_header.njk b/source/templates/hippie/macros/_header.njk
index 19cac15..e074db7 100644
--- a/source/templates/hippie/macros/_header.njk
+++ b/source/templates/hippie/macros/_header.njk
@@ -2,4 +2,29 @@
 	<header class="header_site">
 		<div id="begin"></div>
 	</header>
+{% endmacro %}
+
+{% macro status(hippie, page) %}
+	{% import "hippie/macros/_state.njk" as state %}
+	<div id="top">
+		<h1 class="brand">
+			<a href="#">{{ hippie.brand | upper }}</a>
+		</h1>
+		<nav>
+			<ul>
+				{% for link in page %}
+					<li>
+						<a href="{{ link.href }}">{{ link.text }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
+		<div class="state">
+			<p>{{ state.coord("log")}}
+        /
+        {{ state.date("date")}}
+        /
+        {{ state.time("time")}}</p>
+		</div>
+	</div>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_state.njk b/source/templates/hippie/macros/_state.njk
index 63671d4..ef1f34d 100644
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@@ -1,10 +1,12 @@
 {% 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>
 {% endmacro %}
-{% macro date() %}
+
+{% macro date(id) %}
 	<span id="{{ id }}">
 		<span id="day">Wochentag</span>,
 		<span id="dayNumb">##</span>.

From d83ae3ea2239856ea4d9abafa3a1aca04c5c7d5a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 16:45:20 +0200
Subject: [PATCH 031/253] feat: Adapt new hippie styles

- Use bound io class
- Remove over specified styles
---
 source/screens/demo/examples/ui/drag.njk  |  4 +++-
 source/screens/demo/examples/ui/form.njk  |  4 ++--
 source/style/hippie-style                 |  2 +-
 source/style/modules/ui/_drag_module.scss |  8 --------
 source/style/modules/ui/_form_module.scss | 12 ------------
 5 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index ac2276e..25911b1 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -22,8 +22,10 @@ tags:
 {% endblock %}
 
 {% block body %}
+  <header class="io pos_fix pin_top pin_right pin_left">
+    <button data-action="add">Add</button>
+  </header>
   <div id="space"></div>
-  <button data-action="add">Add</button>
 {% endblock %}
 
 {%- block script %}
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 1ab3145..5f279de 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -19,12 +19,12 @@ tags:
 {% endblock %}
 
 {% block body %}
-	<div id="head">
+	<header class="io">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
 		<button data-action="change">Ändern</button>
 		<hr>
-	</div>
+	</header>
 	<form id="form" action="">
 		<div id="grid">
 			<div>a</div>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 3eab0f0..c268f4f 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 3eab0f095603236be4519081203e51bc2916801e
+Subproject commit c268f4fdcac9f4edec2503638ac6fdd98de467a9
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index 03b3de8..c9a98dc 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,14 +1,6 @@
 .body_drag {
 	@extend .body_ui;
 
-	button {
-		@extend .button_io;
-		position: fixed;
-		top: 8px;
-		right: 8px;
-		margin: 0;
-	}
-
 	#space {
 		position: relative;
 		height: 100%;
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
index c571126..dac2760 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,15 +1,3 @@
-#head {
-	// display: flex;
-
-	button {
-			@extend .button_io;
-	}
-
-	h1 {
-		margin: 0;
-	}
-}
-
 #grid {
 	display: grid;
 	gap: 8px;

From 06e4a80b6677b73b2c5ae9c089eea797d526ccd3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 20 Jun 2025 17:00:07 +0200
Subject: [PATCH 032/253] fix: Remove wrong page id

---
 source/screens/demo/examples/ui/index.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 4a0dfed..4e5367a 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -5,11 +5,11 @@ tags:
   - index
 ---
 
-{% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
+
 {% block title %}
 	{{ title }}
 {% endblock %}

From 5786e9e4b0fbcc996e3306c3349500a9fecc2cb1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 20 Jun 2025 17:03:31 +0200
Subject: [PATCH 033/253] feat: Update components to new hippie styles

---
 source/screens/demo/basics.njk     | 9 ++++-----
 source/screens/demo/components.njk | 2 ++
 source/style/hippie-style          | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 8ab604a..e49936b 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -752,21 +752,20 @@ tags:
 				<legend>Einfache Eingabeelemente mit Stil</legend>
 				<div class="grid grid_column_2">
 					<label>Schaltflächen:</label>
-					<div>
+					<div class="flex inline">
 						<button class="button_io">Senden</button><input class="button_io" type="reset" value="Abbrechen"></div>
 					<label>Zeicheneingaben:</label>
-					<div><input class="input_io" type="text" placeholder="Text"><input class="input_io" type="number" value="0815"></div>
+					<div class="flex inline"><input class="input_io" type="text" placeholder="Text"><input class="input_io" 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>
+					<div class="flex inline">
 						<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">
+						</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>
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 5890112..8161aba 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -115,6 +115,8 @@ tags:
 			<hr class="hr_hidden">
 			<hr class="hr_dotted">
 			<hr class="hr_double">
+			<pre class="pre_code"><code>hr.vertical</code></pre>
+			<hr class="vertical">
 			<h2>&lt;pre&gt;</h2>
 			<pre>Vorformatierter Text.
 	erhält Umbrüche und Einrückung.
diff --git a/source/style/hippie-style b/source/style/hippie-style
index c268f4f..1a3c25d 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit c268f4fdcac9f4edec2503638ac6fdd98de467a9
+Subproject commit 1a3c25d8b5969b53ec0404c8e77fe6322d083042

From 57dffa35020b6f013e9f76d2921f42b099d718be Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 20 Jun 2025 17:09:06 +0200
Subject: [PATCH 034/253] feat: New settings

- Add dependency to bootstrap icons
- Add example content
- Restructure layout
- Now more usage of base hippie styles
---
 source/screens/demo/examples/ui/settings.njk  | 116 ++++++++++++++----
 source/style/hippie-style                     |   2 +-
 source/style/modules/ui/_settings_module.scss |  46 ++++---
 3 files changed, 124 insertions(+), 40 deletions(-)

diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index cb4f6aa..b4e07d4 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -1,7 +1,7 @@
 ---
 title: Settings
 tags:
-  - ui
+	- ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
@@ -13,37 +13,103 @@ tags:
 {% endblock %}
 
 {% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+	{{ super() }}
+	<link 
+		href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
+		rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<div id="frame" class="frame-flex">
-  <div class="title-bar">
-    <div>title-bar<button class="button_io">menu</button class="button_io"><button class="button_io">search</button class="button_io"></div>
-    <div><button class="button_io">minimize</button class="button_io"><button class="button_io">maximize</button class="button_io"><button class="button_io">close</button class="button_io"></div>
-  </div>
-  <main>
-    <aside class="left">aside
-    <nav>
-      <ul>
-        <li>setting</li>
-        <li>setting</li>
-      </ul>
-    </nav>
-    </aside>
-    <section class="bside">section</section>
-  </main>
-</div>
+	<div id="frame" class="frame-flex">
+		<header class="io">
+			<button title="menu">
+				<i class="bi bi-three-dots"></i>
+			</button>
+			<span class="span_solo">title-bar</span>
+			<nav>
+				<div class="spacer-a"></div>
+				<button title="minimize">
+					<i class="bi bi-dash"></i>
+				</button>
+				<button title="maximize">
+					<i class="bi bi-fullscreen"></i>
+				</button>
+				<button title="close">
+					<i class="bi bi-x-square"></i>
+				</button>
+			</nav>
+		</header>
+		<main class="io">
+			<aside class="io left">
+				options
+				<nav>
+					<ul>
+						<li>setting</li>
+						<li>text</li>
+					</ul>
+					<hr>
+					<ul>
+						<li>
+							<label for="">label</label>
+						</li>
+						<li>
+							<button>button</button>
+						</li>
+					</ul>
+				</nav>
+			</aside>
+			<section class="bside">
+				<header class="io">
+					<nav>
+						<button title="search">
+							<i class="bi bi-search"></i>
+						</button>
+						<div class="spacer-b"></div>
+						<button title="cut">
+							<i class="bi bi-scissors"></i>
+						</button>
+						<button title="copy">
+							<i class="bi bi-copy"></i>
+						</button>
+						<button title="paste">
+							<i class="bi bi-clipboard-check-fill"></i>
+						</button>
+					</nav>
+					<hr class="vertical">
+					{# // FIXME: Navigationsstile sind chaotisch #}
+					<nav>
+						<ul>
+							<li>
+								<button title="collapse">
+									<i class="bi bi-arrows-collapse"></i>
+								</button>
+							</li>
+							<li>
+								<button title="expand">
+									<i class="bi bi-arrows-expand-vertical"></i>
+								</button>
+							</li>
+						</ul>
+					</nav>
+					<span class="span_solo">section-bar</span>
+				</header>
+				section</section>
+		</main>
+		<footer class="io">
+			<span class="span_solo">state</span>
+			<div class="spacer-a"></div>
+			<button>action</button>
+		</footer>
+	</div>
 {% endblock %}
 
 {%- block script %}
-  {{ super() }}
-  <script src="{{ pageBase }}js/app.js"></script>
-  <script>
-  </script>
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 1a3c25d..2f63dbe 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 1a3c25d8b5969b53ec0404c8e77fe6322d083042
+Subproject commit 2f63dbe2b65ddb320c0a7ea186f04a9c3698c9e7
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
index ffe8d7d..337f523 100755
--- a/source/style/modules/ui/_settings_module.scss
+++ b/source/style/modules/ui/_settings_module.scss
@@ -1,12 +1,24 @@
+@mixin nav-spacer($name, $size, $orientation) {
+	.spacer-#{$name} {
+		width: $size;
+		margin: 0;
+		border: $border_dotted;
+		opacity: .25;
+	}
+}
+
 #frame {
 	position: relative;
 	height: 100%;
-	background-color: $color-dark;
 
-	.title-bar {
-		button {
-			margin: 0 2px;
-		}
+	header,
+	aside,
+	footer {
+		border: 1px solid transparent;
+	}
+
+	&>header {
+		background-color: rgba(0, 0, 0, .1);
 	}
 
 	main {
@@ -19,20 +31,26 @@
 .frame-flex {
 	display: flex;
 	flex-direction: column;
+	gap: $space_basic;
 
-	.title-bar {
-		display: flex;
-
-		div:last-child {
-			margin-left: auto;
-		}
-	}
-	
 	main {
 		flex: 1;
 
-		aside, section {
+		aside,
+		section {
 			height: 100%;
 		}
 	}
+}
+
+.io {
+	.spacer {
+		width: $space_double;
+		margin: 0;
+		border: $border_dotted;
+		opacity: .25;
+	}
+
+	@include nav-spacer('a', $space_double, false);
+	@include nav-spacer('b', $space_small, false);
 }
\ No newline at end of file

From 52daf0ca51790641bd5269daac8d96fecbc8fe99 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Jun 2025 12:11:03 +0200
Subject: [PATCH 035/253] feat: Change placeholder and usage

- Move files
- Remove demo folder for art
- Remove unused files
- Add placeholders
- Move flag to placeholder
- Replace content with placeholders
---
 source/art/images/{demo => }/bullet.gif       | Bin
 source/art/images/demo/letter.gif             | Bin 77 -> 0 bytes
 .../images/{demo => }/flag_websafe_128x80.gif | Bin
 .../{demo => }/flag_websafe_128x80.webp       | Bin
 source/screens/demo/basics.njk                |   8 +--
 source/screens/demo/examples/card.njk         |  64 +++++++-----------
 source/screens/demo/examples/portal.njk       |   2 +-
 source/screens/demo/layouts.njk               |  47 +++++--------
 .../templates/hippie/macros/_placeholder.njk  |  57 +++++++++++++++-
 9 files changed, 99 insertions(+), 79 deletions(-)
 rename source/art/images/{demo => }/bullet.gif (100%)
 delete mode 100644 source/art/images/demo/letter.gif
 rename source/art/images/{demo => }/flag_websafe_128x80.gif (100%)
 rename source/art/images/{demo => }/flag_websafe_128x80.webp (100%)

diff --git a/source/art/images/demo/bullet.gif b/source/art/images/bullet.gif
similarity index 100%
rename from source/art/images/demo/bullet.gif
rename to source/art/images/bullet.gif
diff --git a/source/art/images/demo/letter.gif b/source/art/images/demo/letter.gif
deleted file mode 100644
index 60aac08875a890ca2123c56ff6c0187c3a02f6ca..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 77
zcmZ?wbhEHb6krfwXkcW30L7myKqe!D4u}hqVPI0}>0f#JEkEy!En%E@rYNp|)7o`I
YR<3>C(^+cLPFXANM1GT&Wo57i0C18ONdN!<

diff --git a/source/art/images/demo/flag_websafe_128x80.gif b/source/art/images/flag_websafe_128x80.gif
similarity index 100%
rename from source/art/images/demo/flag_websafe_128x80.gif
rename to source/art/images/flag_websafe_128x80.gif
diff --git a/source/art/images/demo/flag_websafe_128x80.webp b/source/art/images/flag_websafe_128x80.webp
similarity index 100%
rename from source/art/images/demo/flag_websafe_128x80.webp
rename to source/art/images/flag_websafe_128x80.webp
diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index e49936b..088d90d 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -7,6 +7,7 @@ tags:
 {% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}Grundlagen{% endblock %}
 {% block head %}
@@ -517,7 +518,7 @@ tags:
 		<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">
+			{{ ph.flag('img') }}
 			<p>Dies ist ein Bild. Es wird mit dem Element
 				<code>&lt;img&gt;</code>
 				eingebunden. Solch ein Bild hat üblicherweise die Attribute
@@ -533,10 +534,7 @@ tags:
 				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>
+				{{ ph.flag('img', 'file') }}
 		</article>
 		<article>
 			<h1>Tabellen</h1>
diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
index 7db860b..e05818d 100644
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -21,29 +21,7 @@ tags:
 	<!-- {{ 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>
+		{{ ph.flag('svg', '', 'flag', '') }}
 		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
 	</div>
 	<div class="card_box">
@@ -72,28 +50,34 @@ tags:
 
 		// console.log(colors);
 
-		document.getElementById('js_content').addEventListener('mouseenter', () => {
-			iId = setInterval(() => {
-				for (let i = 1; i <= colors.length; i++) {
+		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("triangle-" + i).setAttribute("fill", colors[position]);
-				}
-
-				position++;
-
-				if (position >= colors.length) {
-					position = 0;
-				}
-			}, 600);
-		});
-
-		document.getElementById('js_content').addEventListener('mouseleave', () => {
-			iId && clearInterval(iId);
-		});
+		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 8f949f2..68268c7 100644
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@@ -22,7 +22,7 @@ tags:
 		{{ gate.list(
 		'Tor mit Symbol und Liste',
 		'../demo', {
-			src: '/art/demo/flag_websafe_128x80.gif',
+			src: '/art/flag_websafe_128x80.gif',
 			alt: 'Flag of Interaktionsweise'
 		}, [
 			{
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index a45a817..4bbeb66 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -7,6 +7,7 @@ tags:
 {% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
@@ -25,11 +26,9 @@ tags:
 			<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>
+				<div class="float_space_left demo__avatar">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
+				<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
+				<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
 			</section>
 			<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
 			<div class="space_left_fourth">
@@ -245,18 +244,15 @@ tags:
 			<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>
+			<pre class="pre_code"><code>ul.list_link>(li>a)+li>a>img+span</code></pre>
+			<nav>
+				<ul class="list_link">
+					<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
+					<li>
+						<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
+					</li>
+				</ul>
+			</nav>
 
 			<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>
@@ -270,7 +266,7 @@ tags:
 				</thead>
 				<tbody>
 					<tr>
-						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
+						<td class="cell_icon" rowspan="2">■</td>
 						<td class="cell_link">
 							<a href="" target="_blank">Name</a>
 							<a href="" target="_blank">URL</a>
@@ -285,7 +281,7 @@ tags:
 				</tbody>
 				<tbody>
 					<tr>
-						<td class="cell_icon" rowspan="2"><img src="/art/demo/bullet.gif" alt="" width="16" height="16"></td>
+						<td class="cell_icon" rowspan="2">■</td>
 						<td class="cell_link">
 							<a href="" target="_blank">Name</a>
 							<a href="" target="_blank">URL</a>
@@ -302,18 +298,7 @@ tags:
 
 			<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>
+				{{ ph.flag() }}
 			</div>
 		</article>
 	</section>
diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk
index 2e8d298..f3c2fa1 100644
--- a/source/templates/hippie/macros/_placeholder.njk
+++ b/source/templates/hippie/macros/_placeholder.njk
@@ -1,5 +1,9 @@
-{% macro email(class = '', text = 'name@domain.tld') %}
-	<a class="{{ class }}" href="">{{ text }}</a>
+{% macro email(class = '', text = '', address = 'name@domain.tld') %}
+	{% if text === '' %}
+		{% set text = address %}
+	{% endif %}
+
+	<a class="{{ class }}" href="mailto:{{ address }}">{{ text }}</a>
 	{# {{ 'name@domain.tld' | urlize | safe }} #}
 {% endmacro %}
 
@@ -15,6 +19,10 @@
 	<span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
 
+{% macro phone(class = '', text = '+49 (0)101 1337 48') %}
+	<span class="{{ class }}">{{ text }}</span>
+{% endmacro %}
+
 {% macro brand(class = '', name = 'Marke') %}
 	<div class="{{ class }}">
 		{# <img src="" alt="Brand logo"> #}
@@ -44,4 +52,49 @@
 		</svg>
 		<h1>{{ name }}</h1>
 	</div>
+{% endmacro %}
+
+{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %}
+	{% set height = width / 1.6 %}
+	{% if type === 'svg' or type === '' %}
+		<svg version="1.1" id="{{ id }}" 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> #}
+			{% if desc !== '' %}
+				<desc>{{ desc }}</desc>
+			{% endif %}
+			<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>
+	{% elif type === 'img' %}
+		{% if src === 'file' %}
+			<picture>
+				<source srcset="{{ pageBase }}art/flag_websafe_128x80.webp" type="image/webp"/>
+				<img src="{{ pageBase }}art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
+			</picture>
+		{% else %}
+			<img 
+				width="{{ width }}" 
+				height="{{ height }}" 
+				alt="{{ desc }}"
+				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=">
+		{% endif %}
+	{% endif %}
 {% endmacro %}
\ No newline at end of file

From 8b7241c4dacee9f7e9361ac1668aedd14f13941a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Jun 2025 13:39:36 +0200
Subject: [PATCH 036/253] feat: Change styles and ui

- Change to hippie styles
- Remove unused styles and components
- Change colors for ui pages
---
 source/screens/demo/components.njk            | 33 ++++++++++++++-----
 source/screens/demo/examples/ui/drag.njk      |  2 +-
 source/screens/demo/examples/ui/form.njk      |  1 +
 source/screens/demo/examples/ui/new.njk       |  8 ++---
 source/screens/demo/examples/ui/settings.njk  |  9 +++--
 source/screens/demo/layouts.njk               | 19 ++++-------
 source/style/hippie-style                     |  2 +-
 source/style/modules/ui/_drag_module.scss     | 11 ++-----
 source/style/modules/ui/_new_module.scss      |  8 +++--
 source/style/modules/ui/_settings_module.scss | 25 +++++++-------
 source/style/ui.scss                          |  7 ++--
 11 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 8161aba..55c9596 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -152,8 +152,12 @@ tags:
 			</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>
+				<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>
@@ -171,7 +175,8 @@ tags:
 			</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 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>
@@ -278,14 +283,24 @@ tags:
 			<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 class="inline">
+				<input value="Undefiniert"/>
+				<input type="text" size="8" value="Text"/>
+				<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+				<input type="button" value="Auswählen">
+				<input type="submit" value="Senden" disabled="disabled"/>
 			</div>
 			<h4>Varianten</h4>
+			<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
+			<div class="inline">
+				<input class="button_io" type="button" value="Input type button">
+				<button class="button_io">Button</button>
+			</div>
+			<div class="inline">
+				<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
+				<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
+			</div>
 			<div id="capsCheck">
 				<form action="">
 					<input type="password" onkeypress="capLock(event)"/>
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 25911b1..b943fee 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -5,7 +5,7 @@ tags:
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_drag" %}
+{% set bodyClass = "body_ui" %}
 
 {% extends "demo/_app.njk" %}
 
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 5f279de..29ab5bd 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -4,6 +4,7 @@ tags:
   - ui
 ---
 {% set pageClass = "html_ui" %}
+{% set bodyClass = "body_ui" %}
 
 {% extends "demo/_app.njk" %}
 
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index 536583d..ba2e4c0 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -24,9 +24,9 @@ tags:
 
 {% block body %}
   {{ header.status(hippie, new) }}
-  <div class="container">
-    <div class="area menu">
-      <nav class="nav_horizontal">
+  <div id="frame">
+    <header class="area menu io">
+      <nav>
         <ul>
           <li>
             <a href="" class="a_button">Func 1</a>
@@ -36,7 +36,7 @@ tags:
           </li>
         </ul>
       </nav>
-    </div>
+    </header>
     <div class="area grid">
       <div class="item">1</div>
       <div class="item">2</div>
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index b4e07d4..212994c 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -5,7 +5,7 @@ tags:
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_ui" %}
+{% set bodyClass = "body_setting" %}
 
 {% extends "demo/_app.njk" %}
 
@@ -25,7 +25,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-	<div id="frame" class="frame-flex">
+	<div id="frame">
 		<header class="io">
 			<button title="menu">
 				<i class="bi bi-three-dots"></i>
@@ -45,7 +45,7 @@ tags:
 			</nav>
 		</header>
 		<main class="io">
-			<aside class="io left">
+			<aside class="io">
 				options
 				<nav>
 					<ul>
@@ -63,7 +63,7 @@ tags:
 					</ul>
 				</nav>
 			</aside>
-			<section class="bside">
+			<section>
 				<header class="io">
 					<nav>
 						<button title="search">
@@ -81,7 +81,6 @@ tags:
 						</button>
 					</nav>
 					<hr class="vertical">
-					{# // FIXME: Navigationsstile sind chaotisch #}
 					<nav>
 						<ul>
 							<li>
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index 4bbeb66..dcf77dc 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -175,19 +175,12 @@ tags:
 					</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 class="flex inline">
+				<input value="Undefiniert"/>
+				<input type="text" size="8" value="Text"/>
+				<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+				<input type="button" value="Auswählen">
+				<input type="submit" value="Senden" disabled="disabled"/>
 			</div>
 
 			<form method="get">
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 2f63dbe..35b55de 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 2f63dbe2b65ddb320c0a7ea186f04a9c3698c9e7
+Subproject commit 35b55de55002b4a13d7f0530b326f5e2a569bbb1
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index c9a98dc..a345922 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,9 +1,4 @@
-.body_drag {
-	@extend .body_ui;
-
-	#space {
-		position: relative;
-		height: 100%;
-		background-color: $color-dark;
-	}
+#space {
+	position: relative;
+	height: 100%;
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index 1c0d5a9..db795cd 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -1,11 +1,13 @@
 $module_top_height: 32px;
+$body_top_space: $module_top_height + $space_basic;
 
 .body_new {
-	height: 100vh;
-	padding: $module_top_height + $space_basic $space_basic $space_basic;
+	@extend .body_ui;
+	
+	padding: $body_top_space $space_basic $space_basic;
 }
 
-.container {
+#frame {
 	display: grid;
 	height: 100%;
 	// margin: $space_basic;
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
index 337f523..a95c3bc 100755
--- a/source/style/modules/ui/_settings_module.scss
+++ b/source/style/modules/ui/_settings_module.scss
@@ -7,7 +7,15 @@
 	}
 }
 
+.body_setting {
+	@extend .body_ui;
+
+	background-color: $color_back_basic;
+}
+
 #frame {
+	@extend %flex-column;
+
 	position: relative;
 	height: 100%;
 
@@ -22,23 +30,16 @@
 	}
 
 	main {
+		@extend %flex-row;
+
+		flex: 1;
+
 		aside {
 			background-color: $color_brighter;
 		}
-	}
-}
 
-.frame-flex {
-	display: flex;
-	flex-direction: column;
-	gap: $space_basic;
-
-	main {
-		flex: 1;
-
-		aside,
 		section {
-			height: 100%;
+			flex: 1;
 		}
 	}
 }
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 99fb3cb..efe343b 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -1,11 +1,10 @@
 @use "sass:map";
 
-$color_text_basic: white;
-$color_head_basic: white;
-
 @import "demo_config";
 @import "hippie-style/hippie";
 
+$color_gui_back: $color_dark;
+
 .op_show {
 	transition: $transition_show;
 }
@@ -20,12 +19,12 @@ $color_head_basic: white;
 	body {
 		position: relative;
 		min-height: 100%;
-		background-color: black;
 	}
 }
 
 .body_ui {
 	height: 100vh;
+	background-color: $color_gui_back;
 }
 
 .step {

From a33163d556f845bb39ced0d4f4cb3b0efa947e7a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Jun 2025 14:22:31 +0200
Subject: [PATCH 037/253] feat: Add bootstrap icons dependency

- Add node package for bootstrap icons
- New eleventy config addPassthroughCopy for package files
- Change link to local resource
- Change all node dependencies to production
---
 .eleventy.js                                 |  1 +
 package-lock.json                            | 19 +++++++++++++++++++
 package.json                                 |  7 ++++---
 source/screens/demo/examples/ui/settings.njk |  4 +---
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 7e00e33..309a861 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -31,6 +31,7 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({"source/data/**/*.json": "json"});
 
 	eleventyConfig.addPassthroughCopy("vendor");
+	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
 
 	eleventyConfig.addWatchTarget("./source/style/");
 
diff --git a/package-lock.json b/package-lock.json
index 3fabd9d..1280873 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "hippie",
       "version": "0.13.1",
       "license": "MIT",
+      "dependencies": {
+        "bootstrap-icons": "^1.13.1"
+      },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
         "sass": "^1.69.4"
@@ -449,6 +452,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 1ca5063..b93abc0 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,9 @@
     "serve": "npm run style:watch & npx @11ty/eleventy --serve"
   },
   "private": true,
-  "devDependencies": {
+  "dependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "sass": "^1.69.4"
+    "sass": "^1.69.4",
+    "bootstrap-icons": "^1.13.1"
   }
-}
+}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index 212994c..6a81f81 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -14,9 +14,7 @@ tags:
 
 {% block links %}
 	{{ super() }}
-	<link 
-		href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
-		rel="stylesheet">
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
 	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 

From 30ad2f3067b139759c6d992947c5ebd9e55c420a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Jun 2025 14:35:43 +0200
Subject: [PATCH 038/253] feat: Change normalize css dependency

- Remove old v7.0.0 vendor file
- Add node package for normalize css
- Still not in use
---
 .eleventy.js                      |   1 +
 package-lock.json                 | 322 ++++-----------------
 package.json                      |   7 +-
 source/style/hippie-style         |   2 +-
 vendor/normalizecss/normalize.css | 447 ------------------------------
 5 files changed, 61 insertions(+), 718 deletions(-)
 delete mode 100644 vendor/normalizecss/normalize.css

diff --git a/.eleventy.js b/.eleventy.js
index 309a861..98082aa 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -32,6 +32,7 @@ module.exports = function (eleventyConfig) {
 
 	eleventyConfig.addPassthroughCopy("vendor");
 	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
+	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});
 
 	eleventyConfig.addWatchTarget("./source/style/");
 
diff --git a/package-lock.json b/package-lock.json
index 1280873..62279d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,24 +9,21 @@
       "version": "0.13.1",
       "license": "MIT",
       "dependencies": {
-        "bootstrap-icons": "^1.13.1"
-      },
-      "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
+        "bootstrap-icons": "^1.13.1",
+        "normalize.css": "^8.0.1",
         "sass": "^1.69.4"
       }
     },
     "node_modules/@11ty/dependency-tree": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz",
-      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg==",
-      "dev": true
+      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg=="
     },
     "node_modules/@11ty/eleventy": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.1.tgz",
       "integrity": "sha512-t8XVUbCJByhVEa1RzO0zS2QzbL3wPY8ot1yUw9noqiSHxJWUwv6jiwm1/MZDPTYtkZH2ZHvdQIRQ5/SjG9XmLw==",
-      "dev": true,
       "dependencies": {
         "@11ty/dependency-tree": "^2.0.1",
         "@11ty/eleventy-dev-server": "^1.0.4",
@@ -82,7 +79,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz",
       "integrity": "sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg==",
-      "dev": true,
       "dependencies": {
         "@11ty/eleventy-utils": "^1.0.1",
         "chokidar": "^3.5.3",
@@ -111,7 +107,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
       "integrity": "sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0"
       },
@@ -127,7 +122,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
       "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -140,7 +134,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
       "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -149,7 +142,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -158,7 +150,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
       "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -170,7 +161,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
       "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -183,14 +173,12 @@
     "node_modules/@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
-      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
-      "dev": true
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -203,7 +191,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -212,7 +199,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -225,7 +211,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
       "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==",
-      "dev": true,
       "dependencies": {
         "@sindresorhus/transliterate": "^0.1.1",
         "escape-string-regexp": "^4.0.0"
@@ -241,7 +226,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz",
       "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==",
-      "dev": true,
       "dependencies": {
         "escape-string-regexp": "^2.0.0",
         "lodash.deburr": "^4.1.0"
@@ -257,7 +241,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
       "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -265,20 +248,17 @@
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
-      "dev": true
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
     },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
-      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
-      "dev": true
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
     },
     "node_modules/acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -290,7 +270,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -304,14 +283,12 @@
     "node_modules/any-promise": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
-      "integrity": "sha512-lqzY9o+BbeGHRCOyxQkt/Tgvz0IZhTmQiA+LxQW8wSNpcTbj8K+0cZiSEvbpNZZP9/11Gy7dnLO3GNWUXO4d1g==",
-      "dev": true
+      "integrity": "sha512-lqzY9o+BbeGHRCOyxQkt/Tgvz0IZhTmQiA+LxQW8wSNpcTbj8K+0cZiSEvbpNZZP9/11Gy7dnLO3GNWUXO4d1g=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -324,7 +301,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "dependencies": {
         "sprintf-js": "~1.0.2"
       }
@@ -333,7 +309,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
       "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -342,7 +317,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -351,7 +325,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
       "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -360,7 +333,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
       "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -368,26 +340,22 @@
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
     "node_modules/assert-never": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
-      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==",
-      "dev": true
+      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
     },
     "node_modules/async": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
     },
     "node_modules/babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
       "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.9.6"
       },
@@ -398,14 +366,12 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/bcp-47": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-1.0.8.tgz",
       "integrity": "sha512-Y9y1QNBBtYtv7hcmoX0tR+tUNSFZGZ6OL6vKPObq8BbOhkCoyayF6ogfLTgAli/KuAEbsYHYUNq2AQuY6IuLag==",
-      "dev": true,
       "dependencies": {
         "is-alphabetical": "^1.0.0",
         "is-alphanumerical": "^1.0.0",
@@ -420,7 +386,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz",
       "integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -430,7 +395,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-1.1.1.tgz",
       "integrity": "sha512-jWZ1Jdu3cs0EZdfCkS0UE9Gg01PtxnChjEBySeB+Zo6nkqtFfnvtoQQgP1qU1Oo4qgJgxhTI6Sf9y/pZIhPs0A==",
-      "dev": true,
       "dependencies": {
         "bcp-47": "^1.0.0",
         "bcp-47-match": "^1.0.0"
@@ -444,7 +408,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -472,7 +435,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -482,7 +444,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -494,7 +455,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -513,7 +473,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -529,7 +488,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
       "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
-      "dev": true,
       "dependencies": {
         "is-regex": "^1.0.3"
       }
@@ -538,7 +496,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -562,7 +519,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -573,14 +529,12 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
       "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       }
@@ -588,14 +542,12 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/constantinople": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
       "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.6.0",
         "@babel/types": "^7.6.1"
@@ -605,7 +557,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -619,7 +570,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -636,7 +586,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -653,7 +602,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
       "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -662,7 +610,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
       "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
-      "dev": true,
       "bin": {
         "dev-ip": "lib/dev-ip.js"
       },
@@ -673,14 +620,12 @@
     "node_modules/doctypes": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
-      "dev": true
+      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ=="
     },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
       "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "dev": true,
       "dependencies": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.2.0",
@@ -694,7 +639,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
@@ -703,7 +647,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
       "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -715,7 +658,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
       "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "dev": true,
       "dependencies": {
         "domelementtype": "^2.2.0"
       },
@@ -730,7 +672,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
       "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dev": true,
       "dependencies": {
         "dom-serializer": "^1.0.1",
         "domelementtype": "^2.2.0",
@@ -743,14 +684,12 @@
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/ejs": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
       "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
-      "dev": true,
       "dependencies": {
         "jake": "^10.8.5"
       },
@@ -765,7 +704,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -774,7 +712,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
       "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -786,7 +723,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
       "dependencies": {
         "prr": "~1.0.1"
       },
@@ -798,7 +734,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -810,7 +745,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -818,14 +752,12 @@
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -837,7 +769,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
@@ -850,7 +781,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
       "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dev": true,
       "dependencies": {
         "is-extendable": "^0.1.0"
       },
@@ -862,7 +792,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -878,7 +807,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -887,7 +815,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
       "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dev": true,
       "dependencies": {
         "minimatch": "^5.0.1"
       }
@@ -896,7 +823,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -905,7 +831,6 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
       "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -917,7 +842,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -929,7 +853,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
       "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-      "dev": true,
       "dependencies": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
@@ -947,7 +870,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "dependencies": {
         "ms": "2.0.0"
       }
@@ -955,20 +877,17 @@
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -982,7 +901,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -991,7 +909,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -1010,7 +927,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -1030,7 +946,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1042,7 +957,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -1053,14 +967,12 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/gray-matter": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
       "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
-      "dev": true,
       "dependencies": {
         "js-yaml": "^3.13.1",
         "kind-of": "^6.0.2",
@@ -1074,14 +986,12 @@
     "node_modules/hamljs": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
-      "integrity": "sha512-/chXRp4WpL47I+HX1vCCdSbEXAljEG2FBMmgO7Am0bYsqgnEjreeWzUdX1onXqwZtcfgxbCg5WtEYYvuZ5muBg==",
-      "dev": true
+      "integrity": "sha512-/chXRp4WpL47I+HX1vCCdSbEXAljEG2FBMmgO7Am0bYsqgnEjreeWzUdX1onXqwZtcfgxbCg5WtEYYvuZ5muBg=="
     },
     "node_modules/handlebars": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
       "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
-      "dev": true,
       "dependencies": {
         "minimist": "^1.2.5",
         "neo-async": "^2.6.2",
@@ -1102,7 +1012,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1111,7 +1020,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -1123,7 +1031,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -1135,7 +1042,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -1147,7 +1053,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -1162,7 +1067,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -1174,7 +1078,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
       "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
-      "dev": true,
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
         {
@@ -1193,7 +1096,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz",
       "integrity": "sha512-TScO04soylRN9i/QdOdgZyhydXg9z6XdaGzEyOgDKycePeDeTT4KvigjBcI+tgfTlieLWauGORMq5F1eIDa+1w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.10"
       }
@@ -1201,14 +1103,12 @@
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
-      "dev": true
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
     },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -1217,14 +1117,12 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
       "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -1234,7 +1132,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
       "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
-      "dev": true,
       "dependencies": {
         "is-alphabetical": "^1.0.0",
         "is-decimal": "^1.0.0"
@@ -1248,7 +1145,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -1260,7 +1156,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -1272,7 +1167,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
       "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -1282,7 +1176,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
       "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
-      "dev": true,
       "dependencies": {
         "acorn": "^7.1.1",
         "object-assign": "^4.1.1"
@@ -1292,7 +1185,6 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
       "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1301,7 +1193,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1310,7 +1201,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1321,14 +1211,12 @@
     "node_modules/is-json": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
-      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==",
-      "dev": true
+      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA=="
     },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -1336,14 +1224,12 @@
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-      "dev": true
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
     },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -1358,14 +1244,12 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/iso-639-1": {
       "version": "2.1.15",
       "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz",
       "integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg==",
-      "dev": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -1374,7 +1258,6 @@
       "version": "10.8.7",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
       "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
-      "dev": true,
       "dependencies": {
         "async": "^3.2.3",
         "chalk": "^4.0.2",
@@ -1391,14 +1274,12 @@
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
-      "dev": true
+      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g=="
     },
     "node_modules/js-yaml": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
       "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
       "dependencies": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -1411,7 +1292,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
       "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
-      "dev": true,
       "dependencies": {
         "is-promise": "^2.0.0",
         "promise": "^7.0.1"
@@ -1421,7 +1301,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
       "integrity": "sha512-3KF80UaaSSxo8jVnRYtMKNGFOoVPBdkkVPsw+Ad0y4oxKXPduS6G6iHkrf69yJVff/VAaYXkV42rtZ7daJxU3w==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1430,7 +1309,6 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1439,7 +1317,6 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -1448,7 +1325,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
       "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
-      "dev": true,
       "dependencies": {
         "uc.micro": "^1.0.1"
       }
@@ -1457,7 +1333,6 @@
       "version": "10.10.2",
       "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.10.2.tgz",
       "integrity": "sha512-UcuTUexKg/8CmX6I5KNghk13pl3c8Rqhm+WSWqrc17pQP9LjpYPpOLDKG9OMBeHDBQ70yyn/GOqyZ/EKJ4z5yg==",
-      "dev": true,
       "dependencies": {
         "commander": "^10.0.0"
       },
@@ -1476,20 +1351,17 @@
     "node_modules/list-to-array": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
-      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
-      "dev": true
+      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g=="
     },
     "node_modules/lodash.deburr": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
-      "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==",
-      "dev": true
+      "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ=="
     },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -1501,7 +1373,6 @@
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
       "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -1510,7 +1381,6 @@
       "version": "13.0.2",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
       "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
-      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1",
         "entities": "~3.0.1",
@@ -1525,14 +1395,12 @@
     "node_modules/markdown-it/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
       "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
-      "dev": true,
       "dependencies": {
         "array-differ": "^1.0.0",
         "array-union": "^1.0.1",
@@ -1547,7 +1415,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
       "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1556,7 +1423,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
       "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dev": true,
       "dependencies": {
         "array-uniq": "^1.0.1"
       },
@@ -1568,7 +1434,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1576,14 +1441,12 @@
     "node_modules/mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
-      "dev": true
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1592,7 +1455,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -1605,7 +1467,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "dev": true,
       "bin": {
         "mime": "cli.js"
       },
@@ -1617,7 +1478,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1629,7 +1489,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -1638,7 +1497,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -1650,7 +1508,6 @@
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -1661,26 +1518,22 @@
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
-      "dev": true
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
     },
     "node_modules/morphdom": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz",
-      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg==",
-      "dev": true
+      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg=="
     },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/multimatch": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
       "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
-      "dev": true,
       "dependencies": {
         "@types/minimatch": "^3.0.3",
         "array-differ": "^3.0.0",
@@ -1699,7 +1552,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
       "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-      "dev": true,
       "bin": {
         "mustache": "bin/mustache"
       }
@@ -1707,23 +1559,26 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "license": "MIT"
+    },
     "node_modules/nunjucks": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
       "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
-      "dev": true,
       "dependencies": {
         "a-sync-waterfall": "^1.0.0",
         "asap": "^2.0.3",
@@ -1748,7 +1603,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
       "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1757,7 +1611,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1766,7 +1619,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -1778,7 +1630,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -1786,14 +1637,12 @@
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
-      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
-      "dev": true
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
     },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -1802,7 +1651,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1811,7 +1659,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1819,20 +1666,17 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
-      "dev": true
+      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -1844,7 +1688,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1853,7 +1696,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
       "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "dev": true,
       "dependencies": {
         "semver-compare": "^1.0.0"
       }
@@ -1862,7 +1704,6 @@
       "version": "0.16.6",
       "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
       "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
-      "dev": true,
       "dependencies": {
         "posthtml-parser": "^0.11.0",
         "posthtml-render": "^3.0.0"
@@ -1875,7 +1716,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
       "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
-      "dev": true,
       "dependencies": {
         "htmlparser2": "^7.1.1"
       },
@@ -1887,7 +1727,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
       "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
-      "dev": true,
       "dependencies": {
         "is-json": "^2.0.1"
       },
@@ -1899,7 +1738,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
       "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==",
-      "dev": true,
       "dependencies": {
         "http-equiv-refresh": "^1.0.0",
         "list-to-array": "^1.1.0",
@@ -1914,7 +1752,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "dependencies": {
         "asap": "~2.0.3"
       }
@@ -1923,7 +1760,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz",
       "integrity": "sha512-67roqt1k3QDA41DZ8xi0V+rF3GoaMiX7QilbXu0vXimut+9RcKBNZ/t60xCRgcsihmNUsEjh48xLfNqOrKblUg==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^0.1.0"
       }
@@ -1931,14 +1767,12 @@
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
     },
     "node_modules/pug": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
       "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
-      "dev": true,
       "dependencies": {
         "pug-code-gen": "^3.0.2",
         "pug-filters": "^4.0.0",
@@ -1954,7 +1788,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
       "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
-      "dev": true,
       "dependencies": {
         "constantinople": "^4.0.1",
         "js-stringify": "^1.0.2",
@@ -1965,7 +1798,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
       "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
-      "dev": true,
       "dependencies": {
         "constantinople": "^4.0.1",
         "doctypes": "^1.1.0",
@@ -1980,14 +1812,12 @@
     "node_modules/pug-error": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
-      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==",
-      "dev": true
+      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
     },
     "node_modules/pug-filters": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
       "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
-      "dev": true,
       "dependencies": {
         "constantinople": "^4.0.1",
         "jstransformer": "1.0.0",
@@ -2000,7 +1830,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
       "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
-      "dev": true,
       "dependencies": {
         "character-parser": "^2.2.0",
         "is-expression": "^4.0.0",
@@ -2011,7 +1840,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
       "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
-      "dev": true,
       "dependencies": {
         "pug-error": "^2.0.0",
         "pug-walk": "^2.0.0"
@@ -2021,7 +1849,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
       "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
-      "dev": true,
       "dependencies": {
         "object-assign": "^4.1.1",
         "pug-walk": "^2.0.0"
@@ -2031,7 +1858,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
       "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
-      "dev": true,
       "dependencies": {
         "pug-error": "^2.0.0",
         "token-stream": "1.0.0"
@@ -2040,14 +1866,12 @@
     "node_modules/pug-runtime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
-      "dev": true
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
     },
     "node_modules/pug-strip-comments": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
       "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
-      "dev": true,
       "dependencies": {
         "pug-error": "^2.0.0"
       }
@@ -2055,14 +1879,12 @@
     "node_modules/pug-walk": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
-      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
-      "dev": true
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
     },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2082,7 +1904,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -2094,7 +1915,6 @@
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz",
       "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==",
-      "dev": true,
       "dependencies": {
         "errno": "^0.1.2",
         "graceful-fs": "^4.1.4",
@@ -2111,7 +1931,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -2128,7 +1947,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -2138,7 +1956,6 @@
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
       "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -2150,7 +1967,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2173,7 +1989,6 @@
       "version": "1.72.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
       "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
-      "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -2190,7 +2005,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
       "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-      "dev": true,
       "dependencies": {
         "extend-shallow": "^2.0.1",
         "kind-of": "^6.0.0"
@@ -2203,7 +2017,6 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
       "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -2217,14 +2030,12 @@
     "node_modules/semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "dev": true
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
     },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -2241,7 +2052,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -2253,7 +2063,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2262,7 +2071,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
       "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2271,7 +2079,6 @@
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
       "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-      "dev": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -2280,7 +2087,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2289,7 +2095,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2297,14 +2102,12 @@
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
       "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-      "dev": true,
       "dependencies": {
         "minipass": "^3.1.1"
       },
@@ -2316,7 +2119,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -2325,7 +2127,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
       "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2334,7 +2135,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2346,7 +2146,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2358,7 +2157,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -2367,7 +2165,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -2378,20 +2175,17 @@
     "node_modules/token-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
-      "dev": true
+      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg=="
     },
     "node_modules/uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
-      "dev": true
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
     },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
       "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
-      "dev": true,
       "optional": true,
       "bin": {
         "uglifyjs": "bin/uglifyjs"
@@ -2404,7 +2198,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -2413,7 +2206,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2422,7 +2214,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -2437,7 +2228,6 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
       "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.9.6",
         "@babel/types": "^7.9.6",
@@ -2451,20 +2241,17 @@
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
-      "dev": true
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
     },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
       "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-      "dev": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -2484,8 +2271,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     }
   }
 }
diff --git a/package.json b/package.json
index b93abc0..33ebec2 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,12 @@
     "serve": "npm run style:watch & npx @11ty/eleventy --serve"
   },
   "private": true,
+  "devDependencies": {
+    "normalize.css": "^8.0.1"
+  },
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "sass": "^1.69.4",
-    "bootstrap-icons": "^1.13.1"
+    "bootstrap-icons": "^1.13.1",
+    "sass": "^1.69.4"
   }
 }
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 35b55de..b7ec209 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 35b55de55002b4a13d7f0530b326f5e2a569bbb1
+Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
diff --git a/vendor/normalizecss/normalize.css b/vendor/normalizecss/normalize.css
deleted file mode 100644
index b1d74e5..0000000
--- a/vendor/normalizecss/normalize.css
+++ /dev/null
@@ -1,447 +0,0 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
-
-details, /* 1 */
-menu {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Scripting
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
- */
-
-template {
-  display: none;
-}
-
-/* Hidden
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10-.
- */
-
-[hidden] {
-  display: none;
-}

From 6e722cd9071e2a2aba137f2daf10a0b7e72d1050 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Jun 2025 15:49:32 +0200
Subject: [PATCH 039/253] feat: Restructure settings

- New styles
- New content
---
 source/screens/demo/examples/ui/index.njk     |  2 +-
 source/screens/demo/examples/ui/settings.njk  | 76 ++++++++++++++-----
 source/style/hippie-style                     |  2 +-
 source/style/modules/ui/_settings_module.scss |  9 +--
 4 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 4e5367a..1712214 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -25,7 +25,7 @@ tags:
 {% block body %}
 	<div class="sec_main_center">
 		<nav role="doc-toc">
-			<h1>Inhaltsverzeichnis</h1>
+			<h1>{{ title }}</h1>
 			<ul class="list_link">
 				{%- for ui in collections.ui -%}
 					<li>
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index 6a81f81..b7ac1ba 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -25,12 +25,14 @@ tags:
 {% block body %}
 	<div id="frame">
 		<header class="io">
-			<button title="menu">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<span class="span_solo">title-bar</span>
 			<nav>
-				<div class="spacer-a"></div>
+				<button title="menu">
+					<i class="bi bi-three-dots"></i>
+				</button>
+				<span>title-bar</span>
+			</nav>
+			<nav>
+				<div class="spacer a"></div>
 				<button title="minimize">
 					<i class="bi bi-dash"></i>
 				</button>
@@ -44,19 +46,29 @@ tags:
 		</header>
 		<main class="io">
 			<aside class="io">
-				options
 				<nav>
-					<ul>
-						<li>setting</li>
-						<li>text</li>
+					<div>location-pane</div>
+					<ul class="vertical">
+						<li>
+							<a class="a_button" href="">
+								<span>Start/Home</span>
+								<i class="bi bi-pin-fill"></i>
+							</a>
+						</li>
+						<li>
+							<a class="a_button" href="">
+								<span>System</span>
+								<i class="bi bi-pin-fill"></i>
+							</a>
+						</li>
 					</ul>
-					<hr>
+				</nav>
+				<hr>
+				<nav>
 					<ul>
 						<li>
 							<label for="">label</label>
-						</li>
-						<li>
-							<button>button</button>
+							<input type="text">
 						</li>
 					</ul>
 				</nav>
@@ -64,10 +76,35 @@ tags:
 			<section>
 				<header class="io">
 					<nav>
+						<button title="back">
+							<i class="bi bi-caret-left"></i>
+						</button>
+						<button title="up">
+							<i class="bi bi-caret-up"></i>
+						</button>
+						<button title="forward">
+							<i class="bi bi-caret-right"></i>
+						</button>
+						<button title="reload">
+							<i class="bi bi-arrow-clockwise"></i>
+						</button>
+						<input type="text">
+					</nav>
+					<nav>
+						<span>location-bar</span>
+						<hr class="vertical">
 						<button title="search">
 							<i class="bi bi-search"></i>
 						</button>
-						<div class="spacer-b"></div>
+						<input type="text">
+					</nav>
+				</header>
+				<header class="io">
+					<nav>
+						<button title="add">
+							<i class="bi bi-plus-circle"></i>
+						</button>
+						<div class="spacer a"></div>
 						<button title="cut">
 							<i class="bi bi-scissors"></i>
 						</button>
@@ -77,6 +114,10 @@ tags:
 						<button title="paste">
 							<i class="bi bi-clipboard-check-fill"></i>
 						</button>
+						<div class="spacer b"></div>
+						<button title="delete">
+							<i class="bi bi-trash"></i>
+						</button>
 					</nav>
 					<hr class="vertical">
 					<nav>
@@ -92,14 +133,15 @@ tags:
 								</button>
 							</li>
 						</ul>
+						<span>options-bar</span>
 					</nav>
-					<span class="span_solo">section-bar</span>
+					<nav></nav>
 				</header>
 				section</section>
 		</main>
 		<footer class="io">
-			<span class="span_solo">state</span>
-			<div class="spacer-a"></div>
+			<span>state</span>
+			<div class="spacer a"></div>
 			<button>action</button>
 		</footer>
 	</div>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index b7ec209..3d23ba5 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
+Subproject commit 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
index a95c3bc..9b41e4c 100755
--- a/source/style/modules/ui/_settings_module.scss
+++ b/source/style/modules/ui/_settings_module.scss
@@ -1,9 +1,6 @@
 @mixin nav-spacer($name, $size, $orientation) {
-	.spacer-#{$name} {
+	.spacer.#{$name} {
 		width: $size;
-		margin: 0;
-		border: $border_dotted;
-		opacity: .25;
 	}
 }
 
@@ -35,7 +32,7 @@
 		flex: 1;
 
 		aside {
-			background-color: $color_brighter;
+			background-color: rgba(255, 255, 255, .1);
 		}
 
 		section {
@@ -46,9 +43,9 @@
 
 .io {
 	.spacer {
-		width: $space_double;
 		margin: 0;
 		border: $border_dotted;
+		padding: 0;
 		opacity: .25;
 	}
 

From 0a27169a1bb53ab6715bc22fb47ce3b1dde47aae Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Jun 2025 15:57:55 +0200
Subject: [PATCH 040/253] fix: Layout of footer for settings

---
 source/screens/demo/examples/ui/settings.njk | 8 +++++---
 source/style/hippie-style                    | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index b7ac1ba..924b613 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -140,9 +140,11 @@ tags:
 				section</section>
 		</main>
 		<footer class="io">
-			<span>state</span>
-			<div class="spacer a"></div>
-			<button>action</button>
+			<nav>
+				<span>state</span>
+				<div class="spacer a"></div>
+				<button>action</button>
+			</nav>
 		</footer>
 	</div>
 {% endblock %}
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 3d23ba5..8ffc1b8 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6
+Subproject commit 8ffc1b8346977486044443e0c7dba0bead25b9d8

From 24efcefab313a60245616db9d2026fc55a26d337 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Jun 2025 17:40:23 +0200
Subject: [PATCH 041/253] feat: Move files

- Template app is now part of hippie and not demo anymore
- Update includes
- Settings module is now called frame
---
 source/screens/demo/examples/intro.njk        |  2 +-
 source/screens/demo/examples/ui/drag.njk      |  2 +-
 source/screens/demo/examples/ui/form.njk      |  2 +-
 source/screens/demo/examples/ui/index.njk     |  2 +-
 source/screens/demo/examples/ui/new.njk       |  2 +-
 source/style/modules/ui/_frame_module.scss    | 93 +++++++++++++++++++
 source/style/modules/ui/_settings_module.scss | 54 -----------
 source/style/ui.scss                          |  2 +-
 source/templates/{demo => hippie}/_app.njk    |  4 +-
 9 files changed, 101 insertions(+), 62 deletions(-)
 create mode 100755 source/style/modules/ui/_frame_module.scss
 delete mode 100755 source/style/modules/ui/_settings_module.scss
 rename source/templates/{demo => hippie}/_app.njk (89%)

diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
index 07eb1a1..9eb0ebd 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@@ -7,7 +7,7 @@ tags:
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 {% block title %}
 	{{ title }}
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index b943fee..3d82a7b 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -7,7 +7,7 @@ tags:
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 
 {% block title %}{{ title }}
 {% endblock %}
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 29ab5bd..83ac65d 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -6,7 +6,7 @@ tags:
 {% set pageClass = "html_ui" %}
 {% set bodyClass = "body_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 
 {% block title %}{{ title }}
 {% endblock %}
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 1712214..4bd84c1 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -7,7 +7,7 @@ tags:
 
 {% set pageClass = "html_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index ba2e4c0..4b5ae8f 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -7,7 +7,7 @@ tags:
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_header.njk" as header %}
 
 {% block title %}{{ title }}
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
new file mode 100755
index 0000000..c3ba4b4
--- /dev/null
+++ b/source/style/modules/ui/_frame_module.scss
@@ -0,0 +1,93 @@
+@mixin nav-spacer($name, $size, $orientation) {
+	.spacer.#{$name} {
+		width: $size;
+	}
+}
+
+.body_frame {
+	@extend %flex-column;
+	@extend .body_ui;
+
+	background-color: $color_back_basic;
+
+	position: relative;
+	height: 100%;
+
+	header,
+	aside,
+	footer {
+		border: 1px solid transparent;
+	}
+
+	&>header {
+		background-color: rgba(0, 0, 0, .1);
+	}
+
+	main {
+		@extend %flex-row;
+
+		flex: 1;
+
+		aside {
+			// background-color: rgba(255, 255, 255, .1);
+		}
+
+		section {
+
+			&>header,
+			&>footer {
+				background-color: transparentize($color_back_io, .5);
+
+				&:hover {
+					background-color: $color_back_io;
+				}
+			}
+		}
+
+		section,
+		section>div {
+			flex: 1;
+		}
+
+		section {
+			@extend %flex-column;
+			gap: 0;
+		}
+	}
+}
+
+#content {
+	background-color: $color_back_io;
+
+	&>table {
+		width: 100%;
+		margin: 0;
+		border: 0;
+
+		tr:hover td {
+			background-color: $color_highlight_basic;
+		}
+
+		th {
+			border: 1px solid $color_border_io;
+		}
+
+		td {
+			border-width: 0 1px;
+			border-style: solid;
+			border-color: $color_border_io;
+		}
+	}
+}
+
+.io {
+	.spacer {
+		margin: 0;
+		border: $border_dotted;
+		padding: 0;
+		opacity: .25;
+	}
+
+	@include nav-spacer('a', $space_double, false);
+	@include nav-spacer('b', $space_small, false);
+}
\ No newline at end of file
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
deleted file mode 100755
index 9b41e4c..0000000
--- a/source/style/modules/ui/_settings_module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@mixin nav-spacer($name, $size, $orientation) {
-	.spacer.#{$name} {
-		width: $size;
-	}
-}
-
-.body_setting {
-	@extend .body_ui;
-
-	background-color: $color_back_basic;
-}
-
-#frame {
-	@extend %flex-column;
-
-	position: relative;
-	height: 100%;
-
-	header,
-	aside,
-	footer {
-		border: 1px solid transparent;
-	}
-
-	&>header {
-		background-color: rgba(0, 0, 0, .1);
-	}
-
-	main {
-		@extend %flex-row;
-
-		flex: 1;
-
-		aside {
-			background-color: rgba(255, 255, 255, .1);
-		}
-
-		section {
-			flex: 1;
-		}
-	}
-}
-
-.io {
-	.spacer {
-		margin: 0;
-		border: $border_dotted;
-		padding: 0;
-		opacity: .25;
-	}
-
-	@include nav-spacer('a', $space_double, false);
-	@include nav-spacer('b', $space_small, false);
-}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index efe343b..28d28cc 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -191,7 +191,7 @@ $color_gui_back: $color_dark;
 	font-family: $family_text_mono;
 }
 
+@import "modules/ui/frame_module";
 @import "modules/ui/new_module";
-@import "modules/ui/settings_module";
 @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/hippie/_app.njk
similarity index 89%
rename from source/templates/demo/_app.njk
rename to source/templates/hippie/_app.njk
index 73a8dd0..d48d4bf 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -1,4 +1,4 @@
-<!-- demo.app.template -->
+<!-- app.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
 	<head>
@@ -9,7 +9,7 @@
 				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
 			{% block meta %}
-				{% include "demo/partials/_meta.njk" %}
+        {% include "hippie/partials/_head_meta.njk" %}
 				<base href="/">
 			{% endblock %}
 

From 07e2e8ff6d4ad0512dbc4117fc7269f71035d2ad Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Jun 2025 17:42:35 +0200
Subject: [PATCH 042/253] feat: New ui content

- New frame examples
- Move first parts to macros
---
 source/screens/demo/examples/ui/cli.njk      |  36 ++++
 source/screens/demo/examples/ui/explorer.njk | 187 +++++++++++++++++++
 source/screens/demo/examples/ui/settings.njk | 156 ----------------
 source/screens/demo/examples/ui/tui.njk      |  37 ++++
 source/style/hippie-style                    |   2 +-
 source/templates/hippie/macros/_io.njk       |  35 ++++
 6 files changed, 296 insertions(+), 157 deletions(-)
 create mode 100755 source/screens/demo/examples/ui/cli.njk
 create mode 100755 source/screens/demo/examples/ui/explorer.njk
 delete mode 100755 source/screens/demo/examples/ui/settings.njk
 create mode 100755 source/screens/demo/examples/ui/tui.njk
 create mode 100644 source/templates/hippie/macros/_io.njk

diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
new file mode 100755
index 0000000..88c59f4
--- /dev/null
+++ b/source/screens/demo/examples/ui/cli.njk
@@ -0,0 +1,36 @@
+---
+title: CLI
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_frame" %}
+
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<p>Previous return</p>
+	<textarea name="prompt" id="prompt"></textarea>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
new file mode 100755
index 0000000..6bdfc8c
--- /dev/null
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -0,0 +1,187 @@
+---
+title: GUI explorer
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_frame" %}
+
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<main class="io">
+		<aside class="io">
+			<nav>
+				<div>location-pane</div>
+				<ul class="vertical">
+					<li>
+						<a class="a_button" href="">
+							<span>Start/Home</span>
+							<i class="bi bi-pin-fill"></i>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>System</span>
+							<i class="bi bi-pin-fill"></i>
+						</a>
+					</li>
+				</ul>
+			</nav>
+			<hr>
+			<nav>
+				<ul class="vertical">
+					<li>
+						<a class="a_button" href="">
+							<span>💽 disc link</span>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>📁 folder link</span>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>🔗 location link</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</aside>
+		<section>
+			<header class="io">
+				<nav>
+					<button title="back">
+						<i class="bi bi-caret-left"></i>
+					</button>
+					<button title="up">
+						<i class="bi bi-caret-up"></i>
+					</button>
+					<button title="forward">
+						<i class="bi bi-caret-right"></i>
+					</button>
+					<button title="reload">
+						<i class="bi bi-arrow-clockwise"></i>
+					</button>
+					<input placeholder="//" type="text">
+				</nav>
+				<nav>
+					<span>location-bar</span>
+					<hr class="vertical">
+					<button title="search">
+						<i class="bi bi-search"></i>
+					</button>
+					<input placeholder="*" type="text">
+				</nav>
+			</header>
+			<header class="io">
+				<nav>
+					<button title="add">
+						<i class="bi bi-plus-circle"></i>
+					</button>
+					<div class="spacer a"></div>
+					<button title="cut">
+						<i class="bi bi-scissors"></i>
+					</button>
+					<button title="copy">
+						<i class="bi bi-copy"></i>
+					</button>
+					<button title="paste">
+						<i class="bi bi-clipboard-check-fill"></i>
+					</button>
+					<div class="spacer b"></div>
+					<button title="delete">
+						<i class="bi bi-trash"></i>
+					</button>
+				</nav>
+				<hr class="vertical">
+				<nav>
+					<ul>
+						<li>
+							<button title="collapse">
+								<i class="bi bi-arrows-collapse"></i>
+							</button>
+						</li>
+						<li>
+							<button title="expand">
+								<i class="bi bi-arrows-expand-vertical"></i>
+							</button>
+						</li>
+					</ul>
+					<span>options-bar</span>
+				</nav>
+				<nav></nav>
+			</header>
+			<div id="content">
+				<table>
+					<thead>
+						<tr>
+							<th>name</th>
+							<th>date</th>
+							<th>type</th>
+							<th>size</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>folder</td>
+							<td>YYYY-MM-DD</td>
+							<td>folder</td>
+							<td>4KB</td>
+						</tr>
+						<tr>
+							<td>file</td>
+							<td>YYYY-MM-DD</td>
+							<td>folder</td>
+							<td>1B</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<footer class="io">
+				<nav>
+					<span>## items</span>
+					<span># selected (size)</span>
+					<span># type(s)</span>
+					<span># shared</span>
+				</nav>
+				<nav>
+					<span>status-bar</span>
+				</nav>
+			</footer>
+		</section>
+	</main>
+	<footer class="io">
+		<nav>
+			<button>mode</button>
+			<span>mode-bar</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button>action</button>
+		</nav>
+	</footer>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
deleted file mode 100755
index 924b613..0000000
--- a/source/screens/demo/examples/ui/settings.njk
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Settings
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_setting" %}
-
-{% extends "demo/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<div id="frame">
-		<header class="io">
-			<nav>
-				<button title="menu">
-					<i class="bi bi-three-dots"></i>
-				</button>
-				<span>title-bar</span>
-			</nav>
-			<nav>
-				<div class="spacer a"></div>
-				<button title="minimize">
-					<i class="bi bi-dash"></i>
-				</button>
-				<button title="maximize">
-					<i class="bi bi-fullscreen"></i>
-				</button>
-				<button title="close">
-					<i class="bi bi-x-square"></i>
-				</button>
-			</nav>
-		</header>
-		<main class="io">
-			<aside class="io">
-				<nav>
-					<div>location-pane</div>
-					<ul class="vertical">
-						<li>
-							<a class="a_button" href="">
-								<span>Start/Home</span>
-								<i class="bi bi-pin-fill"></i>
-							</a>
-						</li>
-						<li>
-							<a class="a_button" href="">
-								<span>System</span>
-								<i class="bi bi-pin-fill"></i>
-							</a>
-						</li>
-					</ul>
-				</nav>
-				<hr>
-				<nav>
-					<ul>
-						<li>
-							<label for="">label</label>
-							<input type="text">
-						</li>
-					</ul>
-				</nav>
-			</aside>
-			<section>
-				<header class="io">
-					<nav>
-						<button title="back">
-							<i class="bi bi-caret-left"></i>
-						</button>
-						<button title="up">
-							<i class="bi bi-caret-up"></i>
-						</button>
-						<button title="forward">
-							<i class="bi bi-caret-right"></i>
-						</button>
-						<button title="reload">
-							<i class="bi bi-arrow-clockwise"></i>
-						</button>
-						<input type="text">
-					</nav>
-					<nav>
-						<span>location-bar</span>
-						<hr class="vertical">
-						<button title="search">
-							<i class="bi bi-search"></i>
-						</button>
-						<input type="text">
-					</nav>
-				</header>
-				<header class="io">
-					<nav>
-						<button title="add">
-							<i class="bi bi-plus-circle"></i>
-						</button>
-						<div class="spacer a"></div>
-						<button title="cut">
-							<i class="bi bi-scissors"></i>
-						</button>
-						<button title="copy">
-							<i class="bi bi-copy"></i>
-						</button>
-						<button title="paste">
-							<i class="bi bi-clipboard-check-fill"></i>
-						</button>
-						<div class="spacer b"></div>
-						<button title="delete">
-							<i class="bi bi-trash"></i>
-						</button>
-					</nav>
-					<hr class="vertical">
-					<nav>
-						<ul>
-							<li>
-								<button title="collapse">
-									<i class="bi bi-arrows-collapse"></i>
-								</button>
-							</li>
-							<li>
-								<button title="expand">
-									<i class="bi bi-arrows-expand-vertical"></i>
-								</button>
-							</li>
-						</ul>
-						<span>options-bar</span>
-					</nav>
-					<nav></nav>
-				</header>
-				section</section>
-		</main>
-		<footer class="io">
-			<nav>
-				<span>state</span>
-				<div class="spacer a"></div>
-				<button>action</button>
-			</nav>
-		</footer>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
new file mode 100755
index 0000000..9ba3fe0
--- /dev/null
+++ b/source/screens/demo/examples/ui/tui.njk
@@ -0,0 +1,37 @@
+---
+title: TUI
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_frame" %}
+
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<main class="io">
+	</main>
+	{{ io.frameFooter('mode-bar') }}
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 8ffc1b8..36919ca 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 8ffc1b8346977486044443e0c7dba0bead25b9d8
+Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154
diff --git a/source/templates/hippie/macros/_io.njk b/source/templates/hippie/macros/_io.njk
new file mode 100644
index 0000000..36a3b9e
--- /dev/null
+++ b/source/templates/hippie/macros/_io.njk
@@ -0,0 +1,35 @@
+{% macro frameHeader(title) %}
+	<header class="io">
+		<nav>
+			<button title="menu">
+				<i class="bi bi-three-dots"></i>
+			</button>
+			<span>{{ title }}</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button title="minimize">
+				<i class="bi bi-dash"></i>
+			</button>
+			<button title="maximize">
+				<i class="bi bi-fullscreen"></i>
+			</button>
+			<button title="close" data-action="close">
+				<i class="bi bi-x-square"></i>
+			</button>
+		</nav>
+	</header>
+{% endmacro %}
+
+{% macro frameFooter(title) %}
+	<footer class="io">
+		<nav>
+			<button>mode</button>
+			<span>{{ title }}</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button>action</button>
+		</nav>
+	</footer>
+{% endmacro %}
\ No newline at end of file

From 10d6fe7d8291101ad862d54d914a1f27b33865e9 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Jun 2025 18:17:42 +0200
Subject: [PATCH 043/253] feat: Add close event

- Frame elements now can be closed
- Event is added in template
- Action leads back in history
---
 source/screens/demo/examples/ui/cli.njk      |  2 --
 source/screens/demo/examples/ui/explorer.njk |  2 --
 source/screens/demo/examples/ui/new.njk      |  2 --
 source/screens/demo/examples/ui/tui.njk      |  2 --
 source/style/hippie-style                    |  2 +-
 source/templates/hippie/_app.njk             | 24 +++++++++++++++++++-
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
index 88c59f4..1e59f33 100755
--- a/source/screens/demo/examples/ui/cli.njk
+++ b/source/screens/demo/examples/ui/cli.njk
@@ -31,6 +31,4 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
index 6bdfc8c..d277943 100755
--- a/source/screens/demo/examples/ui/explorer.njk
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -182,6 +182,4 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index 4b5ae8f..8a898d6 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -48,8 +48,6 @@ tags:
 
 {%- block script %}
   {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script src="{{ pageBase }}js/app.js"></script>
   <script>
     let clock = new Clock('time');
 
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
index 9ba3fe0..d5bb824 100755
--- a/source/screens/demo/examples/ui/tui.njk
+++ b/source/screens/demo/examples/ui/tui.njk
@@ -32,6 +32,4 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 36919ca..fb1bd80 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154
+Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
index d48d4bf..f467956 100755
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -9,7 +9,7 @@
 				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
 			{% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
+				{% include "hippie/partials/_head_meta.njk" %}
 				<base href="/">
 			{% endblock %}
 
@@ -24,6 +24,28 @@
 		{% 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>
+			<script src="{{ pageBase }}js/app.js"></script>
+
+			<script>
+				const frameHeader = document.querySelector('body > header.io');
+				const closeActionElements = document.querySelectorAll('[data-action=close]');
+
+				if (frameHeader) {
+					console.log('frame header found', frameHeader);
+
+					frameHeader.addEventListener('click', (e) => {
+						if (e.target.dataset.action === 'close') {
+							console.debug('close', e.target);
+
+							history.back();
+
+							if (closeActionElements.length > 1) {
+								console.debug('other frames present', closeActionElements.length);
+							}
+						}
+					});
+				}
+			</script>
 		{% endblock %}
 	</body>
 </html>
\ No newline at end of file

From e76f4578511f5eb1634e861492b6e6a1c352ab3c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 19:30:29 +0200
Subject: [PATCH 044/253] feat: Set pageClass in app template

---
 source/screens/demo/examples/intro.njk       | 1 -
 source/screens/demo/examples/ui/drag.njk     | 1 -
 source/screens/demo/examples/ui/explorer.njk | 3 +--
 source/screens/demo/examples/ui/form.njk     | 1 -
 source/screens/demo/examples/ui/index.njk    | 3 ---
 source/screens/demo/examples/ui/new.njk      | 1 -
 source/screens/demo/examples/ui/tui.njk      | 1 -
 source/templates/hippie/_app.njk             | 2 +-
 8 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
index 9eb0ebd..44898cc 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@@ -5,7 +5,6 @@ tags:
 ---
 
 {% set pageId = "init" %}
-{% set pageClass = "html_ui" %}
 
 {% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 3d82a7b..adf6207 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -4,7 +4,6 @@ tags:
   - ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_ui" %}
 
 {% extends "hippie/_app.njk" %}
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
index d277943..628f658 100755
--- a/source/screens/demo/examples/ui/explorer.njk
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -4,7 +4,6 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_frame" %}
 
 {% extends "hippie/_app.njk" %}
@@ -180,6 +179,6 @@ tags:
 	</footer>
 {% endblock %}
 
-{%- block script %}
+{% block script %}
 	{{ super() }}
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 83ac65d..cf6937d 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -3,7 +3,6 @@ title: Form
 tags: 
   - ui
 ---
-{% set pageClass = "html_ui" %}
 {% set bodyClass = "body_ui" %}
 
 {% extends "hippie/_app.njk" %}
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 4bd84c1..ec107c2 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -4,9 +4,6 @@ tags:
   - demoExample
   - index
 ---
-
-{% set pageClass = "html_ui" %}
-
 {% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index 8a898d6..55921b3 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -4,7 +4,6 @@ tags:
   - ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
 {% extends "hippie/_app.njk" %}
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
index d5bb824..89a3fdd 100755
--- a/source/screens/demo/examples/ui/tui.njk
+++ b/source/screens/demo/examples/ui/tui.njk
@@ -4,7 +4,6 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_frame" %}
 
 {% extends "hippie/_app.njk" %}
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
index f467956..dbee1a7 100755
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -1,6 +1,6 @@
 <!-- app.template -->
 <!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
+<html lang="de" class="html_ui" id="{{ pageId }}">
 	<head>
 		<meta charset="utf-8">
 

From c0c87771b644c0f00e92d48a8a25ed66fdb0bc84 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 19:33:35 +0200
Subject: [PATCH 045/253] feat: Change cli page

- New styles and strcture
- Add event listeners
- Add function to resize prompt according to input
- Append prompts to history element
---
 source/screens/demo/examples/ui/cli.njk    | 47 ++++++++++++++++++++--
 source/style/modules/ui/_frame_module.scss | 32 +++++++++++++++
 2 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
index 1e59f33..5106fac 100755
--- a/source/screens/demo/examples/ui/cli.njk
+++ b/source/screens/demo/examples/ui/cli.njk
@@ -4,7 +4,6 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_frame" %}
 
 {% extends "hippie/_app.njk" %}
@@ -25,10 +24,52 @@ tags:
 
 {% block body %}
 	{{ io.frameHeader('title-bar') }}
-	<p>Previous return</p>
-	<textarea name="prompt" id="prompt"></textarea>
+	<div id="cli">
+		<div id="history">
+			<pre>Previous prompt</pre>
+		</div>
+		<div id="line">
+			<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
+			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
+		</div>
+	</div>
 {% endblock %}
 
 {%- block script %}
 	{{ super() }}
+	<script>
+		function resizeTextArea(textarea) {
+			const {style, value} = textarea;
+
+			style.height = style.minHeight = 'auto';
+			style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
+			style.height = `${textarea.scrollHeight}px`;
+		}
+
+		const textarea = document.getElementById('prompt');
+
+		document.body.addEventListener('click', () => {
+			textarea.focus();
+		});
+
+		textarea.addEventListener('input', () => {
+			resizeTextArea(textarea);
+		});
+
+		window.addEventListener("keydown", (event) => {
+			if (event.key === 'Enter' && !event.shiftKey) {
+				event.preventDefault();
+
+				const p = document.createElement("pre");
+
+				p.textContent = event.target.value;
+				document
+					.getElementById("history")
+					.appendChild(p);
+				// window.scrollTo(0, document.body.scrollHeight);
+
+				event.target.value = '';
+			}
+		});
+	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index c3ba4b4..ff3aab8 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -4,6 +4,38 @@
 	}
 }
 
+#cli {
+	@extend %flex-column;
+
+	background-color: black;
+
+	#line {
+		@extend %flex-row;
+	}
+
+	#prompt {
+		flex: 1;
+	}
+
+	pre {
+		margin: .5em 0;
+		color: white;
+	}
+
+	textarea {
+		resize: none;
+		max-height: 128px;
+		margin: $margin_io;
+		border: 0;
+		padding: $space_half;
+		// color: $color_text_io;
+		color: white;
+		// background-color: $color_back_io;
+		background-color: transparent;
+		line-height: 1.2;
+	}
+}
+
 .body_frame {
 	@extend %flex-column;
 	@extend .body_ui;

From f1d17490e0d5d1ea4e0655b523d44c142a946eb8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 20:11:06 +0200
Subject: [PATCH 046/253] fix: Remove body_ui class because it is not needed

---
 source/screens/demo/examples/ui/drag.njk | 1 -
 source/screens/demo/examples/ui/form.njk | 2 --
 source/style/ui.scss                     | 5 -----
 3 files changed, 8 deletions(-)

diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index adf6207..873a2ab 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -4,7 +4,6 @@ tags:
   - ui
 ---
 {% set pageId = page.fileSlug %}
-{% set bodyClass = "body_ui" %}
 
 {% extends "hippie/_app.njk" %}
 
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index cf6937d..94275cd 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -3,8 +3,6 @@ title: Form
 tags: 
   - ui
 ---
-{% set bodyClass = "body_ui" %}
-
 {% extends "hippie/_app.njk" %}
 
 {% block title %}{{ title }}
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 28d28cc..5a4998b 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -22,11 +22,6 @@ $color_gui_back: $color_dark;
 	}
 }
 
-.body_ui {
-	height: 100vh;
-	background-color: $color_gui_back;
-}
-
 .step {
 	@extend %full_parent;
 }

From 0c37acf47fb8e9bb440ffe13ba01d944f733f5da Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 20:12:47 +0200
Subject: [PATCH 047/253] feat: Restructure styles for cli and new pages

- Remove header from cli
- Add body_cli class
- Remove unnecessary frame element
---
 source/screens/demo/examples/ui/cli.njk    |  3 +-
 source/screens/demo/examples/ui/new.njk    | 36 +++++------
 source/style/modules/ui/_frame_module.scss | 75 ++++++++++++----------
 source/style/modules/ui/_new_module.scss   | 24 +------
 4 files changed, 63 insertions(+), 75 deletions(-)

diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
index 5106fac..3ba032d 100755
--- a/source/screens/demo/examples/ui/cli.njk
+++ b/source/screens/demo/examples/ui/cli.njk
@@ -4,7 +4,7 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set bodyClass = "body_frame" %}
+{% set bodyClass = "body_cli" %}
 
 {% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_io.njk" as io %}
@@ -23,7 +23,6 @@ tags:
 {% endblock %}
 
 {% block body %}
-	{{ io.frameHeader('title-bar') }}
 	<div id="cli">
 		<div id="history">
 			<pre>Previous prompt</pre>
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index 55921b3..54ddd0b 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -23,25 +23,23 @@ tags:
 
 {% block body %}
   {{ header.status(hippie, new) }}
-  <div id="frame">
-    <header class="area menu io">
-      <nav>
-        <ul>
-          <li>
-            <a href="" class="a_button">Func 1</a>
-          </li>
-          <li>
-            <a href="" class="a_button">Func 2</a>
-          </li>
-        </ul>
-      </nav>
-    </header>
-    <div class="area grid">
-      <div class="item">1</div>
-      <div class="item">2</div>
-      <div class="item">3</div>
-      <div class="item">4</div>
-    </div>
+  <header class="area menu io">
+    <nav>
+      <ul>
+        <li>
+          <a href="" class="a_button">Func 1</a>
+        </li>
+        <li>
+          <a href="" class="a_button">Func 2</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <div class="area grid">
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
   </div>
 {% endblock %}
 
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index ff3aab8..dc99b1c 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -4,41 +4,8 @@
 	}
 }
 
-#cli {
-	@extend %flex-column;
-
-	background-color: black;
-
-	#line {
-		@extend %flex-row;
-	}
-
-	#prompt {
-		flex: 1;
-	}
-
-	pre {
-		margin: .5em 0;
-		color: white;
-	}
-
-	textarea {
-		resize: none;
-		max-height: 128px;
-		margin: $margin_io;
-		border: 0;
-		padding: $space_half;
-		// color: $color_text_io;
-		color: white;
-		// background-color: $color_back_io;
-		background-color: transparent;
-		line-height: 1.2;
-	}
-}
-
 .body_frame {
 	@extend %flex-column;
-	@extend .body_ui;
 
 	background-color: $color_back_basic;
 
@@ -88,6 +55,46 @@
 	}
 }
 
+.body_cli {
+	@extend .body_frame;
+
+	background-color: black;
+}
+
+#cli {
+	@extend %flex-column;
+
+	background-color: black;
+
+	#line {
+		@extend %flex-row;
+	}
+
+	#prompt {
+		flex: 1;
+	}
+
+	pre {
+		margin: .5em 0;
+		color: white;
+	}
+
+	textarea {
+		resize: none;
+		max-height: 128px;
+		margin: $margin_io;
+		border: 0;
+		padding: $space_half;
+		// color: $color_text_io;
+		color: white;
+		// background-color: $color_back_io;
+		background-color: transparent;
+		line-height: 1.2;
+	}
+}
+
+
+
 #content {
 	background-color: $color_back_io;
 
@@ -112,6 +119,8 @@
 	}
 }
 
+
+
 .io {
 	.spacer {
 		margin: 0;
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index db795cd..42946e2 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -2,23 +2,11 @@ $module_top_height: 32px;
 $body_top_space: $module_top_height + $space_basic;
 
 .body_new {
-	@extend .body_ui;
-	
+	@extend %flex-column;
 	padding: $body_top_space $space_basic $space_basic;
 }
 
-#frame {
-	display: grid;
-	height: 100%;
-	// margin: $space_basic;
-	// grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: auto 1fr;
-	gap: $space_basic;
-}
-
 .area {
-	width: 100%;
-	height: 100%;
 	transition: $transition_best;
 
 	&:hover {
@@ -26,15 +14,9 @@ $body_top_space: $module_top_height + $space_basic;
 	}
 }
 
-.menu,
-#top {
-	nav ul {
-		margin: 0;
-	}
-}
-
 .grid {
 	display: grid;
+	flex: 1;
 	// grid-template-rows: repeat(2, 1fr);
 	// grid-template-columns: repeat(2, 1fr);
 	grid-template-areas: "a a";
@@ -92,7 +74,7 @@ $body_top_space: $module_top_height + $space_basic;
 
 	nav ul {
 		display: flex;
-		margin-left: 16px;
+		margin: 0 0 0 16px;
 	}
 
 	.brand {

From e572f642595e2686fa2d36579d516296a5998837 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 22:08:31 +0200
Subject: [PATCH 048/253] feat: Add app frame template

- All frame pages use app frame template
- Add form page to frames and add header
---
 source/screens/demo/examples/ui/cli.njk      | 24 +++++---------------
 source/screens/demo/examples/ui/explorer.njk | 21 +----------------
 source/screens/demo/examples/ui/form.njk     | 14 ++----------
 source/screens/demo/examples/ui/tui.njk      | 21 ++---------------
 source/templates/hippie/_app.njk             |  2 +-
 source/templates/hippie/_app_frame.njk       | 17 ++++++++++++++
 6 files changed, 29 insertions(+), 70 deletions(-)
 create mode 100755 source/templates/hippie/_app_frame.njk

diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
index 3ba032d..dc0800f 100755
--- a/source/screens/demo/examples/ui/cli.njk
+++ b/source/screens/demo/examples/ui/cli.njk
@@ -6,21 +6,7 @@ tags:
 {% set pageId = page.fileSlug %}
 {% set bodyClass = "body_cli" %}
 
-{% extends "hippie/_app.njk" %}
-{% import "hippie/macros/_io.njk" as io %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
+{% extends "hippie/_app_frame.njk" %}
 
 {% block body %}
 	<div id="cli">
@@ -47,9 +33,11 @@ tags:
 
 		const textarea = document.getElementById('prompt');
 
-		document.body.addEventListener('click', () => {
-			textarea.focus();
-		});
+		document
+			.body
+			.addEventListener('click', () => {
+				textarea.focus();
+			});
 
 		textarea.addEventListener('input', () => {
 			resizeTextArea(textarea);
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
index 628f658..869bcf8 100755
--- a/source/screens/demo/examples/ui/explorer.njk
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -4,23 +4,8 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set bodyClass = "body_frame" %}
 
-{% extends "hippie/_app.njk" %}
-{% import "hippie/macros/_io.njk" as io %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
+{% extends "hippie/_app_frame.njk" %}
 
 {% block body %}
 	{{ io.frameHeader('title-bar') }}
@@ -177,8 +162,4 @@ tags:
 			<button>action</button>
 		</nav>
 	</footer>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 94275cd..2e6c088 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -3,20 +3,10 @@ title: Form
 tags: 
   - ui
 ---
-{% extends "hippie/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
+{% extends "hippie/_app_frame.njk" %}
 
 {% block body %}
+	{{ io.frameHeader('title-bar') }}
 	<header class="io">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
index 89a3fdd..8f22162 100755
--- a/source/screens/demo/examples/ui/tui.njk
+++ b/source/screens/demo/examples/ui/tui.njk
@@ -4,31 +4,14 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set bodyClass = "body_frame" %}
 
-{% extends "hippie/_app.njk" %}
-{% import "hippie/macros/_io.njk" as io %}
+{% extends "hippie/_app_frame.njk" %}
 
 {% block title %}{{ title }}
 {% endblock %}
 
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
 {% block body %}
 	{{ io.frameHeader('title-bar') }}
-	<main class="io">
-	</main>
+	<main class="io"></main>
 	{{ io.frameFooter('mode-bar') }}
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
index dbee1a7..3dcc729 100755
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -18,7 +18,7 @@
 		{% endblock %}
 	</head>
 
-	<body class="{{ bodyClass }}">
+	<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
 		{% block body %}{% endblock %}
 
 		{% block script %}
diff --git a/source/templates/hippie/_app_frame.njk b/source/templates/hippie/_app_frame.njk
new file mode 100755
index 0000000..19a7504
--- /dev/null
+++ b/source/templates/hippie/_app_frame.njk
@@ -0,0 +1,17 @@
+<!-- frame.app.template -->
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block script %}
+	{{ super() }}
+{% endblock %}
\ No newline at end of file

From 1ddba29d9c044d22a39c90c3458727f6c3605d22 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 22:31:18 +0200
Subject: [PATCH 049/253] feat: Update drag page and other small things

- Add parameter to NewDiv class
- Add instance with content to drag page
- Drag page now also uses frame template
- Use macro for footer in explorer
---
 source/code/_ui.js                           | 18 ++++++++++--
 source/screens/demo/examples/ui/drag.njk     | 30 +++++++++++---------
 source/screens/demo/examples/ui/explorer.njk | 11 +------
 source/style/modules/ui/_drag_module.scss    |  4 +++
 source/style/modules/ui/_frame_module.scss   |  6 ++--
 5 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/source/code/_ui.js b/source/code/_ui.js
index 24e034a..01a489a 100644
--- a/source/code/_ui.js
+++ b/source/code/_ui.js
@@ -1,17 +1,18 @@
 // Creates a div element which is draggable
 class NewDiv {
-  constructor(x, y, width, height, backgroundColor) {
+  constructor(x, y, width, height, backgroundColor, content) {
     this.x = x;
     this.y = y;
     this.width = width;
     this.height = height;
     this.backgroundColor = backgroundColor;
     this.element = null;
+    this.content = content;
   }
 
   // Create the div element
   createDiv() {
-    this.element = document.createElement('div');
+    this.element = this._content;
     this.element.style.position = 'absolute';
     this.element.style.left = `${this.x}px`;
     this.element.style.top = `${this.y}px`;
@@ -93,6 +94,19 @@ class NewDiv {
     loadData();
   }
 
+  // FIXME: this.element wird von appendToFrame() verwendet
+  get content() {
+    return this._content = this.content;
+  }
+
+  set content(value) {
+    if (!value) {
+      value = document.createElement('div');
+    }
+
+    this._content = value;
+  }
+
   // Append the div to the space
   appendToFrame(space) {
     this.element.id = `newDiv${space.children.length}`;
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 873a2ab..ecd3001 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -5,25 +5,22 @@ tags:
 ---
 {% set pageId = page.fileSlug %}
 
-{% extends "hippie/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
+{% extends "hippie/_app_frame.njk" %}
 
 {% block body %}
   <header class="io pos_fix pin_top pin_right pin_left">
     <button data-action="add">Add</button>
   </header>
   <div id="space"></div>
+  <div>
+    <div id="test">
+      <div class="body_frame">
+        {{ io.frameHeader('title-bar') }}
+        <main></main>
+        {{ io.frameFooter('mode-bar') }}
+      </div>
+    </div>
+  </div>
 {% endblock %}
 
 {%- block script %}
@@ -32,6 +29,7 @@ tags:
     // Get the space element
     const space = document.getElementById('space');
     const add = document.querySelector('[data-action=add]');
+    const test = document.getElementById('test');
 
     // Add event listener to the add space button
     add.addEventListener('click', () => {
@@ -41,8 +39,12 @@ tags:
     });
 
     // Create a new NewDiv instance
-    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
+    const newDiv = new NewDiv(100, 100, 200, 200, '#000');
     newDiv.createDiv();
     newDiv.appendToFrame(space);
+
+    const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
+    explorer.createDiv();
+    explorer.appendToFrame(space);
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
index 869bcf8..72de77a 100755
--- a/source/screens/demo/examples/ui/explorer.njk
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -152,14 +152,5 @@ tags:
 			</footer>
 		</section>
 	</main>
-	<footer class="io">
-		<nav>
-			<button>mode</button>
-			<span>mode-bar</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<button>action</button>
-		</nav>
-	</footer>
+	{{ io.frameFooter('mode-bar') }}
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index a345922..83f1abb 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,4 +1,8 @@
 #space {
 	position: relative;
 	height: 100%;
+
+	.body_frame {
+		background-color: white;
+	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index dc99b1c..a8e804d 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -27,9 +27,9 @@
 
 		flex: 1;
 
-		aside {
-			// background-color: rgba(255, 255, 255, .1);
-		}
+		// aside {
+		// 	background-color: rgba(255, 255, 255, .1);
+		// }
 
 		section {
 

From a3656b86feccdcb27fdb5cf6f37ced81d58a3fd5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 27 Jun 2025 21:55:36 +0200
Subject: [PATCH 050/253] feat: Update gitignore

- Add .idea directory
- Remove duplicates
---
 .gitignore | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5e89ea2..a4481ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,9 @@ reports/**
 source/art/sprites/
 source/art/images/sprite.*
 
+# IDE
+.idea/
+
 # https://gist.github.com/octocat/9257657
 ###################
 ###################
@@ -44,8 +47,6 @@ source/art/images/sprite.*
 ._*
 .Spotlight-V100
 .Trashes
-ehthumbs.db
-Thumbs.db
 
 # https://github.com/github/gitignore
 ###################
@@ -86,15 +87,10 @@ $RECYCLE.BIN/
 # Icon must end with two \r
 Icon
 
-# Thumbnails
-._*
-
 # Files that might appear in the root of a volume
 .DocumentRevisions-V100
 .fseventsd
-.Spotlight-V100
 .TemporaryItems
-.Trashes
 .VolumeIcon.icns
 .com.apple.timemachine.donotpresent
 
@@ -125,7 +121,6 @@ https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
 ###################
 # Logs
 logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

From 8ace5526bf0e738e7b99a83aa2a7051fe80ac539 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 10 Oct 2025 18:22:11 +0200
Subject: [PATCH 051/253] feat: Add editorconfig

Single format defined for all file types.
---
 .editorconfig | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..1151840
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = false
+max_line_length = 120

From 7c83a33920de8ea5d9761f3de57130c3c84e2517 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 10 Oct 2025 18:27:54 +0200
Subject: [PATCH 052/253] feat: Update hippie-style

---
 source/style/hippie-style | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index fb1bd80..54f1de5 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff
+Subproject commit 54f1de579c3709db1f785997884a2e3e9861e0bc

From 9c821fed90e2258972685b9919eb9acc7d40ed8c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 10 Oct 2025 18:29:04 +0200
Subject: [PATCH 053/253] feat: New component example for hgroup

---
 source/screens/demo/components.njk | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 55c9596..a6c1bfc 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -80,6 +80,10 @@ tags:
 				<h6>Überschrift 6</h6>
 				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
 			</hgroup>
+			<hgroup>
+				<h2>Überschrift 1 oder 2</h2>
+				<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>

From 5f54ab6bbe8f3b02a1c6fda93f25a0874d64bf41 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 17 Oct 2025 23:04:31 +0200
Subject: [PATCH 054/253] build: Update Sass dependency to 1.93.x

---
 package-lock.json | 372 ++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |   2 +-
 2 files changed, 363 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62279d6..73baa18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
         "bootstrap-icons": "^1.13.1",
-        "normalize.css": "^8.0.1",
-        "sass": "^1.69.4"
+        "sass": "^1.93.0"
+      },
+      "devDependencies": {
+        "normalize.css": "^8.0.1"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -207,6 +209,302 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@sindresorhus/slugify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
@@ -606,6 +904,19 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dev-ip": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
@@ -1101,9 +1412,10 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "license": "MIT"
     },
     "node_modules/inflight": {
       "version": "1.0.6",
@@ -1561,6 +1873,13 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -1573,6 +1892,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/nunjucks": {
@@ -1986,12 +2306,13 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.72.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
-      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
+      "version": "1.93.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
+      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+      "license": "MIT",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
@@ -1999,6 +2320,37 @@
       },
       "engines": {
         "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/section-matter": {
diff --git a/package.json b/package.json
index 33ebec2..d2759a8 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,6 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "bootstrap-icons": "^1.13.1",
-    "sass": "^1.69.4"
+    "sass": "^1.93.0"
   }
 }
\ No newline at end of file

From 41c5757790eb199617f979d5d97ff4731a1bf582 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 20 Oct 2025 19:27:23 +0200
Subject: [PATCH 055/253] feat: Change label styles and update layouts

- Update styles
- Update layouts screen and rearrange other examples
---
 source/screens/demo/layouts.njk | 30 +++++++++++++++++-------------
 source/style/hippie-style       |  2 +-
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index dcf77dc..2aeeeb1 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -22,7 +22,7 @@ tags:
 			<p>Die Elemente werden fortlaufend komplexer</p>
 		</header>
 		<article>
-			<h2>Bereiche</h2>
+			<h2>Bereiche (sections)</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">
@@ -30,12 +30,7 @@ tags:
 				<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
 				<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</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>
+			<h3>nav</h3>
 			<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">
@@ -107,6 +102,7 @@ tags:
 					</ul>
 				</nav>
 			</div>
+			<h3>header</h3>
 			<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>
@@ -175,6 +171,9 @@ tags:
 					</footer>
 				</div>
 			</div>
+
+			<h2>Interaktiv (interactive)</h2>
+			<h3>input</h3>
 			<div class="flex inline">
 				<input value="Undefiniert"/>
 				<input type="text" size="8" value="Text"/>
@@ -182,10 +181,9 @@ tags:
 				<input type="button" value="Auswählen">
 				<input type="submit" value="Senden" disabled="disabled"/>
 			</div>
-
+			<h3>form</h3>
 			<form method="get">
-				<p class="label">
-					Show me a
+				<p>Show me a
 					<select name="F">
 						<option value="0">Plain list</option>
 						<option value="1" selected="selected">Fancy list</option>
@@ -212,7 +210,7 @@ tags:
 				</p>
 			</form>
 
-			<h2>Gruppierung</h2>
+			<h2>Gruppierung (grouping)</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>
@@ -230,14 +228,13 @@ tags:
 			<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)+li>a>img+span</code></pre>
+			<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
 			<nav>
 				<ul class="list_link">
 					<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
@@ -246,6 +243,13 @@ tags:
 					</li>
 				</ul>
 			</nav>
+			<h3>div</h3>
+			<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>
 
 			<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>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 54f1de5..cf8fc6b 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 54f1de579c3709db1f785997884a2e3e9861e0bc
+Subproject commit cf8fc6bd5dcb24ad654ca6093e6e47520b8b0093

From 50b0d864c23a3dcec6e6884a75db623a08e82431 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 25 Oct 2025 09:03:58 +0200
Subject: [PATCH 056/253] feat: Replace deprecated sass color functions

---
 source/style/hippie-style                       | 2 +-
 source/style/modules/demo/_demo_module.scss     | 8 +++++---
 source/style/modules/portal/_portal_module.scss | 4 +++-
 source/style/modules/ui/_frame_module.scss      | 4 +++-
 source/style/modules/ui/_new_module.scss        | 4 +++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index cf8fc6b..b739dde 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit cf8fc6bd5dcb24ad654ca6093e6e47520b8b0093
+Subproject commit b739ddefda35962192aadfc2ca86a11d996ab7c9
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index 0266f6c..f6cc23c 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .demo__intro {
 	@extend .sec_main_center;
 	@extend .sec_main_status;
@@ -33,12 +35,12 @@
 }
 
 .header_fancy {
-	background-color: transparentize($bravo_color, 0.4);
+	background-color: color.adjust($bravo_color, $alpha: -0.4);
 
 	nav {
 
 		a {
-			background-color: transparentize($alpha_color, 0.4);
+			background-color: color.adjust($alpha_color, $alpha: -0.4);
 			color: $alpha_color;
 
 			&:active,
@@ -56,7 +58,7 @@
 	top: 0;
 	left: 0;
 	width: 100%;
-	background-color: transparentize($charlie_color, 0.4);
+	background-color: color.adjust($charlie_color, $alpha: -0.4);
 
 	nav {
 
diff --git a/source/style/modules/portal/_portal_module.scss b/source/style/modules/portal/_portal_module.scss
index 6477b6b..786bf0e 100644
--- a/source/style/modules/portal/_portal_module.scss
+++ b/source/style/modules/portal/_portal_module.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $portal_highlight: $color_highlight_basic;
 $portal_margin: $space_double;
 $portal_link_size: 128px;
@@ -66,7 +68,7 @@ $portal_icon_size: 64px;
   background-position: center;
 
   &:hover {
-    background-color: transparentize($portal_highlight, $amount: 0.2);
+    background-color: color.adjust($portal_highlight, $alpha: -0.2);
     border-color: $portal_highlight;
   }
 
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index a8e804d..dc339c2 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @mixin nav-spacer($name, $size, $orientation) {
 	.spacer.#{$name} {
 		width: $size;
@@ -35,7 +37,7 @@
 
 			&>header,
 			&>footer {
-				background-color: transparentize($color_back_io, .5);
+				background-color: color.adjust($color_back_io, $alpha: -.5);
 
 				&:hover {
 					background-color: $color_back_io;
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index 42946e2..e7279ce 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $module_top_height: 32px;
 $body_top_space: $module_top_height + $space_basic;
 
@@ -26,7 +28,7 @@ $body_top_space: $module_top_height + $space_basic;
 
 .item {
 	// height: unset;
-	border-color: darken($color_back_basic, $color_diff_tiny);
+	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
 	border-style: dotted;
 	border-width: $width_border_8;
 	border-radius: $width_border_8;

From 65d80fcbc48b7bea6e8fb56d6e2bbacb523df243 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 25 Oct 2025 09:15:41 +0200
Subject: [PATCH 057/253] style: Add editorconfig for css

Change indentation for CSS and SCSS to 2 instead of the default which is 4.
---
 .editorconfig                               |  4 +
 source/style/demo.scss                      |  2 +-
 source/style/modules/demo/_demo_module.scss | 92 ++++++++++++++-------
 3 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 1151840..5f18790 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -7,3 +7,7 @@ indent_size = 4
 indent_style = tab
 insert_final_newline = false
 max_line_length = 120
+
+[*.{css,scss}]
+tab_width = 2
+indent_size = tab
diff --git a/source/style/demo.scss b/source/style/demo.scss
index b3d4100..24ae0f0 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -1,6 +1,6 @@
 // Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
 // Then import your config and hippie
-// NOTE // No css rules allowed in here
+// NOTE: No css rules allowed in here
 // ------------------------------------------------------------------------------
 @import "demo_config";
 @import "hippie-style/hippie";
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index f6cc23c..342b2c6 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -134,60 +134,84 @@
 	margin: $space_small 0 $space_basic 0;
 }
 
-.demo__button_32 {
-	width: 32px;
-	height: 32px;
-}
-
-
-
 .demo__queries > p {
-  padding: $padding_basic;
+	padding: $padding_basic;
 }
 
 .query_phoneUp {
-  @include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
+	@include forPhoneUp {
+		background-color: rgba($color_text_basic, 0.2)
+	}
+;
 }
 
 .query_phoneOnly {
-  @include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
+	@include forPhoneOnly {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_tabletPortaitOnly {
-  @include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
+	@include forTabletPortraitOnly {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_tabletPortraitUp {
-  @include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
+	@include forTabletPortraitUp {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_tabletLandscapeOnly {
-  @include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
+	@include forTabletLandscapeOnly {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_tabletLandscapeUp {
-  @include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
+	@include forTabletLandscapeUp {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_desktopOnly {
-  @include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
+	@include forDesktopOnly {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_desktopUp {
-  @include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
+	@include forDesktopUp {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .query_bigDesktopUp {
-  @include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); }
+	@include forBigDesktopUp {
+		background-color: rgba($color_text_basic, 0.2);
+	}
 }
 
 .demo__query_example {
-	@include goingLarge($screen_tiny) {background-color: $alpha_color; }
-	@include goingLarge($screen_small) {background-color: $bravo_color; }
-	@include goingLarge($screen_medium) {background-color: $charlie_color; }
-	@include goingLarge($screen_large) {background-color: $delta_color; }
-	@include goingLarge($screen_huge) {background-color: $echo_color; }
-	@include goingLarge($screen_gigantic) {background-color: $foxtrot_color; }
+	@include goingLarge($screen_tiny) {
+		background-color: $alpha_color;
+	}
+	@include goingLarge($screen_small) {
+		background-color: $bravo_color;
+	}
+	@include goingLarge($screen_medium) {
+		background-color: $charlie_color;
+	}
+	@include goingLarge($screen_large) {
+		background-color: $delta_color;
+	}
+	@include goingLarge($screen_huge) {
+		background-color: $echo_color;
+	}
+	@include goingLarge($screen_gigantic) {
+		background-color: $foxtrot_color;
+	}
 	margin-bottom: $space_small;
 	padding: $space_small;
 	text-align: center;
@@ -195,19 +219,29 @@
 	&:after {
 		@extend code;
 		@include goingLarge($screen_tiny) {
-			& { content: '768px'; }
+			& {
+				content: '768px';
+			}
 		}
 		@include goingLarge($screen_small) {
-			& { content: '1024px'; }
+			& {
+				content: '1024px';
+			}
 		}
 		@include goingLarge($screen_medium) {
-			& { content: '1280px'; }
+			& {
+				content: '1280px';
+			}
 		}
 		@include goingLarge($screen_huge) {
-			& { content: '1680px'; }
+			& {
+				content: '1680px';
+			}
 		}
 		@include goingLarge($screen_gigantic) {
-			& { content: '1920px'; }
+			& {
+				content: '1920px';
+			}
 		}
 		content: '< 768px';
 		padding: $padding_basic;
@@ -240,7 +274,7 @@
 	display: flex;
 	// height: 100%;
 	align-items: center;
-  justify-content: center;
+	justify-content: center;
 }
 
 .hello {

From ac8f55a7c9c9153271a04e4c74c58c533a773dfd Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 25 Oct 2025 09:32:22 +0200
Subject: [PATCH 058/253] feat: Change global mouse interaction

- Add .body_intro to intro screen
- Change mouse over identifier
- Introduce HippieFade as global function
- Replace #js_mob with HippieFade
- Remove old partial
---
 source/code/hippie/functions.js               | 31 ++++++++----
 source/code/hippie/variables.js               |  2 +-
 source/screens/demo/examples/intro.njk        |  5 +-
 source/style/hippie-style                     |  2 +-
 source/style/ui.scss                          |  8 +++-
 source/templates/hippie/_main.njk             |  5 +-
 .../templates/hippie/partials/_body_hover.njk |  2 -
 .../templates/hippie/partials/_body_nav.njk   | 47 ++++++++++---------
 8 files changed, 62 insertions(+), 40 deletions(-)
 delete mode 100644 source/templates/hippie/partials/_body_hover.njk

diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js
index cdca2f2..ef2e3c7 100644
--- a/source/code/hippie/functions.js
+++ b/source/code/hippie/functions.js
@@ -11,16 +11,6 @@ function setup() {
 		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
 }
 
 // MODULE Scroll navigation
@@ -70,6 +60,27 @@ function HippieScroll($tp, $dn) {
 	});
 }
 
+function HippieFade(toggleElement, initState) {
+	'use strict';
+
+	const fragment = document.createDocumentFragment();
+	const overlay = document.createElement('div');
+
+	overlay.id = 'mouse-overlay';
+
+	if (initState) {
+		overlay.classList.add('active');
+	}
+
+	toggleElement.addEventListener('click', function () {
+		overlay.classList.toggle('active');
+	});
+
+	fragment.appendChild(overlay);
+	document.body.style.position = 'relative';
+	document.body.prepend(fragment);
+}
+
 // MODULE Meta elements
 function HippieMeta($ma, $pp) {
 	'use strict';
diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js
index e1f77e7..b5d8538 100644
--- a/source/code/hippie/variables.js
+++ b/source/code/hippie/variables.js
@@ -27,4 +27,4 @@ const flagColors = [
 	'b7e0f0',
 	'6bc7d9',
 	'52bed1'
-]
\ No newline at end of file
+];
\ No newline at end of file
diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
index 44898cc..e6ee3cd 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@@ -5,6 +5,7 @@ tags:
 ---
 
 {% set pageId = "init" %}
+{% set bodyClass = "body_intro" %}
 
 {% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
@@ -51,7 +52,7 @@ tags:
 		<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="mouse-overlay"></div>
 		<div class="hello">Hello World!</div>
 		<p class="hello">Only left mouse click or any key</p>
 	</div>
@@ -140,7 +141,7 @@ tags:
 			.then(showAgreement)
 			.then(showIdle)
 			.catch(er => console.error(er))
-			. finally(() => {
+			.finally(() => {
 				console.debug('Init end.', isAgree);
 				// location = 'demo/examples/ui/new.html';
 			});
diff --git a/source/style/hippie-style b/source/style/hippie-style
index b739dde..867e96e 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit b739ddefda35962192aadfc2ca86a11d996ab7c9
+Subproject commit 867e96ea0a51054762ce615efa0224ccf1157ca2
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 5a4998b..f5a80c4 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -22,6 +22,10 @@ $color_gui_back: $color_dark;
 	}
 }
 
+.body_intro {
+	background-color: black;
+}
+
 .step {
 	@extend %full_parent;
 }
@@ -46,7 +50,7 @@ $color_gui_back: $color_dark;
 }
 
 #progress {
-	width: 0%;
+	width: 0;
 	height: 100%;
 	background-color: black;
 }
@@ -157,7 +161,7 @@ $color_gui_back: $color_dark;
 	background-color: $color_back_basic;
 	transition: background-color 4s;
 
-	&:hover>.mouse_over {
+	&:hover>.mouse-overlay {
 		background-color: transparent !important;
 		transition: background-color $duration_basic $timing_basic 0s !important;
 	}
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk
index 443b555..ede46e3 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -28,7 +28,6 @@
 
 	<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" %}
@@ -54,6 +53,10 @@
 				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
 				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
 
+				if (viewHover) {
+					let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
+				}
+
 				document.addEventListener('scroll', () => {
 					scrollUi.check();
 				});
diff --git a/source/templates/hippie/partials/_body_hover.njk b/source/templates/hippie/partials/_body_hover.njk
deleted file mode 100644
index 08311a3..0000000
--- a/source/templates/hippie/partials/_body_hover.njk
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- 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 632054f..870d2a6 100644
--- a/source/templates/hippie/partials/_body_nav.njk
+++ b/source/templates/hippie/partials/_body_nav.njk
@@ -1,28 +1,33 @@
 <!-- nav.partial -->
 <div class="pos_rel">
-  <nav class="nav_page_meta">
-    <ul>
-      <li class="js_scrolltop di_none">
-        <a href="#begin" class="a_button_meta">
-          <div class="sprite_img demo__sprite_up"></div>
-          {# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
-        </a>
-      </li>
-      <li>
-        {# <button class="">Show Meta Information</button> #}
-        {# <a href="#meta" class="js_showmeta a_button_meta">
+	<nav class="nav_page_meta">
+		<ul>
+			<li class="js_scrolltop di_none">
+				<a href="#begin" class="a_button_meta">
+					<div class="sprite_img demo__sprite_up"></div>
+					{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
+				</a>
+			</li>
+			<li>
+				{# <button class="">Show Meta Information</button> #}
+				{# <a href="#meta" class="js_showmeta a_button_meta">
           <div class="sprite_img demo__sprite_meta"></div>
         </a> #}
-        <button class="js_showmeta button_clear" type="button"><div class="sprite_img demo__sprite_meta"></div></button>
-      </li>
-      <li class="js_scrolldown">
-        <a href="#end" class="a_button_meta">
-          <div class="sprite_img demo__sprite_down"></div>
-          {# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
-        </a>
-      </li>
-    </ul>
-  </nav>
+				<button class="js_showmeta button_clear" type="button">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</button>
+			</li>
+			<li>
+				<button id="js-toggle-fade">F</button>
+			</li>
+			<li class="js_scrolldown">
+				<a href="#end" class="a_button_meta">
+					<div class="sprite_img demo__sprite_down"></div>
+					{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
+				</a>
+			</li>
+		</ul>
+	</nav>
 </div>
 {# <div class="exp_overlay_btn exp_help_btn">
 <span class="span_solo">?</span>

From d9f7ae1ff908c68eb0c918d92cf0fcb0ba9c87d8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 25 Oct 2025 09:34:30 +0200
Subject: [PATCH 059/253] feat: Change frame screens

- Move page title to template
- Remove redundant title blocks
- Base frame pages on correct template
- Base ui index on default template
---
 source/screens/demo/examples/intro.njk    | 13 +------------
 source/screens/demo/examples/ui/index.njk | 14 ++------------
 source/screens/demo/examples/ui/new.njk   | 14 +-------------
 source/screens/demo/examples/ui/tui.njk   |  3 ---
 source/templates/hippie/_app_frame.njk    |  2 ++
 5 files changed, 6 insertions(+), 40 deletions(-)

diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
index e6ee3cd..1358739 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@@ -7,19 +7,8 @@ tags:
 {% set pageId = "init" %}
 {% set bodyClass = "body_intro" %}
 
-{% extends "hippie/_app.njk" %}
+{% extends "hippie/_app_frame.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
-{% 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="loader" class="step op_show">
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index ec107c2..6c8d79f 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -4,20 +4,10 @@ tags:
   - demoExample
   - index
 ---
-{% extends "hippie/_app.njk" %}
+{% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
-{% block title %}
-	{{ title }}
-{% endblock %}
-
-{% block links %}
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 
 {% block body %}
 	<div class="sec_main_center">
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index 54ddd0b..df1f62a 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -6,21 +6,9 @@ tags:
 {% set pageId = page.fileSlug %}
 {% set bodyClass = "body_new" %}
 
-{% extends "hippie/_app.njk" %}
+{% extends "hippie/_app_frame.njk" %}
 {% import "hippie/macros/_header.njk" as header %}
 
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
-
 {% block body %}
   {{ header.status(hippie, new) }}
   <header class="area menu io">
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
index 8f22162..8fc0e31 100755
--- a/source/screens/demo/examples/ui/tui.njk
+++ b/source/screens/demo/examples/ui/tui.njk
@@ -7,9 +7,6 @@ tags:
 
 {% extends "hippie/_app_frame.njk" %}
 
-{% block title %}{{ title }}
-{% endblock %}
-
 {% block body %}
 	{{ io.frameHeader('title-bar') }}
 	<main class="io"></main>
diff --git a/source/templates/hippie/_app_frame.njk b/source/templates/hippie/_app_frame.njk
index 19a7504..35ddd64 100755
--- a/source/templates/hippie/_app_frame.njk
+++ b/source/templates/hippie/_app_frame.njk
@@ -6,6 +6,8 @@
 	{{ super() }}
 {% endblock %}
 
+{% block title %}{{ title }}{% endblock %}
+
 {% block links %}
 	{{ super() }}
 	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">

From c1fea8064e1e4929b5c6919e63fea5b1dd28e3c3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 26 Oct 2025 11:37:47 +0100
Subject: [PATCH 060/253] feat: Adapt new hippie-style structure

Sass deprecations removed.
---
 source/style/demo.scss                        |  14 +-
 source/style/demo_basic.scss                  |   6 +-
 source/style/hippie-style                     |   2 +-
 source/style/modules/card/_card_module.scss   |  12 +-
 source/style/modules/demo/_demo_module.scss   | 132 +++++++++---------
 .../style/modules/portal/_portal_module.scss  |   8 +-
 .../modules/songbook/_songbook_module.scss    |   8 +-
 source/style/modules/ui/_form_module.scss     |   4 +-
 source/style/modules/ui/_frame_module.scss    |  42 +++---
 source/style/modules/ui/_new_module.scss      |  22 +--
 source/style/ui.scss                          |  63 +++++----
 11 files changed, 166 insertions(+), 147 deletions(-)

diff --git a/source/style/demo.scss b/source/style/demo.scss
index 24ae0f0..73e17c1 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -2,15 +2,15 @@
 // Then import your config and hippie
 // NOTE: No css rules allowed in here
 // ------------------------------------------------------------------------------
-@import "demo_config";
-@import "hippie-style/hippie";
+@use "demo_config";
+@use "hippie-style/hippie";
 
 // Additional Modules and variables
 // in dependency to other basic styles
 // could be defined here
 // -----------------------------------------------------------------------------
-@import "modules/card/card_module";
-@import "modules/portal/portal_module";
-@import "modules/songbook/songbook_module";
-@import "modules/demo/demo_module";
-// @import "modules/YOUR-MODULE/YOUR-FILES";
+@use "modules/card/card_module";
+@use "modules/portal/portal_module";
+@use "modules/songbook/songbook_module";
+@use "modules/demo/demo_module";
+// @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/demo_basic.scss b/source/style/demo_basic.scss
index 3efdbf1..0cb7771 100644
--- a/source/style/demo_basic.scss
+++ b/source/style/demo_basic.scss
@@ -2,12 +2,12 @@
 // Then import your config and hippie
 // NOTE // No css rules allowed in here
 // ------------------------------------------------------------------------------
-@import "demo_config";
-@import "hippie-style/basic";
+@use "demo_config";
+@use "hippie-style/basic";
 
 
 // Additional Modules and variables
 // in dependency to other basic styles
 // could be defined here
 // -----------------------------------------------------------------------------
-// @import "modules/YOUR-MODULE/YOUR-FILES";
+// @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 867e96e..4e4f881 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 867e96ea0a51054762ce615efa0224ccf1157ca2
+Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483
diff --git a/source/style/modules/card/_card_module.scss b/source/style/modules/card/_card_module.scss
index 36b7424..5244c7f 100644
--- a/source/style/modules/card/_card_module.scss
+++ b/source/style/modules/card/_card_module.scss
@@ -1,3 +1,5 @@
+@use "../../hippie-style/hippie";
+
 // Card module styles
 // ------------------------------------------------------------------------------
 
@@ -26,7 +28,7 @@
 			height: 100vh;
 
 			* {
-				font-family: $family_text_card;
+				font-family: hippie.$family_text_card;
 				// text-align: center;
 			}
 
@@ -58,10 +60,14 @@
 			// padding-left: 1em;
 			// text-indent: -1em;
 
-			&::before { content: "*\0000a0" }
+			&::before {
+				content: "*\0000a0"
+			}
 		}
 
-		.decent { color: #666 }
+		.decent {
+			color: #666
+		}
 
 		a {
 			color: #000;
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index 342b2c6..f7ab191 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -1,5 +1,7 @@
 @use "sass:color";
 
+@use "../../hippie-style/hippie";
+
 .demo__intro {
 	@extend .sec_main_center;
 	@extend .sec_main_status;
@@ -9,7 +11,7 @@
 	@extend .sec_main_status;
 	position: relative;
 	min-height: 50vh;
-	border-color: $foxtrot_color;
+	border-color: hippie.basic_color(foxtrot);
 
 	h1:first-of-type {
 		margin-top: 0;
@@ -24,7 +26,7 @@
 }
 
 .demo__header {
-	padding: $space_double;
+	padding: hippie.$space_double;
 
 	nav {
 
@@ -35,19 +37,19 @@
 }
 
 .header_fancy {
-	background-color: color.adjust($bravo_color, $alpha: -0.4);
+	background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
 
 	nav {
 
 		a {
-			background-color: color.adjust($alpha_color, $alpha: -0.4);
-			color: $alpha_color;
+			background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
+			color: hippie.basic_color(alpha);
 
 			&:active,
 			&:focus,
 			&:hover {
-				background-color: rgba($color_brightest, 0.2);
-				color: $color_brightest;
+				background-color: rgba(hippie.$color_brightest, 0.2);
+				color: hippie.$color_brightest;
 			}
 		}
 	}
@@ -58,7 +60,7 @@
 	top: 0;
 	left: 0;
 	width: 100%;
-	background-color: color.adjust($charlie_color, $alpha: -0.4);
+	background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
 
 	nav {
 
@@ -67,8 +69,8 @@
 			&:active,
 			&:focus,
 			&:hover {
-				background-color: rgba($color_brightest, 0.2);
-				color: $color_brightest;
+				background-color: rgba(hippie.$color_brightest, 0.2);
+				color: hippie.$color_brightest;
 			}
 		}
 	}
@@ -77,20 +79,20 @@
 .demo__footer {
 	width: 100%;
 	// height: 128px;
-	padding: $space_double 0;
-	background-color: $color_dark;
-	color: $color_bright;
+	padding: hippie.$space_double 0;
+	background-color: hippie.$color_dark;
+	color: hippie.$color_bright;
 
 	nav {
 
 		a {
-			color: $color_brightest;
+			color: hippie.$color_brightest;
 		}
 	}
 }
 
 .demo__sprite_down {
-	@include sprite($down);
+	@include hippie.sprite(hippie.$down);
 	// width: 32px;
 	// height: 32px;
 	// background-image: url(../art/sprites.png);
@@ -98,7 +100,7 @@
 }
 
 .demo__sprite_up {
-	@include sprite($up);
+	@include hippie.sprite(hippie.$up);
 	// width: 32px;
 	// height: 64px;
 	// background-image: url(../art/sprites.png);
@@ -106,7 +108,7 @@
 }
 
 .demo__sprite_meta {
-	@include sprite($meta);
+	@include hippie.sprite(hippie.$meta);
 	// width: 32px;
 	// height: 32px;
 	// background-image: url(../art/sprites.png);
@@ -122,7 +124,7 @@
 		min-width: 128px;
 		min-height: 128px;
 		border-radius: 50%;
-		background-color: $delta_color;
+		background-color: hippie.basic_color(delta);
 	}
 }
 
@@ -131,123 +133,123 @@
 }
 
 .demo__credits {
-	margin: $space_small 0 $space_basic 0;
+	margin: hippie.$space_small 0 hippie.$space_basic 0;
 }
 
 .demo__queries > p {
-	padding: $padding_basic;
+	padding: hippie.$padding_basic;
 }
 
 .query_phoneUp {
-	@include forPhoneUp {
-		background-color: rgba($color_text_basic, 0.2)
+	@include hippie.forPhoneUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2)
 	}
 ;
 }
 
 .query_phoneOnly {
-	@include forPhoneOnly {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forPhoneOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
-.query_tabletPortaitOnly {
-	@include forTabletPortraitOnly {
-		background-color: rgba($color_text_basic, 0.2);
+.query_tabletPortraitOnly {
+	@include hippie.forTabletPortraitOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_tabletPortraitUp {
-	@include forTabletPortraitUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forTabletPortraitUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_tabletLandscapeOnly {
-	@include forTabletLandscapeOnly {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forTabletLandscapeOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_tabletLandscapeUp {
-	@include forTabletLandscapeUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forTabletLandscapeUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_desktopOnly {
-	@include forDesktopOnly {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forDesktopOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_desktopUp {
-	@include forDesktopUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forDesktopUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_bigDesktopUp {
-	@include forBigDesktopUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forBigDesktopUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .demo__query_example {
-	@include goingLarge($screen_tiny) {
-		background-color: $alpha_color;
+	@include hippie.goingLarge(hippie.$screen_tiny) {
+		background-color: hippie.basic_color(alpha);
 	}
-	@include goingLarge($screen_small) {
-		background-color: $bravo_color;
+	@include hippie.goingLarge(hippie.$screen_small) {
+		background-color: hippie.basic_color(bravo);
 	}
-	@include goingLarge($screen_medium) {
-		background-color: $charlie_color;
+	@include hippie.goingLarge(hippie.$screen_medium) {
+		background-color: hippie.basic_color(charlie);
 	}
-	@include goingLarge($screen_large) {
-		background-color: $delta_color;
+	@include hippie.goingLarge(hippie.$screen_large) {
+		background-color: hippie.basic_color(delta);
 	}
-	@include goingLarge($screen_huge) {
-		background-color: $echo_color;
+	@include hippie.goingLarge(hippie.$screen_huge) {
+		background-color: hippie.basic_color(echo);
 	}
-	@include goingLarge($screen_gigantic) {
-		background-color: $foxtrot_color;
+	@include hippie.goingLarge(hippie.$screen_gigantic) {
+		background-color: hippie.basic_color(foxtrot);
 	}
-	margin-bottom: $space_small;
-	padding: $space_small;
+	margin-bottom: hippie.$space_small;
+	padding: hippie.$space_small;
 	text-align: center;
 
 	&:after {
 		@extend code;
-		@include goingLarge($screen_tiny) {
+		@include hippie.goingLarge(hippie.$screen_tiny) {
 			& {
 				content: '768px';
 			}
 		}
-		@include goingLarge($screen_small) {
+		@include hippie.goingLarge(hippie.$screen_small) {
 			& {
 				content: '1024px';
 			}
 		}
-		@include goingLarge($screen_medium) {
+		@include hippie.goingLarge(hippie.$screen_medium) {
 			& {
 				content: '1280px';
 			}
 		}
-		@include goingLarge($screen_huge) {
+		@include hippie.goingLarge(hippie.$screen_huge) {
 			& {
 				content: '1680px';
 			}
 		}
-		@include goingLarge($screen_gigantic) {
+		@include hippie.goingLarge(hippie.$screen_gigantic) {
 			& {
 				content: '1920px';
 			}
 		}
 		content: '< 768px';
-		padding: $padding_basic;
-		border-radius: $radius_basic;
-		color: $color_brightest;
-		background-color: rgba($color_front_basic, 0.2);
+		padding: hippie.$padding_basic;
+		border-radius: hippie.$radius_basic;
+		color: hippie.$color_brightest;
+		background-color: rgba(hippie.$color_front_basic, 0.2);
 	}
 }
 
@@ -261,11 +263,11 @@
 }
 
 .demo__td_pr {
-	padding-right: $space_double;
+	padding-right: hippie.$space_double;
 }
 
 .demo__td_pl {
-	padding-left: $space_double;
+	padding-left: hippie.$space_double;
 }
 
 // Index
@@ -283,6 +285,6 @@
 
 	ul {
 		padding: 1em 5em;
-		background-color: $color_darker;
+		background-color: hippie.$color_darker;
 	}
 }
diff --git a/source/style/modules/portal/_portal_module.scss b/source/style/modules/portal/_portal_module.scss
index 786bf0e..6c5fb52 100644
--- a/source/style/modules/portal/_portal_module.scss
+++ b/source/style/modules/portal/_portal_module.scss
@@ -1,7 +1,9 @@
 @use "sass:color";
 
-$portal_highlight: $color_highlight_basic;
-$portal_margin: $space_double;
+@use "../../hippie-style/hippie";
+
+$portal_highlight: hippie.$color_highlight_basic;
+$portal_margin: hippie.$space_double;
 $portal_link_size: 128px;
 $portal_icon_size: 64px;
 
@@ -23,7 +25,7 @@ $portal_icon_size: 64px;
   padding-left: $portal_margin;
   overflow-x: hidden;
   overflow-y: auto;
-  transition: $transition_best;
+  transition: hippie.$transition_best;
 
   &:hover {
     flex: 3;
diff --git a/source/style/modules/songbook/_songbook_module.scss b/source/style/modules/songbook/_songbook_module.scss
index 321f8bd..46d6bbe 100755
--- a/source/style/modules/songbook/_songbook_module.scss
+++ b/source/style/modules/songbook/_songbook_module.scss
@@ -1,3 +1,5 @@
+@use "../../hippie-style/hippie";
+
 .songbook_song {
 	pre {
 		@extend .pre_code
@@ -5,16 +7,16 @@
 
 	header {
 		h2 {
-			margin-bottom: $space_basic;
+			margin-bottom: hippie.$space_basic;
 		}
 
 		h6 {
-			color: $color_brightest;
+			color: hippie.$color_brightest;
 		}
 
 		h2+h6 {
 			margin-top: 0;
-			margin-bottom: $space_small;
+			margin-bottom: hippie.$space_small;
 		}
 	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
index dac2760..a826693 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,9 +1,11 @@
+@use "../../hippie-style/hippie";
+
 #grid {
 	display: grid;
 	gap: 8px;
 	grid-template-columns: repeat(4, 1fr);
 	grid-auto-rows: minmax(64px, auto);
-	margin-inline: $space_small;
+	margin-inline: hippie.$space_small;
 }
 
 #grid>div {
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index dc339c2..91182ad 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -1,5 +1,7 @@
 @use "sass:color";
 
+@use "../../hippie-style/hippie";
+
 @mixin nav-spacer($name, $size, $orientation) {
 	.spacer.#{$name} {
 		width: $size;
@@ -9,7 +11,7 @@
 .body_frame {
 	@extend %flex-column;
 
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 
 	position: relative;
 	height: 100%;
@@ -20,7 +22,7 @@
 		border: 1px solid transparent;
 	}
 
-	&>header {
+	& > header {
 		background-color: rgba(0, 0, 0, .1);
 	}
 
@@ -35,18 +37,18 @@
 
 		section {
 
-			&>header,
-			&>footer {
-				background-color: color.adjust($color_back_io, $alpha: -.5);
+			& > header,
+			& > footer {
+				background-color: color.adjust(hippie.$color_back_io, $alpha: -.5);
 
 				&:hover {
-					background-color: $color_back_io;
+					background-color: hippie.$color_back_io;
 				}
 			}
 		}
 
 		section,
-		section>div {
+		section > div {
 			flex: 1;
 		}
 
@@ -84,53 +86,51 @@
 	textarea {
 		resize: none;
 		max-height: 128px;
-		margin: $margin_io;
+		margin: hippie.$margin_io;
 		border: 0;
-		padding: $space_half;
-		// color: $color_text_io;
+		padding: hippie.$space_half;
+		// color: hippie.$color_text_io;
 		color: white;
-		// background-color: $color_back_io;
+		// background-color: hippie.$color_back_io;
 		background-color: transparent;
 		line-height: 1.2;
 	}
 }
 
 
-
 #content {
-	background-color: $color_back_io;
+	background-color: hippie.$color_back_io;
 
-	&>table {
+	& > table {
 		width: 100%;
 		margin: 0;
 		border: 0;
 
 		tr:hover td {
-			background-color: $color_highlight_basic;
+			background-color: hippie.$color_highlight_basic;
 		}
 
 		th {
-			border: 1px solid $color_border_io;
+			border: 1px solid hippie.$color_border_io;
 		}
 
 		td {
 			border-width: 0 1px;
 			border-style: solid;
-			border-color: $color_border_io;
+			border-color: hippie.$color_border_io;
 		}
 	}
 }
 
 
-
 .io {
 	.spacer {
 		margin: 0;
-		border: $border_dotted;
+		border: hippie.$border_dotted;
 		padding: 0;
 		opacity: .25;
 	}
 
-	@include nav-spacer('a', $space_double, false);
-	@include nav-spacer('b', $space_small, false);
+	@include nav-spacer('a', hippie.$space_double, false);
+	@include nav-spacer('b', hippie.$space_small, false);
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index e7279ce..4e36346 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -1,15 +1,17 @@
 @use "sass:color";
 
+@use "../../hippie-style/hippie";
+
 $module_top_height: 32px;
-$body_top_space: $module_top_height + $space_basic;
+$body_top_space: $module_top_height + hippie.$space_basic;
 
 .body_new {
 	@extend %flex-column;
-	padding: $body_top_space $space_basic $space_basic;
+	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
 }
 
 .area {
-	transition: $transition_best;
+	transition: hippie.$transition_best;
 
 	&:hover {
 		background-color: #999;
@@ -28,13 +30,13 @@ $body_top_space: $module_top_height + $space_basic;
 
 .item {
 	// height: unset;
-	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
+	border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
 	border-style: dotted;
-	border-width: $width_border_8;
-	border-radius: $width_border_8;
-	padding: $space_basic;
-	background-color: rgb($color_back_basic, .5);
-	// background-color: lighten($color_back_basic, $color_diff_tiny);
+	border-width: hippie.$width_border_8;
+	border-radius: hippie.$width_border_8;
+	padding: hippie.$space_basic;
+	background-color: rgb(hippie.$color_back_basic, .5);
+	// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
 	// background-color: gold;
 }
 
@@ -50,7 +52,7 @@ $body_top_space: $module_top_height + $space_basic;
 	width: 100%;
 	height: $module_top_height;
 	background-color: rgb(0, 0, 0, .8);
-	z-index: $z_top;
+	z-index: hippie.$z_top;
 
 	div:last-child {
 		flex: 1;
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f5a80c4..4a1e6c8 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -1,16 +1,24 @@
 @use "sass:map";
 
-@import "demo_config";
-@import "hippie-style/hippie";
+@use "demo_config";
+@use "hippie-style/hippie";
 
-$color_gui_back: $color_dark;
+@use "modules/ui/frame_module";
+@use "modules/ui/new_module";
+@use "modules/ui/drag_module";
+@use "modules/ui/form_module";
+@use "modules/ui/game_module";
+@use "modules/ui/gallery_module";
+
+$color_gui_back: hippie.$color_dark;
+$space_gui_half: hippie.$space_half;
 
 .op_show {
-	transition: $transition_show;
+	transition: hippie.$transition_show;
 }
 
 .op_hide {
-	transition: $transition_hide;
+	transition: hippie.$transition_hide;
 }
 
 .html_ui {
@@ -46,7 +54,7 @@ $color_gui_back: $color_dark;
 
 #wrap {
 	flex: 1;
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 }
 
 #progress {
@@ -64,9 +72,9 @@ $color_gui_back: $color_dark;
 	flex-shrink: 0;
 	justify-content: center;
 	align-items: center;
-	margin-inline: $space_half;
-	padding-block: calc($space_half - 1px) $space_half;
-	line-height: $line_basic;
+	margin-inline: $space_gui_half;
+	padding-block: calc($space_gui_half - 1px) $space_gui_half;
+	line-height: hippie.$line_basic;
 	text-align: center;
 }
 
@@ -78,7 +86,7 @@ $color_gui_back: $color_dark;
 
 #spinner {
 	width: 2.5em;
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 	color: black;
 
 	span {
@@ -97,7 +105,7 @@ $color_gui_back: $color_dark;
 }
 
 #intro {
-	z-index: map.get($z-indexes, "content-top");
+	z-index: map.get(hippie.$z-indexes, "content-top");
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -123,8 +131,8 @@ $color_gui_back: $color_dark;
 	}
 
 	*+h1 {
-		margin-top: $space_small;
-		margin-bottom: $space_large;
+		margin-top: hippie.$space_small;
+		margin-bottom: hippie.$space_large;
 	}
 }
 
@@ -134,7 +142,7 @@ $color_gui_back: $color_dark;
 
 	li {
 		list-style: none;
-		padding-inline: $space_double;
+		padding-inline: hippie.$space_double;
 	}
 }
 
@@ -148,49 +156,44 @@ $color_gui_back: $color_dark;
 
 #agreement {
 	flex-direction: column;
-	background-color: $bravo_color;
+	background-color: map.get(hippie.$color_palette, bravo);
 	user-select: none;
 
 	h1 {
 		margin-top: 0;
-		color: $color_brightest;
+		color: hippie.$color_brightest;
 	}
 }
 
 #idle {
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 	transition: background-color 4s;
 
 	&:hover>.mouse-overlay {
 		background-color: transparent !important;
-		transition: background-color $duration_basic $timing_basic 0s !important;
+		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 	}
 }
 
 .toast {
-	z-index: map.get($z-indexes, "toast");
+	z-index: map.get(hippie.$z-indexes, "toast");
 	position: fixed;
-	right: $space_half;
-	bottom: $space_double;
+	right: $space_gui_half;
+	bottom: hippie.$space_double;
 
 	p {
 		color: white;
 	}
 
 	kbd {
-		border-color: $color_brighter;
-		color: $color_back_io;
+		border-color: hippie.$color_brighter;
+		color: hippie.$color_back_io;
 	}
 }
 
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	background-color: rgba($color_bright, .5);
-	font-family: $family_text_mono;
+	background-color: rgba(hippie.$color_bright, .5);
+	font-family: hippie.$family_text_mono;
 }
-
-@import "modules/ui/frame_module";
-@import "modules/ui/new_module";
-@import "modules/ui/drag_module";
-@import "modules/ui/form_module";
\ No newline at end of file

From 07656b404ff1161fd47fb305bf2f837ab69c7150 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 26 Oct 2025 15:19:14 +0100
Subject: [PATCH 061/253] feat: Introduce liquid templates

---
 .eleventy.js                         | 14 ++++++++++----
 source/screens/hello.md              | 10 ++++++++++
 source/templates/hippie/world.liquid | 11 +++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 source/screens/hello.md
 create mode 100644 source/templates/hippie/world.liquid

diff --git a/.eleventy.js b/.eleventy.js
index 98082aa..3da1568 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,6 +1,14 @@
 module.exports = function (eleventyConfig) {
 	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
+	eleventyConfig.setLiquidOptions({
+		// greedy: false,
+		// trimOutputLeft: true,
+		// trimOutputRight: true,
+		// trimTagLeft: true,
+		// trimTagRight : true,
+	});
+
 	eleventyConfig.setNunjucksEnvironmentOptions({
 		// throwOnUndefined: true,
 		trimBlocks: true
@@ -43,9 +51,7 @@ module.exports = function (eleventyConfig) {
 			includes: "../templates",
 			data: "../data"
 		},
-		markdownTemplateEngine: "njk",
-		htmlTemplateEngine: "njk",
-		templateFormats: ["html", "njk", "md"],
+		templateFormats: ["html", "liquid", "njk", "md"]
 		// pathPrefix: './demo/'
-	}
+	};
 };
diff --git a/source/screens/hello.md b/source/screens/hello.md
new file mode 100644
index 0000000..d6ff3be
--- /dev/null
+++ b/source/screens/hello.md
@@ -0,0 +1,10 @@
+---
+title: "Hello World"
+tags:
+  - demoIndex
+layout: hippie/world.liquid
+---
+
+# {{ title }}
+
+This is a simple example for a *screen* written in Markdown, using Liquid *templates*.
\ No newline at end of file
diff --git a/source/templates/hippie/world.liquid b/source/templates/hippie/world.liquid
new file mode 100644
index 0000000..ca935dc
--- /dev/null
+++ b/source/templates/hippie/world.liquid
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="utf-8">
+	<title>{{ title }}</title>
+</head>
+
+<body>
+{{ content }}
+</body>
+</html>
\ No newline at end of file

From afc733f4d464bdeaccf4ad8949ac2189f3349cd8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 26 Oct 2025 15:29:12 +0100
Subject: [PATCH 062/253] feat: Replace default screen using liquid instead of
 nunjucks

---
 source/screens/demo/pages/default.liquid      | 18 +++++++++
 source/screens/demo/pages/default.njk         | 21 -----------
 source/screens/{ => demo/pages}/hello.md      |  2 -
 source/templates/hippie/default.liquid        | 37 +++++++++++++++++++
 source/templates/hippie/partials/links.liquid |  3 ++
 source/templates/hippie/partials/meta.liquid  |  7 ++++
 6 files changed, 65 insertions(+), 23 deletions(-)
 create mode 100644 source/screens/demo/pages/default.liquid
 delete mode 100644 source/screens/demo/pages/default.njk
 rename source/screens/{ => demo/pages}/hello.md (76%)
 create mode 100644 source/templates/hippie/default.liquid
 create mode 100644 source/templates/hippie/partials/links.liquid
 create mode 100644 source/templates/hippie/partials/meta.liquid

diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
new file mode 100644
index 0000000..026c6da
--- /dev/null
+++ b/source/screens/demo/pages/default.liquid
@@ -0,0 +1,18 @@
+---
+title: "Default"
+---
+{% assign pageBase = "../" -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "default" -%}
+{% assign bodyClass = "default" -%}
+{%- layout "hippie/default.liquid" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	console.log("pageBase is: {{ pageBase }}");
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/default.njk b/source/screens/demo/pages/default.njk
deleted file mode 100644
index a898098..0000000
--- a/source/screens/demo/pages/default.njk
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Default
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_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/hello.md b/source/screens/demo/pages/hello.md
similarity index 76%
rename from source/screens/hello.md
rename to source/screens/demo/pages/hello.md
index d6ff3be..09a9406 100644
--- a/source/screens/hello.md
+++ b/source/screens/demo/pages/hello.md
@@ -1,7 +1,5 @@
 ---
 title: "Hello World"
-tags:
-  - demoIndex
 layout: hippie/world.liquid
 ---
 
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
new file mode 100644
index 0000000..cfd5417
--- /dev/null
+++ b/source/templates/hippie/default.liquid
@@ -0,0 +1,37 @@
+<!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 %}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render "hippie/partials/meta.liquid" %}
+	{% endblock -%}
+	{% block links -%}
+	{% render "hippie/partials/links.liquid" %}
+	{% endblock -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{%- block body %}{% endblock -%}
+{% block script -%}
+<script>
+	// Default script
+</script>
+{% endblock -%}
+</body>
+</html>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/links.liquid b/source/templates/hippie/partials/links.liquid
new file mode 100644
index 0000000..c1a8845
--- /dev/null
+++ b/source/templates/hippie/partials/links.liquid
@@ -0,0 +1,3 @@
+{% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
+	<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/meta.liquid b/source/templates/hippie/partials/meta.liquid
new file mode 100644
index 0000000..fa0516e
--- /dev/null
+++ b/source/templates/hippie/partials/meta.liquid
@@ -0,0 +1,7 @@
+<meta name="robots" content="noindex">
+	<meta name="generator" content="{{ eleventy.generator }}">
+	<meta name="author" content="">
+	<meta name="description" content="">
+	<meta name="keywords" content="">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
\ No newline at end of file

From 46988576a943f471a897ae40a7281b2f01b4c4da Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 20:40:18 +0100
Subject: [PATCH 063/253] fix: Typo in css class

---
 source/screens/demo/components.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index a6c1bfc..f327b4c 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -25,7 +25,7 @@ tags:
 			<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_tabletPortraitOnly">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>

From 6b644ca9f38f10f027d05009809a91d2662e6536 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 20:41:38 +0100
Subject: [PATCH 064/253] feat: Add macro for frame status bar

---
 source/screens/demo/examples/ui/explorer.njk | 14 ++------------
 source/templates/hippie/macros/_io.njk       | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
index 72de77a..c54ea0a 100755
--- a/source/screens/demo/examples/ui/explorer.njk
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -12,7 +12,7 @@ tags:
 	<main class="io">
 		<aside class="io">
 			<nav>
-				<div>location-pane</div>
+				<span>location-pane</span>
 				<ul class="vertical">
 					<li>
 						<a class="a_button" href="">
@@ -139,17 +139,7 @@ tags:
 					</tbody>
 				</table>
 			</div>
-			<footer class="io">
-				<nav>
-					<span>## items</span>
-					<span># selected (size)</span>
-					<span># type(s)</span>
-					<span># shared</span>
-				</nav>
-				<nav>
-					<span>status-bar</span>
-				</nav>
-			</footer>
+			{{ io.statusBar() }}
 		</section>
 	</main>
 	{{ io.frameFooter('mode-bar') }}
diff --git a/source/templates/hippie/macros/_io.njk b/source/templates/hippie/macros/_io.njk
index 36a3b9e..f9a7300 100644
--- a/source/templates/hippie/macros/_io.njk
+++ b/source/templates/hippie/macros/_io.njk
@@ -32,4 +32,18 @@
 			<button>action</button>
 		</nav>
 	</footer>
+{% endmacro %}
+
+{% macro statusBar(title) %}
+	<footer class="io">
+		<nav>
+			<span>## items</span>
+			<span># selected (size)</span>
+			<span># type(s)</span>
+			<span># shared</span>
+		</nav>
+		<nav>
+			<span>{{ title | default('status-bar') }}</span>
+		</nav>
+	</footer>
 {% endmacro %}
\ No newline at end of file

From c77bcd8bdccdcd224247c96ac60b1d04ff56ac82 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 20:51:17 +0100
Subject: [PATCH 065/253] feat: Replace ui drag screen with liquid template

- Recreate io macros as liquid partials
- Add app template based on default
- Drag screen uses app.liquid layout instead of _app_frame.njk
---
 source/screens/demo/examples/ui/drag.liquid   | 48 ++++++++++++++++++
 source/screens/demo/examples/ui/drag.njk      | 50 -------------------
 source/templates/hippie/app.liquid            | 40 +++++++++++++++
 .../hippie/partials/frame-header.liquid       | 20 ++++++++
 .../hippie/partials/frame-mode.liquid         | 10 ++++
 .../hippie/partials/frame-status.liquid       | 11 ++++
 6 files changed, 129 insertions(+), 50 deletions(-)
 create mode 100755 source/screens/demo/examples/ui/drag.liquid
 delete mode 100755 source/screens/demo/examples/ui/drag.njk
 create mode 100644 source/templates/hippie/app.liquid
 create mode 100644 source/templates/hippie/partials/frame-header.liquid
 create mode 100644 source/templates/hippie/partials/frame-mode.liquid
 create mode 100644 source/templates/hippie/partials/frame-status.liquid

diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
new file mode 100755
index 0000000..aeceed7
--- /dev/null
+++ b/source/screens/demo/examples/ui/drag.liquid
@@ -0,0 +1,48 @@
+---
+title: Drag
+tags:
+- ui
+---
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+<header class="io pos_fix pin_top pin_right pin_left">
+	<button data-action="add">Add</button>
+</header>
+<div id="space"></div>
+<div>
+	<div id="test">
+		<div class="body_frame">
+			{% render 'hippie/partials/frame-header.liquid' %}
+			<main></main>
+			{% render 'hippie/partials/frame-mode.liquid' %}
+		</div>
+	</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+<script src="{{ pageBase }}js/_ui.js"></script>
+<script>
+	// Get the space element
+	const space = document.getElementById('space');
+	const add = document.querySelector('[data-action=add]');
+	const test = document.getElementById('test');
+
+	// Add event listener to the add space button
+	add.addEventListener('click', () => {
+		const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
+		newDiv.createDiv();
+		newDiv.appendToFrame(space);
+	});
+
+	// Create a new NewDiv instance
+	const newDiv = new NewDiv(100, 100, 200, 200, '#000');
+	newDiv.createDiv();
+	newDiv.appendToFrame(space);
+
+	const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
+	explorer.createDiv();
+	explorer.appendToFrame(space);
+</script>
+{% 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
deleted file mode 100755
index ecd3001..0000000
--- a/source/screens/demo/examples/ui/drag.njk
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Drag
-tags:
-  - ui
----
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-  <header class="io pos_fix pin_top pin_right pin_left">
-    <button data-action="add">Add</button>
-  </header>
-  <div id="space"></div>
-  <div>
-    <div id="test">
-      <div class="body_frame">
-        {{ io.frameHeader('title-bar') }}
-        <main></main>
-        {{ io.frameFooter('mode-bar') }}
-      </div>
-    </div>
-  </div>
-{% endblock %}
-
-{%- block script %}
-  <script src="{{ pageBase }}js/_ui.js"></script>
-  <script>
-    // Get the space element
-    const space = document.getElementById('space');
-    const add = document.querySelector('[data-action=add]');
-    const test = document.getElementById('test');
-
-    // Add event listener to the add space button
-    add.addEventListener('click', () => {
-      const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
-      newDiv.createDiv();
-      newDiv.appendToFrame(space);
-    });
-
-    // Create a new NewDiv instance
-    const newDiv = new NewDiv(100, 100, 200, 200, '#000');
-    newDiv.createDiv();
-    newDiv.appendToFrame(space);
-
-    const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
-    explorer.createDiv();
-    explorer.appendToFrame(space);
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
new file mode 100644
index 0000000..58ca863
--- /dev/null
+++ b/source/templates/hippie/app.liquid
@@ -0,0 +1,40 @@
+{% assign pageBase = "../../../" -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "html_ui" -%}
+{%- layout "hippie/default.liquid" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<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/app.js"></script>
+
+<script>
+	const frameHeader = document.querySelector('body > header.io');
+	const closeActionElements = document.querySelectorAll('[data-action=close]');
+
+	if (frameHeader) {
+		console.log('frame header found', frameHeader);
+
+		frameHeader.addEventListener('click', (e) => {
+			if (e.target.dataset.action === 'close') {
+				console.debug('close', e.target);
+
+				history.back();
+
+				if (closeActionElements.length > 1) {
+					console.debug('other frames present', closeActionElements.length);
+				}
+			}
+		});
+	}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/frame-header.liquid b/source/templates/hippie/partials/frame-header.liquid
new file mode 100644
index 0000000..14d04bc
--- /dev/null
+++ b/source/templates/hippie/partials/frame-header.liquid
@@ -0,0 +1,20 @@
+<header class="io">
+	<nav>
+		<button title="menu">
+			<i class="bi bi-three-dots"></i>
+		</button>
+		<span>{{ title | default: 'title-bar' }}</span>
+	</nav>
+	<nav>
+		<div class="spacer a"></div>
+		<button title="minimize">
+			<i class="bi bi-dash"></i>
+		</button>
+		<button title="maximize">
+			<i class="bi bi-fullscreen"></i>
+		</button>
+		<button title="close" data-action="close">
+			<i class="bi bi-x-square"></i>
+		</button>
+	</nav>
+</header>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/frame-mode.liquid b/source/templates/hippie/partials/frame-mode.liquid
new file mode 100644
index 0000000..4e87985
--- /dev/null
+++ b/source/templates/hippie/partials/frame-mode.liquid
@@ -0,0 +1,10 @@
+<footer class="io">
+	<nav>
+		<button>mode</button>
+		<span>{{ title | default: 'mode-bar' }}</span>
+	</nav>
+	<nav>
+		<div class="spacer a"></div>
+		<button>action</button>
+	</nav>
+</footer>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/frame-status.liquid b/source/templates/hippie/partials/frame-status.liquid
new file mode 100644
index 0000000..98c94f9
--- /dev/null
+++ b/source/templates/hippie/partials/frame-status.liquid
@@ -0,0 +1,11 @@
+<footer class="io">
+	<nav>
+		<span>## items</span>
+		<span># selected (size)</span>
+		<span># type(s)</span>
+		<span># shared</span>
+	</nav>
+	<nav>
+		<span>{{ title | default: 'status-bar' }}</span>
+	</nav>
+</footer>
\ No newline at end of file

From ff5d4bd3eba5393e43fa9e79674817e944bf53a5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 21:15:32 +0100
Subject: [PATCH 066/253] feat: Add jquery dependency

- Add jquery version 3.7.1
- Remove external script resource from app template
- Add eleventy passthrough to build/vendor
---
 .eleventy.js                       | 4 ++++
 package-lock.json                  | 7 +++++++
 package.json                       | 3 ++-
 source/templates/hippie/app.liquid | 2 +-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 3da1568..00dded1 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -40,6 +40,10 @@ module.exports = function (eleventyConfig) {
 
 	eleventyConfig.addPassthroughCopy("vendor");
 	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
+	eleventyConfig.addPassthroughCopy({
+		"node_modules/jquery/dist/jquery.min.js": "vendor",
+		"node_modules/jquery/dist/jquery.min.map": "vendor"
+	});
 	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});
 
 	eleventyConfig.addWatchTarget("./source/style/");
diff --git a/package-lock.json b/package-lock.json
index 73baa18..1fc8cd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
         "bootstrap-icons": "^1.13.1",
+        "jquery": "^3.7.1",
         "sass": "^1.93.0"
       },
       "devDependencies": {
@@ -1583,6 +1584,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "license": "MIT"
+    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
diff --git a/package.json b/package.json
index d2759a8..3dc6f91 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "bootstrap-icons": "^1.13.1",
+    "jquery": "^3.7.1",
     "sass": "^1.93.0"
   }
-}
\ No newline at end of file
+}
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 58ca863..2456f20 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -13,7 +13,7 @@
 
 {% block script %}
 {{ block.super -}}
-<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+<script src="/vendor/jquery.min.js"></script>
 <script src="{{ pageBase }}js/variables.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 

From e21b9d36b5b430890df6aea8ef833da43d84ce27 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 21:16:41 +0100
Subject: [PATCH 067/253] feat: Replace form screen with liquid version

---
 source/screens/demo/examples/ui/form.liquid | 56 +++++++++++++++++++++
 source/screens/demo/examples/ui/form.njk    | 55 --------------------
 2 files changed, 56 insertions(+), 55 deletions(-)
 create mode 100644 source/screens/demo/examples/ui/form.liquid
 delete mode 100644 source/screens/demo/examples/ui/form.njk

diff --git a/source/screens/demo/examples/ui/form.liquid b/source/screens/demo/examples/ui/form.liquid
new file mode 100644
index 0000000..492e191
--- /dev/null
+++ b/source/screens/demo/examples/ui/form.liquid
@@ -0,0 +1,56 @@
+---
+title: Form
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<header class="io">
+	<h1>Formulare</h1>
+	<button data-action="add">Hinzufügen</button>
+	<button data-action="change">Ändern</button>
+	<hr>
+</header>
+<form id="form" action="">
+	<div id="grid">
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+	</div>
+</form>
+{% endblock %}
+
+{%- block script %}
+{{ block.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/form.njk b/source/screens/demo/examples/ui/form.njk
deleted file mode 100644
index 2e6c088..0000000
--- a/source/screens/demo/examples/ui/form.njk
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Form
-tags: 
-  - ui
----
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	{{ io.frameHeader('title-bar') }}
-	<header class="io">
-		<h1>Formulare</h1>
-		<button data-action="add">Hinzufügen</button>
-		<button data-action="change">Ändern</button>
-		<hr>
-	</header>
-	<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

From 3c9c438b254eada678a98bc5b16a1f1679a5f4f8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 21:23:26 +0100
Subject: [PATCH 068/253] feat: Add game and gallery screens

---
 source/screens/demo/examples/game.liquid      | 25 ++++++
 .../screens/demo/examples/ui/gallery.liquid   | 77 +++++++++++++++++++
 source/style/modules/ui/_gallery_module.scss  | 18 +++++
 source/style/modules/ui/_game_module.scss     |  3 +
 4 files changed, 123 insertions(+)
 create mode 100644 source/screens/demo/examples/game.liquid
 create mode 100755 source/screens/demo/examples/ui/gallery.liquid
 create mode 100644 source/style/modules/ui/_gallery_module.scss
 create mode 100644 source/style/modules/ui/_game_module.scss

diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid
new file mode 100644
index 0000000..a57b17f
--- /dev/null
+++ b/source/screens/demo/examples/game.liquid
@@ -0,0 +1,25 @@
+---
+title: Game - TFW
+tags:
+- demoExample
+- gameExample
+---
+{% assign bodyClass = "body_game" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+	<div class="sec_main_center">
+		<nav role="doc-toc">
+			<hgroup>
+				<h1>{{ title }}</h1>
+				<p>Additional name</p>
+			</hgroup>
+			<ul class="list_link">
+				<li><a href="#new">Neues Spiel</a></li>
+				<li><a href="#continue">Spiel fortsetzen</a></li>
+				<li><a href="#options">Einstellungen</a></li>
+				<li><a href="#quit">Spiel beenden</a></li>
+			</ul>
+		</nav>
+	</div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
new file mode 100755
index 0000000..f29cae5
--- /dev/null
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -0,0 +1,77 @@
+---
+title: Gallery
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io">
+	<section>
+		<header class="io">
+			<nav>
+				<div class="group">
+					<input id="slider-size" value="5" min="1" max="10" step="1" type="range"/>
+					<label class="right" for="slider-size">Größe</label>
+				</div>
+				<button title="details">
+					<i class="bi bi-layout-sidebar-reverse"></i>&nbsp;Details
+				</button>
+			</nav>
+			<nav></nav>
+		</header>
+		<div class="gallery">
+			<div>A</div>
+			<div>B</div>
+			<div>C</div>
+		</div>
+		{% render 'hippie/partials/frame-status.liquid' %}
+	</section>
+</main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const sizeSlider = document.getElementById('slider-size');
+	const galleryItems = document.querySelectorAll('#flex > div');
+
+	// Set the default size
+	const defaultSize = 128; // In pixels
+	const minSize = 16; // Minimum width in pixels
+	const steps = 10;
+	// Define specific sizes for each step (from 1 to 10)
+	const sizes = [16, 32, 64, 96, 128, 256, 512, 1024, 2048]; // Sizes in pixels
+
+
+	// Calculate width based on slider value
+	function calculateWidth(value) {
+		// Map 1-10 to a pixel width
+		return Math.floor(minSize + (value - 1) * (defaultSize - minSize) / (steps - 1));
+	}
+
+	// Set initial size
+	galleryItems.forEach(item => {
+		item.style.width = `${defaultSize}px`;
+		item.style.width = `${sizes[5]}px`; // Initial width based on the default step (8 corresponds to index 7)
+	});
+
+	sizeSlider.addEventListener('input', function () {
+		// const newSize = calculateWidth(Number(sizeSlider.value));
+		// galleryItems.forEach(item => {
+		// 	item.style.width = `${newSize}px`;
+		// });
+		const selectedStep = Number(sizeSlider.value) - 1; // Adjust for zero-indexing
+		const newSize = sizes[selectedStep]; // Get size from the array using slider value
+		galleryItems.forEach(item => {
+			item.style.width = `${newSize}px`;
+		});
+	});
+
+	// Initialize slider to default
+	sizeSlider.value = 6; // Sets default to 128px width
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_gallery_module.scss b/source/style/modules/ui/_gallery_module.scss
new file mode 100644
index 0000000..4f8a233
--- /dev/null
+++ b/source/style/modules/ui/_gallery_module.scss
@@ -0,0 +1,18 @@
+@use "../../hippie-style/hippie";
+
+.gallery {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: left;
+	align-items: start;
+	gap: 10px;
+	background-color: hippie.$color_back_io;
+
+	& > div {
+		background-color: hotpink;
+		aspect-ratio: 2 / 3;
+		width: 128px;
+		transition: width 0.3s ease;
+	}
+}
+
diff --git a/source/style/modules/ui/_game_module.scss b/source/style/modules/ui/_game_module.scss
new file mode 100644
index 0000000..7bb575e
--- /dev/null
+++ b/source/style/modules/ui/_game_module.scss
@@ -0,0 +1,3 @@
+.body_game {
+	background-color: hotpink;
+}
\ No newline at end of file

From e0cfcfac13552d2372d2f99233460e2f5b598a6e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 21:33:38 +0100
Subject: [PATCH 069/253] feat: Add and rename screens

- Add windows screen
- Add windows.js
- Different variants of classes for drag and edge snap behaviour
- Rename js files to better distinguish usage
---
 source/code/{_ui.js => drag.js}               |   0
 source/code/{_intro.js => intro.js}           |   0
 source/code/windows.js                        | 282 ++++++++++++++++++
 source/screens/demo/examples/intro.njk        |   2 +-
 source/screens/demo/examples/ui/drag.liquid   |   2 +-
 .../screens/demo/examples/ui/windows.liquid   |  30 ++
 source/style/modules/ui/_windows_module.scss  |  36 +++
 source/style/ui.scss                          |   1 +
 8 files changed, 351 insertions(+), 2 deletions(-)
 rename source/code/{_ui.js => drag.js} (100%)
 rename source/code/{_intro.js => intro.js} (100%)
 create mode 100644 source/code/windows.js
 create mode 100644 source/screens/demo/examples/ui/windows.liquid
 create mode 100644 source/style/modules/ui/_windows_module.scss

diff --git a/source/code/_ui.js b/source/code/drag.js
similarity index 100%
rename from source/code/_ui.js
rename to source/code/drag.js
diff --git a/source/code/_intro.js b/source/code/intro.js
similarity index 100%
rename from source/code/_intro.js
rename to source/code/intro.js
diff --git a/source/code/windows.js b/source/code/windows.js
new file mode 100644
index 0000000..6c68eec
--- /dev/null
+++ b/source/code/windows.js
@@ -0,0 +1,282 @@
+class Draggable {
+	constructor(element) {
+		this.element = element;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.isDragging = false;
+		this.barSize = '';
+
+		this.init();
+	}
+
+	init() {
+		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
+		document.addEventListener('mousemove', this.onMouseMove.bind(this));
+		document.addEventListener('mouseup', this.onMouseUp.bind(this));
+		this.setPosition('bottom');
+	}
+
+	onMouseDown(event) {
+		this.isDragging = true;
+		this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
+		this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
+
+		event.preventDefault();
+	}
+
+	onMouseMove(event) {
+		if (!this.isDragging) {
+			return;
+		}
+
+		let x = event.clientX - this.offsetX;
+		let y = event.clientY - this.offsetY;
+
+		// Update the position of the element
+		this.element.style.left = `${x}px`;
+		this.element.style.top = `${y}px`;
+	}
+
+	onMouseUp() {
+		if (!this.isDragging) {
+			return;
+		}
+		this.isDragging = false;
+
+		this.snapToEdges();
+	}
+
+	snapToEdges() {
+		const rect = this.element.getBoundingClientRect();
+		const windowWidth = window.innerWidth;
+		const windowHeight = window.innerHeight;
+
+		// Determine the closest edge
+		const distances = {
+			left: rect.left,
+			right: windowWidth - rect.right,
+			top: rect.top,
+			bottom: windowHeight - rect.bottom
+		};
+
+		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
+
+		this.setPosition(closestEdge, this.barSize);
+	}
+
+	setPosition(side, barSize) {
+		switch (side) {
+			case 'left':
+				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
+				this.element.style.top = '0px';
+				this.element.style.right = '';
+				this.element.style.bottom = '0px';
+				this.element.style.left = '0px';
+				this.element.style.width = barSize;
+				this.element.style.height = '';
+				break;
+			case 'right':
+				// this.element.style.left = `${windowWidth - rect.width}px`;
+				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
+				this.element.style.top = '0px';
+				this.element.style.right = '0px';
+				this.element.style.bottom = '0px';
+				this.element.style.left = '';
+				this.element.style.width = barSize;
+				this.element.style.height = '';
+				break;
+			case 'top':
+				// this.element.style.top = '0px';
+				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
+				this.element.style.top = '0px';
+				this.element.style.right = '0px';
+				this.element.style.bottom = '';
+				this.element.style.left = '0px';
+				this.element.style.width = '';
+				this.element.style.height = barSize;
+				break;
+			case 'bottom':
+				// this.element.style.top = `${windowHeight - rect.height}px`;
+				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
+				this.element.style.top = '';
+				this.element.style.right = '0px';
+				this.element.style.bottom = '0px';
+				this.element.style.left = '0px';
+				this.element.style.width = '';
+				this.element.style.height = barSize;
+				break;
+		}
+	}
+}
+
+class DragAdv {
+	constructor(element, placeholder) {
+		this.element = element;
+		this.placeholder = placeholder;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.isDragging = false;
+		this.barSize = '';
+
+		this.init();
+	}
+
+	init() {
+		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
+		document.addEventListener('mousemove', this.onMouseMove.bind(this));
+		document.addEventListener('mouseup', this.onMouseUp.bind(this));
+		this.setPosition('bottom');
+	}
+
+	onMouseDown(event) {
+		this.isDragging = true;
+		// this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
+		// this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.element.style.display = 'none';
+
+		this.showPlaceholder();
+		event.preventDefault();
+	}
+
+	onMouseMove(event) {
+		if (!this.isDragging) return;
+
+		let x = event.clientX - this.offsetX;
+		let y = event.clientY - this.offsetY;
+
+		// Update the position of the element
+		// this.element.style.left = `${x}px`;
+		// this.element.style.top = `${y}px`;
+		// this.element.style.display = 'none';
+
+		// Update placeholder position
+		this.placeholder.style.left = `${x}px`;
+		this.placeholder.style.top = `${y}px`;
+		// this.placeholder.style.display = 'block';
+	}
+
+	onMouseUp() {
+		if (!this.isDragging) return;
+		this.isDragging = false;
+
+		this.element.style.display = 'block';
+
+		this.snapToEdges();
+		this.hidePlaceholder();
+	}
+
+	showPlaceholder() {
+		this.placeholder.style.display = 'block';
+	}
+
+	hidePlaceholder() {
+		this.placeholder.style.display = 'none';
+	}
+
+	snapToEdges() {
+		const rect = this.placeholder.getBoundingClientRect();
+		const windowWidth = window.innerWidth;
+		const windowHeight = window.innerHeight;
+
+		const distances = {
+			left: rect.left,
+			right: windowWidth - rect.right,
+			top: rect.top,
+			bottom: windowHeight - rect.bottom
+		};
+
+		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
+
+		console.log(rect);
+		console.log(closestEdge);
+		this.setPosition(closestEdge, this.barSize);
+		/*switch (closestEdge) {
+			case 'left':
+				this.element.style.left = '0px';
+				this.element.style.top = `${rect.top}px`;
+				break;
+			case 'right':
+				this.element.style.left = `${windowWidth - rect.width}px`;
+				this.element.style.top = `${rect.top}px`;
+				break;
+			case 'top':
+				this.element.style.top = '0px';
+				this.element.style.left = `${rect.left}px`;
+				break;
+			case 'bottom':
+				this.element.style.top = `${windowHeight - rect.height}px`;
+				this.element.style.left = `${rect.left}px`;
+				break;
+		}*/
+	}
+
+	setPosition(side, barSize) {
+		switch (side) {
+			case 'left':
+				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
+				this.element.style.top = '0px';
+				this.element.style.right = '';
+				this.element.style.bottom = '0px';
+				this.element.style.left = '0px';
+				this.element.style.width = barSize;
+				this.element.style.height = '';
+				break;
+			case 'right':
+				// this.element.style.left = `${windowWidth - rect.width}px`;
+				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
+				this.element.style.top = '0px';
+				this.element.style.right = '0px';
+				this.element.style.bottom = '0px';
+				this.element.style.left = '';
+				this.element.style.width = barSize;
+				this.element.style.height = '';
+				break;
+			case 'top':
+				// this.element.style.top = '0px';
+				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
+				this.element.style.top = '0px';
+				this.element.style.right = '0px';
+				this.element.style.bottom = '';
+				this.element.style.left = '0px';
+				this.element.style.width = '';
+				this.element.style.height = barSize;
+				break;
+			case 'bottom':
+				// this.element.style.top = `${windowHeight - rect.height}px`;
+				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
+				this.element.style.top = '';
+				this.element.style.right = '0px';
+				this.element.style.bottom = '0px';
+				this.element.style.left = '0px';
+				this.element.style.width = '';
+				this.element.style.height = barSize;
+				break;
+		}
+	}
+}
+
+class BestDrag {
+	#element;
+
+	constructor(element) {
+		this.#setElement(element);
+	}
+
+	#setElement(value) {
+		if (!value) {
+			throw new Error('No element found');
+		}
+		this.#element = value;
+		this.#element.style.background = "hotpink";
+	}
+
+	get element() {
+		return this.#element;
+	}
+
+	set element(value) {
+		this.#setElement(value);
+	}
+}
\ No newline at end of file
diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
index 1358739..548cc3f 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@@ -49,7 +49,7 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script src="{{ pageBase }}js/intro.js"></script>
 	<script>
 		//let intro = new Intro('Intro');
 		//intro.init();
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
index aeceed7..fe8ef43 100755
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@@ -22,7 +22,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
-<script src="{{ pageBase }}js/_ui.js"></script>
+<script src="{{ pageBase }}js/drag.js"></script>
 <script>
 	// Get the space element
 	const space = document.getElementById('space');
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
new file mode 100644
index 0000000..9dc321b
--- /dev/null
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -0,0 +1,30 @@
+---
+title: Windows
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+<nav id="task-bar">
+	<button data-action="start">Start</button>
+</nav>
+<div id="screen-space"></div>
+<div id="placeholder"></div>
+{% endblock %}
+
+{%- block script %}
+<script src="{{ pageBase }}js/windows.js"></script>
+<script>
+	// Get the space element
+	const space = document.getElementById('screen-space');
+	const start = document.querySelector('[data-action=start]');
+	const draggableElement = document.getElementById('task-bar');
+	const placeholderElement = document.getElementById('placeholder');
+
+	// const draggable = new Draggable(draggableElement);
+	const dragMore = new DragAdv(draggableElement, placeholderElement);
+	// const dragBest = new BestDrag(draggableElement, placeholderElement);
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
new file mode 100644
index 0000000..0f46b78
--- /dev/null
+++ b/source/style/modules/ui/_windows_module.scss
@@ -0,0 +1,36 @@
+@use "sass:map";
+
+@use "../../hippie-style/hippie";
+
+#task-bar {
+	@extend %flex-inline;
+	z-index: map.get(hippie.$z-indexes, "content-top");
+	align-items: stretch;
+	position: fixed;
+	//right: 0;
+	//bottom: 0;
+	//left: 0;
+	border: 1px solid transparent;
+	padding: hippie.$space_basic;
+	background-color: rgba(0, 0, 0, .1);
+
+	button {
+		@extend .button_io;
+		overflow: hidden;
+	}
+}
+
+#screen-space {
+	position: relative;
+	height: 100%;
+}
+
+#placeholder {
+	display: none;
+	z-index: map.get(hippie.$z-indexes, "content-top");
+	position: fixed;
+	width: 100px;
+	height: 100px;
+	border: 2px dashed deeppink;
+	background-color: hotpink;
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 4a1e6c8..da6ecf7 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -9,6 +9,7 @@
 @use "modules/ui/form_module";
 @use "modules/ui/game_module";
 @use "modules/ui/gallery_module";
+@use "modules/ui/windows_module";
 
 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;

From 0996ace34f31c8e3d2bf2b0ec8a925cf3fdaa606 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 21:53:57 +0100
Subject: [PATCH 070/253] fix: Task bar drag behaviour

- Placeholder is centered to mouse cursor
- Placeholder is positioned on mouse down not only on move
---
 source/code/windows.js | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/source/code/windows.js b/source/code/windows.js
index 6c68eec..c6e42b8 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -125,18 +125,24 @@ class DragAdv {
 		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
 		document.addEventListener('mousemove', this.onMouseMove.bind(this));
 		document.addEventListener('mouseup', this.onMouseUp.bind(this));
-		this.setPosition('bottom');
+		this.setPosition('bottom', this.barSize);
 	}
 
 	onMouseDown(event) {
 		this.isDragging = true;
-		// this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
-		// this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
-		this.offsetX = 0;
-		this.offsetY = 0;
-		this.element.style.display = 'none';
 
 		this.showPlaceholder();
+
+		this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
+		this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
+		this.element.style.display = 'none';
+
+		let x = event.clientX - this.offsetX;
+		let y = event.clientY - this.offsetY;
+
+		this.placeholder.style.left = `${x}px`;
+		this.placeholder.style.top = `${y}px`;
+
 		event.preventDefault();
 	}
 
@@ -146,15 +152,8 @@ class DragAdv {
 		let x = event.clientX - this.offsetX;
 		let y = event.clientY - this.offsetY;
 
-		// Update the position of the element
-		// this.element.style.left = `${x}px`;
-		// this.element.style.top = `${y}px`;
-		// this.element.style.display = 'none';
-
-		// Update placeholder position
 		this.placeholder.style.left = `${x}px`;
 		this.placeholder.style.top = `${y}px`;
-		// this.placeholder.style.display = 'block';
 	}
 
 	onMouseUp() {

From 1ada62f6eceae2a55a9c94466658e3ba384c2a40 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 23:24:02 +0100
Subject: [PATCH 071/253] feat: Optimize DragAdv class

- Only use left mouse button
- Handle element and placeholder together
---
 source/code/windows.js | 61 +++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/source/code/windows.js b/source/code/windows.js
index c6e42b8..f282729 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -61,6 +61,24 @@ class Draggable {
 
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
+		/*switch (closestEdge) {
+			case 'left':
+				this.element.style.left = '0px';
+				this.element.style.top = `${rect.top}px`;
+				break;
+			case 'right':
+				this.element.style.left = `${windowWidth - rect.width}px`;
+				this.element.style.top = `${rect.top}px`;
+				break;
+			case 'top':
+				this.element.style.top = '0px';
+				this.element.style.left = `${rect.left}px`;
+				break;
+			case 'bottom':
+				this.element.style.top = `${windowHeight - rect.height}px`;
+				this.element.style.left = `${rect.left}px`;
+				break;
+		}*/
 		this.setPosition(closestEdge, this.barSize);
 	}
 
@@ -129,19 +147,20 @@ class DragAdv {
 	}
 
 	onMouseDown(event) {
-		this.isDragging = true;
+		if (event.button === 0) {
+			this.isDragging = true;
 
-		this.showPlaceholder();
+			this.showPlaceholder();
 
-		this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
-		this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
-		this.element.style.display = 'none';
+			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
+			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
 
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
+			let x = event.clientX - this.offsetX;
+			let y = event.clientY - this.offsetY;
 
-		this.placeholder.style.left = `${x}px`;
-		this.placeholder.style.top = `${y}px`;
+			this.placeholder.style.left = `${x}px`;
+			this.placeholder.style.top = `${y}px`;
+		}
 
 		event.preventDefault();
 	}
@@ -160,18 +179,18 @@ class DragAdv {
 		if (!this.isDragging) return;
 		this.isDragging = false;
 
-		this.element.style.display = 'block';
-
 		this.snapToEdges();
 		this.hidePlaceholder();
 	}
 
 	showPlaceholder() {
+		this.element.style.display = 'none';
 		this.placeholder.style.display = 'block';
 	}
 
 	hidePlaceholder() {
 		this.placeholder.style.display = 'none';
+		this.element.style.display = '';
 	}
 
 	snapToEdges() {
@@ -188,27 +207,7 @@ class DragAdv {
 
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
-		console.log(rect);
-		console.log(closestEdge);
 		this.setPosition(closestEdge, this.barSize);
-		/*switch (closestEdge) {
-			case 'left':
-				this.element.style.left = '0px';
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'right':
-				this.element.style.left = `${windowWidth - rect.width}px`;
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'top':
-				this.element.style.top = '0px';
-				this.element.style.left = `${rect.left}px`;
-				break;
-			case 'bottom':
-				this.element.style.top = `${windowHeight - rect.height}px`;
-				this.element.style.left = `${rect.left}px`;
-				break;
-		}*/
 	}
 
 	setPosition(side, barSize) {

From 6098a1e62d2791e1c41e93cd3d855c80f12749f1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 23:24:49 +0100
Subject: [PATCH 072/253] feat: Style and content for windows

---
 .../screens/demo/examples/ui/windows.liquid   | 31 +++++++++-
 source/style/modules/ui/_windows_module.scss  | 61 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 9dc321b..daacb66 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -7,9 +7,34 @@ tags:
 {% layout "hippie/app.liquid" %}
 
 {% block body %}
-<nav id="task-bar">
-	<button data-action="start">Start</button>
-</nav>
+<div id="task-bar">
+	<nav>
+		<button data-action="start"><i class="bi bi-microsoft"></i></button>
+	</nav>
+	<nav>
+		<button><i class="bi bi-search"></i></button>
+		<button><i class="bi bi-layers-half"></i></button>
+	</nav>
+	<nav class="big">
+		<button><i class="bi bi-folder"></i></button>
+		<button><i class="bi bi-terminal"></i></button>
+	</nav>
+	<div>
+		<nav class="small">
+			<button><i class="bi bi-chevron-up"></i></button>
+			<button><i class="bi bi-steam"></i></button>
+			<button><i class="bi bi-router"></i></button>
+			<button><i class="bi bi-mic"></i></button>
+			<button><i class="bi bi-volume-down"></i></button>
+		</nav>
+		<nav class="clock">
+			<span>##:##<br>TT.MM.JJJJ</span>
+		</nav>
+		<nav>
+			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
+		</nav>
+	</div>
+</div>
 <div id="screen-space"></div>
 <div id="placeholder"></div>
 {% endblock %}
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index 0f46b78..c7a9846 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -2,10 +2,21 @@
 
 @use "../../hippie-style/hippie";
 
-#task-bar {
-	@extend %flex-inline;
-	z-index: map.get(hippie.$z-indexes, "content-top");
+$padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
+
+%flex-bar {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
 	align-items: stretch;
+	align-content: center;
+	justify-content: flex-start;
+	gap: hippie.$space_half hippie.$space_basic;
+}
+
+#task-bar {
+	@extend %flex-bar;
+	z-index: map.get(hippie.$z-indexes, "content-top");
 	position: fixed;
 	//right: 0;
 	//bottom: 0;
@@ -14,10 +25,54 @@
 	padding: hippie.$space_basic;
 	background-color: rgba(0, 0, 0, .1);
 
+	nav,
+	& > div {
+		@extend %flex-bar;
+
+		&:last-child {
+			margin-left: auto;
+		}
+	}
+
 	button {
 		@extend .button_io;
 		overflow: hidden;
 	}
+
+	nav.small {
+		//font-size: .8em;
+
+		button {
+			border: none;
+			padding: $padding_half;
+
+			&:hover {
+				background-color: transparent;
+			}
+		}
+	}
+
+	nav.big {
+		font-size: 1.5em;
+
+		button {
+			border: none;
+			padding: 0;
+
+			&:hover {
+				background-color: transparent;
+			}
+		}
+	}
+
+	.clock {
+		text-align: end;
+
+		&,
+		& > * {
+			line-height: 1;
+		}
+	}
 }
 
 #screen-space {

From 6c252875fa97a114e73695925e0c8bbfcb1802a6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 28 Oct 2025 19:45:27 +0100
Subject: [PATCH 073/253] chore: Update jshint rules

---
 .jshintrc | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index 7554aff..f7c493b 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -7,25 +7,25 @@
     // Enforcing
     "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
     "camelcase"     : false,    // true: Identifiers must be in camelCase
-    "curly"         : true,     // true: Require {} for every new block or scope
+    "curly"         : false,     // true: Require {} for every new block or scope
     "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
     "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
     "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
     "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
-    "latedef"       : false,    // true: Require variables/functions to be defined before being used
-    "newcap"        : false,    // true: Require capitalization of all constructor functions e.g. `new F()`
+    "latedef"       : true,     // true: Require variables/functions to be defined before being used
+    "newcap"        : true,     // true: Require capitalization of all constructor functions e.g. `new F()`
     "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
     "noempty"       : true,     // true: Prohibit use of empty blocks
     "nonbsp"        : true,     // true: Prohibit `non-breaking whitespace` characters.
     "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
     "plusplus"      : false,    // true: Prohibit use of `++` and `--`
-    "quotmark"      : false,    // Quotation mark consistency:
+    "quotmark"      : true,     // Quotation mark consistency:
                                 //   false    : do nothing (default)
                                 //   true     : ensure whatever is used is consistent
                                 //   "single" : require single quotes
                                 //   "double" : require double quotes
     "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
-    "unused"        : false,    // Unused variables:
+    "unused"        : true,     // Unused variables:
                                 //   true     : all variables, last function parameter
                                 //   "vars"   : all variables only
                                 //   "strict" : all variables, all function parameters

From c259ead9a0d93f00960e48caae5b0e11ab0457dc Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 28 Oct 2025 19:51:59 +0100
Subject: [PATCH 074/253] feat: Replace new with start screen

- Convert to liquid
- Add old ongoing function for now
- Add macros as partials
- Rename data source to better reflect usage
- Update app.js to fulfill jshint
---
 source/code/app.js                            | 27 +++++++----
 source/data/{new.json => start.json}          |  4 +-
 source/screens/demo/examples/ui/new.njk       | 45 -------------------
 source/screens/demo/examples/ui/start.liquid  | 44 ++++++++++++++++++
 .../hippie/partials/header-status.liquid      | 21 +++++++++
 .../hippie/partials/status-coord.liquid       |  1 +
 .../hippie/partials/status-date.liquid        |  6 +++
 .../hippie/partials/status-time.liquid        |  1 +
 8 files changed, 94 insertions(+), 55 deletions(-)
 rename source/data/{new.json => start.json} (56%)
 delete mode 100755 source/screens/demo/examples/ui/new.njk
 create mode 100644 source/screens/demo/examples/ui/start.liquid
 create mode 100644 source/templates/hippie/partials/header-status.liquid
 create mode 100644 source/templates/hippie/partials/status-coord.liquid
 create mode 100644 source/templates/hippie/partials/status-date.liquid
 create mode 100644 source/templates/hippie/partials/status-time.liquid

diff --git a/source/code/app.js b/source/code/app.js
index 8632638..8a21b5f 100644
--- a/source/code/app.js
+++ b/source/code/app.js
@@ -1,25 +1,33 @@
 //NEW
 
 function Clock(id) {
-	this.id = id;
+	'use strict';
 
-	var that = this;
-	setInterval(function () { that.updateClock(); }, 1000);
+	this.id = id;
+	const that = this;
+
+	setInterval(function () {
+		that.updateClock();
+	}, 1000);
 	this.updateClock();
 }
 
 Clock.prototype.updateClock = function () {
-	var date = new Date();
-	var clock = document.getElementById(this.id);
+	'use strict';
+
+	const date = new Date();
+	const clock = document.getElementById(this.id);
 	//console.log(this);
-	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
+	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;
+	'use strict';
+
+	if (val < 10) val = '0' + val;
 
 	return val;
-}
+};
 
 //OLD
 
@@ -121,6 +129,7 @@ function barwidth(size, G, W) {
 
 	return newW;
 }
+
 //String Element erweitern
 String.prototype.transform = function () {
 	return parseFloat(this.replace(',', '.'));
@@ -129,6 +138,7 @@ String.prototype.transform = function () {
 Array.prototype.arrayAdd = function () {
 	return eval(this.join("+"));
 }
+
 //Speicherplatz in Prozent berechnen
 function percentage(total, gigs, round) {
 	var totalSpace = total;
@@ -138,6 +148,7 @@ function percentage(total, gigs, round) {
 
 	return p;
 }
+
 //Speicherplatz in GB berechnen
 function gigabytes(percent, total, round) {
 	var occupiedPercent = percent;
diff --git a/source/data/new.json b/source/data/start.json
similarity index 56%
rename from source/data/new.json
rename to source/data/start.json
index 9d4a0a8..cc0da22 100644
--- a/source/data/new.json
+++ b/source/data/start.json
@@ -5,10 +5,10 @@
 	},
 	{
 		"text": "Basics",
-		"href": "./demo/basics.html"
+		"href": "/demo/basics.html"
 	},
 	{
 		"text": "Drag",
-		"href": "./demo/examples/ui/drag.html"
+		"href": "/demo/examples/ui/drag.html"
 	}
 ]
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
deleted file mode 100755
index df1f62a..0000000
--- a/source/screens/demo/examples/ui/new.njk
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: New
-tags:
-  - ui
----
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_new" %}
-
-{% extends "hippie/_app_frame.njk" %}
-{% import "hippie/macros/_header.njk" as header %}
-
-{% block body %}
-  {{ header.status(hippie, new) }}
-  <header class="area menu io">
-    <nav>
-      <ul>
-        <li>
-          <a href="" class="a_button">Func 1</a>
-        </li>
-        <li>
-          <a href="" class="a_button">Func 2</a>
-        </li>
-      </ul>
-    </nav>
-  </header>
-  <div class="area grid">
-    <div class="item">1</div>
-    <div class="item">2</div>
-    <div class="item">3</div>
-    <div class="item">4</div>
-  </div>
-{% endblock %}
-
-{%- block script %}
-  {{ super() }}
-  <script>
-    let clock = new Clock('time');
-
-    document.addEventListener('mousemove', (event) => {
-      document
-        .getElementById('log')
-        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-    });
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/start.liquid
new file mode 100644
index 0000000..8e13c85
--- /dev/null
+++ b/source/screens/demo/examples/ui/start.liquid
@@ -0,0 +1,44 @@
+---
+title: Start
+tags:
+- ui
+---
+{% assign bodyClass = "body_new" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
+<header class="area menu io">
+	<nav>
+		<ul>
+			<li>
+				<a href="" class="a_button">Func 1</a>
+			</li>
+			<li>
+				<a href="" class="a_button">Func 2</a>
+			</li>
+		</ul>
+	</nav>
+</header>
+<div class="area grid">
+	<div class="item">1</div>
+	<div class="item">2</div>
+	<div class="item">3</div>
+	<div class="item">4</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	let clock = new Clock('time');
+
+	ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/header-status.liquid b/source/templates/hippie/partials/header-status.liquid
new file mode 100644
index 0000000..725e305
--- /dev/null
+++ b/source/templates/hippie/partials/header-status.liquid
@@ -0,0 +1,21 @@
+<div id="top">
+	<h1 class="brand">
+		<a href="#">{{ hippie.brand | upcase }}</a>
+	</h1>
+	<nav>
+		<ul>
+			{% for link in links %}
+				<li>
+					<a href="{{ link.href }}">{{ link.text }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
+	<div class="state">
+		<p>{% render 'hippie/partials/status-coord', id: "log" %}
+			/
+			{% render 'hippie/partials/status-date', id: "date" %}
+			/
+			{% render 'hippie/partials/status-time', id: "time" %}</p>
+	</div>
+</div>
diff --git a/source/templates/hippie/partials/status-coord.liquid b/source/templates/hippie/partials/status-coord.liquid
new file mode 100644
index 0000000..29e592f
--- /dev/null
+++ b/source/templates/hippie/partials/status-coord.liquid
@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: 'X: #, Y: ##' }}</span>
diff --git a/source/templates/hippie/partials/status-date.liquid b/source/templates/hippie/partials/status-date.liquid
new file mode 100644
index 0000000..296a866
--- /dev/null
+++ b/source/templates/hippie/partials/status-date.liquid
@@ -0,0 +1,6 @@
+<span id="{{ id }}">
+	<span id="day">Wochentag</span>,
+	<span id="dayNumb">##</span>.
+	<span id="month">Monat</span>
+	<span id="year">####</span>
+</span>
diff --git a/source/templates/hippie/partials/status-time.liquid b/source/templates/hippie/partials/status-time.liquid
new file mode 100644
index 0000000..f981e80
--- /dev/null
+++ b/source/templates/hippie/partials/status-time.liquid
@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: '00:00:00' }}</span><span>{{ postfix | default: ' Uhr' }}</span>

From bac4b73c08151f09e482767edaa8a3bd7f4044e5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 31 Oct 2025 19:47:19 +0100
Subject: [PATCH 075/253] feat: Add time to task bar

- Add app.js to windows screen
- Add time display to task bar
- Add new TimeDisplay class to app.js
- Add play and pause buttons as example
- Fix event handlers of task bar according to bubbling and propagation
---
 source/code/app.js                            | 57 +++++++++++++++++++
 source/code/windows.js                        | 33 +++++++----
 .../screens/demo/examples/ui/windows.liquid   | 20 ++++++-
 source/style/modules/ui/_windows_module.scss  |  4 ++
 4 files changed, 103 insertions(+), 11 deletions(-)

diff --git a/source/code/app.js b/source/code/app.js
index 8a21b5f..3f588fe 100644
--- a/source/code/app.js
+++ b/source/code/app.js
@@ -1,3 +1,53 @@
+// NEWER
+
+class TimeDisplay {
+	constructor(element, format = 'HH:mm:ss', interval = 1000) {
+		this.element = element;
+		this.format = format;
+		this.interval = interval;
+		this.isPaused = false;
+		this.locale = navigator.language || 'en-US';
+		this.updateTime();
+	}
+
+	formatTime(date) {
+		const options = {hour: '2-digit', minute: '2-digit', hour12: false};
+
+		switch (this.format) {
+			case 'HH:mm':
+				return date.toLocaleTimeString(this.locale, options);
+			case 'HH:mm:ss':
+				return date.toLocaleTimeString(this.locale, {...options, second: '2-digit'});
+			case 'hh:mm A':
+				return date.toLocaleTimeString(this.locale, {...options, hour12: true});
+			case 'hh:mm:ss A':
+				return date.toLocaleTimeString(this.locale, {...options, second: '2-digit', hour12: true});
+		}
+
+		return date.toString();
+	}
+
+	async updateTime() {
+		while (true) {
+			if (!this.isPaused) {
+				const now = new Date();
+				this.element.textContent = this.formatTime(now);
+			}
+			await new Promise(resolve => setTimeout(resolve, this.interval));
+		}
+	}
+
+	// Method to pause updates
+	pause() {
+		this.isPaused = true;
+	}
+
+	// Method to resume updates
+	resume() {
+		this.isPaused = false;
+	}
+}
+
 //NEW
 
 function Clock(id) {
@@ -158,3 +208,10 @@ function gigabytes(percent, total, round) {
 
 	return g;
 }
+
+function checkButtonAndTarget(event, element, button = 0) {
+	return (
+		event.button === button &&
+		event.target === element
+	);
+}
\ No newline at end of file
diff --git a/source/code/windows.js b/source/code/windows.js
index f282729..e928e97 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -139,6 +139,7 @@ class DragAdv {
 		this.init();
 	}
 
+	// TODO: Ereignisse besser delegieren
 	init() {
 		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
 		document.addEventListener('mousemove', this.onMouseMove.bind(this));
@@ -147,9 +148,12 @@ class DragAdv {
 	}
 
 	onMouseDown(event) {
-		if (event.button === 0) {
+		if (checkButtonAndTarget(event, this.element, 0)) {
+			console.debug('Drag mode enabled');
+
 			this.isDragging = true;
 
+			// TODO: Platzhalter anpassen je nach Ziel
 			this.showPlaceholder();
 
 			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
@@ -166,21 +170,29 @@ class DragAdv {
 	}
 
 	onMouseMove(event) {
-		if (!this.isDragging) return;
+		if (this.isDragging) {
+			if (!this.isDragging) return;
 
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
+			let x = event.clientX - this.offsetX;
+			let y = event.clientY - this.offsetY;
 
-		this.placeholder.style.left = `${x}px`;
-		this.placeholder.style.top = `${y}px`;
+			console.debug('Position: ', x, y);
+
+			this.placeholder.style.left = `${x}px`;
+			this.placeholder.style.top = `${y}px`;
+		}
 	}
 
 	onMouseUp() {
-		if (!this.isDragging) return;
-		this.isDragging = false;
+		if (event.target === this.placeholder) {
+			console.debug('Drag mode disabled');
 
-		this.snapToEdges();
-		this.hidePlaceholder();
+			if (!this.isDragging) return;
+			this.isDragging = false;
+
+			this.snapToEdges();
+			this.hidePlaceholder();
+		}
 	}
 
 	showPlaceholder() {
@@ -193,6 +205,7 @@ class DragAdv {
 		this.element.style.display = '';
 	}
 
+	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
 		const rect = this.placeholder.getBoundingClientRect();
 		const windowWidth = window.innerWidth;
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index daacb66..7521092 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -18,6 +18,8 @@ tags:
 	<nav class="big">
 		<button><i class="bi bi-folder"></i></button>
 		<button><i class="bi bi-terminal"></i></button>
+		<button id="pauseButton"><i class="bi bi-pause"></i></button>
+		<button id="resumeButton"><i class="bi bi-play"></i></button>
 	</nav>
 	<div>
 		<nav class="small">
@@ -28,7 +30,7 @@ tags:
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
 		<nav class="clock">
-			<span>##:##<br>TT.MM.JJJJ</span>
+			<span><span id="time">##:##</span><br>TT.MM.JJJJ</span>
 		</nav>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
@@ -40,6 +42,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
 	// Get the space element
@@ -51,5 +54,20 @@ tags:
 	// const draggable = new Draggable(draggableElement);
 	const dragMore = new DragAdv(draggableElement, placeholderElement);
 	// const dragBest = new BestDrag(draggableElement, placeholderElement);
+
+	// let clock = new Clock('time');
+	const timeElement = document.getElementById('time');
+	const timeDisplay = new TimeDisplay(timeElement, 'HH:mm:ss', 1000);
+
+	document.getElementById('pauseButton').addEventListener('click', () => {
+		timeDisplay.pause();
+		console.info('Pause time');
+	});
+
+	document.getElementById('resumeButton').addEventListener('click', () => {
+		timeDisplay.resume();
+		console.info('Resume time');
+	});
+
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index c7a9846..ea66e19 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -37,6 +37,10 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	button {
 		@extend .button_io;
 		overflow: hidden;
+
+		* {
+			pointer-events: none;
+		}
 	}
 
 	nav.small {

From cc4649df1e68103b453615e9527d28b4039ee823 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 31 Oct 2025 19:47:47 +0100
Subject: [PATCH 076/253] chore: Update jshint to es9

---
 .jshintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.jshintrc b/.jshintrc
index f7c493b..e11b79d 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -42,7 +42,7 @@
     "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
     "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
     "eqnull"        : false,     // true: Tolerate use of `== null`
-    "esversion"     : 6,         // {int} Specify the ECMAScript version to which the code must adhere.
+    "esversion"     : 9,         // {int} Specify the ECMAScript version to which the code must adhere.
     "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
                                  // (ex: `for each`, multiple try/catch, function expression…)
     "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`

From 496b6e37d8bd07cf1ed4dfc973eaf8b10c2e171e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 1 Nov 2025 11:34:00 +0100
Subject: [PATCH 077/253] feat: Add date to task bar

- Add date display to task bar
- Add new DateDisplay class to app.js
- Update TimeDisplay to be like DateDisplay
---
 source/code/app.js                            | 66 ++++++++++++++-----
 .../screens/demo/examples/ui/windows.liquid   |  9 ++-
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/source/code/app.js b/source/code/app.js
index 3f588fe..f4d47bb 100644
--- a/source/code/app.js
+++ b/source/code/app.js
@@ -1,30 +1,22 @@
 // NEWER
 
 class TimeDisplay {
-	constructor(element, format = 'HH:mm:ss', interval = 1000) {
+	constructor(element, options, interval) {
 		this.element = element;
-		this.format = format;
-		this.interval = interval;
+		this.options = options || {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
+		this.interval = interval || 1000;
 		this.isPaused = false;
 		this.locale = navigator.language || 'en-US';
 		this.updateTime();
+
+		console.group('Time information');
+		console.info('\nOptions:', this.options, '\n\n');
+		console.info('Interval:', this.interval);
+		console.groupEnd();
 	}
 
-	formatTime(date) {
-		const options = {hour: '2-digit', minute: '2-digit', hour12: false};
-
-		switch (this.format) {
-			case 'HH:mm':
-				return date.toLocaleTimeString(this.locale, options);
-			case 'HH:mm:ss':
-				return date.toLocaleTimeString(this.locale, {...options, second: '2-digit'});
-			case 'hh:mm A':
-				return date.toLocaleTimeString(this.locale, {...options, hour12: true});
-			case 'hh:mm:ss A':
-				return date.toLocaleTimeString(this.locale, {...options, second: '2-digit', hour12: true});
-		}
-
-		return date.toString();
+	formatTime(time) {
+		return time.toLocaleTimeString(this.locale, this.options);
 	}
 
 	async updateTime() {
@@ -48,6 +40,44 @@ class TimeDisplay {
 	}
 }
 
+class DateDisplay {
+	constructor(element, options) {
+		this.element = element;
+		this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
+		this.updateDate();
+		this.checkForDateChange();
+
+		console.group('Date information');
+		console.info('\nOptions:', this.options, '\n\n');
+		console.info('Remaining minutes:', Math.floor(this.getTimeUntilNextMidnight() / 3600));
+		console.groupEnd();
+	}
+
+	formatDate(date) {
+		return new Intl.DateTimeFormat(navigator.language, this.options).format(date);
+	}
+
+	updateDate() {
+		const now = new Date();
+		this.element.textContent = this.formatDate(now);
+	}
+
+	getTimeUntilNextMidnight() {
+		const now = new Date();
+		const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+		return nextMidnight - now;
+	}
+
+	checkForDateChange() {
+		const timeUntilNextMidnight = this.getTimeUntilNextMidnight();
+
+		setTimeout(() => {
+			this.updateDate();
+			this.checkForDateChange();
+		}, timeUntilNextMidnight);
+	}
+}
+
 //NEW
 
 function Clock(id) {
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 7521092..90fd8ea 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -30,7 +30,7 @@ tags:
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
 		<nav class="clock">
-			<span><span id="time">##:##</span><br>TT.MM.JJJJ</span>
+			<span><span id="time">##:##</span><br><span id="date">TT.MM.JJJJ</span></span>
 		</nav>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
@@ -57,7 +57,12 @@ tags:
 
 	// let clock = new Clock('time');
 	const timeElement = document.getElementById('time');
-	const timeDisplay = new TimeDisplay(timeElement, 'HH:mm:ss', 1000);
+	const timeFormat = {hour: '2-digit', minute: '2-digit'};
+	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
+	const dateElement = document.getElementById('date');
+	const dateFormat = {year: 'numeric', month: '2-digit', day: '2-digit'}
+	const dateDisplay = new DateDisplay(dateElement, dateFormat);
+
 
 	document.getElementById('pauseButton').addEventListener('click', () => {
 		timeDisplay.pause();

From b79edd4858a94205e60dc908473c586321783ac8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 1 Nov 2025 11:54:25 +0100
Subject: [PATCH 078/253] feat: Restructure scripts

- Combine app.js and functions.js
- Rename functions.js to app.js
- Rename variables.js to globals.js
- Remove global.js and add setup call to screen template
- Use local jquery in old templates
---
 source/code/{ => hippie}/app.js               | 232 ++++++++++++++++++
 source/code/hippie/functions.js               | 228 -----------------
 source/code/hippie/global.js                  |   3 -
 .../code/hippie/{variables.js => globals.js}  |   0
 source/templates/demo/_default.njk            |   2 +-
 source/templates/hippie/_app.njk              |   4 +-
 source/templates/hippie/_main.njk             |  14 +-
 source/templates/hippie/app.liquid            |   2 +-
 8 files changed, 243 insertions(+), 242 deletions(-)
 rename source/code/{ => hippie}/app.js (52%)
 delete mode 100644 source/code/hippie/functions.js
 delete mode 100644 source/code/hippie/global.js
 rename source/code/hippie/{variables.js => globals.js} (100%)

diff --git a/source/code/app.js b/source/code/hippie/app.js
similarity index 52%
rename from source/code/app.js
rename to source/code/hippie/app.js
index f4d47bb..299dd72 100644
--- a/source/code/app.js
+++ b/source/code/hippie/app.js
@@ -1,3 +1,235 @@
+// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
+// Bennung und Beschreibungen verbessern.
+
+// This is called everytime
+function setup() {
+	'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();
+	}
+}
+
+// MODULE Scroll navigation
+// Using constructor function
+function HippieScroll($tp, $dn) {
+	'use strict';
+
+	// this.$tp = $tp;
+	// Define initial situation
+	let initLeft = false;
+	const initY = hippie.screen.vh;
+
+	$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;
+		}
+	};
+
+	// 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);
+	});
+}
+
+function HippieFade(toggleElement, initState) {
+	'use strict';
+
+	const fragment = document.createDocumentFragment();
+	const overlay = document.createElement('div');
+
+	overlay.id = 'mouse-overlay';
+
+	if (initState) {
+		overlay.classList.add('active');
+	}
+
+	toggleElement.addEventListener('click', function () {
+		overlay.classList.toggle('active');
+	});
+
+	fragment.appendChild(overlay);
+	document.body.style.position = 'relative';
+	document.body.prepend(fragment);
+}
+
+// MODULE Meta elements
+function HippieMeta($ma, $pp) {
+	'use strict';
+
+	let metaOn = false;
+
+	$ma.click(function () {
+		var $wrap, $pop;
+
+		// 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);
+
+				$('<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
+						});
+					}
+				});
+			});
+
+		} 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');
+				// }
+			});
+
+			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
+// function getCoords (elem) {
+// 	let box = elem.getBoundingClientRect();
+//
+// 	return {
+// 		top: box.top + pageYOffset,
+// 		left: box.left + pageXOffset
+// 	};
+// }
+
+// https://stackoverflow.com/a/488073/1444149
+// function Utils () {}
+//
+// Utils.prototype = {
+// 	constructor: Utils,
+// 	isElementInView: function (element, fullyInView) {
+// 		var pageTop = $(window).scrollTop();
+// 		var pageBottom = pageTop + $(window).height();
+// 		var elementTop = $(element).offset().top;
+// 		var elementBottom = elementTop + $(element).height();
+//
+// 		if (fullyInView === true) {
+// 			return ((pageTop < elementTop) && (pageBottom > elementBottom));
+// 		} else {
+// 			return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
+// 		}
+// 	}
+// };
+//
+// var Utils = new Utils();
+
 // NEWER
 
 class TimeDisplay {
diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js
deleted file mode 100644
index ef2e3c7..0000000
--- a/source/code/hippie/functions.js
+++ /dev/null
@@ -1,228 +0,0 @@
-// This is called everytime
-function setup() {
-	'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();
-	}
-}
-
-// MODULE Scroll navigation
-// Using constructor function
-function HippieScroll($tp, $dn) {
-	'use strict';
-
-	// this.$tp = $tp;
-	// Define initial situation
-	let initLeft = false;
-	const initY = hippie.screen.vh;
-
-	$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;
-		}
-	};
-
-	// 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);
-	});
-}
-
-function HippieFade(toggleElement, initState) {
-	'use strict';
-
-	const fragment = document.createDocumentFragment();
-	const overlay = document.createElement('div');
-
-	overlay.id = 'mouse-overlay';
-
-	if (initState) {
-		overlay.classList.add('active');
-	}
-
-	toggleElement.addEventListener('click', function () {
-		overlay.classList.toggle('active');
-	});
-
-	fragment.appendChild(overlay);
-	document.body.style.position = 'relative';
-	document.body.prepend(fragment);
-}
-
-// MODULE Meta elements
-function HippieMeta($ma, $pp) {
-	'use strict';
-
-	let metaOn = false;
-
-	$ma.click(function () {
-		var $wrap, $pop;
-
-		// 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);
-
-				$('<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
-						});
-					}
-				});
-			});
-
-		} 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');
-				// }
-			});
-
-			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
-// function getCoords (elem) {
-// 	let box = elem.getBoundingClientRect();
-//
-// 	return {
-// 		top: box.top + pageYOffset,
-// 		left: box.left + pageXOffset
-// 	};
-// }
-
-// https://stackoverflow.com/a/488073/1444149
-// function Utils () {}
-//
-// Utils.prototype = {
-// 	constructor: Utils,
-// 	isElementInView: function (element, fullyInView) {
-// 		var pageTop = $(window).scrollTop();
-// 		var pageBottom = pageTop + $(window).height();
-// 		var elementTop = $(element).offset().top;
-// 		var elementBottom = elementTop + $(element).height();
-//
-// 		if (fullyInView === true) {
-// 			return ((pageTop < elementTop) && (pageBottom > elementBottom));
-// 		} else {
-// 			return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
-// 		}
-// 	}
-// };
-//
-// var Utils = new Utils();
diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js
deleted file mode 100644
index 0b05906..0000000
--- a/source/code/hippie/global.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Setup
-// -----------------------------------------------------------------------------
-setup();
diff --git a/source/code/hippie/variables.js b/source/code/hippie/globals.js
similarity index 100%
rename from source/code/hippie/variables.js
rename to source/code/hippie/globals.js
diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk
index c8aeed3..e9b46de 100644
--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@@ -15,5 +15,5 @@
 
 {% block script %}
 	{{ super() }}
-	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+	<script src="/vendor/jquery.min.js"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
index 3dcc729..cf48706 100755
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -22,8 +22,8 @@
 		{% block body %}{% 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>
+			<script src="/vendor/jquery.min.js"></script>
+			<script src="{{ pageBase }}js/globals.js"></script>
 			<script src="{{ pageBase }}js/app.js"></script>
 
 			<script>
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk
index ede46e3..7574dc9 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -42,14 +42,14 @@
 		{% 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 src="/vendor/jquery.min.js"></script>
+			<script src="{{ pageBase }}js/globals.js"></script>
+			<script src="{{ pageBase }}js/app.js"></script>
 			<script>
-				// Create instances of objects made by contructor functions
+				// Setup global things for all screens
+				setup();
+
+				// Create instances of objects made by constructor functions
 				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
 				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
 
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 2456f20..6d9c54a 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -14,7 +14,7 @@
 {% block script %}
 {{ block.super -}}
 <script src="/vendor/jquery.min.js"></script>
-<script src="{{ pageBase }}js/variables.js"></script>
+<script src="{{ pageBase }}js/globals.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 
 <script>

From 4a347b821e2b0511e9da00cd597741de87ea35cb Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 1 Nov 2025 12:01:58 +0100
Subject: [PATCH 079/253] fix: Pass through copy for jquery

---
 .eleventy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 00dded1..aff7409 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -41,8 +41,8 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy("vendor");
 	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
 	eleventyConfig.addPassthroughCopy({
-		"node_modules/jquery/dist/jquery.min.js": "vendor",
-		"node_modules/jquery/dist/jquery.min.map": "vendor"
+		"node_modules/jquery/dist/jquery.min.js": "vendor/jquery.min.js",
+		"node_modules/jquery/dist/jquery.min.map": "vendor/jquery.min.map"
 	});
 	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});
 

From d65016c5d1dcb0975a2e69759f2d90e1d5467844 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 1 Nov 2025 12:04:26 +0100
Subject: [PATCH 080/253] style: Change " to '

---
 .eleventy.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index aff7409..b5468e2 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -14,14 +14,14 @@ module.exports = function (eleventyConfig) {
 		trimBlocks: true
 	});
 
-	eleventyConfig.addGlobalData("permalink", () => {
+	eleventyConfig.addGlobalData('permalink', () => {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
 
 	let demoMode = false;
 	let pageBase = demoMode ? './demo/' : './';
 
-	eleventyConfig.addGlobalData("hippie", {
+	eleventyConfig.addGlobalData('hippie', {
 		pageBase: pageBase,
 		brand: 'hippie',
 		titlePrefix: '',
@@ -30,32 +30,32 @@ module.exports = function (eleventyConfig) {
 		legacyMode: false
 	});
 
-	eleventyConfig.addPassthroughCopy({"source/art/images": "art"});
+	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
 
-	eleventyConfig.addPassthroughCopy({"source/art/favicons/**/*.+(ico|png|svg)": "."});
+	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
 
-	eleventyConfig.addPassthroughCopy({"source/code/**/*.js": "js"});
+	eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});
 
-	eleventyConfig.addPassthroughCopy({"source/data/**/*.json": "json"});
+	eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});
 
-	eleventyConfig.addPassthroughCopy("vendor");
-	eleventyConfig.addPassthroughCopy({"node_modules/bootstrap-icons": "vendor/bootstrap-icons"});
+	eleventyConfig.addPassthroughCopy('vendor');
+	eleventyConfig.addPassthroughCopy({'node_modules/bootstrap-icons': 'vendor/bootstrap-icons'});
 	eleventyConfig.addPassthroughCopy({
-		"node_modules/jquery/dist/jquery.min.js": "vendor/jquery.min.js",
-		"node_modules/jquery/dist/jquery.min.map": "vendor/jquery.min.map"
+		'node_modules/jquery/dist/jquery.min.js': 'vendor/jquery.min.js',
+		'node_modules/jquery/dist/jquery.min.map': 'vendor/jquery.min.map'
 	});
 	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});
 
-	eleventyConfig.addWatchTarget("./source/style/");
+	eleventyConfig.addWatchTarget('./source/style/');
 
 	return {
 		dir: {
-			input: "source/screens",
-			output: "build",
-			includes: "../templates",
-			data: "../data"
+			input: 'source/screens',
+			output: 'build',
+			includes: '../templates',
+			data: '../data'
 		},
-		templateFormats: ["html", "liquid", "njk", "md"]
+		templateFormats: ['html', 'liquid', 'njk', 'md']
 		// pathPrefix: './demo/'
 	};
 };

From 8a17baed12d547f4986d19297049f36c556f76d5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 1 Nov 2025 12:18:08 +0100
Subject: [PATCH 081/253] fix: Wrong selector for gallery items

---
 source/screens/demo/examples/ui/gallery.liquid | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index f29cae5..c548374 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -37,7 +37,7 @@ tags:
 {{ block.super -}}
 <script>
 	const sizeSlider = document.getElementById('slider-size');
-	const galleryItems = document.querySelectorAll('#flex > div');
+	const galleryItems = document.querySelectorAll('.gallery > div');
 
 	// Set the default size
 	const defaultSize = 128; // In pixels
@@ -60,6 +60,7 @@ tags:
 	});
 
 	sizeSlider.addEventListener('input', function () {
+		console.debug('Change size');
 		// const newSize = calculateWidth(Number(sizeSlider.value));
 		// galleryItems.forEach(item => {
 		// 	item.style.width = `${newSize}px`;

From 9d15f22f5d8907f5ab6860db9a81648689677966 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 1 Nov 2025 12:25:48 +0100
Subject: [PATCH 082/253] feat: Remove jquery usage in globals.js

---
 source/code/hippie/globals.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/code/hippie/globals.js b/source/code/hippie/globals.js
index b5d8538..756af36 100644
--- a/source/code/hippie/globals.js
+++ b/source/code/hippie/globals.js
@@ -4,7 +4,7 @@ let hippie = {
 		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)
+		y: document.documentElement.scrollTop
 		// hippie.screen.y: document.documentElement.scrollTop
 	},
 	body: {

From abf393191c6ca4e8c5548b63646a65110ac0f6b7 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 09:18:12 +0100
Subject: [PATCH 083/253] style: Reformat and comment

---
 source/code/hippie/app.js                      | 7 +++++--
 source/code/windows.js                         | 8 +++-----
 source/screens/demo/examples/ui/windows.liquid | 2 --
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 299dd72..73aa723 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -239,6 +239,7 @@ class TimeDisplay {
 		this.interval = interval || 1000;
 		this.isPaused = false;
 		this.locale = navigator.language || 'en-US';
+
 		this.updateTime();
 
 		console.group('Time information');
@@ -251,6 +252,7 @@ class TimeDisplay {
 		return time.toLocaleTimeString(this.locale, this.options);
 	}
 
+	// TODO: Zeit nur im Sekundentakt aktualisieren wenn Sekunden angezeigt werden
 	async updateTime() {
 		while (true) {
 			if (!this.isPaused) {
@@ -261,12 +263,10 @@ class TimeDisplay {
 		}
 	}
 
-	// Method to pause updates
 	pause() {
 		this.isPaused = true;
 	}
 
-	// Method to resume updates
 	resume() {
 		this.isPaused = false;
 	}
@@ -276,6 +276,7 @@ class DateDisplay {
 	constructor(element, options) {
 		this.element = element;
 		this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
+
 		this.updateDate();
 		this.checkForDateChange();
 
@@ -291,12 +292,14 @@ class DateDisplay {
 
 	updateDate() {
 		const now = new Date();
+
 		this.element.textContent = this.formatDate(now);
 	}
 
 	getTimeUntilNextMidnight() {
 		const now = new Date();
 		const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+
 		return nextMidnight - now;
 	}
 
diff --git a/source/code/windows.js b/source/code/windows.js
index e928e97..d28a677 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -210,14 +210,12 @@ class DragAdv {
 		const rect = this.placeholder.getBoundingClientRect();
 		const windowWidth = window.innerWidth;
 		const windowHeight = window.innerHeight;
-
 		const distances = {
-			left: rect.left,
-			right: windowWidth - rect.right,
 			top: rect.top,
-			bottom: windowHeight - rect.bottom
+			right: windowWidth - rect.right,
+			bottom: windowHeight - rect.bottom,
+			left: rect.left
 		};
-
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
 		this.setPosition(closestEdge, this.barSize);
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 90fd8ea..ac1b71f 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -68,11 +68,9 @@ tags:
 		timeDisplay.pause();
 		console.info('Pause time');
 	});
-
 	document.getElementById('resumeButton').addEventListener('click', () => {
 		timeDisplay.resume();
 		console.info('Resume time');
 	});
-
 </script>
 {% endblock %}
\ No newline at end of file

From 20b43b8d358068f76fce9a5c50a2a50b48239c60 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 09:26:19 +0100
Subject: [PATCH 084/253] feat: Integrate date in task bar

- Date format can now be changed dynamically
- Date element is now created in task bar class
- Class can accept options, currently only for date
- Date format is changed according to position
- Changed dom structure for clock
- Refactor setPosition method to be more flexible
- Changed flex style for task bar items to inherit the direction
---
 source/code/hippie/app.js                     |   6 +
 source/code/windows.js                        | 110 +++++++++++-------
 .../screens/demo/examples/ui/windows.liquid   |  12 +-
 source/style/modules/ui/_windows_module.scss  |  42 ++++++-
 4 files changed, 117 insertions(+), 53 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 73aa723..21e9b7d 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -296,6 +296,12 @@ class DateDisplay {
 		this.element.textContent = this.formatDate(now);
 	}
 
+	changeFormat(format) {
+		this.options = format;
+
+		this.updateDate();
+	}
+
 	getTimeUntilNextMidnight() {
 		const now = new Date();
 		const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
diff --git a/source/code/windows.js b/source/code/windows.js
index d28a677..55be99a 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -128,13 +128,16 @@ class Draggable {
 }
 
 class DragAdv {
-	constructor(element, placeholder) {
+	constructor(element, placeholder, options) {
 		this.element = element;
 		this.placeholder = placeholder;
+		this.date = null;
 		this.offsetX = 0;
 		this.offsetY = 0;
 		this.isDragging = false;
-		this.barSize = '';
+		this.barSize = '64px';
+		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
+		this.options = options || {year: 'numeric', month: '2-digit', day: '2-digit'};
 
 		this.init();
 	}
@@ -144,7 +147,14 @@ class DragAdv {
 		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
 		document.addEventListener('mousemove', this.onMouseMove.bind(this));
 		document.addEventListener('mouseup', this.onMouseUp.bind(this));
-		this.setPosition('bottom', this.barSize);
+
+		const dateElement = document.createElement('span');
+
+		dateElement.id = 'date';
+		this.element.querySelector('.clock').appendChild(dateElement);
+		this.date = new DateDisplay(dateElement, this.options);
+
+		this.setPosition('bottom');
 	}
 
 	onMouseDown(event) {
@@ -218,49 +228,69 @@ class DragAdv {
 		};
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
-		this.setPosition(closestEdge, this.barSize);
+		this.setPosition(closestEdge);
+		this.date.changeFormat(this.options);
 	}
 
-	setPosition(side, barSize) {
-		switch (side) {
-			case 'left':
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
+	setPosition(position) {
+		const attributes = {
+			top: {
+				className: 'top',
+				styles: {
+					top: '0', right: '0', bottom: '', left: '0',
+					width: '', height: this.barSize,
+					flexDirection: 'row'
+				}
+			},
+			right: {
+				className: 'right',
+				styles: {
+					top: '0', right: '0', bottom: '0', left: '',
+					width: this.barSize, height: '',
+					flexDirection: 'column'
+				}
+			},
+			bottom: {
+				className: 'bottom',
+				styles: {
+					top: '', right: '0', bottom: '0', left: '0',
+					width: '', height: this.barSize,
+					flexDirection: 'row'
+				}
+			},
+			left: {
+				className: 'left',
+				styles: {
+					top: '0',
+					right: '',
+					bottom: '0',
+					left: '0',
+					width: this.barSize,
+					height: '',
+					flexDirection: 'column'
+				}
+			}
+		};
+
+		this.element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+		Object.keys(attributes[position].styles).forEach(key => {
+			this.element.style[key] = '';
+		});
+
+		this.element.classList.add(attributes[position].className);
+		Object.entries(attributes[position].styles).forEach(([key, value]) => {
+			this.element.style[key] = value;
+		});
+
+		switch (position) {
 			case 'right':
-				// this.element.style.left = `${windowWidth - rect.width}px`;
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
+			case 'left':
+				this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
 				break;
 			case 'top':
-				// this.element.style.top = '0px';
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
 			case 'bottom':
-				// this.element.style.top = `${windowHeight - rect.height}px`;
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
+			default:
+				this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
 				break;
 		}
 	}
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index ac1b71f..b5af38e 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -29,9 +29,10 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<nav class="clock">
-			<span><span id="time">##:##</span><br><span id="date">TT.MM.JJJJ</span></span>
-		</nav>
+		<div class="clock">
+			<span id="time">##:##</span>
+			<br>
+		</div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -42,6 +43,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/globals.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
@@ -59,10 +61,6 @@ tags:
 	const timeElement = document.getElementById('time');
 	const timeFormat = {hour: '2-digit', minute: '2-digit'};
 	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
-	const dateElement = document.getElementById('date');
-	const dateFormat = {year: 'numeric', month: '2-digit', day: '2-digit'}
-	const dateDisplay = new DateDisplay(dateElement, dateFormat);
-
 
 	document.getElementById('pauseButton').addEventListener('click', () => {
 		timeDisplay.pause();
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index ea66e19..d633b29 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -25,13 +25,45 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	padding: hippie.$space_basic;
 	background-color: rgba(0, 0, 0, .1);
 
+	&.top,
+	&.bottom {
+		nav,
+		& > div {
+			&:last-child {
+				margin-top: unset;
+				margin-left: auto;
+			}
+		}
+
+		.clock {
+			text-align: end;
+		}
+	}
+
+	&.right,
+	&.left {
+		nav,
+		& > div {
+			&:last-child {
+				margin-top: auto;
+				margin-left: unset;
+			}
+		}
+
+		.clock {
+			text-align: center;
+
+			& > span {
+				display: inline-block;
+				word-wrap: anywhere;
+			}
+		}
+	}
+
 	nav,
 	& > div {
 		@extend %flex-bar;
-
-		&:last-child {
-			margin-left: auto;
-		}
+		flex-direction: inherit;
 	}
 
 	button {
@@ -70,8 +102,6 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	}
 
 	.clock {
-		text-align: end;
-
 		&,
 		& > * {
 			line-height: 1;

From 77178886cdc9536ab3388ef04dea4420aec050d5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 10:14:54 +0100
Subject: [PATCH 085/253] feat: Update DateDisplay

- formatDate now distinguishes direction
- Update task bar options with hierarchy
- Add direction to options
- Rename setPosition to setOptions
---
 source/code/hippie/app.js | 30 ++++++++++++++++++++++++++----
 source/code/windows.js    | 25 +++++++++++++++++--------
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 21e9b7d..72e419d 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -273,9 +273,10 @@ class TimeDisplay {
 }
 
 class DateDisplay {
-	constructor(element, options) {
+	constructor(element, options, direction) {
 		this.element = element;
 		this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
+		this.direction = direction || 0;
 
 		this.updateDate();
 		this.checkForDateChange();
@@ -287,17 +288,38 @@ class DateDisplay {
 	}
 
 	formatDate(date) {
-		return new Intl.DateTimeFormat(navigator.language, this.options).format(date);
+		const formatter = new Intl.DateTimeFormat(navigator.language, this.options);
+
+		switch (this.direction) {
+			case 1:
+				const dateString = formatter
+					.formatToParts(date)
+					.map(({type, value}) => {
+						// if (type === 'day' || type === 'month') {
+						if (type === 'literal') {
+							return `${value}<br>`;
+						} else {
+							return value;
+						}
+					})
+					.join('');
+
+				return dateString;
+			case 0:
+			default:
+				return formatter.format(date);
+		}
 	}
 
 	updateDate() {
 		const now = new Date();
 
-		this.element.textContent = this.formatDate(now);
+		this.element.innerHTML = this.formatDate(now);
 	}
 
-	changeFormat(format) {
+	changeFormat(format, direction) {
 		this.options = format;
+		this.direction = direction;
 
 		this.updateDate();
 	}
diff --git a/source/code/windows.js b/source/code/windows.js
index 55be99a..e533f9a 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -137,7 +137,14 @@ class DragAdv {
 		this.isDragging = false;
 		this.barSize = '64px';
 		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
-		this.options = options || {year: 'numeric', month: '2-digit', day: '2-digit'};
+		this.options = options || {
+			direction: 0,
+			date: {
+				year: 'numeric',
+				month: '2-digit',
+				day: '2-digit'
+			}
+		};
 
 		this.init();
 	}
@@ -152,9 +159,9 @@ class DragAdv {
 
 		dateElement.id = 'date';
 		this.element.querySelector('.clock').appendChild(dateElement);
-		this.date = new DateDisplay(dateElement, this.options);
+		this.date = new DateDisplay(dateElement, this.options.date);
 
-		this.setPosition('bottom');
+		this.setOptions('bottom');
 	}
 
 	onMouseDown(event) {
@@ -228,11 +235,11 @@ class DragAdv {
 		};
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
-		this.setPosition(closestEdge);
-		this.date.changeFormat(this.options);
+		this.setOptions(closestEdge);
+		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 
-	setPosition(position) {
+	setOptions(position) {
 		const attributes = {
 			top: {
 				className: 'top',
@@ -285,12 +292,14 @@ class DragAdv {
 		switch (position) {
 			case 'right':
 			case 'left':
-				this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
+				this.options.date = {year: '2-digit', month: '2-digit', day: '2-digit'};
+				this.options.direction = 1;
 				break;
 			case 'top':
 			case 'bottom':
 			default:
-				this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
+				this.options.date = {year: 'numeric', month: '2-digit', day: '2-digit'};
+				this.options.direction = 0;
 				break;
 		}
 	}

From 13b1924360277cddc7a1bdbcdc784344562b6ca2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 10:20:51 +0100
Subject: [PATCH 086/253] refactor: Move stuff around and rename

- DragAdv is now HippieTaskBar
- Remove previous version
- Move unused stuff
- Replace Clock with TimeDisplay
---
 source/code/hippie/app.js                     |  35 +++-
 source/code/windows.js                        | 155 +-----------------
 source/screens/demo/examples/ui/start.liquid  |   3 +-
 .../screens/demo/examples/ui/windows.liquid   |   8 +-
 4 files changed, 34 insertions(+), 167 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 72e419d..4da28e0 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -195,7 +195,7 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 
 			el.innerHTML = elContent + text;
 			el.setAttribute("href", "mailto:" + mailString + topic);
-		};
+		}
 	}
 }
 
@@ -230,8 +230,6 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 //
 // var Utils = new Utils();
 
-// NEWER
-
 class TimeDisplay {
 	constructor(element, options, interval) {
 		this.element = element;
@@ -341,7 +339,34 @@ class DateDisplay {
 	}
 }
 
-//NEW
+// CONCEPTS
+
+// NOTE: Benutzt private Zuweisungen
+class elementBinder {
+	#element;
+
+	constructor(element) {
+		this.#setElement(element);
+	}
+
+	#setElement(value) {
+		if (!value) {
+			throw new Error('No element found');
+		}
+		this.#element = value;
+		this.#element.style.background = "hotpink";
+	}
+
+	get element() {
+		return this.#element;
+	}
+
+	set element(value) {
+		this.#setElement(value);
+	}
+}
+
+//OLD
 
 function Clock(id) {
 	'use strict';
@@ -372,8 +397,6 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-//OLD
-
 var floor = Math.floor;
 
 function ongoing() {
diff --git a/source/code/windows.js b/source/code/windows.js
index e533f9a..6ca9f64 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -1,133 +1,4 @@
-class Draggable {
-	constructor(element) {
-		this.element = element;
-		this.offsetX = 0;
-		this.offsetY = 0;
-		this.isDragging = false;
-		this.barSize = '';
-
-		this.init();
-	}
-
-	init() {
-		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
-		document.addEventListener('mousemove', this.onMouseMove.bind(this));
-		document.addEventListener('mouseup', this.onMouseUp.bind(this));
-		this.setPosition('bottom');
-	}
-
-	onMouseDown(event) {
-		this.isDragging = true;
-		this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
-		this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
-
-		event.preventDefault();
-	}
-
-	onMouseMove(event) {
-		if (!this.isDragging) {
-			return;
-		}
-
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
-
-		// Update the position of the element
-		this.element.style.left = `${x}px`;
-		this.element.style.top = `${y}px`;
-	}
-
-	onMouseUp() {
-		if (!this.isDragging) {
-			return;
-		}
-		this.isDragging = false;
-
-		this.snapToEdges();
-	}
-
-	snapToEdges() {
-		const rect = this.element.getBoundingClientRect();
-		const windowWidth = window.innerWidth;
-		const windowHeight = window.innerHeight;
-
-		// Determine the closest edge
-		const distances = {
-			left: rect.left,
-			right: windowWidth - rect.right,
-			top: rect.top,
-			bottom: windowHeight - rect.bottom
-		};
-
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
-
-		/*switch (closestEdge) {
-			case 'left':
-				this.element.style.left = '0px';
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'right':
-				this.element.style.left = `${windowWidth - rect.width}px`;
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'top':
-				this.element.style.top = '0px';
-				this.element.style.left = `${rect.left}px`;
-				break;
-			case 'bottom':
-				this.element.style.top = `${windowHeight - rect.height}px`;
-				this.element.style.left = `${rect.left}px`;
-				break;
-		}*/
-		this.setPosition(closestEdge, this.barSize);
-	}
-
-	setPosition(side, barSize) {
-		switch (side) {
-			case 'left':
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
-			case 'right':
-				// this.element.style.left = `${windowWidth - rect.width}px`;
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '';
-				this.element.style.width = barSize;
-				this.element.style.height = '';
-				break;
-			case 'top':
-				// this.element.style.top = '0px';
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '0px';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
-			case 'bottom':
-				// this.element.style.top = `${windowHeight - rect.height}px`;
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
-				this.element.style.top = '';
-				this.element.style.right = '0px';
-				this.element.style.bottom = '0px';
-				this.element.style.left = '0px';
-				this.element.style.width = '';
-				this.element.style.height = barSize;
-				break;
-		}
-	}
-}
-
-class DragAdv {
+class HippieTaskBar {
 	constructor(element, placeholder, options) {
 		this.element = element;
 		this.placeholder = placeholder;
@@ -304,27 +175,3 @@ class DragAdv {
 		}
 	}
 }
-
-class BestDrag {
-	#element;
-
-	constructor(element) {
-		this.#setElement(element);
-	}
-
-	#setElement(value) {
-		if (!value) {
-			throw new Error('No element found');
-		}
-		this.#element = value;
-		this.#element.style.background = "hotpink";
-	}
-
-	get element() {
-		return this.#element;
-	}
-
-	set element(value) {
-		this.#setElement(value);
-	}
-}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/start.liquid
index 8e13c85..261cb16 100644
--- a/source/screens/demo/examples/ui/start.liquid
+++ b/source/screens/demo/examples/ui/start.liquid
@@ -31,7 +31,8 @@ tags:
 {%- block script %}
 {{ block.super -}}
 <script>
-	let clock = new Clock('time');
+	const timeElement = document.getElementById('time');
+	const timeDisplay = new TimeDisplay(timeElement);
 
 	ongoing();
 
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index b5af38e..a0603e6 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -52,13 +52,9 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
-
-	// const draggable = new Draggable(draggableElement);
-	const dragMore = new DragAdv(draggableElement, placeholderElement);
-	// const dragBest = new BestDrag(draggableElement, placeholderElement);
-
-	// let clock = new Clock('time');
 	const timeElement = document.getElementById('time');
+
+	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
 	const timeFormat = {hour: '2-digit', minute: '2-digit'};
 	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
 

From 667485fce12382c242cee66bebc7441fb7157d15 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 11:32:57 +0100
Subject: [PATCH 087/253] fix: Task bar flex style

---
 source/style/modules/ui/_windows_module.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index d633b29..228798a 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -8,8 +8,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	align-items: stretch;
-	align-content: center;
+	align-items: center;
 	justify-content: flex-start;
 	gap: hippie.$space_half hippie.$space_basic;
 }

From 0f561d360aa9365b8a5fb69ae73747b65b5da5fe Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 11:39:11 +0100
Subject: [PATCH 088/253] feat: Change task bar placeholder

- Add content
- Reflect style from task bar
---
 .../screens/demo/examples/ui/windows.liquid   |  9 ++++-
 source/style/modules/ui/_windows_module.scss  | 34 ++++++++++++++++---
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index a0603e6..35987a9 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -39,7 +39,14 @@ tags:
 	</div>
 </div>
 <div id="screen-space"></div>
-<div id="placeholder"></div>
+<div id="placeholder">
+	<div class="box"></div>
+	<div class="box_brd"></div>
+	<div>
+		<div>task bar</div>
+		<div class="box_brd"></div>
+	</div>
+</div>
 {% endblock %}
 
 {%- block script %}
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index 228798a..8a63ffe 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -114,11 +114,35 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 }
 
 #placeholder {
+	@extend %flex-bar;
 	display: none;
-	z-index: map.get(hippie.$z-indexes, "content-top");
+	z-index: map.get(hippie.$z-indexes, "toast");
 	position: fixed;
-	width: 100px;
-	height: 100px;
-	border: 2px dashed deeppink;
-	background-color: hotpink;
+	border: 2px dashed black;
+	background-color: rgba(0, 0, 0, .4);
+	padding: 16px;
+
+	* {
+		pointer-events: none;
+	}
+
+	& > div {
+		@extend %flex-bar;
+		flex-direction: inherit;
+	}
+
+	.box,
+	.box_brd {
+		width: 16px;
+		height: 16px;
+	}
+
+	.box {
+		background-color: black;
+	}
+
+	.box_brd {
+		border: 2px solid black;
+		background-color: transparent;
+	}
 }
\ No newline at end of file

From aa5d095e649344c95951e504f5eb380a03c95b4f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 11:40:54 +0100
Subject: [PATCH 089/253] feat: Change placeholder while dragging

- Move edge detection to global function
- Change placeholder style during mouse move
---
 source/code/hippie/app.js | 28 +++++++++++++++++++++-------
 source/code/windows.js    | 36 +++++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 4da28e0..42605fe 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -339,6 +339,27 @@ class DateDisplay {
 	}
 }
 
+function checkButtonAndTarget(event, element, button = 0) {
+	return (
+		event.button === button &&
+		event.target === element
+	);
+}
+
+function getClosestEdge(element) {
+	const rect = element.getBoundingClientRect();
+	const windowWidth = window.innerWidth;
+	const windowHeight = window.innerHeight;
+	const distances = {
+		top: rect.top,
+		right: windowWidth - rect.right,
+		bottom: windowHeight - rect.bottom,
+		left: rect.left
+	};
+
+	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
@@ -524,10 +545,3 @@ function gigabytes(percent, total, round) {
 
 	return g;
 }
-
-function checkButtonAndTarget(event, element, button = 0) {
-	return (
-		event.button === button &&
-		event.target === element
-	);
-}
\ No newline at end of file
diff --git a/source/code/windows.js b/source/code/windows.js
index 6ca9f64..71abe7e 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -47,8 +47,8 @@ class HippieTaskBar {
 			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
 			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
 
-			let x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
+			const x = event.clientX - this.offsetX;
+			const y = event.clientY - this.offsetY;
 
 			this.placeholder.style.left = `${x}px`;
 			this.placeholder.style.top = `${y}px`;
@@ -61,13 +61,24 @@ class HippieTaskBar {
 		if (this.isDragging) {
 			if (!this.isDragging) return;
 
-			let x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
-
-			console.debug('Position: ', x, y);
+			const x = event.clientX - this.offsetX;
+			const y = event.clientY - this.offsetY;
+			const closestEdge = getClosestEdge(this.placeholder);
 
 			this.placeholder.style.left = `${x}px`;
 			this.placeholder.style.top = `${y}px`;
+
+			switch (closestEdge) {
+				case 'right':
+				case 'left':
+					this.placeholder.style.flexDirection = 'column';
+					break;
+				case 'top':
+				case 'bottom':
+				default:
+					this.placeholder.style.flexDirection = 'row';
+					break;
+			}
 		}
 	}
 
@@ -85,7 +96,7 @@ class HippieTaskBar {
 
 	showPlaceholder() {
 		this.element.style.display = 'none';
-		this.placeholder.style.display = 'block';
+		this.placeholder.style.display = 'flex';
 	}
 
 	hidePlaceholder() {
@@ -95,16 +106,7 @@ class HippieTaskBar {
 
 	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
-		const rect = this.placeholder.getBoundingClientRect();
-		const windowWidth = window.innerWidth;
-		const windowHeight = window.innerHeight;
-		const distances = {
-			top: rect.top,
-			right: windowWidth - rect.right,
-			bottom: windowHeight - rect.bottom,
-			left: rect.left
-		};
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
+		const closestEdge = getClosestEdge(this.placeholder);
 
 		this.setOptions(closestEdge);
 		this.date.changeFormat(this.options.date, this.options.direction);

From 3dc836656a7898c6e3b1d01e5a2e63e494e482ec Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 11:57:04 +0100
Subject: [PATCH 090/253] fix: Placeholder moving away from cursor

- Create global centerElementUnderCursor for centering
- Change order of actions for mouse move
---
 source/code/hippie/app.js | 10 ++++++++++
 source/code/windows.js    | 21 ++++-----------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 42605fe..607cc92 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -360,6 +360,16 @@ function getClosestEdge(element) {
 	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 }
 
+function centerElementUnderCursor(event, element) {
+	const offsetX = element.getBoundingClientRect().width / 2;
+	const offsetY = element.getBoundingClientRect().height / 2;
+	const x = event.clientX - offsetX;
+	const y = event.clientY - offsetY;
+
+	element.style.left = `${x}px`;
+	element.style.top = `${y}px`;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/code/windows.js b/source/code/windows.js
index 71abe7e..5ae07ef 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -3,10 +3,8 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
-		this.offsetX = 0;
-		this.offsetY = 0;
 		this.isDragging = false;
-		this.barSize = '64px';
+		this.barSize = '';
 		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
@@ -41,17 +39,9 @@ class HippieTaskBar {
 
 			this.isDragging = true;
 
-			// TODO: Platzhalter anpassen je nach Ziel
 			this.showPlaceholder();
 
-			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
-			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
-
-			const x = event.clientX - this.offsetX;
-			const y = event.clientY - this.offsetY;
-
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
+			centerElementUnderCursor(event, this.placeholder);
 		}
 
 		event.preventDefault();
@@ -61,13 +51,8 @@ class HippieTaskBar {
 		if (this.isDragging) {
 			if (!this.isDragging) return;
 
-			const x = event.clientX - this.offsetX;
-			const y = event.clientY - this.offsetY;
 			const closestEdge = getClosestEdge(this.placeholder);
 
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
-
 			switch (closestEdge) {
 				case 'right':
 				case 'left':
@@ -79,6 +64,8 @@ class HippieTaskBar {
 					this.placeholder.style.flexDirection = 'row';
 					break;
 			}
+
+			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
 

From 53897754e28682c13a93258486aee8838d1d98f2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 11:57:22 +0100
Subject: [PATCH 091/253] chore: More globals for jshint

---
 .jshintrc | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index e11b79d..cfc5480 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -88,9 +88,16 @@
 
     // Custom globals
     "globals" : {               // additional predefined global variables
-      "debugOn": true,
-      "hippie": true,
-      "viewHover": true,
-      "basicEase": true
+		"debugOn": true,
+		"hippie": true,
+		"viewHover": true,
+		"basicEase": true,
+		"TimeDisplay": true,
+		"DateDisplay": true,
+		"checkButtonAndTarget": true,
+		"getClosestEdge": true,
+		"centerElementUnderCursor": true,
+		"setAttributesAccordingToPosition": true,
+		"HippieTaskBar": true
     }
 }

From a18b42bb2a02687674976bc1bf3e78c024df3bc4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 12:22:08 +0100
Subject: [PATCH 092/253] feat: More dynamic styling for placeholder

- Create global setAttributesAccordingToPosition
- Change style of placeholder to show snap side
---
 source/code/hippie/app.js | 12 ++++++++
 source/code/windows.js    | 62 ++++++++++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 607cc92..ed0f66d 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -370,6 +370,18 @@ function centerElementUnderCursor(event, element) {
 	element.style.top = `${y}px`;
 }
 
+function setAttributesAccordingToPosition(element, position, attributes) {
+	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+	Object.keys(attributes[position].styles).forEach(key => {
+		element.style[key] = '';
+	});
+
+	element.classList.add(attributes[position].className);
+	Object.entries(attributes[position].styles).forEach(([key, value]) => {
+		element.style[key] = value;
+	});
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/code/windows.js b/source/code/windows.js
index 5ae07ef..2834619 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -52,19 +52,47 @@ class HippieTaskBar {
 			if (!this.isDragging) return;
 
 			const closestEdge = getClosestEdge(this.placeholder);
+			const borderRadius = '16px';
+			const attributes = {
+				top: {
+					styles: {
+						borderTopRightRadius: '',
+						borderBottomRightRadius: borderRadius,
+						borderBottomLeftRadius: borderRadius,
+						borderTopLeftRadius: '',
+						flexDirection: 'row'
+					}
+				},
+				right: {
+					styles: {
+						borderTopRightRadius: '',
+						borderBottomRightRadius: '',
+						borderBottomLeftRadius: borderRadius,
+						borderTopLeftRadius: borderRadius,
+						flexDirection: 'column'
+					}
+				},
+				bottom: {
+					styles: {
+						borderTopRightRadius: borderRadius,
+						borderBottomRightRadius: '',
+						borderBottomLeftRadius: '',
+						borderTopLeftRadius: borderRadius,
+						flexDirection: 'row'
+					}
+				},
+				left: {
+					styles: {
+						borderTopRightRadius: borderRadius,
+						borderBottomRightRadius: borderRadius,
+						borderBottomLeftRadius: '',
+						borderTopLeftRadius: '',
+						flexDirection: 'column'
+					}
+				}
+			};
 
-			switch (closestEdge) {
-				case 'right':
-				case 'left':
-					this.placeholder.style.flexDirection = 'column';
-					break;
-				case 'top':
-				case 'bottom':
-				default:
-					this.placeholder.style.flexDirection = 'row';
-					break;
-			}
-
+			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -139,15 +167,7 @@ class HippieTaskBar {
 			}
 		};
 
-		this.element.classList.remove(...Object.values(attributes).map(pos => pos.className));
-		Object.keys(attributes[position].styles).forEach(key => {
-			this.element.style[key] = '';
-		});
-
-		this.element.classList.add(attributes[position].className);
-		Object.entries(attributes[position].styles).forEach(([key, value]) => {
-			this.element.style[key] = value;
-		});
+		setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':

From 50b43cdc2f7989cdcc73fc1845b0f8870795e00c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 13:12:04 +0100
Subject: [PATCH 093/253] feat: More styling for placeholder

---
 source/code/windows.js                        | 38 ++++++++++++++-----
 .../screens/demo/examples/ui/windows.liquid   |  2 +-
 source/style/modules/ui/_windows_module.scss  | 18 ++++++++-
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/source/code/windows.js b/source/code/windows.js
index 2834619..c7ab166 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -52,42 +52,62 @@ class HippieTaskBar {
 			if (!this.isDragging) return;
 
 			const closestEdge = getClosestEdge(this.placeholder);
-			const borderRadius = '16px';
+			const borderRadius = '4px';
 			const attributes = {
 				top: {
+					className: 'top',
 					styles: {
+						flexDirection: 'row',
+						borderStyle: '',
+						borderColor: '',
+						borderTopStyle: 'solid',
+						borderTopColor: 'white',
 						borderTopRightRadius: '',
 						borderBottomRightRadius: borderRadius,
 						borderBottomLeftRadius: borderRadius,
-						borderTopLeftRadius: '',
-						flexDirection: 'row'
+						borderTopLeftRadius: ''
 					}
 				},
 				right: {
+					className: 'right',
 					styles: {
+						flexDirection: 'column',
+						borderStyle: '',
+						borderColor: '',
+						borderRightStyle: 'solid',
+						borderRightColor: 'white',
 						borderTopRightRadius: '',
 						borderBottomRightRadius: '',
 						borderBottomLeftRadius: borderRadius,
-						borderTopLeftRadius: borderRadius,
-						flexDirection: 'column'
+						borderTopLeftRadius: borderRadius
 					}
 				},
 				bottom: {
+					className: 'bottom',
 					styles: {
+						flexDirection: 'row',
+						borderStyle: '',
+						borderColor: '',
+						borderBottomStyle: 'solid',
+						borderBottomColor: 'white',
 						borderTopRightRadius: borderRadius,
 						borderBottomRightRadius: '',
 						borderBottomLeftRadius: '',
-						borderTopLeftRadius: borderRadius,
-						flexDirection: 'row'
+						borderTopLeftRadius: borderRadius
 					}
 				},
 				left: {
+					className: 'left',
 					styles: {
+						flexDirection: 'column',
+						borderStyle: '',
+						borderColor: '',
+						borderLeftStyle: 'solid',
+						borderLeftColor: 'white',
 						borderTopRightRadius: borderRadius,
 						borderBottomRightRadius: borderRadius,
 						borderBottomLeftRadius: '',
-						borderTopLeftRadius: '',
-						flexDirection: 'column'
+						borderTopLeftRadius: ''
 					}
 				}
 			};
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 35987a9..af1dbeb 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -43,7 +43,7 @@ tags:
 	<div class="box"></div>
 	<div class="box_brd"></div>
 	<div>
-		<div>task bar</div>
+		<span>task bar</span>
 		<div class="box_brd"></div>
 	</div>
 </div>
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index 8a63ffe..98475c4 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -118,10 +118,25 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	display: none;
 	z-index: map.get(hippie.$z-indexes, "toast");
 	position: fixed;
-	border: 2px dashed black;
+	border: 1px dashed black;
+	border-radius: 2px;
 	background-color: rgba(0, 0, 0, .4);
 	padding: 16px;
 
+	&.top,
+	&.bottom {
+		span {
+			writing-mode: unset;
+		}
+	}
+
+	&.right,
+	&.left {
+		span {
+			writing-mode: vertical-rl;
+		}
+	}
+
 	* {
 		pointer-events: none;
 	}
@@ -129,6 +144,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	& > div {
 		@extend %flex-bar;
 		flex-direction: inherit;
+		flex-wrap: nowrap;
 	}
 
 	.box,

From e39d515b9e4e181dccfbc8f580b63910ff3b7ba1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 14:12:52 +0100
Subject: [PATCH 094/253] chore: Typo in package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3dc6f91..b2ccd28 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
   "bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
   "license": "MIT",
-  "author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte@interaktionsweise.de/)",
+  "author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
   "main": "",
   "repository": {
     "type": "git",

From a3eb2250ab864ddd794d07935d3852eb43380359 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 17:18:12 +0100
Subject: [PATCH 095/253] feat: Add hippie-script as dependency

Foundation to move all global JavaScript to the new repo.
---
 .eleventy.js                                   | 2 +-
 package-lock.json                              | 6 ++++++
 package.json                                   | 1 +
 source/screens/demo/examples/ui/windows.liquid | 4 +++-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index b5468e2..5b24790 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -44,7 +44,7 @@ module.exports = function (eleventyConfig) {
 		'node_modules/jquery/dist/jquery.min.js': 'vendor/jquery.min.js',
 		'node_modules/jquery/dist/jquery.min.map': 'vendor/jquery.min.map'
 	});
-	// eleventyConfig.addPassthroughCopy({"node_modules/normalize.css/normalize.css": "vendor/normalize.css"});
+	eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'});
 
 	eleventyConfig.addWatchTarget('./source/style/');
 
diff --git a/package-lock.json b/package-lock.json
index 1fc8cd0..fbe1e14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
         "bootstrap-icons": "^1.13.1",
+        "hippie-script": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
         "jquery": "^3.7.1",
         "sass": "^1.93.0"
       },
@@ -1386,6 +1387,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hippie-script": {
+      "version": "1.0.0",
+      "resolved": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#090514fc1b3806e4ffaf1523b246724258e41114",
+      "license": "MIT"
+    },
     "node_modules/htmlparser2": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
diff --git a/package.json b/package.json
index b2ccd28..3da5d70 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "bootstrap-icons": "^1.13.1",
+    "hippie-script": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
     "jquery": "^3.7.1",
     "sass": "^1.93.0"
   }
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index af1dbeb..3eb823c 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -50,10 +50,12 @@ tags:
 {% endblock %}
 
 {%- block script %}
-<script src="{{ pageBase }}js/globals.js"></script>
+{% comment %}<script src="{{ pageBase }}js/globals.js"></script>{% endcomment %}
+<script src="/vendor/hippie-script.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
+	console.log(HIPPIE.hippie.brand);
 	// Get the space element
 	const space = document.getElementById('screen-space');
 	const start = document.querySelector('[data-action=start]');

From b7b1d154567b88952f7285ff4b88bbd0d042f661 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 3 Nov 2025 19:37:19 +0100
Subject: [PATCH 096/253] feat: Update hippie-script

- Update to new version
- Move brand from hippie to HIPPIE
- Add hippie-script to all remaining templates
---
 package-lock.json                              | 4 ++--
 source/code/hippie/app.js                      | 2 +-
 source/code/hippie/globals.js                  | 3 ---
 source/screens/demo/examples/ui/windows.liquid | 2 +-
 source/templates/hippie/_app.njk               | 1 +
 source/templates/hippie/_main.njk              | 1 +
 source/templates/hippie/app.liquid             | 1 +
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fbe1e14..620aac8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1388,8 +1388,8 @@
       }
     },
     "node_modules/hippie-script": {
-      "version": "1.0.0",
-      "resolved": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#090514fc1b3806e4ffaf1523b246724258e41114",
+      "version": "1.2.1",
+      "resolved": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#dfc13e61586fbf466a7bbdb5667c5b02f41abd44",
       "license": "MIT"
     },
     "node_modules/htmlparser2": {
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index ed0f66d..05b09b3 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -6,7 +6,7 @@ function setup() {
 	'use strict';
 
 	console.group('Document information');
-	console.info('\n', hippie.brand, '\n\n');
+	console.info('\n', HIPPIE.brand, '\n\n');
 	console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
 	console.groupEnd();
 	if (debugOn) {
diff --git a/source/code/hippie/globals.js b/source/code/hippie/globals.js
index 756af36..638c7ba 100644
--- a/source/code/hippie/globals.js
+++ b/source/code/hippie/globals.js
@@ -1,5 +1,4 @@
 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),
@@ -15,8 +14,6 @@ let hippie = {
 let viewHover = true;
 let basicEase = 600;
 
-const onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
-const onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
 const flagColors = [
 	'fad803',
 	'f2af13',
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 3eb823c..74584ab 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -55,7 +55,7 @@ tags:
 <script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
-	console.log(HIPPIE.hippie.brand);
+	console.log(HIPPIE.brand);
 	// Get the space element
 	const space = document.getElementById('screen-space');
 	const start = document.querySelector('[data-action=start]');
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
index cf48706..f0703d2 100755
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -23,6 +23,7 @@
 
 		{% block script %}
 			<script src="/vendor/jquery.min.js"></script>
+			<script src="/vendor/hippie-script.js"></script>
 			<script src="{{ pageBase }}js/globals.js"></script>
 			<script src="{{ pageBase }}js/app.js"></script>
 
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk
index 7574dc9..3934cc1 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -43,6 +43,7 @@
 			{{ log.log('BODY        :: Loading script assets...') }}
 			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
 			<script src="/vendor/jquery.min.js"></script>
+			<script src="/vendor/hippie-script.js"></script>
 			<script src="{{ pageBase }}js/globals.js"></script>
 			<script src="{{ pageBase }}js/app.js"></script>
 			<script>
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 6d9c54a..d38a402 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -14,6 +14,7 @@
 {% block script %}
 {{ block.super -}}
 <script src="/vendor/jquery.min.js"></script>
+<script src="/vendor/hippie-script.js"></script>
 <script src="{{ pageBase }}js/globals.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 

From 5f8e048c84c414f5465de4ab096afe8fe9778ab8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 8 Nov 2025 21:58:23 +0100
Subject: [PATCH 097/253] feat: Replace status screens with liquid versions

- maintenance.njk is now a single status.liquid
- All status screens use liquid
- Simplify structure
---
 source/screens/demo/pages/error/304.liquid    | 20 +++++++++++
 source/screens/demo/pages/error/304.njk       | 26 --------------
 source/screens/demo/pages/error/400.liquid    | 17 +++++++++
 source/screens/demo/pages/error/400.njk       | 26 --------------
 source/screens/demo/pages/error/401.liquid    | 18 ++++++++++
 source/screens/demo/pages/error/401.njk       | 26 --------------
 source/screens/demo/pages/error/403.liquid    | 18 ++++++++++
 source/screens/demo/pages/error/403.njk       | 26 --------------
 source/screens/demo/pages/error/404.liquid    | 19 ++++++++++
 source/screens/demo/pages/error/404.njk       | 26 --------------
 source/screens/demo/pages/error/408.liquid    | 17 +++++++++
 source/screens/demo/pages/error/408.njk       | 26 --------------
 source/screens/demo/pages/error/500.liquid    | 17 +++++++++
 source/screens/demo/pages/error/500.njk       | 26 --------------
 source/screens/demo/pages/error/503.liquid    | 19 ++++++++++
 source/screens/demo/pages/error/503.njk       | 26 --------------
 source/screens/demo/pages/maintenance.liquid  | 13 +++++++
 source/screens/demo/pages/maintenance.njk     | 21 -----------
 source/templates/demo/_maintenance.njk        | 12 -------
 source/templates/hippie/_maintenance.njk      | 27 --------------
 .../hippie/partials/footer-status.liquid      |  9 +++++
 source/templates/hippie/status.liquid         | 36 +++++++++++++++++++
 22 files changed, 203 insertions(+), 268 deletions(-)
 create mode 100644 source/screens/demo/pages/error/304.liquid
 delete mode 100644 source/screens/demo/pages/error/304.njk
 create mode 100644 source/screens/demo/pages/error/400.liquid
 delete mode 100644 source/screens/demo/pages/error/400.njk
 create mode 100644 source/screens/demo/pages/error/401.liquid
 delete mode 100644 source/screens/demo/pages/error/401.njk
 create mode 100644 source/screens/demo/pages/error/403.liquid
 delete mode 100644 source/screens/demo/pages/error/403.njk
 create mode 100644 source/screens/demo/pages/error/404.liquid
 delete mode 100644 source/screens/demo/pages/error/404.njk
 create mode 100644 source/screens/demo/pages/error/408.liquid
 delete mode 100644 source/screens/demo/pages/error/408.njk
 create mode 100644 source/screens/demo/pages/error/500.liquid
 delete mode 100644 source/screens/demo/pages/error/500.njk
 create mode 100644 source/screens/demo/pages/error/503.liquid
 delete mode 100644 source/screens/demo/pages/error/503.njk
 create mode 100644 source/screens/demo/pages/maintenance.liquid
 delete mode 100644 source/screens/demo/pages/maintenance.njk
 delete mode 100644 source/templates/demo/_maintenance.njk
 delete mode 100644 source/templates/hippie/_maintenance.njk
 create mode 100644 source/templates/hippie/partials/footer-status.liquid
 create mode 100644 source/templates/hippie/status.liquid

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..d713f9e
--- /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/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/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/status.liquid b/source/templates/hippie/status.liquid
new file mode 100644
index 0000000..6189ca9
--- /dev/null
+++ b/source/templates/hippie/status.liquid
@@ -0,0 +1,36 @@
+<!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

From 5663813ecfe7d53082a4622952c01ab9c4562724 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 9 Nov 2025 12:58:41 +0100
Subject: [PATCH 098/253] feat: Replace index screen with liquid version

- _default.njk is now a single full.liquid
- Simplify structure
- Add log partials as liquid
---
 source/screens/demo/index.liquid              |  78 ++++++++++++
 source/screens/demo/index.njk                 |  82 -------------
 source/templates/hippie/full.liquid           |  49 ++++++++
 .../hippie/partials/log-assets.liquid         |   3 +
 .../templates/hippie/partials/log-log.liquid  |   3 +
 .../hippie/partials/log-setup.liquid          |   6 +
 .../hippie/partials/log-start.liquid          |   4 +
 .../hippie/partials/script-log.liquid         | 113 ++++++++++++++++++
 8 files changed, 256 insertions(+), 82 deletions(-)
 create mode 100644 source/screens/demo/index.liquid
 delete mode 100644 source/screens/demo/index.njk
 create mode 100644 source/templates/hippie/full.liquid
 create mode 100644 source/templates/hippie/partials/log-assets.liquid
 create mode 100644 source/templates/hippie/partials/log-log.liquid
 create mode 100644 source/templates/hippie/partials/log-setup.liquid
 create mode 100644 source/templates/hippie/partials/log-start.liquid
 create mode 100644 source/templates/hippie/partials/script-log.liquid

diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
new file mode 100644
index 0000000..0b7c221
--- /dev/null
+++ b/source/screens/demo/index.liquid
@@ -0,0 +1,78 @@
+---
+permalink: "/"
+title: Index
+tags:
+- demoIndex
+---
+{% assign pageBase = hippie.pageBase -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "h_full_view" -%}
+{%- layout "hippie/full.liquid" %}
+
+{% block title %}Index{% endblock %}
+
+{% 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/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
new file mode 100644
index 0000000..7167a5f
--- /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 %}{% 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/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

From 1b7e4f4888f48e6afbce84956a5abca42baafa58 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 9 Nov 2025 14:33:44 +0100
Subject: [PATCH 099/253] feat: Replace blank screen with liquid version

- Add title to full template
- Remove unnecessary title from screens
- Change CRLF to LF
---
 source/screens/demo/index.liquid             |  2 --
 source/screens/demo/pages/blank.liquid       | 10 +++++++++
 source/screens/demo/pages/blank.njk          | 22 --------------------
 source/screens/demo/pages/default.liquid     |  2 +-
 source/screens/demo/pages/maintenance.liquid |  2 +-
 source/templates/hippie/full.liquid          |  2 +-
 source/templates/hippie/status.liquid        |  5 +++--
 7 files changed, 16 insertions(+), 29 deletions(-)
 create mode 100644 source/screens/demo/pages/blank.liquid
 delete mode 100644 source/screens/demo/pages/blank.njk

diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 0b7c221..1f19b26 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -9,8 +9,6 @@ tags:
 {% assign pageClass = "h_full_view" -%}
 {%- layout "hippie/full.liquid" %}
 
-{% block title %}Index{% endblock %}
-
 {% block body %}
 <div class="wrap">
 	<div class="hello">
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/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid
index d713f9e..a4943f2 100644
--- a/source/screens/demo/pages/maintenance.liquid
+++ b/source/screens/demo/pages/maintenance.liquid
@@ -2,7 +2,7 @@
 title: Maintenance
 ---
 {% assign pageBase = "../../" -%}
-{% assign pageClass = "h_full_view" %}
+{% assign pageClass = "h_full_view" -%}
 {%- layout "hippie/status.liquid" %}
 
 {% block body %}
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index 7167a5f..89ba267 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -14,7 +14,7 @@
 	{% block head %}
 	<title>
 		{{- hippie.titlePrefix -}}
-		{% block title %}{% endblock -%}
+		{% block title %}{{ title }}{% endblock -%}
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid
index 6189ca9..f2e0ce1 100644
--- a/source/templates/hippie/status.liquid
+++ b/source/templates/hippie/status.liquid
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 {% if pageClass %}
-	{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
 {% endif -%}
 {% if bodyClass %}
 	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
@@ -18,7 +18,8 @@
 	{% 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="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 -%}

From 432af47d2c086ae18d84c37ba1a20e497902dc25 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:13:57 +0100
Subject: [PATCH 100/253] feat: Add start screen

- Rename existing ui start screen to tile
- Add start screen
- Search input for DuckDuckGo
- Unfinished portal content
---
 source/screens/demo/examples/start.liquid     | 84 +++++++++++++++++++
 .../examples/ui/{start.liquid => tile.liquid} |  2 +-
 source/style/demo.scss                        |  1 +
 source/style/modules/_start.scss              | 15 ++++
 4 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 source/screens/demo/examples/start.liquid
 rename source/screens/demo/examples/ui/{start.liquid => tile.liquid} (96%)
 create mode 100644 source/style/modules/_start.scss

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/style/demo.scss b/source/style/demo.scss
index 73e17c1..98e355e 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -13,4 +13,5 @@
 @use "modules/portal/portal_module";
 @use "modules/songbook/songbook_module";
 @use "modules/demo/demo_module";
+@use "modules/start";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
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

From fcdbfb41ef7bd5946d9c953f6752ddd6c0bec375 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:29:19 +0100
Subject: [PATCH 101/253] feat: Add clock screen

- New screen for a ring clock
- Add a canvas with the first ring
- No functionality yet
---
 source/screens/demo/examples/clock.liquid | 34 +++++++++++++++++++++++
 source/style/demo.scss                    |  1 +
 source/style/modules/_clock.scss          |  9 ++++++
 3 files changed, 44 insertions(+)
 create mode 100644 source/screens/demo/examples/clock.liquid
 create mode 100644 source/style/modules/_clock.scss

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
new file mode 100644
index 0000000..4541525
--- /dev/null
+++ b/source/screens/demo/examples/clock.liquid
@@ -0,0 +1,34 @@
+---
+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>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('clock');
+	const ctx = canvas.getContext('2d');
+
+	function drawRing(x, y, outerRadius, innerRadius, color) {
+		ctx.beginPath();
+		ctx.arc(x, y, outerRadius, 0, Math.PI * 2);
+		ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
+		ctx.closePath();
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	drawRing(256, 256, 128, 96, 'black');
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/demo.scss b/source/style/demo.scss
index 98e355e..fe2b7e8 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -14,4 +14,5 @@
 @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..74265da
--- /dev/null
+++ b/source/style/modules/_clock.scss
@@ -0,0 +1,9 @@
+@use "../../hippie-style/hippie";
+
+.body_clock {
+	main {
+		@extend .sec_main_center;
+		display: flex;
+		justify-content: center;
+	}
+}
\ No newline at end of file

From dfa315310f011d499eb509a4cde8950bc048971a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:35:39 +0100
Subject: [PATCH 102/253] feat: Update clock

- Change how the arc is drawn
- Update the ring according to seconds
---
 source/screens/demo/examples/clock.liquid | 28 +++++++++++++++++------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4541525..1ef49bc 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -20,15 +20,29 @@ tags:
 	const canvas = document.getElementById('clock');
 	const ctx = canvas.getContext('2d');
 
-	function drawRing(x, y, outerRadius, innerRadius, color) {
+	function drawRing(seconds) {
+		const centerX = canvas.width / 2;
+		const centerY = canvas.height / 2;
+		const radius = 128;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		const startAngle = -0.5 * Math.PI; // Start at the top
+		const endAngle = startAngle + (2 * Math.PI * (seconds / 60));
+
 		ctx.beginPath();
-		ctx.arc(x, y, outerRadius, 0, Math.PI * 2);
-		ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
-		ctx.closePath();
-		ctx.fillStyle = color;
-		ctx.fill();
+		ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+		ctx.lineWidth = 16;
+		ctx.strokeStyle = 'black';
+		ctx.stroke();
 	}
 
-	drawRing(256, 256, 128, 96, 'black');
+	function updateCircle() {
+		const currentSeconds = new Date().getSeconds();
+		drawRing(currentSeconds);
+	}
+
+	updateCircle();
+	setInterval(updateCircle, 1000);
 </script>
 {% endblock %}
\ No newline at end of file

From 1e874c4ac84af92439524e551fd6035d85fb80a1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:43:10 +0100
Subject: [PATCH 103/253] feat: Add elements to clock

Add rings for minutes and hours.
---
 source/screens/demo/examples/clock.liquid | 31 +++++++++++++++--------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 1ef49bc..054b628 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -20,26 +20,37 @@ tags:
 	const canvas = document.getElementById('clock');
 	const ctx = canvas.getContext('2d');
 
-	function drawRing(seconds) {
+	function drawCircle(seconds, minutes, hours) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
 		const radius = 128;
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-		const startAngle = -0.5 * Math.PI; // Start at the top
-		const endAngle = startAngle + (2 * Math.PI * (seconds / 60));
+		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 = 'black';
-		ctx.stroke();
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+			ctx.lineWidth = 16;
+			ctx.strokeStyle = strokeStyle;
+			ctx.stroke();
+		}
+
+		drawArc(seconds, 60, radius, 'black');
+		drawArc(minutes, 60, radius - 20, 'lightgrey');
+		// drawArc(hours % 12, 12, radius - 40, 'white');
+		drawArc(hours, 24, radius - 40, 'white');
 	}
 
 	function updateCircle() {
-		const currentSeconds = new Date().getSeconds();
-		drawRing(currentSeconds);
+		const currentDate = new Date();
+		const currentSeconds = currentDate.getSeconds();
+		const currentMinutes = currentDate.getMinutes();
+		const currentHours = currentDate.getHours();
+
+		drawCircle(currentSeconds, currentMinutes, currentHours);
 	}
 
 	updateCircle();

From 847c4a9f6bad98445761846badd0635867730b6c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:57:43 +0100
Subject: [PATCH 104/253] feat: Update clock

Add switch for 12/24-hour format.
---
 source/screens/demo/examples/clock.liquid | 17 +++++++++++++++--
 source/style/modules/_clock.scss          |  5 +++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 054b628..4e4c8de 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -10,6 +10,9 @@ tags:
 {% block body %}
 <main>
 	<canvas id="clock" width="512" height="512"></canvas>
+	<p>
+		<button id="toggleFormat">12-Stunden-Format</button>
+	</p>
 </main>
 {% endblock %}
 
@@ -19,6 +22,12 @@ tags:
 	// Page script
 	const canvas = document.getElementById('clock');
 	const ctx = canvas.getContext('2d');
+	let is24HourFormat = true;
+
+	document.getElementById('toggleFormat').addEventListener('click', () => {
+		is24HourFormat = !is24HourFormat;
+		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+	});
 
 	function drawCircle(seconds, minutes, hours) {
 		const centerX = canvas.width / 2;
@@ -40,8 +49,12 @@ tags:
 
 		drawArc(seconds, 60, radius, 'black');
 		drawArc(minutes, 60, radius - 20, 'lightgrey');
-		// drawArc(hours % 12, 12, radius - 40, 'white');
-		drawArc(hours, 24, radius - 40, 'white');
+		drawArc(
+			is24HourFormat ? hours : hours % 12,
+			is24HourFormat ? 24 : 12,
+			radius - 40,
+			'white'
+		);
 	}
 
 	function updateCircle() {
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 74265da..537190f 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -4,6 +4,11 @@
 	main {
 		@extend .sec_main_center;
 		display: flex;
+		flex-flow: column nowrap;
 		justify-content: center;
 	}
+
+	p {
+		text-align: center;
+	}
 }
\ No newline at end of file

From f257a44d890c3ba47c37f58c3b581b6cc6957ff2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 13:05:25 +0100
Subject: [PATCH 105/253] feat: Add day of week and month to clock

---
 source/screens/demo/examples/clock.liquid | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4e4c8de..b90b555 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -29,7 +29,7 @@ tags:
 		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawCircle(seconds, minutes, hours) {
+	function drawCircle(seconds, minutes, hours, dayOfWeek, month) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
 		const radius = 128;
@@ -55,6 +55,8 @@ tags:
 			radius - 40,
 			'white'
 		);
+		drawArc(dayOfWeek, 7, radius - 60, '#fad803');
+		drawArc(month, 12, radius - 80, '#d30a51');
 	}
 
 	function updateCircle() {
@@ -62,8 +64,10 @@ tags:
 		const currentSeconds = currentDate.getSeconds();
 		const currentMinutes = currentDate.getMinutes();
 		const currentHours = currentDate.getHours();
+		const currentDayOfWeek = currentDate.getDay(); // Get current day of the week (0-6, where 0 is Sunday)
+		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 
-		drawCircle(currentSeconds, currentMinutes, currentHours);
+		drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth);
 	}
 
 	updateCircle();

From 9e560d7e62e959a146175ae32316f78d060cab84 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 13:09:16 +0100
Subject: [PATCH 106/253] feat: More clock work

Add function to change start of week.
---
 source/screens/demo/examples/clock.liquid | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index b90b555..b0bccd8 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -64,12 +64,18 @@ tags:
 		const currentSeconds = currentDate.getSeconds();
 		const currentMinutes = currentDate.getMinutes();
 		const currentHours = currentDate.getHours();
-		const currentDayOfWeek = currentDate.getDay(); // Get current day of the week (0-6, where 0 is Sunday)
+		const currentDayOfWeek = getNumericWeekday(currentDate);
 		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 
 		drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth);
 	}
 
+	// TODO: Parameter für Wochenstart ergänzen
+	function getNumericWeekday(date) {
+		const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
+		return (weekday === 0) ? 7 : weekday;
+	}
+
 	updateCircle();
 	setInterval(updateCircle, 1000);
 </script>

From 86fce27554b672e7f046615abf8601593f489ee2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 13:21:25 +0100
Subject: [PATCH 107/253] feat: More elements for clock and style change

- Add day of month
- Clock uses maximum canvas size
---
 source/screens/demo/examples/clock.liquid | 33 +++++++++++++++++------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index b0bccd8..ad98667 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -29,10 +29,12 @@ tags:
 		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawCircle(seconds, minutes, hours, dayOfWeek, month) {
+	function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
-		const radius = 128;
+		const lineWidth = 16;
+		const lineGap = 8;
+		const maxSize = canvas.width / 2 - lineWidth;
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -47,16 +49,17 @@ tags:
 			ctx.stroke();
 		}
 
-		drawArc(seconds, 60, radius, 'black');
-		drawArc(minutes, 60, radius - 20, 'lightgrey');
+		drawArc(seconds, 60, maxSize, 'black');
+		drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
 		drawArc(
 			is24HourFormat ? hours : hours % 12,
 			is24HourFormat ? 24 : 12,
-			radius - 40,
+			maxSize - (lineWidth + lineGap) * 2,
 			'white'
 		);
-		drawArc(dayOfWeek, 7, radius - 60, '#fad803');
-		drawArc(month, 12, radius - 80, '#d30a51');
+		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803');
+		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51');
+		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b');
 	}
 
 	function updateCircle() {
@@ -65,9 +68,19 @@ tags:
 		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());
 
-		drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth);
+		drawCircle(
+			currentSeconds,
+			currentMinutes,
+			currentHours,
+			currentDayOfWeek,
+			currentDayOfMonth,
+			currentMonth,
+			daysInCurrentMonth
+		);
 	}
 
 	// TODO: Parameter für Wochenstart ergänzen
@@ -76,6 +89,10 @@ tags:
 		return (weekday === 0) ? 7 : weekday;
 	}
 
+	function daysInMonth(month, year) {
+		return new Date(year, month, 0).getDate();
+	}
+
 	updateCircle();
 	setInterval(updateCircle, 1000);
 </script>

From 1a1badc78679657d61928fd87a939ea2ce1af8d5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 13:27:46 +0100
Subject: [PATCH 108/253] feat: Update clock to use color from CSS

---
 source/screens/demo/examples/clock.liquid |  9 ++++++---
 source/style/modules/_clock.scss          | 12 ++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ad98667..3a36cbd 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -23,6 +23,9 @@ tags:
 	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;
@@ -57,9 +60,9 @@ tags:
 			maxSize - (lineWidth + lineGap) * 2,
 			'white'
 		);
-		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803');
-		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51');
-		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b');
+		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 updateCircle() {
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 537190f..17a1f88 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,5 +1,17 @@
 @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;

From 15bfbcc97bf4a11a554d20bb3b0f407f73fe42bd Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 23 Nov 2025 14:17:24 +0100
Subject: [PATCH 109/253] feat: Update clock

Display full circle when seconds or minutes turn to 0.
---
 source/screens/demo/examples/clock.liquid | 24 ++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 3a36cbd..da8f5a4 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -32,7 +32,7 @@ tags:
 		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
 		const lineWidth = 16;
@@ -52,8 +52,18 @@ tags:
 			ctx.stroke();
 		}
 
-		drawArc(seconds, 60, maxSize, 'black');
-		drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
+		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,
@@ -65,7 +75,7 @@ tags:
 		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
 	}
 
-	function updateCircle() {
+	function updateRings() {
 		const currentDate = new Date();
 		const currentSeconds = currentDate.getSeconds();
 		const currentMinutes = currentDate.getMinutes();
@@ -75,7 +85,7 @@ tags:
 		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
-		drawCircle(
+		drawRings(
 			currentSeconds,
 			currentMinutes,
 			currentHours,
@@ -96,7 +106,7 @@ tags:
 		return new Date(year, month, 0).getDate();
 	}
 
-	updateCircle();
-	setInterval(updateCircle, 1000);
+	updateRings();
+	setInterval(updateRings, 1000);
 </script>
 {% endblock %}
\ No newline at end of file

From 29c705f272cb86d1bea9c52ecd8cdf004932fb3e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 23 Nov 2025 14:17:46 +0100
Subject: [PATCH 110/253] feat: Add 10print screen

---
 source/screens/demo/examples/10print.liquid | 73 +++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 source/screens/demo/examples/10print.liquid

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

From 3168d6cb7eb1eb8959528c3d40aa88a5120e6992 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 23 Nov 2025 14:18:20 +0100
Subject: [PATCH 111/253] feat: Add simple blog structure

---
 source/screens/demo/examples/blog.njk        | 51 ++++++++++++++++++++
 source/screens/demo/examples/blog/article.md | 11 +++++
 2 files changed, 62 insertions(+)
 create mode 100644 source/screens/demo/examples/blog.njk
 create mode 100644 source/screens/demo/examples/blog/article.md

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

From eea7a08e3a6b183318e34cedaf226b61871c0680 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 1 Dec 2025 17:10:58 +0100
Subject: [PATCH 112/253] chore: Repo maintenance

- Change submodule hippie-style to development branch by default
- Change hippie-script dependency to https instead of git, because of an error with npm install
- Audit dependencies with npm audit fix
---
 .gitmodules       |   2 +-
 package-lock.json | 127 +++++++++++++++++++++++++++-------------------
 package.json      |   2 +-
 3 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/.gitmodules b/.gitmodules
index 75c5b90..068fd29 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,4 +1,4 @@
 [submodule "source/style/hippie-style"]
 	path = source/style/hippie-style
 	url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git
-	branch = main
+	branch = development
diff --git a/package-lock.json b/package-lock.json
index 620aac8..1cb917f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
         "bootstrap-icons": "^1.13.1",
-        "hippie-script": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
+        "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
         "jquery": "^3.7.1",
         "sass": "^1.93.0"
       },
@@ -643,9 +643,10 @@
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
     "node_modules/assert-never": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
-      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.4.0.tgz",
+      "integrity": "sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==",
+      "license": "MIT"
     },
     "node_modules/async": {
       "version": "3.2.5",
@@ -656,6 +657,7 @@
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
       "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.9.6"
       },
@@ -732,20 +734,22 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -854,9 +858,10 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -933,7 +938,8 @@
     "node_modules/doctypes": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ=="
+      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
+      "license": "MIT"
     },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
@@ -1000,9 +1006,10 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/ejs": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "jake": "^10.8.5"
       },
@@ -1133,9 +1140,10 @@
       }
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -1152,9 +1160,10 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1389,7 +1398,7 @@
     },
     "node_modules/hippie-script": {
       "version": "1.2.1",
-      "resolved": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#dfc13e61586fbf466a7bbdb5667c5b02f41abd44",
+      "resolved": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#dfc13e61586fbf466a7bbdb5667c5b02f41abd44",
       "license": "MIT"
     },
     "node_modules/htmlparser2": {
@@ -1536,6 +1545,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -1599,12 +1609,14 @@
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g=="
+      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
+      "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "license": "MIT",
       "dependencies": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -1777,11 +1789,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -2002,9 +2015,10 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+      "license": "MIT"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -2103,11 +2117,12 @@
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
     },
     "node_modules/pug": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
-      "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz",
+      "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==",
+      "license": "MIT",
       "dependencies": {
-        "pug-code-gen": "^3.0.2",
+        "pug-code-gen": "^3.0.3",
         "pug-filters": "^4.0.0",
         "pug-lexer": "^5.0.1",
         "pug-linker": "^4.0.0",
@@ -2121,6 +2136,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
       "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "license": "MIT",
       "dependencies": {
         "constantinople": "^4.0.1",
         "js-stringify": "^1.0.2",
@@ -2128,24 +2144,26 @@
       }
     },
     "node_modules/pug-code-gen": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
-      "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz",
+      "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==",
+      "license": "MIT",
       "dependencies": {
         "constantinople": "^4.0.1",
         "doctypes": "^1.1.0",
         "js-stringify": "^1.0.2",
         "pug-attrs": "^3.0.0",
-        "pug-error": "^2.0.0",
-        "pug-runtime": "^3.0.0",
+        "pug-error": "^2.1.0",
+        "pug-runtime": "^3.0.1",
         "void-elements": "^3.1.0",
         "with": "^7.0.0"
       }
     },
     "node_modules/pug-error": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
-      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz",
+      "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==",
+      "license": "MIT"
     },
     "node_modules/pug-filters": {
       "version": "4.0.0",
@@ -2199,7 +2217,8 @@
     "node_modules/pug-runtime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
+      "license": "MIT"
     },
     "node_modules/pug-strip-comments": {
       "version": "2.0.0",
@@ -2530,6 +2549,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -2571,6 +2591,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2593,6 +2614,7 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
       "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.9.6",
         "@babel/types": "^7.9.6",
@@ -2614,9 +2636,10 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/package.json b/package.json
index 3da5d70..49351cc 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   "dependencies": {
     "@11ty/eleventy": "^2.0.1",
     "bootstrap-icons": "^1.13.1",
-    "hippie-script": "git+ssh://sthag@quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
+    "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
     "jquery": "^3.7.1",
     "sass": "^1.93.0"
   }

From fe8008c5b535166cbbb91a8772a52cea02b6e551 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 1 Dec 2025 17:12:05 +0100
Subject: [PATCH 113/253] fix: Path to hippie-style

---
 source/style/modules/_clock.scss | 2 +-
 source/style/modules/_start.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 17a1f88..fe361b7 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,4 +1,4 @@
-@use "../../hippie-style/hippie";
+@use "../hippie-style/hippie";
 
 :root {
 	--clock-color-yellow: rgb(250, 216, 3);
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
index 7d790a3..031f7f7 100644
--- a/source/style/modules/_start.scss
+++ b/source/style/modules/_start.scss
@@ -1,4 +1,4 @@
-@use "../../hippie-style/hippie";
+@use "../hippie-style/hippie";
 
 .body_start {
 	main {

From 9696442a9159a4231c986f51d3805cf692a869fd Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 9 Feb 2026 19:09:02 +0100
Subject: [PATCH 114/253] feat: Remove cases that cannot happen

Optimize HippieTaskBar by removing cases that cannot happen.
---
 source/code/windows.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/source/code/windows.js b/source/code/windows.js
index c7ab166..32a3484 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -49,8 +49,6 @@ class HippieTaskBar {
 
 	onMouseMove(event) {
 		if (this.isDragging) {
-			if (!this.isDragging) return;
-
 			const closestEdge = getClosestEdge(this.placeholder);
 			const borderRadius = '4px';
 			const attributes = {
@@ -121,7 +119,6 @@ class HippieTaskBar {
 		if (event.target === this.placeholder) {
 			console.debug('Drag mode disabled');
 
-			if (!this.isDragging) return;
 			this.isDragging = false;
 
 			this.snapToEdges();

From 7912b002a26347a20a28fb322d13d4ddccda8d6d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 9 Feb 2026 21:08:30 +0100
Subject: [PATCH 115/253] feat: Change edge detection for HippieTaskBar

- Add position to options
- New function for edge detection according to mouse position
- set and use options.position
---
 .jshintrc                 |  3 ++-
 source/code/hippie/app.js | 27 ++++++++++++++++++++++-----
 source/code/windows.js    | 12 +++++-------
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index cfc5480..98b8bf3 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -95,7 +95,8 @@
 		"TimeDisplay": true,
 		"DateDisplay": true,
 		"checkButtonAndTarget": true,
-		"getClosestEdge": true,
+		"getClosestEdgeToElement": true,
+		"getClosestEdgeToMouse": true,
 		"centerElementUnderCursor": true,
 		"setAttributesAccordingToPosition": true,
 		"HippieTaskBar": true
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 05b09b3..c93aa7a 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -346,20 +346,37 @@ function checkButtonAndTarget(event, element, button = 0) {
 	);
 }
 
-function getClosestEdge(element) {
+function getClosestEdgeToElement(element) {
+	'use strict';
+
 	const rect = element.getBoundingClientRect();
-	const windowWidth = window.innerWidth;
-	const windowHeight = window.innerHeight;
 	const distances = {
 		top: rect.top,
-		right: windowWidth - rect.right,
-		bottom: windowHeight - rect.bottom,
+		right: window.innerWidth - rect.right,
+		bottom: window.innerHeight - rect.bottom,
 		left: rect.left
 	};
 
 	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 }
 
+function getClosestEdgeToMouse(event) {
+	'use strict';
+
+	const mouseX = event.clientX;
+	const mouseY = event.clientY;
+	const distances = {
+		left: mouseX,
+		right: window.innerWidth - mouseX,
+		top: mouseY,
+		bottom: window.innerHeight - mouseY
+	};
+
+	return Object.keys(distances).reduce((a, b) =>
+		distances[a] < distances[b] ? a : b
+	);
+}
+
 function centerElementUnderCursor(event, element) {
 	const offsetX = element.getBoundingClientRect().width / 2;
 	const offsetY = element.getBoundingClientRect().height / 2;
diff --git a/source/code/windows.js b/source/code/windows.js
index 32a3484..8a115a9 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -8,6 +8,7 @@ class HippieTaskBar {
 		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
+			position: 'bottom',
 			date: {
 				year: 'numeric',
 				month: '2-digit',
@@ -30,7 +31,7 @@ class HippieTaskBar {
 		this.element.querySelector('.clock').appendChild(dateElement);
 		this.date = new DateDisplay(dateElement, this.options.date);
 
-		this.setOptions('bottom');
+		this.setOptions(this.options.position);
 	}
 
 	onMouseDown(event) {
@@ -49,7 +50,7 @@ class HippieTaskBar {
 
 	onMouseMove(event) {
 		if (this.isDragging) {
-			const closestEdge = getClosestEdge(this.placeholder);
+			this.options.position = getClosestEdgeToMouse(event);
 			const borderRadius = '4px';
 			const attributes = {
 				top: {
@@ -110,7 +111,7 @@ class HippieTaskBar {
 				}
 			};
 
-			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
+			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -136,11 +137,8 @@ class HippieTaskBar {
 		this.element.style.display = '';
 	}
 
-	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
-		const closestEdge = getClosestEdge(this.placeholder);
-
-		this.setOptions(closestEdge);
+		this.setOptions(this.options.position);
 		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 

From 9ce027285cf62c184332038e9ca543867b0f990b Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 9 Feb 2026 21:17:53 +0100
Subject: [PATCH 116/253] chore: Reformat jshint stuff

- Remove comments from jshint
- Replace " with '
- Replace var with const
---
 .jshintrc                 | 161 +++++++++++++++++---------------------
 source/code/hippie/app.js |  67 ++++++++--------
 2 files changed, 106 insertions(+), 122 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index 98b8bf3..7fe438c 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,93 +1,74 @@
 {
-    // JSHint Default Configuration File (as on JSHint website)
-    // See http://jshint.com/docs/ for more details
-
-    "maxerr"        : 50,       // {int} Maximum error before stopping
-
-    // Enforcing
-    "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
-    "camelcase"     : false,    // true: Identifiers must be in camelCase
-    "curly"         : false,     // true: Require {} for every new block or scope
-    "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
-    "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
-    "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
-    "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
-    "latedef"       : true,     // true: Require variables/functions to be defined before being used
-    "newcap"        : true,     // true: Require capitalization of all constructor functions e.g. `new F()`
-    "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
-    "noempty"       : true,     // true: Prohibit use of empty blocks
-    "nonbsp"        : true,     // true: Prohibit `non-breaking whitespace` characters.
-    "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
-    "plusplus"      : false,    // true: Prohibit use of `++` and `--`
-    "quotmark"      : true,     // Quotation mark consistency:
-                                //   false    : do nothing (default)
-                                //   true     : ensure whatever is used is consistent
-                                //   "single" : require single quotes
-                                //   "double" : require double quotes
-    "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
-    "unused"        : true,     // Unused variables:
-                                //   true     : all variables, last function parameter
-                                //   "vars"   : all variables only
-                                //   "strict" : all variables, all function parameters
-    "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
-    "maxparams"     : false,    // {int} Max number of formal params allowed per function
-    "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
-    "maxstatements" : false,    // {int} Max number statements per function
-    "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
-    "maxlen"        : false,    // {int} Max number of characters per line
-    "varstmt"       : false,    // true: Disallow any var statements. Only `let` and `const` are allowed.
-
-    // Relaxing
-    "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
-    "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
-    "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
-    "eqnull"        : false,     // true: Tolerate use of `== null`
-    "esversion"     : 9,         // {int} Specify the ECMAScript version to which the code must adhere.
-    "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
-                                 // (ex: `for each`, multiple try/catch, function expression…)
-    "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
-    "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
-    "funcscope"     : false,     // true: Tolerate defining variables inside control statements
-    "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
-    "iterator"      : false,     // true: Tolerate using the `__iterator__` property
-    "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
-    "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
-    "laxcomma"      : false,     // true: Tolerate comma-first style coding
-    "loopfunc"      : false,     // true: Tolerate functions being defined in loops
-    "multistr"      : false,     // true: Tolerate multi-line strings
-    "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
-    "notypeof"      : false,     // true: Tolerate invalid typeof operator values
-    "proto"         : false,     // true: Tolerate using the `__proto__` property
-    "scripturl"     : false,     // true: Tolerate script-targeted URLs
-    "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
-    "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
-    "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
-    "validthis"     : false,     // true: Tolerate using this in a non-constructor function
-
-    // Environments
-    "browser"       : true,     // Web Browser (window, document, etc)
-    "browserify"    : false,    // Browserify (node.js code in the browser)
-    "couch"         : false,    // CouchDB
-    "devel"         : true,     // Development/debugging (alert, confirm, etc)
-    "dojo"          : false,    // Dojo Toolkit
-    "jasmine"       : false,    // Jasmine
-    "jquery"        : true,     // jQuery
-    "mocha"         : true,     // Mocha
-    "mootools"      : false,    // MooTools
-    "node"          : false,    // Node.js
-    "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
-    "phantom"       : false,    // PhantomJS
-    "prototypejs"   : false,    // Prototype and Scriptaculous
-    "qunit"         : false,    // QUnit
-    "rhino"         : false,    // Rhino
-    "shelljs"       : false,    // ShellJS
-    "typed"         : false,    // Globals for typed array constructions
-    "worker"        : false,    // Web Workers
-    "wsh"           : false,    // Windows Scripting Host
-    "yui"           : false,    // Yahoo User Interface
-
-    // Custom globals
-    "globals" : {               // additional predefined global variables
+	"maxerr": 50,
+	"bitwise": true,
+	"camelcase": false,
+	"curly": false,
+	"eqeqeq": true,
+	"forin": true,
+	"freeze": true,
+	"immed": false,
+	"latedef": true,
+	"newcap": true,
+	"noarg": true,
+	"noempty": true,
+	"nonbsp": true,
+	"nonew": false,
+	"plusplus": false,
+	"quotmark": true,
+	"undef": true,
+	"unused": true,
+	"strict": true,
+	"maxparams": false,
+	"maxdepth": false,
+	"maxstatements": false,
+	"maxcomplexity": false,
+	"maxlen": false,
+	"varstmt": false,
+	"asi": false,
+	"boss": false,
+	"debug": false,
+	"eqnull": false,
+	"esversion": 9,
+	"moz": false,
+	"evil": false,
+	"expr": false,
+	"funcscope": false,
+	"globalstrict": false,
+	"iterator": false,
+	"lastsemic": false,
+	"laxbreak": false,
+	"laxcomma": false,
+	"loopfunc": false,
+	"multistr": false,
+	"noyield": false,
+	"notypeof": false,
+	"proto": false,
+	"scripturl": false,
+	"shadow": false,
+	"sub": false,
+	"supernew": false,
+	"validthis": false,
+	"browser": true,
+	"browserify": false,
+	"couch": false,
+	"devel": true,
+	"dojo": false,
+	"jasmine": false,
+	"jquery": true,
+	"mocha": true,
+	"mootools": false,
+	"node": false,
+	"nonstandard": false,
+	"phantom": false,
+	"prototypejs": false,
+	"qunit": false,
+	"rhino": false,
+	"shelljs": false,
+	"typed": false,
+	"worker": false,
+	"wsh": false,
+	"yui": false,
+	"globals": {
 		"debugOn": true,
 		"hippie": true,
 		"viewHover": true,
@@ -100,5 +81,5 @@
 		"centerElementUnderCursor": true,
 		"setAttributesAccordingToPosition": true,
 		"HippieTaskBar": true
-    }
+	}
 }
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index c93aa7a..e1b1634 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -1,5 +1,5 @@
 // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
-// Bennung und Beschreibungen verbessern.
+// Benennung und Beschreibungen verbessern.
 
 // This is called everytime
 function setup() {
@@ -56,7 +56,7 @@ function HippieScroll($tp, $dn) {
 	});
 	$dn.click(function (event) {
 		event.preventDefault();
-		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
+		const 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);
@@ -91,7 +91,7 @@ function HippieMeta($ma, $pp) {
 	let metaOn = false;
 
 	$ma.click(function () {
-		var $wrap, $pop;
+		const $wrap, $pop;
 
 		// if (metaOn !== true) {
 		if (!metaOn) {
@@ -162,23 +162,25 @@ function HippieMeta($ma, $pp) {
 
 // Sets the href attribute to mailto: with given information
 function composeMail(tag, name, prov, suffix, text, topic) {
-	let trigger = tag.indexOf(".");
+	'use strict';
+
+	let trigger = tag.indexOf('.');
 	let mailString = name + '@' + prov + '.' + suffix;
-	let textString = mailString.replace(/@/g, "(at)");
-	let descString = "Nachricht an " + mailString;
+	let textString = mailString.replace(/@/g, '(at)');
+	let descString = 'Nachricht an ' + mailString;
 
 	if (!text) {
 		text = mailString;
-	} else if (text === "at") {
+	} else if (text === 'at') {
 		text = textString;
-	} else if (text === "to") {
+	} else if (text === 'to') {
 		text = descString;
 	}
 
 	if (topic) {
-		topic = "?subject=" + topic;
+		topic = '?subject=' + topic;
 	} else {
-		topic = "";
+		topic = '';
 	}
 
 	if (trigger === -1) {
@@ -186,7 +188,7 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 		const elContent = el.innerHTML;
 
 		el.innerHTML = elContent + text;
-		el.setAttribute("href", "mailto:" + mailString + topic);
+		el.setAttribute('href', 'mailto:' + mailString + topic);
 	} else {
 		const els = document.getElementsByClassName(tag.slice(1));
 
@@ -194,7 +196,7 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 			const elContent = el.innerHTML;
 
 			el.innerHTML = elContent + text;
-			el.setAttribute("href", "mailto:" + mailString + topic);
+			el.setAttribute('href', 'mailto:' + mailString + topic);
 		}
 	}
 }
@@ -378,6 +380,8 @@ function getClosestEdgeToMouse(event) {
 }
 
 function centerElementUnderCursor(event, element) {
+	'use strict';
+
 	const offsetX = element.getBoundingClientRect().width / 2;
 	const offsetY = element.getBoundingClientRect().height / 2;
 	const x = event.clientX - offsetX;
@@ -388,6 +392,8 @@ function centerElementUnderCursor(event, element) {
 }
 
 function setAttributesAccordingToPosition(element, position, attributes) {
+	'use strict';
+
 	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
 	Object.keys(attributes[position].styles).forEach(key => {
 		element.style[key] = '';
@@ -457,17 +463,15 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-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 D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
 	var DNumb = Math.floor(now.getDate());
 	var MNumb = Math.floor(now.getMonth());
-	var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
+	var M = ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', 'November', 'Dezember'];
 	var y = Math.floor(now.getYear());
 	if (y < 999) y += 1900;
 
@@ -518,23 +522,22 @@ function ongoing() {
 	var moonPosX = 0;
 	var moonPosY = 0;
 
-	var sun = $("#sun").css({
-		"left": (s / 60) * travelWidth,
-		"top": (m / 60) * travelHeight
+	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);
+	$('#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) {
@@ -542,7 +545,7 @@ function zeroFill(number, width) {
 	if (width > 0) {
 		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
 	}
-	return number + ""; // always return a string
+	return number + ''; // always return a string
 }
 
 //Länge der Balken im Diagram berechnen
@@ -562,7 +565,7 @@ String.prototype.transform = function () {
 }
 //Array Element erweitern
 Array.prototype.arrayAdd = function () {
-	return eval(this.join("+"));
+	return eval(this.join('+'));
 }
 
 //Speicherplatz in Prozent berechnen

From d6827e6dfd1e3f0c068ec4958b495614dc05fbed Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 9 Feb 2026 21:29:00 +0100
Subject: [PATCH 117/253] fix: const to let

---
 source/code/hippie/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index e1b1634..e5a26b8 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -91,7 +91,7 @@ function HippieMeta($ma, $pp) {
 	let metaOn = false;
 
 	$ma.click(function () {
-		const $wrap, $pop;
+		let $wrap, $pop;
 
 		// if (metaOn !== true) {
 		if (!metaOn) {

From 148f4e0a21cb6e5576ecafaa3d381ed5021e5855 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 12 Feb 2026 18:36:06 +0100
Subject: [PATCH 118/253] chore: Update jshint

Remove unused options and environments.
---
 .jshintrc | 73 ++++++++-----------------------------------------------
 1 file changed, 10 insertions(+), 63 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index 7fe438c..29388b2 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,78 +1,25 @@
 {
-	"maxerr": 50,
 	"bitwise": true,
-	"camelcase": false,
-	"curly": false,
+	"browser": true,
+	"curly": true,
+	"devel": true,
 	"eqeqeq": true,
+	"esversion": 9,
 	"forin": true,
 	"freeze": true,
-	"immed": false,
-	"latedef": true,
-	"newcap": true,
+	"jquery": true,
+	"maxerr": 50,
 	"noarg": true,
 	"noempty": true,
-	"nonbsp": true,
-	"nonew": false,
-	"plusplus": false,
-	"quotmark": true,
-	"undef": true,
-	"unused": true,
 	"strict": true,
-	"maxparams": false,
-	"maxdepth": false,
-	"maxstatements": false,
-	"maxcomplexity": false,
-	"maxlen": false,
-	"varstmt": false,
-	"asi": false,
-	"boss": false,
-	"debug": false,
-	"eqnull": false,
-	"esversion": 9,
-	"moz": false,
-	"evil": false,
-	"expr": false,
-	"funcscope": false,
-	"globalstrict": false,
-	"iterator": false,
-	"lastsemic": false,
-	"laxbreak": false,
-	"laxcomma": false,
-	"loopfunc": false,
-	"multistr": false,
-	"noyield": false,
-	"notypeof": false,
-	"proto": false,
-	"scripturl": false,
-	"shadow": false,
-	"sub": false,
-	"supernew": false,
-	"validthis": false,
-	"browser": true,
-	"browserify": false,
-	"couch": false,
-	"devel": true,
-	"dojo": false,
-	"jasmine": false,
-	"jquery": true,
-	"mocha": true,
-	"mootools": false,
-	"node": false,
-	"nonstandard": false,
-	"phantom": false,
-	"prototypejs": false,
-	"qunit": false,
-	"rhino": false,
-	"shelljs": false,
-	"typed": false,
-	"worker": false,
-	"wsh": false,
-	"yui": false,
+	"undef": true,
+	"unused": false,
 	"globals": {
-		"debugOn": true,
+		"HIPPIE": false,
 		"hippie": true,
 		"viewHover": true,
 		"basicEase": true,
+		"debugOn": true,
 		"TimeDisplay": true,
 		"DateDisplay": true,
 		"checkButtonAndTarget": true,

From ddbd406fc875c39db6711fb0aded668216864d8e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 11:27:44 +0100
Subject: [PATCH 119/253] feat: Move function to app scope

- Move randomIntFrom() to app.js
- Add global entry to jshint configuration
---
 .jshintrc                 |  2 ++
 source/code/hippie/app.js | 18 ++++++++++++++++++
 source/code/intro.js      | 18 ------------------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index 29388b2..cd80937 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -27,6 +27,8 @@
 		"getClosestEdgeToMouse": true,
 		"centerElementUnderCursor": true,
 		"setAttributesAccordingToPosition": true,
+		"randomIntFrom": false,
+		"replaceLineBreaks": false,
 		"HippieTaskBar": true
 	}
 }
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index e5a26b8..9fa1e9d 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -405,6 +405,24 @@ function setAttributesAccordingToPosition(element, position, attributes) {
 	});
 }
 
+/**
+ * Gibt eine Zahl zwischen <min> und <max> aus.
+ * Die Werte <min> und <max> sind dabei mit eingeschlossen.
+ * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
+ *
+ * @param {number} min
+ * @param {number} max
+ * @param {number} pos
+ * @returns {number}
+ */
+function randomIntFrom(min, max, pos = 0) {
+	pos = Math.pow(10, pos);
+	min = Math.ceil(min);
+	max = Math.floor(max);
+
+	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/code/intro.js b/source/code/intro.js
index 341df5e..bff5a87 100644
--- a/source/code/intro.js
+++ b/source/code/intro.js
@@ -272,24 +272,6 @@ function loadCore() {
 	});
 }
 
-/**
- * Gibt eine Zahl zwischen <min> und <max> aus.
- * Die Werte <min> und <max> sind dabei mit eingeschlossen.
- * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
- * 
- * @param {number} min 
- * @param {number} max 
- * @param {number} pos 
- * @returns {number}
- */
-function randomIntFrom(min, max, pos = 0) {
-	pos = Math.pow(10, pos);
-	min = Math.ceil(min);
-	max = Math.floor(max);
-
-	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
-}
-
 /**
  * Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
  */

From 1b3a320b17dcfca3510681246d01735d58651032 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 11:39:52 +0100
Subject: [PATCH 120/253] feat: New table screen for ui

- Add table screen to ui examples
- Display table with placeholder content
- Add global function replaceLineBreaks()
---
 source/code/hippie/app.js                    |  14 +++
 source/screens/demo/examples/ui/table.liquid | 101 +++++++++++++++++++
 source/style/modules/ui/_table_module.scss   |  17 ++++
 source/style/ui.scss                         |   1 +
 4 files changed, 133 insertions(+)
 create mode 100755 source/screens/demo/examples/ui/table.liquid
 create mode 100644 source/style/modules/ui/_table_module.scss

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 9fa1e9d..2e69574 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -423,6 +423,20 @@ function randomIntFrom(min, max, pos = 0) {
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 }
 
+/**
+ * Ersetzt \n durch <br>.
+ *
+ * @param {string} text
+ * @returns {string}
+ */
+function replaceLineBreaks(text) {
+	if (text === '' || !text.includes('\n')) {
+		return text;
+	}
+
+	return text.split('\n').join('<br>');
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
new file mode 100755
index 0000000..654a865
--- /dev/null
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -0,0 +1,101 @@
+---
+title: Table
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io">
+	<section>
+		<header class="io">
+			<nav>
+				<button title="add">
+					<i class="bi bi-plus-circle"></i>
+				</button>
+			</nav>
+			<nav></nav>
+		</header>
+		<table>
+			<thead>
+			<tr>
+				<th scope="col">#</th>
+				<th scope="col"></th>
+				<th scope="col">name</th>
+				<th scope="col">random</th>
+				<th scope="col">description</th>
+			</tr>
+			</thead>
+			<tbody></tbody>
+		</table>
+		{% render 'hippie/partials/frame-status.liquid' %}
+	</section>
+</main>
+<template id="default-row">
+	<tr>
+		<th scope="row"></th>
+		<td><i class="bi bi-grip-horizontal"></i></td>
+		<td></td>
+		<td></td>
+		<td></td>
+	</tr>
+</template>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const placeholderNames = [
+		'Mac',
+		'Sonic',
+		'Furiosa',
+		'Leia',
+		'Frisbee',
+		'Ripley',
+		'Motoko',
+		'Lupin',
+		'Yoda',
+		'Spike',
+		'Obelix',
+		'Samus',
+		'Plisken'
+	];
+	const placeholderAttributes = [
+		'blue',
+		'tall',
+		'clever',
+		'true'
+	];
+	const placeholderContents = [
+		'Description - At vero eos et accusam et justo duo dolores et ea rebum.',
+		'',
+		"Content with linebreaks - \nPhasellus finibus mollis diam non posuere. Vestibulum porttitor volutpat consectetur. Duis neque sapien, tincidunt ac odio vel, laoreet ultricies ligula. Suspendisse erat eros, volutpat vel fringilla at, placerat ac nisi. \nNulla arcu elit, facilisis egestas risus ac, aliquet varius sapien. Sed et nisi fringilla nibh ultrices sagittis ac in nisl. \nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porta lectus ac pharetra feugiat. In ligula nunc, porttitor non arcu vel, feugiat tempor mi. Aenean pellentesque ipsum ac ligula pulvinar, vel auctor diam vehicula. Sed at arcu lacus.",
+		'Very long content - Suspendisse lectus orci, convallis vitae sapien et, iaculis cursus magna. Pellentesque ultrices sodales eros eget vehicula. Aliquam tincidunt nulla non finibus ullamcorper. Ut accumsan nisi non aliquam fermentum. Vestibulum sit amet purus eu dolor vulputate pretium in eget libero. Donec vitae quam in leo eleifend semper. Cras mollis orci augue, vitae aliquam quam consequat quis. Donec sed nisi sed nulla ultricies ultricies quis ac erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris euismod mollis neque sit amet varius. In malesuada nibh faucibus orci tincidunt, in elementum sapien pretium. Cras vel urna felis. Proin cursus tempor egestas. Nulla facilisis justo enim. Mauris fermentum, tortor a malesuada facilisis, leo tortor aliquam elit, sed sodales ipsum tortor et tellus.',
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis condimentum quam, bibendum tristique odio.'
+	];
+
+	const tbody = document.querySelector('main.io section > table');
+	const template = document.querySelector('#default-row');
+
+	for (let i = 0; i < 256; i++) {
+		const clone = document.importNode(template.content, true);
+		const tr = clone.querySelector('tr');
+		const th = clone.querySelector('th');
+		const td = clone.querySelectorAll('td');
+
+		const j = i % placeholderNames.length;
+		const k = randomIntFrom(0, placeholderContents.length - 1);
+
+		tr.setAttribute('data-id', i);
+		th.textContent = i + 1;
+		td[1].textContent = placeholderNames[j];
+		td[2].textContent = randomIntFrom(1, i).toString();
+		td[3].innerHTML = replaceLineBreaks(placeholderContents[k]);
+
+		tbody.appendChild(clone);
+	}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_table_module.scss b/source/style/modules/ui/_table_module.scss
new file mode 100644
index 0000000..51896f4
--- /dev/null
+++ b/source/style/modules/ui/_table_module.scss
@@ -0,0 +1,17 @@
+@use "../../hippie-style/hippie";
+
+main.io section > table {
+	table-layout: auto;
+	width: 100%;
+	margin: 0;
+	background-color: hippie.$color_back_io;
+
+	thead > tr > th:first-child {
+		width: 1%;
+	}
+
+	tr > th:first-child {
+		text-align: center;
+	}
+}
+
diff --git a/source/style/ui.scss b/source/style/ui.scss
index da6ecf7..861adf8 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -10,6 +10,7 @@
 @use "modules/ui/game_module";
 @use "modules/ui/gallery_module";
 @use "modules/ui/windows_module";
+@use "modules/ui/table_module";
 
 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;

From 57837110804ea49bd7a56b92450e63494f101e2c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 11:40:16 +0100
Subject: [PATCH 121/253] chore: Change jshint configuration

---
 .jshintrc | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index cd80937..134e601 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,6 +1,5 @@
 {
 	"bitwise": true,
-	"browser": true,
 	"curly": true,
 	"devel": true,
 	"eqeqeq": true,
@@ -8,12 +7,12 @@
 	"forin": true,
 	"freeze": true,
 	"jquery": true,
-	"maxerr": 50,
 	"noarg": true,
 	"noempty": true,
 	"strict": true,
 	"undef": true,
 	"unused": false,
+	"browser": true,
 	"globals": {
 		"HIPPIE": false,
 		"hippie": true,
@@ -22,11 +21,11 @@
 		"debugOn": true,
 		"TimeDisplay": true,
 		"DateDisplay": true,
-		"checkButtonAndTarget": true,
-		"getClosestEdgeToElement": true,
-		"getClosestEdgeToMouse": true,
-		"centerElementUnderCursor": true,
-		"setAttributesAccordingToPosition": true,
+		"checkButtonAndTarget": false,
+		"getClosestEdgeToElement": false,
+		"getClosestEdgeToMouse": false,
+		"centerElementUnderCursor": false,
+		"setAttributesAccordingToPosition": false,
 		"randomIntFrom": false,
 		"replaceLineBreaks": false,
 		"HippieTaskBar": true

From 0dfba8e6eecaab1fb4a84a40faadef8a2250d805 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 11:41:00 +0100
Subject: [PATCH 122/253] feat: Improve CSS declaration for gallery

---
 source/style/modules/ui/_gallery_module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/style/modules/ui/_gallery_module.scss b/source/style/modules/ui/_gallery_module.scss
index 4f8a233..06803fb 100644
--- a/source/style/modules/ui/_gallery_module.scss
+++ b/source/style/modules/ui/_gallery_module.scss
@@ -1,6 +1,6 @@
 @use "../../hippie-style/hippie";
 
-.gallery {
+main.io section > .gallery {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: left;

From f83b5aa258520549c07b1956433720158feba065 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 17:35:09 +0100
Subject: [PATCH 123/253] feat: Move and add functions

- Add global function randomFloatFrom()
- Move getRandomColor() to app
---
 source/code/drag.js                         | 12 -----------
 source/code/hippie/app.js                   | 22 +++++++++++++++++++++
 source/screens/demo/examples/ui/drag.liquid |  1 +
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/source/code/drag.js b/source/code/drag.js
index 01a489a..7bdd8e9 100644
--- a/source/code/drag.js
+++ b/source/code/drag.js
@@ -113,15 +113,3 @@ class NewDiv {
     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/hippie/app.js b/source/code/hippie/app.js
index 2e69574..f00f364 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -423,6 +423,12 @@ function randomIntFrom(min, max, pos = 0) {
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 }
 
+function randomFloatFrom(min, max, dec = 0) {
+	dec = Math.pow(10, dec);
+
+	return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
+}
+
 /**
  * Ersetzt \n durch <br>.
  *
@@ -437,6 +443,22 @@ function replaceLineBreaks(text) {
 	return text.split('\n').join('<br>');
 }
 
+/**
+ * Gibt eine zufällige Farbe als HEX-Wert aus.
+ *
+ * @returns {string}
+ */
+function getRandomColor() {
+	const letters = '0123456789ABCDEF';
+	let color = '#';
+
+	for (let i = 0; i < 6; i++) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+
+	return color;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
index fe8ef43..7b46674 100755
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@@ -22,6 +22,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/drag.js"></script>
 <script>
 	// Get the space element

From a85dbbe27c18d4c90eccdf29ef469d7a72a5df02 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 18:04:07 +0100
Subject: [PATCH 124/253] feat: Additional content and style for table screen

- More columns with placeholder content
- Special styles for textarea and td
- New style for io module
---
 source/screens/demo/examples/ui/table.liquid | 40 ++++++++++++++++----
 source/style/hippie-style                    |  2 +-
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 654a865..eefa18c 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -21,11 +21,14 @@ tags:
 		<table>
 			<thead>
 			<tr>
-				<th scope="col">#</th>
+				<th scope="col" title="Index">#</th>
+				<th scope="col"></th>
+				<th scope="col" title="Position">#</th>
+				<th scope="col">Number</th>
+				<th scope="col">Name</th>
+				<th scope="col">Description</th>
+				<th scope="col">Price</th>
 				<th scope="col"></th>
-				<th scope="col">name</th>
-				<th scope="col">random</th>
-				<th scope="col">description</th>
 			</tr>
 			</thead>
 			<tbody></tbody>
@@ -36,10 +39,27 @@ tags:
 <template id="default-row">
 	<tr>
 		<th scope="row"></th>
-		<td><i class="bi bi-grip-horizontal"></i></td>
+		<td class="io">
+			<nav>
+				<button title="drag"><i class="bi bi-grip-horizontal"></i></button>
+				<button title="expand"><i class="bi bi-arrows-expand-vertical"></i></button>
+			</nav>
+		</td>
 		<td></td>
 		<td></td>
 		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="event"><i class="bi bi-calendar-event"></i></button>
+				<button title="note"><i class="bi bi-journal"></i></button>
+				<button title="delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
 	</tr>
 </template>
 {% render 'hippie/partials/frame-mode.liquid' %}
@@ -80,6 +100,8 @@ tags:
 	const tbody = document.querySelector('main.io section > table');
 	const template = document.querySelector('#default-row');
 
+	const currencyEuro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
+
 	for (let i = 0; i < 256; i++) {
 		const clone = document.importNode(template.content, true);
 		const tr = clone.querySelector('tr');
@@ -91,9 +113,11 @@ tags:
 
 		tr.setAttribute('data-id', i);
 		th.textContent = i + 1;
-		td[1].textContent = placeholderNames[j];
-		td[2].textContent = randomIntFrom(1, i).toString();
-		td[3].innerHTML = replaceLineBreaks(placeholderContents[k]);
+		td[3].textContent = placeholderNames[j];
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+		td[4].firstElementChild.textContent = placeholderContents[k];
+		// td[5].textContent = randomIntFrom(1, i).toString();
+		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
 
 		tbody.appendChild(clone);
 	}
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 4e4f881..0623e81 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483
+Subproject commit 0623e818a49176ca7516a88943e07a882ba5262d

From bbd1a9674e866e985f79266d1cf20cd0e26c78e1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 19:23:10 +0100
Subject: [PATCH 125/253] feat: Replace ui explorer with liquid template

- Explorer screen uses app.liquid layout instead of _app_frame.njk
- Rename to just Explorer
---
 .../screens/demo/examples/ui/explorer.liquid  | 145 +++++++++++++++++
 source/screens/demo/examples/ui/explorer.njk  | 146 ------------------
 2 files changed, 145 insertions(+), 146 deletions(-)
 create mode 100644 source/screens/demo/examples/ui/explorer.liquid
 delete mode 100755 source/screens/demo/examples/ui/explorer.njk

diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid
new file mode 100644
index 0000000..f8e66fa
--- /dev/null
+++ b/source/screens/demo/examples/ui/explorer.liquid
@@ -0,0 +1,145 @@
+---
+title: Explorer
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io">
+	<aside class="io">
+		<nav>
+			<span>location-pane</span>
+			<ul class="vertical">
+				<li>
+					<a class="a_button" href="">
+						<span>Start/Home</span>
+						<i class="bi bi-pin-fill"></i>
+					</a>
+				</li>
+				<li>
+					<a class="a_button" href="">
+						<span>System</span>
+						<i class="bi bi-pin-fill"></i>
+					</a>
+				</li>
+			</ul>
+		</nav>
+		<hr>
+		<nav>
+			<ul class="vertical">
+				<li>
+					<a class="a_button" href="">
+						<span>💽 disc link</span>
+					</a>
+				</li>
+				<li>
+					<a class="a_button" href="">
+						<span>📁 folder link</span>
+					</a>
+				</li>
+				<li>
+					<a class="a_button" href="">
+						<span>🔗 location link</span>
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</aside>
+	<section>
+		<header class="io">
+			<nav>
+				<button title="back">
+					<i class="bi bi-caret-left"></i>
+				</button>
+				<button title="up">
+					<i class="bi bi-caret-up"></i>
+				</button>
+				<button title="forward">
+					<i class="bi bi-caret-right"></i>
+				</button>
+				<button title="reload">
+					<i class="bi bi-arrow-clockwise"></i>
+				</button>
+				<input placeholder="//" type="text">
+			</nav>
+			<nav>
+				<span>location-bar</span>
+				<hr class="vertical">
+				<button title="search">
+					<i class="bi bi-search"></i>
+				</button>
+				<input placeholder="*" type="text">
+			</nav>
+		</header>
+		<header class="io">
+			<nav>
+				<button title="add">
+					<i class="bi bi-plus-circle"></i>
+				</button>
+				<div class="spacer a"></div>
+				<button title="cut">
+					<i class="bi bi-scissors"></i>
+				</button>
+				<button title="copy">
+					<i class="bi bi-copy"></i>
+				</button>
+				<button title="paste">
+					<i class="bi bi-clipboard-check-fill"></i>
+				</button>
+				<div class="spacer b"></div>
+				<button title="delete">
+					<i class="bi bi-trash"></i>
+				</button>
+			</nav>
+			<hr class="vertical">
+			<nav>
+				<ul>
+					<li>
+						<button title="collapse">
+							<i class="bi bi-arrows-collapse"></i>
+						</button>
+					</li>
+					<li>
+						<button title="expand">
+							<i class="bi bi-arrows-expand-vertical"></i>
+						</button>
+					</li>
+				</ul>
+				<span>options-bar</span>
+			</nav>
+			<nav></nav>
+		</header>
+		<div id="content">
+			<table>
+				<thead>
+				<tr>
+					<th>name</th>
+					<th>date</th>
+					<th>type</th>
+					<th>size</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<td>folder</td>
+					<td>YYYY-MM-DD</td>
+					<td>folder</td>
+					<td>4KB</td>
+				</tr>
+				<tr>
+					<td>file</td>
+					<td>YYYY-MM-DD</td>
+					<td>folder</td>
+					<td>1B</td>
+				</tr>
+				</tbody>
+			</table>
+		</div>
+		{% render 'hippie/partials/frame-status.liquid' %}
+	</section>
+</main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
deleted file mode 100755
index c54ea0a..0000000
--- a/source/screens/demo/examples/ui/explorer.njk
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: GUI explorer
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	{{ io.frameHeader('title-bar') }}
-	<main class="io">
-		<aside class="io">
-			<nav>
-				<span>location-pane</span>
-				<ul class="vertical">
-					<li>
-						<a class="a_button" href="">
-							<span>Start/Home</span>
-							<i class="bi bi-pin-fill"></i>
-						</a>
-					</li>
-					<li>
-						<a class="a_button" href="">
-							<span>System</span>
-							<i class="bi bi-pin-fill"></i>
-						</a>
-					</li>
-				</ul>
-			</nav>
-			<hr>
-			<nav>
-				<ul class="vertical">
-					<li>
-						<a class="a_button" href="">
-							<span>💽 disc link</span>
-						</a>
-					</li>
-					<li>
-						<a class="a_button" href="">
-							<span>📁 folder link</span>
-						</a>
-					</li>
-					<li>
-						<a class="a_button" href="">
-							<span>🔗 location link</span>
-						</a>
-					</li>
-				</ul>
-			</nav>
-		</aside>
-		<section>
-			<header class="io">
-				<nav>
-					<button title="back">
-						<i class="bi bi-caret-left"></i>
-					</button>
-					<button title="up">
-						<i class="bi bi-caret-up"></i>
-					</button>
-					<button title="forward">
-						<i class="bi bi-caret-right"></i>
-					</button>
-					<button title="reload">
-						<i class="bi bi-arrow-clockwise"></i>
-					</button>
-					<input placeholder="//" type="text">
-				</nav>
-				<nav>
-					<span>location-bar</span>
-					<hr class="vertical">
-					<button title="search">
-						<i class="bi bi-search"></i>
-					</button>
-					<input placeholder="*" type="text">
-				</nav>
-			</header>
-			<header class="io">
-				<nav>
-					<button title="add">
-						<i class="bi bi-plus-circle"></i>
-					</button>
-					<div class="spacer a"></div>
-					<button title="cut">
-						<i class="bi bi-scissors"></i>
-					</button>
-					<button title="copy">
-						<i class="bi bi-copy"></i>
-					</button>
-					<button title="paste">
-						<i class="bi bi-clipboard-check-fill"></i>
-					</button>
-					<div class="spacer b"></div>
-					<button title="delete">
-						<i class="bi bi-trash"></i>
-					</button>
-				</nav>
-				<hr class="vertical">
-				<nav>
-					<ul>
-						<li>
-							<button title="collapse">
-								<i class="bi bi-arrows-collapse"></i>
-							</button>
-						</li>
-						<li>
-							<button title="expand">
-								<i class="bi bi-arrows-expand-vertical"></i>
-							</button>
-						</li>
-					</ul>
-					<span>options-bar</span>
-				</nav>
-				<nav></nav>
-			</header>
-			<div id="content">
-				<table>
-					<thead>
-						<tr>
-							<th>name</th>
-							<th>date</th>
-							<th>type</th>
-							<th>size</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>folder</td>
-							<td>YYYY-MM-DD</td>
-							<td>folder</td>
-							<td>4KB</td>
-						</tr>
-						<tr>
-							<td>file</td>
-							<td>YYYY-MM-DD</td>
-							<td>folder</td>
-							<td>1B</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			{{ io.statusBar() }}
-		</section>
-	</main>
-	{{ io.frameFooter('mode-bar') }}
-{% endblock %}
\ No newline at end of file

From 498f59a939c1cdf29be088ae268f5c9d1d5d8d84 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 13 Feb 2026 19:57:57 +0100
Subject: [PATCH 126/253] feat: Replace ui cli and tui with liquid versions

---
 source/screens/demo/examples/ui/cli.liquid | 60 +++++++++++++++++++++
 source/screens/demo/examples/ui/cli.njk    | 62 ----------------------
 source/screens/demo/examples/ui/tui.liquid | 13 +++++
 source/screens/demo/examples/ui/tui.njk    | 14 -----
 4 files changed, 73 insertions(+), 76 deletions(-)
 create mode 100644 source/screens/demo/examples/ui/cli.liquid
 delete mode 100755 source/screens/demo/examples/ui/cli.njk
 create mode 100644 source/screens/demo/examples/ui/tui.liquid
 delete mode 100755 source/screens/demo/examples/ui/tui.njk

diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid
new file mode 100644
index 0000000..18f4cd4
--- /dev/null
+++ b/source/screens/demo/examples/ui/cli.liquid
@@ -0,0 +1,60 @@
+---
+title: CLI
+tags:
+- ui
+---
+{% assign bodyClass = "body_cli" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+<div id="cli">
+	<div id="history">
+		<pre>Previous prompt</pre>
+	</div>
+	<div id="line">
+		<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
+		<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
+	</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	function resizeTextArea(textarea) {
+		const {style, value} = textarea;
+
+		style.height = style.minHeight = 'auto';
+		style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
+		style.height = `${textarea.scrollHeight}px`;
+	}
+
+	const textarea = document.getElementById('prompt');
+
+	document
+		.body
+		.addEventListener('click', () => {
+			textarea.focus();
+		});
+
+	textarea.addEventListener('input', () => {
+		resizeTextArea(textarea);
+	});
+
+	window.addEventListener("keydown", (event) => {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+
+			const p = document.createElement("pre");
+
+			p.textContent = event.target.value;
+			document
+				.getElementById("history")
+				.appendChild(p);
+			// window.scrollTo(0, document.body.scrollHeight);
+
+			event.target.value = '';
+		}
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
deleted file mode 100755
index dc0800f..0000000
--- a/source/screens/demo/examples/ui/cli.njk
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: CLI
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_cli" %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	<div id="cli">
-		<div id="history">
-			<pre>Previous prompt</pre>
-		</div>
-		<div id="line">
-			<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
-			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
-		</div>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script>
-		function resizeTextArea(textarea) {
-			const {style, value} = textarea;
-
-			style.height = style.minHeight = 'auto';
-			style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
-			style.height = `${textarea.scrollHeight}px`;
-		}
-
-		const textarea = document.getElementById('prompt');
-
-		document
-			.body
-			.addEventListener('click', () => {
-				textarea.focus();
-			});
-
-		textarea.addEventListener('input', () => {
-			resizeTextArea(textarea);
-		});
-
-		window.addEventListener("keydown", (event) => {
-			if (event.key === 'Enter' && !event.shiftKey) {
-				event.preventDefault();
-
-				const p = document.createElement("pre");
-
-				p.textContent = event.target.value;
-				document
-					.getElementById("history")
-					.appendChild(p);
-				// window.scrollTo(0, document.body.scrollHeight);
-
-				event.target.value = '';
-			}
-		});
-	</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid
new file mode 100644
index 0000000..cb2434f
--- /dev/null
+++ b/source/screens/demo/examples/ui/tui.liquid
@@ -0,0 +1,13 @@
+---
+title: TUI
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io"></main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
deleted file mode 100755
index 8fc0e31..0000000
--- a/source/screens/demo/examples/ui/tui.njk
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: TUI
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	{{ io.frameHeader('title-bar') }}
-	<main class="io"></main>
-	{{ io.frameFooter('mode-bar') }}
-{% endblock %}
\ No newline at end of file

From 0a5bc191d3d88ac379ace5a72899eba5bf2f413d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 12:15:18 +0100
Subject: [PATCH 127/253] chore: Set 11 as ECMAScript version in jshint

---
 .jshintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.jshintrc b/.jshintrc
index 134e601..c62bd70 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -3,7 +3,7 @@
 	"curly": true,
 	"devel": true,
 	"eqeqeq": true,
-	"esversion": 9,
+	"esversion": 11,
 	"forin": true,
 	"freeze": true,
 	"jquery": true,

From 759283fd9f50b1b58b4adeffa341a65510eed1d8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 12:16:55 +0100
Subject: [PATCH 128/253] docs: Update README and TODO

- Better structure for TODOs
- Add information about JavaScript to README
---
 README.md |  16 +++-
 TODO.md   | 236 ++++++++++++++++++++++++++++--------------------------
 2 files changed, 136 insertions(+), 116 deletions(-)

diff --git a/README.md b/README.md
index 7430cb6..5ec206a 100644
--- a/README.md
+++ b/README.md
@@ -44,9 +44,23 @@ Everything has its default style.
 
 CSS classes follow a naming scheme of `<object>_<description>`.
 
-- *Object* usually is the name of the HTML element. If it is not a elemtn directly it is the thing which receives the styling
+- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling
 - *Description* is a name of the style e.g. what it does, how it looks
 
+### JavaScript (JS)
+
+The codebase uses ECMAScript 2023 Language Specification (14th edition).  
+However, currently the JSHint configuration only allows 11 as highest version. 
+
+ID values are written in *camelCase*. The scheme further uses parts for specific contexts. 
+
+If the ID is for an interactive element the first part is an abbreviation of the action.
+
+- `qry` - Query
+- `set` - Set
+- `slt` - Select
+- `tgl` - Toggle
+
 ## Versioning
 
 This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
diff --git a/TODO.md b/TODO.md
index 1fea50d..6704e8e 100644
--- a/TODO.md
+++ b/TODO.md
@@ -11,120 +11,126 @@
 - Add build process for normalize.css from github.com/necolas/normalize.css
 - Add build process for bourbon from https://github.com/thoughtbot/bourbon
 
+# CSS
+
+- Check style for every basic element
+- Uniform spelling of classes and identifiers
+
 # Content
 
-- Complete *Intro* with description for all basic elements, according to [HTML Standard - The elements of HTML](https://html.spec.whatwg.org/multipage/semantics.html#semantics)
-	- Sections
-		- [x] body
-		- [x] article
-		- [x] section
-		- [x] nav
-		- [x] aside
-		- [x] h1-h6
-		- [x] hgroup
-		- [x] header
-		- [x] footer
-		- [x] address (put to grouping content)
-	- Grouping content
-		- [x] p
-		- [x] hr
-		- [x] pre
-		- [x] blockquote
-		- [x] ol
-		- [x] ul
-		- [ ] menu (new)
-		- [x] li
-		- [x] dl
-		- [x] dt
-		- [x] dd
-		- [x] figure
-		- [x] figcaption
-		- [x] main
-		- [ ] search (new)
-		- [x] div
-	- Text-level semantics
-		- [x] a
-		- [x] em
-		- [x] strong
-		- [x] small
-		- [x] s
-		- [x] cite
-		- [x] q
-		- [x] dfn
-		- [x] abbr
-		- [x] ruby
-		- [x] rb (deprecated)
-		- [x] rt
-		- [x] rtc (deprecated)
-		- [x] rp
-		- [x] data
-		- [x] time
-		- [x] code
-		- [x] var
-		- [x] samp
-		- [x] kbd
-		- [x] sub
-		- [x] sup
-		- [x] i
-		- [x] b
-		- [x] u
-		- [x] mark
-		- [x] bdi
-		- [x] bdo
-		- [x] span
-		- [x] br (mentioned in grouping content)
-		- [x] wbr
-	- Edits
-		- [x] ins
-		- [x] del
-	- Embedded content
-		- [x] picture
-		- [x] source
-		- [x] img
-		- [ ] iframe
-		- [ ] embed
-		- [ ] object
-		- [ ] param (deprecated)
-		- [ ] video
-		- [ ] audio
-		- [ ] track
-		- [ ] map
-		- [ ] area
-	- Tabular data
-		- [ ] table
-		- [ ] caption
-		- [ ] colgroup
-		- [ ] col
-		- [ ] tbody
-		- [ ] thead
-		- [ ] tfoot
-		- [ ] tr
-		- [ ] td
-		- [ ] th
-	- Forms
-		- [x] form
-		- [x] label
-		- [x] input
-		- [x] button
-		- [ ] select
-		- [ ] datalist
-		- [ ] optgroup
-		- [ ] option
-		- [ ] textarea
-		- [ ] output
-		- [ ] progress
-		- [ ] meter (new)
-		- [x] fieldset
-		- [x] legend
-	- Interactive elements
-		- [ ] details
-		- [ ] summary
-		- [ ] dialog
-	- Scripting
-		- [ ] script
-		- [ ] noscript
-		- [ ] template
-		- [ ] slot
-		- [ ] canvas
-- Check style for every basic element
-- Uniform spelling of classes and identifiers
\ No newline at end of file
+- *Intro* 
+  - Complete with description for all basic elements, according to [HTML Standard - The elements of HTML](https://html.spec.whatwg.org/multipage/semantics.html#semantics)
+      - Sections
+          - [x] body
+          - [x] article
+          - [x] section
+          - [x] nav
+          - [x] aside
+          - [x] h1-h6
+          - [x] hgroup
+          - [x] header
+          - [x] footer
+          - [x] address (put to grouping content)
+      - Grouping content
+          - [x] p
+          - [x] hr
+          - [x] pre
+          - [x] blockquote
+          - [x] ol
+          - [x] ul
+          - [ ] menu (new)
+          - [x] li
+          - [x] dl
+          - [x] dt
+          - [x] dd
+          - [x] figure
+          - [x] figcaption
+          - [x] main
+          - [ ] search (new)
+          - [x] div
+      - Text-level semantics
+          - [x] a
+          - [x] em
+          - [x] strong
+          - [x] small
+          - [x] s
+          - [x] cite
+          - [x] q
+          - [x] dfn
+          - [x] abbr
+          - [x] ruby
+          - [x] rb (deprecated)
+          - [x] rt
+          - [x] rtc (deprecated)
+          - [x] rp
+          - [x] data
+          - [x] time
+          - [x] code
+          - [x] var
+          - [x] samp
+          - [x] kbd
+          - [x] sub
+          - [x] sup
+          - [x] i
+          - [x] b
+          - [x] u
+          - [x] mark
+          - [x] bdi
+          - [x] bdo
+          - [x] span
+          - [x] br (mentioned in grouping content)
+          - [x] wbr
+      - Edits
+          - [x] ins
+          - [x] del
+      - Embedded content
+          - [x] picture
+          - [x] source
+          - [x] img
+          - [ ] iframe
+          - [ ] embed
+          - [ ] object
+          - [ ] param (deprecated)
+          - [ ] video
+          - [ ] audio
+          - [ ] track
+          - [ ] map
+          - [ ] area
+      - Tabular data
+          - [ ] table
+          - [ ] caption
+          - [ ] colgroup
+          - [ ] col
+          - [ ] tbody
+          - [ ] thead
+          - [ ] tfoot
+          - [ ] tr
+          - [ ] td
+          - [ ] th
+      - Forms
+          - [x] form
+          - [x] label
+          - [x] input
+          - [x] button
+          - [ ] select
+          - [ ] datalist
+          - [ ] optgroup
+          - [ ] option
+          - [ ] textarea
+          - [ ] output
+          - [ ] progress
+          - [ ] meter (new)
+          - [x] fieldset
+          - [x] legend
+      - Interactive elements
+          - [ ] details
+          - [ ] summary
+          - [ ] dialog
+      - Scripting
+          - [ ] script
+          - [ ] noscript
+          - [ ] template
+          - [ ] slot
+          - [ ] canvas
+- *Clock*
+  - Add overlays to better distinguish day, week and year
\ No newline at end of file

From b1c7f4100e8ef5d76786113a82526c72d4c6d0ad Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 12:18:07 +0100
Subject: [PATCH 129/253] feat: Unify format for IDs

---
 source/screens/demo/examples/clock.liquid      | 6 +++---
 source/screens/demo/examples/start.liquid      | 4 ++--
 source/screens/demo/examples/ui/gallery.liquid | 8 ++++----
 source/screens/demo/examples/ui/windows.liquid | 8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index da8f5a4..34fb1d5 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -11,7 +11,7 @@ tags:
 <main>
 	<canvas id="clock" width="512" height="512"></canvas>
 	<p>
-		<button id="toggleFormat">12-Stunden-Format</button>
+		<button id="tglFormat">12-Stunden-Format</button>
 	</p>
 </main>
 {% endblock %}
@@ -27,9 +27,9 @@ tags:
 	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', () => {
+	document.getElementById('tglFormat').addEventListener('click', () => {
 		is24HourFormat = !is24HourFormat;
-		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
 	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index b4b1d98..3155921 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -11,7 +11,7 @@ tags:
 {% 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 id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
 		<input class="button_io" value="Suchen" type="submit"/>
 	</form>
 	<div class="blocks">
@@ -69,7 +69,7 @@ tags:
 
 	document.getElementById('www-search').addEventListener('submit', function (e) {
 		e.preventDefault();
-		const query = document.getElementById('query').value.trim();
+		const query = document.getElementById('qrySearch').value.trim();
 
 		if (!query) return;
 
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index c548374..8128023 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -12,9 +12,9 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group">
-					<input id="slider-size" value="5" min="1" max="10" step="1" type="range"/>
-					<label class="right" for="slider-size">Größe</label>
+				<div class="group-input">
+					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
+					<label class="right" for="setSize">Größe</label>
 				</div>
 				<button title="details">
 					<i class="bi bi-layout-sidebar-reverse"></i>&nbsp;Details
@@ -36,7 +36,7 @@ tags:
 {%- block script %}
 {{ block.super -}}
 <script>
-	const sizeSlider = document.getElementById('slider-size');
+	const sizeSlider = document.getElementById('setSize');
 	const galleryItems = document.querySelectorAll('.gallery > div');
 
 	// Set the default size
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 74584ab..02606e6 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -18,8 +18,8 @@ tags:
 	<nav class="big">
 		<button><i class="bi bi-folder"></i></button>
 		<button><i class="bi bi-terminal"></i></button>
-		<button id="pauseButton"><i class="bi bi-pause"></i></button>
-		<button id="resumeButton"><i class="bi bi-play"></i></button>
+		<button id="setPause"><i class="bi bi-pause"></i></button>
+		<button id="setPlay"><i class="bi bi-play"></i></button>
 	</nav>
 	<div>
 		<nav class="small">
@@ -67,11 +67,11 @@ tags:
 	const timeFormat = {hour: '2-digit', minute: '2-digit'};
 	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
 
-	document.getElementById('pauseButton').addEventListener('click', () => {
+	document.getElementById('setPause').addEventListener('click', () => {
 		timeDisplay.pause();
 		console.info('Pause time');
 	});
-	document.getElementById('resumeButton').addEventListener('click', () => {
+	document.getElementById('setPlay').addEventListener('click', () => {
 		timeDisplay.resume();
 		console.info('Resume time');
 	});

From 15a9b83e8042feef7d5b5350efae739553e3379e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 13:26:06 +0100
Subject: [PATCH 130/253] feat: Content and interaction for table screen

- Add getRandomFormattedString(), toggleColumn() and convertToRomanNumeral() to app
- Update hippie styles
- Add button to toggle index column
- Add select group to autofill numbering
---
 source/code/hippie/app.js                    | 60 +++++++++++++++
 source/screens/demo/examples/ui/table.liquid | 78 ++++++++++++++++----
 source/style/hippie-style                    |  2 +-
 3 files changed, 126 insertions(+), 14 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index f00f364..cf842a2 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -459,6 +459,66 @@ function getRandomColor() {
 	return color;
 }
 
+function getRandomFormattedString(chars = 2, digits = 6, separator = '-') {
+	const getRandomUppercase = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65);
+	const getRandomDigit = () => Math.floor(Math.random() * 10);
+	let string = '';
+
+	for (let i = 0; i < chars; i++) {
+		string += getRandomUppercase();
+	}
+
+	string += separator;
+
+	for (let i = 0; i < digits; i++) {
+		string += getRandomDigit();
+	}
+
+	return string;
+}
+
+function toggleColumn(table, index) {
+	const rows = table.rows;
+	const isHidden = rows[0].cells[index].classList.contains('di_none');
+
+	for (let i = 0; i < rows.length; i++) {
+		const cell = rows[i].cells[index];
+
+		if (isHidden) {
+			cell.classList.remove('di_none');
+		} else {
+			cell.classList.add('di_none');
+		}
+	}
+}
+
+function convertToRomanNumeral(num) {
+	const romanNumeralMap = [
+		{value: 1000, numeral: 'M'},
+		{value: 900, numeral: 'CM'},
+		{value: 500, numeral: 'D'},
+		{value: 400, numeral: 'CD'},
+		{value: 100, numeral: 'C'},
+		{value: 90, numeral: 'XC'},
+		{value: 50, numeral: 'L'},
+		{value: 40, numeral: 'XL'},
+		{value: 10, numeral: 'X'},
+		{value: 9, numeral: 'IX'},
+		{value: 5, numeral: 'V'},
+		{value: 4, numeral: 'IV'},
+		{value: 1, numeral: 'I'}
+	];
+
+	let result = '';
+	for (let i = 0; i < romanNumeralMap.length; i++) {
+		while (num >= romanNumeralMap[i].value) {
+			result += romanNumeralMap[i].numeral;
+			num -= romanNumeralMap[i].value;
+		}
+	}
+	return result;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index eefa18c..c3313f1 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -12,9 +12,21 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<button title="add">
+				<button title="Add entry">
 					<i class="bi bi-plus-circle"></i>
 				</button>
+				<button id="tglIndex" title="Toggle index column">
+					<i class="bi bi-hash"></i>
+				</button>
+				<div class="group-input">
+					<select id="sltNum" name="position-number">
+						<option value="" selected>None</option>
+						<option value="numeric">123</option>
+						<option value="latin">ABC</option>
+						<option value="roman">IVX</option>
+					</select>
+					<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
+				</div>
 			</nav>
 			<nav></nav>
 		</header>
@@ -41,12 +53,12 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<button title="drag"><i class="bi bi-grip-horizontal"></i></button>
-				<button title="expand"><i class="bi bi-arrows-expand-vertical"></i></button>
+				<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
+				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
 		</td>
-		<td></td>
-		<td></td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
 		<td></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
@@ -55,9 +67,9 @@ tags:
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
-				<button title="event"><i class="bi bi-calendar-event"></i></button>
-				<button title="note"><i class="bi bi-journal"></i></button>
-				<button title="delete"><i class="bi bi-trash"></i></button>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
 			</nav>
 		</td>
 	</tr>
@@ -97,13 +109,13 @@ tags:
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis condimentum quam, bibendum tristique odio.'
 	];
 
-	const tbody = document.querySelector('main.io section > table');
-	const template = document.querySelector('#default-row');
+	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
 
-	const currencyEuro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
+	const table = document.querySelector('main.io section > table');
+	const rowDef = document.querySelector('#default-row');
 
 	for (let i = 0; i < 256; i++) {
-		const clone = document.importNode(template.content, true);
+		const clone = document.importNode(rowDef.content, true);
 		const tr = clone.querySelector('tr');
 		const th = clone.querySelector('th');
 		const td = clone.querySelectorAll('td');
@@ -113,13 +125,53 @@ tags:
 
 		tr.setAttribute('data-id', i);
 		th.textContent = i + 1;
+		td[2].textContent = getRandomFormattedString();
 		td[3].textContent = placeholderNames[j];
 		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
 		td[4].firstElementChild.textContent = placeholderContents[k];
 		// td[5].textContent = randomIntFrom(1, i).toString();
 		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
 
-		tbody.appendChild(clone);
+		table.appendChild(clone);
 	}
+
+	const selectNum = document.getElementById('sltNum');
+	const buttonPosNum = document.getElementById('setPosNum');
+
+	buttonPosNum.addEventListener('click', () => {
+		const numType = selectNum.value;
+		const cells = document.querySelectorAll('td.pos-num');
+		let num = '';
+
+		for (let i = 0; i < cells.length; i++) {
+			switch (numType) {
+				case 'numeric':
+					num = (i + 1).toString();
+					break;
+				case 'roman':
+					num = convertToRomanNumeral((i + 1)).toString();
+					break;
+				case '':
+				default:
+			}
+
+			cells[i].textContent = num;
+		}
+	});
+
+	const buttonIndex = document.getElementById('tglIndex');
+
+	buttonIndex.addEventListener('click', () => {
+		const cells = table.querySelectorAll('th:first-child');
+		const isHidden = cells[0].classList.contains('di_none');
+
+		for (cell of cells) {
+			if (isHidden) {
+				cell.classList.remove('di_none');
+			} else {
+				cell.classList.add('di_none');
+			}
+		}
+	});
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 0623e81..295626e 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 0623e818a49176ca7516a88943e07a882ba5262d
+Subproject commit 295626eb6ee68fd535fdd5ae891e3b4192e18546

From e5516c81f1a92cdc1658346c32769db11aee2594 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 18:44:45 +0100
Subject: [PATCH 131/253] chore: Display jshint option for curly braces

---
 .jshintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.jshintrc b/.jshintrc
index c62bd70..24ef2fe 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,6 +1,6 @@
 {
 	"bitwise": true,
-	"curly": true,
+	"curly": false,
 	"devel": true,
 	"eqeqeq": true,
 	"esversion": 11,

From 5092c1680dccc70253ffb079cf45139974dc6b97 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 18:53:48 +0100
Subject: [PATCH 132/253] feat: Add capitalizeFirstLetter() to app

---
 source/code/hippie/app.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index cf842a2..81d2494 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -351,12 +351,12 @@ function checkButtonAndTarget(event, element, button = 0) {
 function getClosestEdgeToElement(element) {
 	'use strict';
 
-	const rect = element.getBoundingClientRect();
+	const bounding = element.getBoundingClientRect();
 	const distances = {
-		top: rect.top,
-		right: window.innerWidth - rect.right,
-		bottom: window.innerHeight - rect.bottom,
-		left: rect.left
+		top: bounding.top,
+		right: window.innerWidth - bounding.right,
+		bottom: window.innerHeight - bounding.bottom,
+		left: bounding.left
 	};
 
 	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
@@ -519,6 +519,10 @@ function convertToRomanNumeral(num) {
 	return result;
 }
 
+function capitalizeFirstLetter(text) {
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

From 9bf97019caae75ea365550703b0c00c8edd58eff Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 18:54:14 +0100
Subject: [PATCH 133/253] docs: More details for JS part

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 5ec206a..83ea378 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,9 @@ ID values are written in *camelCase*. The scheme further uses parts for specific
 
 If the ID is for an interactive element the first part is an abbreviation of the action.
 
+- `add` - Add
 - `qry` - Query
+- `rmv` - Remove
 - `set` - Set
 - `slt` - Select
 - `tgl` - Toggle

From 9d98b69e31e95eb86ba7247c2f73189eebcde10e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 19:17:46 +0100
Subject: [PATCH 134/253] feat: Features for table screen

- Add active state for rows
- Add addition of rows
---
 source/screens/demo/examples/ui/table.liquid | 79 +++++++++++++++++---
 source/style/hippie-style                    |  2 +-
 2 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index c3313f1..5266b2a 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -12,9 +12,13 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<button title="Add entry">
-					<i class="bi bi-plus-circle"></i>
-				</button>
+				<div class="group-input">
+					<button id="addEntry" title="Add entry">
+						<i class="bi bi-plus-circle"></i>
+					</button>
+					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
+					<label for="setScroll">Scroll to new entry</label>
+				</div>
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
@@ -30,7 +34,7 @@ tags:
 			</nav>
 			<nav></nav>
 		</header>
-		<table>
+		<table id="content">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@@ -43,12 +47,12 @@ tags:
 				<th scope="col"></th>
 			</tr>
 			</thead>
-			<tbody></tbody>
+			<tbody id="positions"></tbody>
 		</table>
 		{% render 'hippie/partials/frame-status.liquid' %}
 	</section>
 </main>
-<template id="default-row">
+<template id="rowDefault">
 	<tr>
 		<th scope="row"></th>
 		<td class="io">
@@ -111,11 +115,25 @@ tags:
 
 	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
 
-	const table = document.querySelector('main.io section > table');
-	const rowDef = document.querySelector('#default-row');
+	const content = document.querySelector('main.io section > table');
+	// const content = document.getElementById('content');
+	const tbodyPosition = document.getElementById('positions');
+
+	tbodyPosition.addEventListener('click', (event) => {
+		const rows = tbodyPosition.querySelectorAll('tr');
+		const rowTarget = event.target.closest('tr');
+
+		if (rowTarget && event.button === 0) {
+			for (row of rows) {
+				row.classList.remove('active');
+			}
+
+			rowTarget.classList.add('active');
+		}
+	});
 
 	for (let i = 0; i < 256; i++) {
-		const clone = document.importNode(rowDef.content, true);
+		const clone = cloneRow();
 		const tr = clone.querySelector('tr');
 		const th = clone.querySelector('th');
 		const td = clone.querySelectorAll('td');
@@ -132,7 +150,7 @@ tags:
 		// td[5].textContent = randomIntFrom(1, i).toString();
 		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
 
-		table.appendChild(clone);
+		tbodyPosition.appendChild(clone);
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -140,7 +158,7 @@ tags:
 
 	buttonPosNum.addEventListener('click', () => {
 		const numType = selectNum.value;
-		const cells = document.querySelectorAll('td.pos-num');
+		const cells = tbodyPosition.querySelectorAll('td.pos-num');
 		let num = '';
 
 		for (let i = 0; i < cells.length; i++) {
@@ -162,7 +180,7 @@ tags:
 	const buttonIndex = document.getElementById('tglIndex');
 
 	buttonIndex.addEventListener('click', () => {
-		const cells = table.querySelectorAll('th:first-child');
+		const cells = content.querySelectorAll('th:first-child');
 		const isHidden = cells[0].classList.contains('di_none');
 
 		for (cell of cells) {
@@ -173,5 +191,42 @@ tags:
 			}
 		}
 	});
+
+	const buttonAdd = document.getElementById('addEntry');
+	const checkScroll = document.getElementById('setScroll');
+
+	buttonAdd.addEventListener('click', () => {
+		const clone = cloneRow();
+		const viewportHeight = window.innerHeight;
+		const elementActive = tbodyPosition.querySelector('tr.active');
+		let elementNew = undefined;
+		let elementBound = undefined;
+
+		if (elementActive) {
+			elementActive.after(clone);
+			elementNew = elementActive.nextElementSibling;
+		} else {
+			tbodyPosition.appendChild(clone);
+			elementNew = tbodyPosition.lastElementChild;
+		}
+
+		if (checkScroll.checked) {
+			elementBound = elementNew.getBoundingClientRect();
+
+			if (elementBound.bottom > viewportHeight || elementBound.top < 0) {
+				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+			}
+		}
+		// TODO: Neuen index bilden
+	});
+
+	function cloneRow(type = 'default') {
+		type = 'row' + capitalizeFirstLetter(type);
+
+		const rowFragment = document.getElementById(type).content;
+		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
+
+		return document.importNode(rowFragment, true);
+	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 295626e..5307486 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 295626eb6ee68fd535fdd5ae891e3b4192e18546
+Subproject commit 530748663f02ac15597c78843a12cd1f9973c4c9

From aa4c0968ae1a8ac79c323b9d94d2bc0044bbdd33 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 20:45:30 +0100
Subject: [PATCH 135/253] feat: Reflect new hr styles

---
 source/screens/demo/basics.njk            | 27 +++++++++++------------
 source/screens/demo/components.njk        |  8 +++----
 source/screens/demo/examples/blog.njk     |  2 +-
 source/screens/demo/examples/songbook.njk |  2 +-
 source/screens/demo/layouts.njk           |  4 ++--
 source/style/hippie-style                 |  2 +-
 6 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 088d90d..ce628fe 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -100,25 +100,24 @@ tags:
 				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"/>
+			<hr class="hidden js_pop"/>
 			<div class="exp_pop">
-				<code class="code_solo">hr.hr_hidden</code>
+				<code class="code_solo">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"/>
+			<p>Die Linie darf auch gepunktet 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="dotted js_pop"/>
 			<div class="exp_pop">
-				<code class="code_solo">hr.hr_dotted</code>
+				<code class="code_solo">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"/>
+			<hr class="dotted space_even_fourth js_pop"/>
 			<div class="exp_pop">
-				<code class="code_solo">hr.hr_dotted.space_even_fourth</code>
+				<code class="code_solo">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>
+			<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 Zeilenanfang 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>
@@ -202,7 +201,7 @@ tags:
 			<div class="exp_pop">
 				<code class="code_solo">figure>figcaption+{element}</code>
 			</div>
-			<hr class="hr_hidden">
+			<hr class="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>
@@ -342,7 +341,7 @@ tags:
 				</dt>
 				<dd>Alternative bei fehlender Unterstützung</dd>
 			</dl>
-			<hr class="hr_dotted space_even_half">
+			<hr class="dotted space_even_half">
 			<div class="txt_center">
 				<ruby class="space_right_small">
 					<rb>Basis</rb>
@@ -382,7 +381,7 @@ tags:
 					<rp>.</rp>
 				</ruby>
 			</div>
-			<hr class="hr_dotted space_even_half">
+			<hr class="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
@@ -839,14 +838,14 @@ tags:
 		<article>
 			<h1>Struktur</h1>
 			<div class="box_placeholder"></div>
-			<hr class="hr_hidden"/>
+			<hr class="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"/>
+			<hr class="hidden"/>
 			<div class="box_placeholder_bkg"></div>
 		</article>
 		<article>
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index f327b4c..4d4ba16 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -115,10 +115,10 @@ tags:
 			<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">
+			<pre class="pre_code"><code>hr.hidden+hr.dotted+hr.double</code></pre>
+			<hr class="hidden">
+			<hr class="dotted">
+			<hr class="double">
 			<pre class="pre_code"><code>hr.vertical</code></pre>
 			<hr class="vertical">
 			<h2>&lt;pre&gt;</h2>
diff --git a/source/screens/demo/examples/blog.njk b/source/screens/demo/examples/blog.njk
index 0ffe2e8..9573419 100644
--- a/source/screens/demo/examples/blog.njk
+++ b/source/screens/demo/examples/blog.njk
@@ -41,7 +41,7 @@ tags:
 			Bestellungen bitte an
 			{{ ph.name() }}
 			richten.</p>
-		<hr class="hr_double hr_dotted">
+		<hr class="double dotted">
 		{%- for post in collections.article -%}
 			{{ post.content }}
 		{%- endfor -%}
diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk
index 69f26b9..78a9939 100755
--- a/source/screens/demo/examples/songbook.njk
+++ b/source/screens/demo/examples/songbook.njk
@@ -42,7 +42,7 @@ tags:
 			Bestellungen bitte an
 			{{ ph.name() }}
 			richten.</p>
-		<hr class="hr_double hr_dotted">
+		<hr class="double dotted">
 		{%- for piece in collections.song -%}
 			{{ song.simple(loop.index0, piece.data, piece.content) }}
 		{%- endfor -%}
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index 2aeeeb1..a35cfff 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -231,8 +231,8 @@ tags:
 			<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">
+			<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
+			<hr class="dotted space_even_fourth">
 			<h3>ul</h3>
 			<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
 			<nav>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 5307486..0e6aa4b 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 530748663f02ac15597c78843a12cd1f9973c4c9
+Subproject commit 0e6aa4bb02a5323a3eadd92715e03e38e80858cb

From ca9f6e21eadc7f56432e4314ec4e04d5f3dcf92e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 22:06:46 +0100
Subject: [PATCH 136/253] style: Remove hyphens for liquid layout tags

---
 source/screens/demo/index.liquid             | 2 +-
 source/screens/demo/pages/blank.liquid       | 2 +-
 source/screens/demo/pages/default.liquid     | 2 +-
 source/screens/demo/pages/error/304.liquid   | 2 +-
 source/screens/demo/pages/error/400.liquid   | 2 +-
 source/screens/demo/pages/error/401.liquid   | 2 +-
 source/screens/demo/pages/error/403.liquid   | 2 +-
 source/screens/demo/pages/error/404.liquid   | 2 +-
 source/screens/demo/pages/error/408.liquid   | 2 +-
 source/screens/demo/pages/error/500.liquid   | 2 +-
 source/screens/demo/pages/error/503.liquid   | 2 +-
 source/screens/demo/pages/maintenance.liquid | 2 +-
 source/templates/hippie/app.liquid           | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 1f19b26..9f4aa9e 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -7,7 +7,7 @@ tags:
 {% assign pageBase = hippie.pageBase -%}
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = "h_full_view" -%}
-{%- layout "hippie/full.liquid" %}
+{% layout "hippie/full.liquid" %}
 
 {% block body %}
 <div class="wrap">
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
index b6914e5..5fde24f 100644
--- a/source/screens/demo/pages/blank.liquid
+++ b/source/screens/demo/pages/blank.liquid
@@ -3,7 +3,7 @@ title: Blank
 ---
 {% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{%- layout "hippie/full.liquid" %}
+{% layout "hippie/full.liquid" %}
 
 {% block body %}
 <!-- {{ title }} -->
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
index 5da6a7c..113465a 100644
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@@ -5,7 +5,7 @@ title: Default
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = "default" -%}
 {% assign bodyClass = "default" -%}
-{%- layout "hippie/default.liquid" %}
+{% layout "hippie/default.liquid" %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid
index eb3b98c..4fa65ef 100644
--- a/source/screens/demo/pages/error/304.liquid
+++ b/source/screens/demo/pages/error/304.liquid
@@ -3,7 +3,7 @@ title: 304
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid
index 6d480e8..86cb860 100644
--- a/source/screens/demo/pages/error/400.liquid
+++ b/source/screens/demo/pages/error/400.liquid
@@ -3,7 +3,7 @@ title: 400
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid
index 3bef772..09029d6 100644
--- a/source/screens/demo/pages/error/401.liquid
+++ b/source/screens/demo/pages/error/401.liquid
@@ -3,7 +3,7 @@ title: 401
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid
index 94a245f..31a5790 100644
--- a/source/screens/demo/pages/error/403.liquid
+++ b/source/screens/demo/pages/error/403.liquid
@@ -3,7 +3,7 @@ title: 403
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid
index eadf7ee..a90082a 100644
--- a/source/screens/demo/pages/error/404.liquid
+++ b/source/screens/demo/pages/error/404.liquid
@@ -3,7 +3,7 @@ title: 404
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid
index 0e50541..7984e61 100644
--- a/source/screens/demo/pages/error/408.liquid
+++ b/source/screens/demo/pages/error/408.liquid
@@ -3,7 +3,7 @@ title: 408
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid
index 96489d3..6d21ccc 100644
--- a/source/screens/demo/pages/error/500.liquid
+++ b/source/screens/demo/pages/error/500.liquid
@@ -3,7 +3,7 @@ title: 500
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid
index 46647d9..4805020 100644
--- a/source/screens/demo/pages/error/503.liquid
+++ b/source/screens/demo/pages/error/503.liquid
@@ -3,7 +3,7 @@ title: 503
 ---
 {% assign pageBase = "../../../" -%}
 {% assign bodyClass = "body_status" %}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid
index a4943f2..4fa3286 100644
--- a/source/screens/demo/pages/maintenance.liquid
+++ b/source/screens/demo/pages/maintenance.liquid
@@ -3,7 +3,7 @@ title: Maintenance
 ---
 {% assign pageBase = "../../" -%}
 {% assign pageClass = "h_full_view" -%}
-{%- layout "hippie/status.liquid" %}
+{% layout "hippie/status.liquid" %}
 
 {% block body %}
 <hgroup id="root" class="txt_center">
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index d38a402..7295dfc 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -1,7 +1,7 @@
 {% assign pageBase = "../../../" -%}
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = "html_ui" -%}
-{%- layout "hippie/default.liquid" %}
+{% layout "hippie/default.liquid" %}
 
 {% block title %}{{ title }}{% endblock %}
 

From 2baad1d314d7920457cafed8b47ba48d383ead7d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Feb 2026 10:27:27 +0100
Subject: [PATCH 137/253] feat: Replace nunjucks with liquid for basics screen

- Add liquid template page
- Basics screen now uses liquid
- Correct script block in templates
- Add parameters to meta and log partials
- Add liquid partials for page and placeholder content
---
 source/screens/demo/basics.liquid             | 974 ++++++++++++++++++
 source/screens/demo/basics.njk                | 865 ----------------
 source/screens/demo/pages/default.liquid      |   1 -
 source/templates/hippie/default.liquid        |   3 +-
 source/templates/hippie/full.liquid           |  12 +-
 source/templates/hippie/page.liquid           |  63 ++
 source/templates/hippie/partials/meta.liquid  |   6 +-
 .../hippie/partials/page-footer.liquid        |   3 +
 .../hippie/partials/page-header.liquid        |   3 +
 .../templates/hippie/partials/page-nav.liquid |  33 +
 .../hippie/partials/placeholder-flag.liquid   |  42 +
 11 files changed, 1127 insertions(+), 878 deletions(-)
 create mode 100644 source/screens/demo/basics.liquid
 delete mode 100644 source/screens/demo/basics.njk
 create mode 100644 source/templates/hippie/page.liquid
 create mode 100644 source/templates/hippie/partials/page-footer.liquid
 create mode 100644 source/templates/hippie/partials/page-header.liquid
 create mode 100644 source/templates/hippie/partials/page-nav.liquid
 create mode 100644 source/templates/hippie/partials/placeholder-flag.liquid

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
new file mode 100644
index 0000000..bb9e6d2
--- /dev/null
+++ b/source/screens/demo/basics.liquid
@@ -0,0 +1,974 @@
+---
+title: Basics
+tags:
+- demoIndex
+---
+{% assign pageBase = "../" -%}
+{% layout "hippie/page.liquid" %}
+
+{% block title %}Grundlagen{% endblock %}
+
+{% block main %}
+<!-- {{ 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>
+		<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 vorgegebenen 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>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 bereitzustellen. 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="hidden js_pop"/>
+		<div class="exp_pop">
+			<code class="code_solo">hr.hidden</code>
+		</div>
+		<p>Die Linie darf auch gepunktet 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="dotted js_pop"/>
+		<div class="exp_pop">
+			<code class="code_solo">hr.dotted</code>
+		</div>
+		<hr class="space_even_half js_pop"/>
+		<div class="exp_pop">
+			<code class="code_solo">hr.space_even_half</code>
+		</div>
+		<hr class="dotted space_even_fourth js_pop"/>
+		<div class="exp_pop">
+			<code class="code_solo">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 Zeilenanfang 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>
+			{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
+			<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="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>
+		<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="https://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. So was 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 a 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="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="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 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>
+		{% render "hippie/partials/placeholder-flag.liquid", type: "img", width: "128", desc: "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>
+		{% render "hippie/partials/placeholder-flag.liquid", type: "img", src: "file", width: "128", desc: "Fahne von Interaktionsweise" %}
+	</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="input_io" 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="button_io" type="button" value="Input Button">
+			<button class="button_io">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>
+		{% comment %}// TODO: Abstände, besonders margin generell überarbeiten{% endcomment %}
+		<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="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io"
+																									  type="text"
+																									  value="Deaktivierte Eingabe"
+																									  size="21"
+																									  disabled="disabled">
+			<button class="button_io" 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
+			zueinander 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="input_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" type="text" value="love"
+															  readonly="readonly" id="demo__input">
+				<label for="demo__output">Output:</label><input class="input_io" 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 class="flex inline">
+					<button class="button_io">Senden</button>
+					<input class="button_io" type="reset" value="Abbrechen"></div>
+				<label>Zeicheneingaben:</label>
+				<div class="flex inline"><input class="input_io" type="text" placeholder="Text"><input class="input_io"
+																									   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 class="flex inline">
+					<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="input_io" type="date"></div>
+				<label class="">Uhrzeit<br>
+					<code>&lt;input[type="time"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="time"></div>
+				<label class="">Datum und Zeit<br>
+					<code>&lt;input[type="datetime-local"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="datetime-local"></div>
+				<label class="">Kalendermonat<br>
+					<code>&lt;input[type="month"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="month"></div>
+				<label class="">Kalenderwoche<br>
+					<code>&lt;input[type="week"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="week"></div>
+				<label class="">@dresse<br>
+					<code>&lt;input[type="email"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="email" placeholder="@"></div>
+				<label class="">Passwort<br>
+					<code>&lt;input[type="password"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="password" value="admin"></div>
+				<label class="">Telefonnummer<br>
+					<code>&lt;input[type="tel"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="tel" value="0190123456"></div>
+				<label class="">URL<br>
+					<code>&lt;input[type="url"]&gt;</code>
+				</label>
+				<div><input class="input_io" type="url" placeholder="url://"></div>
+				<label class="">Suche<br>
+					<code>&lt;input[type="search"]&gt;</code>
+				</label>
+				<div><input class="input_io" 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="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="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 %}
diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
deleted file mode 100644
index ce628fe..0000000
--- a/source/screens/demo/basics.njk
+++ /dev/null
@@ -1,865 +0,0 @@
----
-title: Basics
-tags:
-  - demoIndex
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_main.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}Grundlagen{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ 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="hidden js_pop"/>
-			<div class="exp_pop">
-				<code class="code_solo">hr.hidden</code>
-			</div>
-			<p>Die Linie darf auch gepunktet 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="dotted js_pop"/>
-			<div class="exp_pop">
-				<code class="code_solo">hr.dotted</code>
-			</div>
-			<hr class="space_even_half js_pop"/>
-			<div class="exp_pop">
-				<code class="code_solo">hr.space_even_half</code>
-			</div>
-			<hr class="dotted space_even_fourth js_pop"/>
-			<div class="exp_pop">
-				<code class="code_solo">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 Zeilenanfang 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="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="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="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 #}
-			{{ ph.flag('img') }}
-			<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>
-				{{ ph.flag('img', 'file') }}
-		</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="input_io" 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="button_io" type="button" value="Input Button">
-				<button class="button_io">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="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
-				<button class="button_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" 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="input_io" type="text" value="love" readonly="readonly" id="demo__input">
-					<label for="demo__output">Output:</label><input class="input_io" 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 class="flex inline">
-						<button class="button_io">Senden</button><input class="button_io" type="reset" value="Abbrechen"></div>
-					<label>Zeicheneingaben:</label>
-					<div class="flex inline"><input class="input_io" type="text" placeholder="Text"><input class="input_io" 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 class="flex inline">
-						<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="input_io" type="date"></div>
-					<label class="">Uhrzeit<br>
-						<code>&lt;input[type="time"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="time"></div>
-					<label class="">Datum und Zeit<br>
-						<code>&lt;input[type="datetime-local"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="datetime-local"></div>
-					<label class="">Kalendermonat<br>
-						<code>&lt;input[type="month"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="month"></div>
-					<label class="">Kalenderwoche<br>
-						<code>&lt;input[type="week"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="week"></div>
-					<label class="">@dresse<br>
-						<code>&lt;input[type="email"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="email" placeholder="@"></div>
-					<label class="">Passwort<br>
-						<code>&lt;input[type="password"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="password" value="admin"></div>
-					<label class="">Telefonnummer<br>
-						<code>&lt;input[type="tel"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="tel" value="0190123456"></div>
-					<label class="">URL<br>
-						<code>&lt;input[type="url"]&gt;</code>
-					</label>
-					<div><input class="input_io" type="url" placeholder="url://"></div>
-					<label class="">Suche<br>
-						<code>&lt;input[type="search"]&gt;</code>
-					</label>
-					<div><input class="input_io" 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="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="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 %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
index 113465a..bb44e71 100644
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@@ -10,7 +10,6 @@ title: Default
 {% block title %}{{ title }}{% endblock %}
 
 {% block script %}
-{{ block.super -}}
 <script>
 	// Page script
 	console.log("pageBase is: {{ pageBase }}");
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index cfd5417..bdcf341 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -28,10 +28,9 @@
 
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
-{% block script -%}
 <script>
 	// Default script
 </script>
-{% endblock -%}
+{%- block script %}{% endblock -%}
 </body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index 89ba267..fd86906 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -18,32 +18,30 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
+	{% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %}
 	{% 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' -%}
+	{% 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 -%}
+	{% 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 -%}
+{%- block 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/page.liquid b/source/templates/hippie/page.liquid
new file mode 100644
index 0000000..369d930
--- /dev/null
+++ b/source/templates/hippie/page.liquid
@@ -0,0 +1,63 @@
+{% assign pageId = page.fileSlug -%}
+{% layout "hippie/full.liquid" %}
+
+{% block meta %}
+{{ block.super -}}
+{% comment %}<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">{% endcomment %}
+{% comment %}<meta http-equiv="X-UA-Compatible" content="IE=edge" />{% endcomment %}
+{% endblock %}
+
+{% block links %}
+{{ block.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]-->
+	{% comment %}<script src="./code/html5shiv.min.js"></script>{% endcomment %}
+	{% comment %}<!--Only use one of the above!-->{% endcomment %}
+{% endif %}
+
+{% comment %}<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>{% endcomment %}
+<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+{% comment %}<link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/>{% endcomment %}
+{% endblock %}
+
+{% block body %}
+{{ block.super -}}
+{% render "hippie/partials/page-nav.liquid" %}
+<div id="root">
+	{% render "hippie/partials/page-header.liquid" %}
+
+	<main class="main_site">
+		{% block main %}{% endblock %}
+	</main>
+
+	{% render "hippie/partials/page-footer.liquid" %}
+</div>
+{% endblock %}
+
+{% block script %}
+<script src="/vendor/jquery.min.js"></script>
+<script src="/vendor/hippie-script.js"></script>
+<script src="{{ pageBase }}js/globals.js"></script>
+<script src="{{ pageBase }}js/app.js"></script>
+<script>
+	// Setup global things for all screens
+	setup();
+
+	// Create instances of objects made by constructor functions
+	let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+	let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+
+	if (viewHover) {
+		let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
+	}
+
+	document.addEventListener('scroll', () => {
+		scrollUi.check();
+	});
+
+	$(document).ready(function () {
+		logPerf('EVENT       :: jQuery \'ready\' event fired.');
+	});
+</script>
+{% endblock %}
diff --git a/source/templates/hippie/partials/meta.liquid b/source/templates/hippie/partials/meta.liquid
index fa0516e..a4b3cc2 100644
--- a/source/templates/hippie/partials/meta.liquid
+++ b/source/templates/hippie/partials/meta.liquid
@@ -1,7 +1,7 @@
 <meta name="robots" content="noindex">
 	<meta name="generator" content="{{ eleventy.generator }}">
-	<meta name="author" content="">
-	<meta name="description" content="">
-	<meta name="keywords" content="">
+	<meta name="author" content="{{ author | default: '' }}">
+	<meta name="description" content="{{ desc | default: '' }}">
+	<meta name="keywords" content="{{ keys | default: '' }}">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
\ No newline at end of file
diff --git a/source/templates/hippie/partials/page-footer.liquid b/source/templates/hippie/partials/page-footer.liquid
new file mode 100644
index 0000000..7aa500a
--- /dev/null
+++ b/source/templates/hippie/partials/page-footer.liquid
@@ -0,0 +1,3 @@
+<footer class="footer_site">
+	<div id="end"></div>
+</footer>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/page-header.liquid b/source/templates/hippie/partials/page-header.liquid
new file mode 100644
index 0000000..a37637a
--- /dev/null
+++ b/source/templates/hippie/partials/page-header.liquid
@@ -0,0 +1,3 @@
+<header class="header_site">
+	<div id="begin"></div>
+</header>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/page-nav.liquid b/source/templates/hippie/partials/page-nav.liquid
new file mode 100644
index 0000000..36e5184
--- /dev/null
+++ b/source/templates/hippie/partials/page-nav.liquid
@@ -0,0 +1,33 @@
+<div class="pos_rel">
+	<nav class="nav_page_meta">
+		<ul>
+			<li class="js_scrolltop di_none">
+				<a href="#begin" class="a_button_meta">
+					<div class="sprite_img demo__sprite_up"></div>
+					{% comment %}<img src="{{ pageBase }}art/up.png" alt="" width="32" height="64">{% endcomment %}
+				</a>
+			</li>
+			<li>
+				{% comment %}<button class="">Show Meta Information</button>{% endcomment %}
+				{% comment %}<a href="#meta" class="js_showmeta a_button_meta">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</a>{% endcomment %}
+				<button class="js_showmeta button_clear" type="button">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</button>
+			</li>
+			<li>
+				<button id="js-toggle-fade">F</button>
+			</li>
+			<li class="js_scrolldown">
+				<a href="#end" class="a_button_meta">
+					<div class="sprite_img demo__sprite_down"></div>
+					{% comment %}<img src="{{ pageBase }}art/down.png" alt="" width="32" height="32">{% endcomment %}
+				</a>
+			</li>
+		</ul>
+	</nav>
+</div>
+{% comment %}<div class="exp_overlay_btn exp_help_btn">
+	<span class="span_solo">?</span>
+</div>{% endcomment %}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
new file mode 100644
index 0000000..02432cb
--- /dev/null
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@@ -0,0 +1,42 @@
+{% assign height = width | divided_by: 1.6 %}
+{% if type == 'svg' or type == '' %}
+	<svg version="1.1" id="{{ id }}" 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">
+		{% comment %}<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>{% endcomment %}
+		{% if desc != '' %}
+			<desc>{{ desc }}</desc>
+		{% endif %}
+		<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>
+{% elsif type == 'img' %}
+	{% if src == 'file' %}
+		<picture>
+			<source srcset="/art/flag_websafe_128x80.webp" type="image/webp"/>
+			<img src="/art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
+		</picture>
+	{% else %}
+		<img
+			width="{{ width }}"
+			height="{{ height }}"
+			alt="{{ desc }}"
+			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=">
+	{% endif %}
+{% endif %}

From d72f47bdd603898a570040ef095a072d6ed1d84f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Feb 2026 10:53:11 +0100
Subject: [PATCH 138/253] feat: Update hippie-style module

---
 source/style/hippie-style | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index 0e6aa4b..91d136f 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 0e6aa4bb02a5323a3eadd92715e03e38e80858cb
+Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816

From e11cb2f1848bdc057b4afea5701456c8f8b0ab76 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Feb 2026 21:55:56 +0100
Subject: [PATCH 139/253] fix: Remove unnecessary super block from app template

---
 source/templates/hippie/app.liquid | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 7295dfc..789eb2d 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -12,7 +12,6 @@
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="{{ pageBase }}js/globals.js"></script>

From 36cf5178f2007a58d7941e31cfa79e949736b0dd Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Feb 2026 21:59:25 +0100
Subject: [PATCH 140/253] feat: Replace nunjucks with new template and screen

- Replace ui index with liquid
- Add simple template inheriting from default
---
 source/screens/demo/examples/ui/index.liquid | 24 +++++++++++++++++++
 source/screens/demo/examples/ui/index.njk    | 25 --------------------
 source/templates/hippie/simple.liquid        | 15 ++++++++++++
 3 files changed, 39 insertions(+), 25 deletions(-)
 create mode 100644 source/screens/demo/examples/ui/index.liquid
 delete mode 100644 source/screens/demo/examples/ui/index.njk
 create mode 100644 source/templates/hippie/simple.liquid

diff --git a/source/screens/demo/examples/ui/index.liquid b/source/screens/demo/examples/ui/index.liquid
new file mode 100644
index 0000000..614beed
--- /dev/null
+++ b/source/screens/demo/examples/ui/index.liquid
@@ -0,0 +1,24 @@
+---
+title: UI
+tags:
+- demoExample
+- index
+---
+{% layout "hippie/simple.liquid" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<h1>{{ title }}</h1>
+		<ul class="list_link">
+			{%- for ui in collections.ui -%}
+				<li>
+					<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+</div>
+{% 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
deleted file mode 100644
index 6c8d79f..0000000
--- a/source/screens/demo/examples/ui/index.njk
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: UI
-tags: 
-  - demoExample
-  - index
----
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block body %}
-	<div class="sec_main_center">
-		<nav role="doc-toc">
-			<h1>{{ title }}</h1>
-			<ul class="list_link">
-				{%- for ui in collections.ui -%}
-					<li>
-						<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
-					</li>
-				{%- endfor -%}
-			</ul>
-		</nav>
-	</div>
-{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
new file mode 100644
index 0000000..b644f9f
--- /dev/null
+++ b/source/templates/hippie/simple.liquid
@@ -0,0 +1,15 @@
+{% assign pageId = page.fileSlug -%}
+{% layout "hippie/default.liquid" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/css/demo.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block script %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
\ No newline at end of file

From 0ac6766fb00f1585ff27adb4e7c32df700603c8d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Feb 2026 22:47:02 +0100
Subject: [PATCH 141/253] feat: Change template for game screen

- Move SCSS module
- Change template to simple
---
 source/screens/demo/examples/game.liquid                  | 2 +-
 source/style/demo.scss                                    | 1 +
 source/style/modules/{ui/_game_module.scss => _game.scss} | 0
 source/style/ui.scss                                      | 1 -
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename source/style/modules/{ui/_game_module.scss => _game.scss} (100%)

diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid
index a57b17f..19d97dd 100644
--- a/source/screens/demo/examples/game.liquid
+++ b/source/screens/demo/examples/game.liquid
@@ -5,7 +5,7 @@ tags:
 - gameExample
 ---
 {% assign bodyClass = "body_game" -%}
-{% layout "hippie/app.liquid" %}
+{% layout "hippie/simple.liquid" %}
 
 {% block body %}
 	<div class="sec_main_center">
diff --git a/source/style/demo.scss b/source/style/demo.scss
index fe2b7e8..43d9cbd 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -15,4 +15,5 @@
 @use "modules/demo/demo_module";
 @use "modules/start";
 @use "modules/clock";
+@use "modules/game";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/ui/_game_module.scss b/source/style/modules/_game.scss
similarity index 100%
rename from source/style/modules/ui/_game_module.scss
rename to source/style/modules/_game.scss
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 861adf8..8c802c7 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -7,7 +7,6 @@
 @use "modules/ui/new_module";
 @use "modules/ui/drag_module";
 @use "modules/ui/form_module";
-@use "modules/ui/game_module";
 @use "modules/ui/gallery_module";
 @use "modules/ui/windows_module";
 @use "modules/ui/table_module";

From 78a761f9cf4d1e162292749c40ec84aefcacd187 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Feb 2026 23:11:33 +0100
Subject: [PATCH 142/253] feat: Change template for 10print screen

---
 source/screens/demo/examples/10print.liquid | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 9f2778b..8486ef3 100644
--- a/source/screens/demo/examples/10print.liquid
+++ b/source/screens/demo/examples/10print.liquid
@@ -3,8 +3,7 @@ title: 10print
 tags:
 - demoExample
 ---
-{% assign pageBase = "../../" -%}
-{% layout "hippie/full.liquid" %}
+{% layout "hippie/simple.liquid" %}
 
 {% block head %}
 {{ block.super -}}
@@ -16,14 +15,13 @@ tags:
 {% endblock %}
 
 {% block body %}
-<canvas id="10print"></canvas>
+<canvas id="pattern"></canvas>
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
 <script>
 	// Page script
-	const canvas = document.getElementById('10print');
+	const canvas = document.getElementById('pattern');
 	const ctx = canvas.getContext('2d');
 
 	const lineWidth = 20;

From 0daf19bd8740fea621126300ab98d1f519fb154a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 16 Feb 2026 00:26:58 +0100
Subject: [PATCH 143/253] feat: Change usage of templates

- Remove unnecessary super blocks
- Use simple templates
- Remove pageBase variable from templates
---
 source/screens/demo/basics.liquid         | 1 -
 source/screens/demo/examples/clock.liquid | 8 +++-----
 source/screens/demo/examples/start.liquid | 3 +--
 source/screens/demo/pages/blank.liquid    | 2 +-
 source/templates/hippie/app.liquid        | 6 +++---
 source/templates/hippie/full.liquid       | 2 +-
 source/templates/hippie/page.liquid       | 7 +++----
 7 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index bb9e6d2..017fcfd 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -9,7 +9,6 @@ tags:
 {% block title %}Grundlagen{% endblock %}
 
 {% block main %}
-<!-- {{ 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
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 34fb1d5..ea927c6 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -3,13 +3,12 @@ title: Clock
 tags:
 - demoExample
 ---
-{% assign pageBase = "../../" -%}
 {% assign bodyClass = "body_clock" -%}
-{% layout "hippie/full.liquid" %}
+{% layout "hippie/simple.liquid" %}
 
 {% block body %}
 <main>
-	<canvas id="clock" width="512" height="512"></canvas>
+	<canvas id="rings" width="512" height="512"></canvas>
 	<p>
 		<button id="tglFormat">12-Stunden-Format</button>
 	</p>
@@ -17,10 +16,9 @@ tags:
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
 <script>
 	// Page script
-	const canvas = document.getElementById('clock');
+	const canvas = document.getElementById('rings');
 	const ctx = canvas.getContext('2d');
 	let is24HourFormat = true;
 	const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 3155921..3a42779 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -6,7 +6,7 @@ tags:
 {% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
 {% assign bodyClass = "body_start" -%}
-{% layout "hippie/full.liquid" %}
+{% layout "hippie/simple.liquid" %}
 
 {% block body %}
 <main>
@@ -35,7 +35,6 @@ tags:
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
 <script>
 	// Page script
 	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
index 5fde24f..6ef5d56 100644
--- a/source/screens/demo/pages/blank.liquid
+++ b/source/screens/demo/pages/blank.liquid
@@ -3,7 +3,7 @@ title: Blank
 ---
 {% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/full.liquid" %}
+{% layout "hippie/simple.liquid" %}
 
 {% block body %}
 <!-- {{ title }} -->
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 789eb2d..7e704f7 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -8,14 +8,14 @@
 {% block links %}
 {{ block.super -}}
 <link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+<link href="/css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
 {% block script %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
-<script src="{{ pageBase }}js/globals.js"></script>
-<script src="{{ pageBase }}js/app.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
 
 <script>
 	const frameHeader = document.querySelector('body > header.io');
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index fd86906..a3bc72c 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -28,7 +28,7 @@
 	{% 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"/>
+	<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
 	{% endblock -%}
 	{% render "hippie/partials/log-log" with "HEAD end    :: Links parsed, starting to load." as msg -%}
 	{% endblock -%}
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index 369d930..4a17167 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -17,8 +17,7 @@
 {% endif %}
 
 {% comment %}<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>{% endcomment %}
-<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
-{% comment %}<link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/>{% endcomment %}
+{% comment %}<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/>{% endcomment %}
 {% endblock %}
 
 {% block body %}
@@ -38,8 +37,8 @@
 {% block script %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
-<script src="{{ pageBase }}js/globals.js"></script>
-<script src="{{ pageBase }}js/app.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
 <script>
 	// Setup global things for all screens
 	setup();

From 63c899b789ba37f08b9a533ad61c17923633d140 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 16 Feb 2026 00:30:01 +0100
Subject: [PATCH 144/253] feat: Replace template fpr components screen

- Nunjucks to liquid
- Rename partials
- Add footer partial
---
 source/screens/demo/components.liquid         | 399 +++++++++++++++++
 source/screens/demo/components.njk            | 407 ------------------
 source/templates/hippie/page.liquid           |   6 +-
 ...{page-footer.liquid => footer-page.liquid} |   0
 .../hippie/partials/footer-pinned.liquid      |   3 +
 ...{page-header.liquid => header-page.liquid} |   0
 .../{page-nav.liquid => nav-page.liquid}      |   0
 7 files changed, 405 insertions(+), 410 deletions(-)
 create mode 100644 source/screens/demo/components.liquid
 delete mode 100644 source/screens/demo/components.njk
 rename source/templates/hippie/partials/{page-footer.liquid => footer-page.liquid} (100%)
 create mode 100644 source/templates/hippie/partials/footer-pinned.liquid
 rename source/templates/hippie/partials/{page-header.liquid => header-page.liquid} (100%)
 rename source/templates/hippie/partials/{page-nav.liquid => nav-page.liquid} (100%)

diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
new file mode 100644
index 0000000..75c6eeb
--- /dev/null
+++ b/source/screens/demo/components.liquid
@@ -0,0 +1,399 @@
+---
+title: Components
+tags:
+- demoIndex
+---
+{% layout "hippie/page.liquid" %}
+
+{% block title %}Komponenten{% endblock %}
+
+{% block main %}
+<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_tabletPortraitOnly">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://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>
+		<hgroup>
+			<h2>Überschrift 1 oder 2</h2>
+			<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;">
+			{% render "hippie/partials/footer-pinned.liquid" %}
+		</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.hidden+hr.dotted+hr.double</code></pre>
+		<hr class="hidden">
+		<hr class="dotted">
+		<hr class="double">
+		<pre class="pre_code"><code>hr.vertical</code></pre>
+		<hr class="vertical">
+		<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="inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
+		</div>
+		<h4>Varianten</h4>
+		<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
+		<div class="inline">
+			<input class="button_io" type="button" value="Input type button">
+			<button class="button_io">Button</button>
+		</div>
+		<div class="inline">
+			<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
+			<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+			<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
+		</div>
+		<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 %}
+{{ block.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/components.njk b/source/screens/demo/components.njk
deleted file mode 100644
index 4d4ba16..0000000
--- a/source/screens/demo/components.njk
+++ /dev/null
@@ -1,407 +0,0 @@
----
-title: Components
-tags:
-  - demoIndex
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_main.njk" %}
-{% import "hippie/macros/_footer.njk" as footer %}
-
-{% block title %}Komponenten{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ 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_tabletPortraitOnly">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://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>
-			<hgroup>
-				<h2>Überschrift 1 oder 2</h2>
-				<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.hidden+hr.dotted+hr.double</code></pre>
-			<hr class="hidden">
-			<hr class="dotted">
-			<hr class="double">
-			<pre class="pre_code"><code>hr.vertical</code></pre>
-			<hr class="vertical">
-			<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="inline">
-				<input value="Undefiniert"/>
-				<input type="text" size="8" value="Text"/>
-				<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-				<input type="button" value="Auswählen">
-				<input type="submit" value="Senden" disabled="disabled"/>
-			</div>
-			<h4>Varianten</h4>
-			<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
-			<div class="inline">
-				<input class="button_io" type="button" value="Input type button">
-				<button class="button_io">Button</button>
-			</div>
-			<div class="inline">
-				<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
-				<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
-				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
-			</div>
-			<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>
-		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/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index 4a17167..4afccb7 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -22,15 +22,15 @@
 
 {% block body %}
 {{ block.super -}}
-{% render "hippie/partials/page-nav.liquid" %}
+{% render "hippie/partials/nav-page.liquid" %}
 <div id="root">
-	{% render "hippie/partials/page-header.liquid" %}
+	{% render "hippie/partials/header-page.liquid" %}
 
 	<main class="main_site">
 		{% block main %}{% endblock %}
 	</main>
 
-	{% render "hippie/partials/page-footer.liquid" %}
+	{% render "hippie/partials/footer-page.liquid" %}
 </div>
 {% endblock %}
 
diff --git a/source/templates/hippie/partials/page-footer.liquid b/source/templates/hippie/partials/footer-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/page-footer.liquid
rename to source/templates/hippie/partials/footer-page.liquid
diff --git a/source/templates/hippie/partials/footer-pinned.liquid b/source/templates/hippie/partials/footer-pinned.liquid
new file mode 100644
index 0000000..5f4160a
--- /dev/null
+++ b/source/templates/hippie/partials/footer-pinned.liquid
@@ -0,0 +1,3 @@
+<footer class="pos_abs pin_{{ pos | default: 'bottom' }} pin_right pin_left">
+	<p class="txt_center">Unten fixiert</p>
+</footer>
diff --git a/source/templates/hippie/partials/page-header.liquid b/source/templates/hippie/partials/header-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/page-header.liquid
rename to source/templates/hippie/partials/header-page.liquid
diff --git a/source/templates/hippie/partials/page-nav.liquid b/source/templates/hippie/partials/nav-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/page-nav.liquid
rename to source/templates/hippie/partials/nav-page.liquid

From f28bed372cacc5e804dd3d079bdc38d8c7f89b47 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 17 Feb 2026 20:33:44 +0100
Subject: [PATCH 145/253] feat: Optimize components screen

- Fix typos
- Format
- Rework shift and capslock detection
---
 source/screens/demo/components.liquid | 124 +++++++++++---------------
 1 file changed, 50 insertions(+), 74 deletions(-)

diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 75c6eeb..02a51ff 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -31,8 +31,12 @@ tags:
 <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>
+		<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>
@@ -40,7 +44,8 @@ tags:
 		<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>
+		<p>Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
+			zugewiesen.</p>
 		<h2>&lt;article&gt;</h2>
 		<article>Ein Artikel.</article>
 		<h2>&lt;section&gt;</h2>
@@ -85,7 +90,7 @@ tags:
 			<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>
+		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
 		<footer>Fußbereich</footer>
 		<div style="position:relative;height:256px;background-color:#b7e0f0;">
 			{% render "hippie/partials/footer-pinned.liquid" %}
@@ -167,12 +172,11 @@ tags:
 		<h4>Varianten</h4>
 		<pre class="pre_code"><code>div.div_info>p</code></pre>
 		<div class="div_info">
-			<p>Absatz in Informationsbox.</p>
+			<p>Absatz in einer Box mit dem Typ <i>Information</i>.</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 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>
@@ -299,20 +303,24 @@ tags:
 		</div>
 		<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>
+				<input id="inpPass" type="password"/>
+				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
+				<br>
+				<input id ="inpText" type="text"/>
+				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>
 		<h2>&lt;select&gt;</h2>
 		<select name="F">
 			<option value="0">
-				Plain list</option>
+				Plain list
+			</option>
 			<option value="1" selected="selected">
-				Fancy list</option>
+				Fancy list
+			</option>
 			<option value="2">
-				Table list</option>
+				Table list
+			</option>
 		</select>
 	</article>
 </section>
@@ -321,79 +329,47 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	function capLock(e) {
-		console.log('capLock');
-		kc = e.keyCode
-			? e.keyCode
-			: e.which;
-		sk = e.shiftKey
-			? e.shiftKey
-			: (
-				(kc == 16)
-					? true
-					: false);
+	const capsHint = document.getElementById('hintPass');
+	let isShiftPressed = false;
 
-		if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
-			document
-				.getElementById('hint')
-				.style
-				.visibility = 'visible';
+	document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
+
+	function shiftDetect(event) {
+		if (event.getModifierState('Shift')) {
+			isShiftPressed = true;
+			capsHint.style.visibility = 'visible';
 		} else {
-			document
-				.getElementById('hint')
-				.style
-				.visibility = 'hidden';
+			isShiftPressed = false;
+			capsHint.style.visibility = 'hidden';
 		}
+
+		console.log('Shift', isShiftPressed);
 	}
 
+	document.getElementById('inpPass').addEventListener('keyup', (event) => {
+		if (event.key === 'Shift') {
+			isShiftPressed = false;
+			capsHint.style.visibility = 'hidden';
+		}
+	});
+
 	function capsDetect() {
-		const body = document.getElementsByTagName('body')[0];
-		const capsWarning = document.getElementById('error');
-		let isShiftPressed = false;
+		const capsHint = document.getElementById('hintText');
 		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) {
+		document.getElementById('inpText').addEventListener('keyup', function (e) {
+			if (event.getModifierState('CapsLock')) {
+				capsHint.style.display = 'inline';
 				isCapsOn = true;
-				capsWarning.style.display = 'inline-block';
 			} else {
-				capsWarning.style.display = 'none';
+				capsHint.style.display = 'none';
+				isCapsOn = false;
 			}
+
+			console.log('CapsLock', isCapsOn);
 		});
 	}
 
-	// TODO: Beide Varianten lauffähig machen
-	// capsDetect();
+	capsDetect();
 </script>
 {% endblock %}
\ No newline at end of file

From 6c5bf2e54d25e0c1cd969eb12e13c89d0bdacf4a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 17 Feb 2026 21:01:00 +0100
Subject: [PATCH 146/253] feat: Replace nunjucks with liquid for introduction
 screen

---
 source/screens/demo/introduction.liquid | 40 +++++++++++++++++++++
 source/screens/demo/introduction.njk    | 47 -------------------------
 2 files changed, 40 insertions(+), 47 deletions(-)
 create mode 100644 source/screens/demo/introduction.liquid
 delete mode 100644 source/screens/demo/introduction.njk

diff --git a/source/screens/demo/introduction.liquid b/source/screens/demo/introduction.liquid
new file mode 100644
index 0000000..af5cf07
--- /dev/null
+++ b/source/screens/demo/introduction.liquid
@@ -0,0 +1,40 @@
+---
+title: Introduction
+tags:
+- demoIndex
+---
+{% layout "hippie/page.liquid" %}
+
+{% block title %}Einführung{% endblock %}
+
+{% block main %}
+<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 %}
+{{ block.super -}}
+<script>
+	assetsLoaded = true;
+	logPerf('Assets loaded.', assetsLoaded);
+	// Page specific
+	// ------------------------------------------------------------------------------
+	composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+	composeMail('.general', 'name', 'domain', 'tld', '', '')
+
+	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
deleted file mode 100644
index f1a9752..0000000
--- a/source/screens/demo/introduction.njk
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Introduction
-tags:
-  - demoIndex
----
-{% set pageBase = "../" %}
-{% set pageId = "intro" %}
-
-{% extends "demo/_main.njk" %}
-
-{% block title %}Einführung{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ 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>
-		assetsLoaded = true;
-		logPerf('Assets loaded.', assetsLoaded);
-		// Page specific
-		// ------------------------------------------------------------------------------
-		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
-		composeMail('.general', 'name', 'domain', 'tld', '', '')
-
-		logPerf('Application ready... not.');
-	</script>
-{% endblock %}
\ No newline at end of file

From d04e0e31741b6c4e55f728a5f214ac3bf991d7e5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 17 Feb 2026 21:53:06 +0100
Subject: [PATCH 147/253] feat: Add content to table screen

---
 source/screens/demo/examples/ui/table.liquid | 22 +++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 5266b2a..23b84d0 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -43,7 +43,10 @@ tags:
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
 				<th scope="col">Description</th>
+				<th scope="col">Amount</th>
+				<th scope="col">Unit</th>
 				<th scope="col">Price</th>
+				<th scope="col">Sum</th>
 				<th scope="col"></th>
 			</tr>
 			</thead>
@@ -68,6 +71,15 @@ tags:
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -116,7 +128,6 @@ tags:
 	const currencyEuro = new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'});
 
 	const content = document.querySelector('main.io section > table');
-	// const content = document.getElementById('content');
 	const tbodyPosition = document.getElementById('positions');
 
 	tbodyPosition.addEventListener('click', (event) => {
@@ -140,6 +151,9 @@ tags:
 
 		const j = i % placeholderNames.length;
 		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;
 
 		tr.setAttribute('data-id', i);
 		th.textContent = i + 1;
@@ -147,8 +161,10 @@ tags:
 		td[3].textContent = placeholderNames[j];
 		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
 		td[4].firstElementChild.textContent = placeholderContents[k];
-		// td[5].textContent = randomIntFrom(1, i).toString();
-		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
+		td[5].firstElementChild.value = amount;
+		td[5].firstElementChild.style.width = '4em';
+		td[7].textContent = currencyEuro.format(price);
+		td[8].textContent = currencyEuro.format(sum);
 
 		tbodyPosition.appendChild(clone);
 	}

From fd5f3ba89fae253d609fd67f852733f8e6546641 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Feb 2026 20:43:52 +0100
Subject: [PATCH 148/253] chore: Add possibility to deploy

- New npm scripts
- New folder for deployment content
- Currently using a fixed --pathprefix option with hippie as value
- Add deploy to gitignore
---
 .eleventy.js | 4 +++-
 .gitignore   | 1 +
 package.json | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.eleventy.js b/.eleventy.js
index 5b24790..03ea12f 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,7 @@
+const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+
 module.exports = function (eleventyConfig) {
-	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
diff --git a/.gitignore b/.gitignore
index a4481ea..6ae690a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # HIPPIE
 ###################
 build/**
+deploy/**
 reports/**
 source/art/sprites/
 source/art/images/sprite.*
diff --git a/package.json b/package.json
index 49351cc..8036798 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,11 @@
     "clean:report": "rm -rf report/*",
     "clean:test": "rm -rf test/*",
     "style:compile": "sass source/style:build/css --load-path=vendor",
+    "style:deploy": "sass source/style:deploy/css --load-path=vendor",
     "style:watch": "sass --watch source/style:build/css --load-path=vendor",
     "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
     "build": "npx @11ty/eleventy && npm run style:compile",
+    "deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
     "serve": "npm run style:watch & npx @11ty/eleventy --serve"
   },
   "private": true,

From b10379782fffaccee01d21417a5b49f70159e20d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Feb 2026 09:28:50 +0100
Subject: [PATCH 149/253] feat: Add functionality to table screen

- New templates for rows with different content
- Rows can now be repositioned
- Change of rows now causes a reindex
---
 source/screens/demo/examples/ui/table.liquid | 161 ++++++++++++++++++-
 1 file changed, 156 insertions(+), 5 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 23b84d0..c0887b7 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -19,6 +19,8 @@ tags:
 					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
+			</nav>
+			<nav>
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
@@ -31,10 +33,10 @@ tags:
 					</select>
 					<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
 				</div>
+				{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
 			</nav>
-			<nav></nav>
 		</header>
-		<table id="content">
+		<table id="content" class="draggable">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@@ -56,11 +58,101 @@ tags:
 	</section>
 </main>
 <template id="rowDefault">
-	<tr>
+	<tr draggable="true">
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowArticle">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowText">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td colspan="6">
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
 		</td>
@@ -90,6 +182,7 @@ tags:
 		</td>
 	</tr>
 </template>
+
 {% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}
 
@@ -233,7 +326,55 @@ tags:
 				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
 			}
 		}
-		// TODO: Neuen index bilden
+
+		reindexRows(tbodyPosition);
+	});
+
+	let draggedRow = null;
+
+	tbodyPosition.addEventListener('dragstart', (event) => {
+		const rowTarget = event.target.closest('tr[draggable="true"]');
+
+		if (rowTarget) {
+			draggedRow = rowTarget;
+			rowTarget.classList.add('dragging');
+			event.dataTransfer.effectAllowed = 'move';
+
+			console.debug('Drag', rowTarget);
+		}
+	});
+
+	tbodyPosition.addEventListener('dragend', () => {
+		if (draggedRow) {
+			draggedRow.classList.remove('dragging');
+			draggedRow = null;
+		}
+	});
+
+	tbodyPosition.addEventListener('dragover', (event) => {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = 'move';
+
+		const rowTarget = event.target.closest('tr');
+
+		if (rowTarget && rowTarget !== draggedRow) {
+			const rows = [...tbodyPosition.querySelectorAll('tr')];
+			const draggedIndex = rows.indexOf(draggedRow);
+			const targetIndex = rows.indexOf(rowTarget);
+
+			if (draggedIndex < targetIndex) {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling);
+			} else {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget);
+			}
+		}
+	});
+
+	tbodyPosition.addEventListener('drop', (event) => {
+		event.preventDefault();
+		reindexRows(event.currentTarget);
+
+		console.debug('Drop');
 	});
 
 	function cloneRow(type = 'default') {
@@ -244,5 +385,15 @@ tags:
 
 		return document.importNode(rowFragment, true);
 	}
+
+	function reindexRows(parent, selector = 'tr') {
+		const rows = parent.querySelectorAll(selector);
+		let th = undefined;
+
+		for (let i = 0; i < rows.length; i++) {
+			th = rows[i].querySelector('th');
+			th.textContent = i + 1;
+		}
+	}
 </script>
 {% endblock %}
\ No newline at end of file

From d64bf61a9c0e98e80ba80febe33c2b1d8412f9a5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Feb 2026 12:16:34 +0100
Subject: [PATCH 150/253] feat: Replace layouts template

- Change nunjucks to liquid for layouts screen
- Add shortcodes for placeholders to eleventy
---
 .eleventy.js                                  |  24 +-
 source/screens/demo/layouts.liquid            | 311 +++++++++++++++++
 source/screens/demo/layouts.njk               | 317 ------------------
 .../hippie/partials/placeholder-flag.liquid   |   1 +
 4 files changed, 335 insertions(+), 318 deletions(-)
 create mode 100644 source/screens/demo/layouts.liquid
 delete mode 100644 source/screens/demo/layouts.njk

diff --git a/.eleventy.js b/.eleventy.js
index 03ea12f..34db01b 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,4 +1,4 @@
-const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
 
 module.exports = function (eleventyConfig) {
 	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
@@ -28,10 +28,32 @@ module.exports = function (eleventyConfig) {
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
+		placeholders: {
+			name: 'Vorname Nachname',
+			address: 'Straße Nr., PLZ Ort',
+			phone: '+49 (0)101 1337 48',
+			mail: 'name@domain.tld'
+		},
 		debugMode: true,
 		legacyMode: false
 	});
 
+	eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
+		return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
+	});
+
+	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
+		if (text === '') {
+			text = target;
+		}
+
+		if (target.indexOf('@') !== -1) {
+			target = 'mailto:' + target;
+		}
+
+		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
+	});
+
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
 
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
new file mode 100644
index 0000000..02f3fa3
--- /dev/null
+++ b/source/screens/demo/layouts.liquid
@@ -0,0 +1,311 @@
+---
+title: Layouts
+tags:
+- demoIndex
+---
+{% layout "hippie/page.liquid" %}
+
+{% block title %}Gestaltungen{% endblock %}
+
+{%  block main %}
+<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 (sections)</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">
+				{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+			</div>
+			<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
+			<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
+		</section>
+		<h3>nav</h3>
+		<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>
+		<h3>header</h3>
+		<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>
+
+		<h2>Interaktiv (interactive)</h2>
+		<h3>input</h3>
+		<div class="flex inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
+		</div>
+		<h3>form</h3>
+		<form method="get">
+			<p>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>Gruppierung (grouping)</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.dotted.space_even_fourth</code></pre>
+		<hr class="dotted space_even_fourth">
+		<h3>ul</h3>
+		<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
+		<nav>
+			<ul class="list_link">
+				<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
+				<li>
+					<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
+				</li>
+			</ul>
+		</nav>
+		<h3>div</h3>
+		<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>
+
+		<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">■</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">■</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">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+</section>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+<script>
+	assetsLoaded = true;
+	logPerf('Assets loaded.', assetsLoaded);
+	// 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/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
deleted file mode 100644
index a35cfff..0000000
--- a/source/screens/demo/layouts.njk
+++ /dev/null
@@ -1,317 +0,0 @@
----
-title: Layouts
-tags:
-  - demoIndex
----
-{% set pageBase = "../" %}
-{% set pageId = page.fileSlug %}
-
-{% extends "demo/_main.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}Gestaltungen{% endblock %}
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block main %}
-	<!-- {{ 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 (sections)</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">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
-				<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
-				<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
-			</section>
-			<h3>nav</h3>
-			<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>
-			<h3>header</h3>
-			<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>
-
-			<h2>Interaktiv (interactive)</h2>
-			<h3>input</h3>
-			<div class="flex inline">
-				<input value="Undefiniert"/>
-				<input type="text" size="8" value="Text"/>
-				<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-				<input type="button" value="Auswählen">
-				<input type="submit" value="Senden" disabled="disabled"/>
-			</div>
-			<h3>form</h3>
-			<form method="get">
-				<p>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>Gruppierung (grouping)</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.dotted.space_even_fourth</code></pre>
-			<hr class="dotted space_even_fourth">
-			<h3>ul</h3>
-			<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
-			<nav>
-				<ul class="list_link">
-					<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
-					<li>
-						<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
-					</li>
-				</ul>
-			</nav>
-			<h3>div</h3>
-			<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>
-
-			<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">■</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">■</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">
-				{{ ph.flag() }}
-			</div>
-		</article>
-	</section>
-{% endblock %}
-
-{% block 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/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
index 02432cb..280a48c 100644
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@@ -1,4 +1,5 @@
 {% assign height = width | divided_by: 1.6 %}
+
 {% if type == 'svg' or type == '' %}
 	<svg version="1.1" id="{{ id }}" 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">
 		{% comment %}<defs>

From 2d3c049d40a07fb76f4a6c8a9f99cdb294d76ef3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Feb 2026 12:58:31 +0100
Subject: [PATCH 151/253] feat: Remove pageBase from liquid templates

- Remove pageBase global from all liquid templates
- Change " to ' for all liquid tags
---
 source/screens/demo/basics.liquid                |  9 ++++-----
 source/screens/demo/components.liquid            |  4 ++--
 source/screens/demo/examples/10print.liquid      |  2 +-
 source/screens/demo/examples/clock.liquid        |  4 ++--
 source/screens/demo/examples/game.liquid         |  4 ++--
 source/screens/demo/examples/start.liquid        |  5 ++---
 source/screens/demo/examples/ui/cli.liquid       |  4 ++--
 source/screens/demo/examples/ui/drag.liquid      |  6 +++---
 source/screens/demo/examples/ui/explorer.liquid  |  4 ++--
 source/screens/demo/examples/ui/form.liquid      |  4 ++--
 source/screens/demo/examples/ui/gallery.liquid   |  4 ++--
 source/screens/demo/examples/ui/index.liquid     |  2 +-
 source/screens/demo/examples/ui/table.liquid     |  4 ++--
 source/screens/demo/examples/ui/tile.liquid      |  4 ++--
 source/screens/demo/examples/ui/tui.liquid       |  4 ++--
 source/screens/demo/examples/ui/windows.liquid   | 10 +++++-----
 source/screens/demo/index.liquid                 |  5 ++---
 source/screens/demo/introduction.liquid          |  2 +-
 source/screens/demo/layouts.liquid               |  2 +-
 source/screens/demo/pages/blank.liquid           |  7 +------
 source/screens/demo/pages/default.liquid         | 16 ++++++----------
 source/screens/demo/pages/error/304.liquid       |  5 ++---
 source/screens/demo/pages/error/400.liquid       |  5 ++---
 source/screens/demo/pages/error/401.liquid       |  5 ++---
 source/screens/demo/pages/error/403.liquid       |  5 ++---
 source/screens/demo/pages/error/404.liquid       |  5 ++---
 source/screens/demo/pages/error/408.liquid       |  5 ++---
 source/screens/demo/pages/error/500.liquid       |  5 ++---
 source/screens/demo/pages/error/503.liquid       |  5 ++---
 source/screens/demo/pages/maintenance.liquid     |  5 ++---
 source/templates/hippie/app.liquid               |  5 ++---
 source/templates/hippie/default.liquid           |  6 +++---
 source/templates/hippie/full.liquid              | 14 ++++++--------
 source/templates/hippie/page.liquid              |  8 ++++----
 source/templates/hippie/partials/links.liquid    |  2 +-
 source/templates/hippie/partials/nav-page.liquid |  4 ++--
 source/templates/hippie/simple.liquid            |  2 +-
 source/templates/hippie/status.liquid            |  4 ++--
 38 files changed, 86 insertions(+), 110 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 017fcfd..8093d67 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -3,8 +3,7 @@ title: Basics
 tags:
 - demoIndex
 ---
-{% assign pageBase = "../" -%}
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Grundlagen{% endblock %}
 
@@ -278,7 +277,7 @@ tags:
 		<nav class="nav_center_old">
 			<ul>
 				<li>
-					<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
+					<a href="/demo/examples/start.html" class="a_button">Startseite</a>
 				</li>
 				<li>
 					<a href="" class="a_button a_internal">Hilfe</a>
@@ -580,7 +579,7 @@ tags:
 	</article>
 	<article>
 		<h1 id="embedded">Eingebundene Inhalte</h1>
-		{% render "hippie/partials/placeholder-flag.liquid", type: "img", width: "128", desc: "Fahne von Interaktionsweise" %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: '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
@@ -599,7 +598,7 @@ tags:
 			und
 			<code>&lt;picture&gt;</code>
 			in Kombination verwendet werden.</p>
-		{% render "hippie/partials/placeholder-flag.liquid", type: "img", src: "file", width: "128", desc: "Fahne von Interaktionsweise" %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
 	</article>
 	<article>
 		<h1>Tabellen</h1>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 02a51ff..e4faaaf 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -3,7 +3,7 @@ title: Components
 tags:
 - demoIndex
 ---
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Komponenten{% endblock %}
 
@@ -93,7 +93,7 @@ tags:
 		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
 		<footer>Fußbereich</footer>
 		<div style="position:relative;height:256px;background-color:#b7e0f0;">
-			{% render "hippie/partials/footer-pinned.liquid" %}
+			{% render 'hippie/partials/footer-pinned.liquid' %}
 		</div>
 	</article>
 	<article>
diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 8486ef3..9ee9246 100644
--- a/source/screens/demo/examples/10print.liquid
+++ b/source/screens/demo/examples/10print.liquid
@@ -3,7 +3,7 @@ title: 10print
 tags:
 - demoExample
 ---
-{% layout "hippie/simple.liquid" %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block head %}
 {{ block.super -}}
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ea927c6..7dc6998 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -3,8 +3,8 @@ title: Clock
 tags:
 - demoExample
 ---
-{% assign bodyClass = "body_clock" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_clock' -%}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <main>
diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid
index 19d97dd..734a5a6 100644
--- a/source/screens/demo/examples/game.liquid
+++ b/source/screens/demo/examples/game.liquid
@@ -4,8 +4,8 @@ tags:
 - demoExample
 - gameExample
 ---
-{% assign bodyClass = "body_game" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_game' -%}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 	<div class="sec_main_center">
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 3a42779..e11d3f8 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -3,10 +3,9 @@ title: Start
 tags:
 - demoExample
 ---
-{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign bodyClass = "body_start" -%}
-{% layout "hippie/simple.liquid" %}
+{% assign bodyClass = 'body_start' -%}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <main>
diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid
index 18f4cd4..a87d4b8 100644
--- a/source/screens/demo/examples/ui/cli.liquid
+++ b/source/screens/demo/examples/ui/cli.liquid
@@ -3,8 +3,8 @@ title: CLI
 tags:
 - ui
 ---
-{% assign bodyClass = "body_cli" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_cli' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <div id="cli">
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
index 7b46674..37d806e 100755
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@@ -3,7 +3,7 @@ title: Drag
 tags:
 - ui
 ---
-{% layout "hippie/app.liquid" %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
@@ -22,8 +22,8 @@ tags:
 {% endblock %}
 
 {%- block script %}
-<script src="{{ pageBase }}js/app.js"></script>
-<script src="{{ pageBase }}js/drag.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/drag.js"></script>
 <script>
 	// Get the space element
 	const space = document.getElementById('space');
diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid
index f8e66fa..bfdd28a 100644
--- a/source/screens/demo/examples/ui/explorer.liquid
+++ b/source/screens/demo/examples/ui/explorer.liquid
@@ -3,8 +3,8 @@ title: Explorer
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
diff --git a/source/screens/demo/examples/ui/form.liquid b/source/screens/demo/examples/ui/form.liquid
index 492e191..3a7aceb 100644
--- a/source/screens/demo/examples/ui/form.liquid
+++ b/source/screens/demo/examples/ui/form.liquid
@@ -3,8 +3,8 @@ title: Form
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index 8128023..0d372d4 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -3,8 +3,8 @@ title: Gallery
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
diff --git a/source/screens/demo/examples/ui/index.liquid b/source/screens/demo/examples/ui/index.liquid
index 614beed..5952f16 100644
--- a/source/screens/demo/examples/ui/index.liquid
+++ b/source/screens/demo/examples/ui/index.liquid
@@ -4,7 +4,7 @@ tags:
 - demoExample
 - index
 ---
-{% layout "hippie/simple.liquid" %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index c0887b7..a386015 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -3,8 +3,8 @@ title: Table
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
diff --git a/source/screens/demo/examples/ui/tile.liquid b/source/screens/demo/examples/ui/tile.liquid
index 4bcd8c4..be51071 100644
--- a/source/screens/demo/examples/ui/tile.liquid
+++ b/source/screens/demo/examples/ui/tile.liquid
@@ -3,8 +3,8 @@ title: Tile
 tags:
 - ui
 ---
-{% assign bodyClass = "body_new" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_new' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 {% render 'hippie/partials/header-status', hippie: hippie, links: start %}
diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid
index cb2434f..ac42d52 100644
--- a/source/screens/demo/examples/ui/tui.liquid
+++ b/source/screens/demo/examples/ui/tui.liquid
@@ -3,8 +3,8 @@ title: TUI
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 {% render 'hippie/partials/frame-header.liquid' %}
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 02606e6..d8700cd 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -3,8 +3,8 @@ title: Windows
 tags:
 - ui
 ---
-{% assign bodyClass = "body_frame" -%}
-{% layout "hippie/app.liquid" %}
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <div id="task-bar">
@@ -50,10 +50,10 @@ tags:
 {% endblock %}
 
 {%- block script %}
-{% comment %}<script src="{{ pageBase }}js/globals.js"></script>{% endcomment %}
+{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
 <script src="/vendor/hippie-script.js"></script>
-<script src="{{ pageBase }}js/app.js"></script>
-<script src="{{ pageBase }}js/windows.js"></script>
+<script src="/js/app.js"></script>
+<script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
 	// Get the space element
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 9f4aa9e..99ba875 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -4,10 +4,9 @@ title: Index
 tags:
 - demoIndex
 ---
-{% assign pageBase = hippie.pageBase -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "h_full_view" -%}
-{% layout "hippie/full.liquid" %}
+{% assign pageClass = 'h_full_view' -%}
+{% layout 'hippie/full.liquid' %}
 
 {% block body %}
 <div class="wrap">
diff --git a/source/screens/demo/introduction.liquid b/source/screens/demo/introduction.liquid
index af5cf07..91993cb 100644
--- a/source/screens/demo/introduction.liquid
+++ b/source/screens/demo/introduction.liquid
@@ -3,7 +3,7 @@ title: Introduction
 tags:
 - demoIndex
 ---
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Einführung{% endblock %}
 
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
index 02f3fa3..d7dc539 100644
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@@ -3,7 +3,7 @@ title: Layouts
 tags:
 - demoIndex
 ---
-{% layout "hippie/page.liquid" %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Gestaltungen{% endblock %}
 
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
index 6ef5d56..5cf5e7c 100644
--- a/source/screens/demo/pages/blank.liquid
+++ b/source/screens/demo/pages/blank.liquid
@@ -1,10 +1,5 @@
 ---
 title: Blank
 ---
-{% assign pageBase = "../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/simple.liquid" %}
-
-{% block body %}
-<!-- {{ title }} -->
-{% endblock %}
+{% layout 'hippie/simple.liquid' %}
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
index bb44e71..9b84b78 100644
--- a/source/screens/demo/pages/default.liquid
+++ b/source/screens/demo/pages/default.liquid
@@ -1,17 +1,13 @@
 ---
 title: Default
 ---
-{% assign pageBase = "../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "default" -%}
-{% assign bodyClass = "default" -%}
-{% layout "hippie/default.liquid" %}
+{% assign pageClass = 'default' -%}
+{% assign bodyClass = 'default' -%}
+{% layout 'hippie/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
-{% block script %}
-<script>
-	// Page script
-	console.log("pageBase is: {{ pageBase }}");
-</script>
-{% endblock %}
\ No newline at end of file
+{% block body %}
+<!-- {{ title }} body -->
+{% endblock %}
diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid
index 4fa65ef..75127a7 100644
--- a/source/screens/demo/pages/error/304.liquid
+++ b/source/screens/demo/pages/error/304.liquid
@@ -1,9 +1,8 @@
 ---
 title: 304
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/400.liquid b/source/screens/demo/pages/error/400.liquid
index 86cb860..ffe7d9c 100644
--- a/source/screens/demo/pages/error/400.liquid
+++ b/source/screens/demo/pages/error/400.liquid
@@ -1,9 +1,8 @@
 ---
 title: 400
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/401.liquid b/source/screens/demo/pages/error/401.liquid
index 09029d6..a2fbb39 100644
--- a/source/screens/demo/pages/error/401.liquid
+++ b/source/screens/demo/pages/error/401.liquid
@@ -1,9 +1,8 @@
 ---
 title: 401
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/403.liquid b/source/screens/demo/pages/error/403.liquid
index 31a5790..cfa9eed 100644
--- a/source/screens/demo/pages/error/403.liquid
+++ b/source/screens/demo/pages/error/403.liquid
@@ -1,9 +1,8 @@
 ---
 title: 403
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/404.liquid b/source/screens/demo/pages/error/404.liquid
index a90082a..9a00731 100644
--- a/source/screens/demo/pages/error/404.liquid
+++ b/source/screens/demo/pages/error/404.liquid
@@ -1,9 +1,8 @@
 ---
 title: 404
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/408.liquid b/source/screens/demo/pages/error/408.liquid
index 7984e61..1f0ef44 100644
--- a/source/screens/demo/pages/error/408.liquid
+++ b/source/screens/demo/pages/error/408.liquid
@@ -1,9 +1,8 @@
 ---
 title: 408
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/500.liquid b/source/screens/demo/pages/error/500.liquid
index 6d21ccc..5e6cb69 100644
--- a/source/screens/demo/pages/error/500.liquid
+++ b/source/screens/demo/pages/error/500.liquid
@@ -1,9 +1,8 @@
 ---
 title: 500
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/error/503.liquid b/source/screens/demo/pages/error/503.liquid
index 4805020..2a01f87 100644
--- a/source/screens/demo/pages/error/503.liquid
+++ b/source/screens/demo/pages/error/503.liquid
@@ -1,9 +1,8 @@
 ---
 title: 503
 ---
-{% assign pageBase = "../../../" -%}
-{% assign bodyClass = "body_status" %}
-{% layout "hippie/status.liquid" %}
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/screens/demo/pages/maintenance.liquid
index 4fa3286..fe36599 100644
--- a/source/screens/demo/pages/maintenance.liquid
+++ b/source/screens/demo/pages/maintenance.liquid
@@ -1,9 +1,8 @@
 ---
 title: Maintenance
 ---
-{% assign pageBase = "../../" -%}
-{% assign pageClass = "h_full_view" -%}
-{% layout "hippie/status.liquid" %}
+{% assign pageClass = 'h_full_view' -%}
+{% layout 'hippie/status.liquid' %}
 
 {% block body %}
 <hgroup id="root" class="txt_center">
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 7e704f7..4118172 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -1,7 +1,6 @@
-{% assign pageBase = "../../../" -%}
 {% assign pageId = page.fileSlug -%}
-{% assign pageClass = "html_ui" -%}
-{% layout "hippie/default.liquid" %}
+{% assign pageClass = 'html_ui' -%}
+{% layout 'hippie/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index bdcf341..4cb653e 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -18,10 +18,10 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
+	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
-	{% render "hippie/partials/links.liquid" %}
+	{% render 'hippie/partials/links.liquid' %}
 	{% endblock -%}
 	{% endblock -%}
 </head>
@@ -29,7 +29,7 @@
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
 <script>
-	// Default script
+	// {{ title }} script
 </script>
 {%- block script %}{% endblock -%}
 </body>
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index a3bc72c..5b22b17 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -18,19 +18,17 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid", author: "Interaktionsweise", desc: "Hippie interweaves preeminent personal interface elements" %}
+	{% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
 	{% 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" -%}
+	{% 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 %}
+	{% render 'hippie/partials/links.liquid' %}
 	<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
 	{% endblock -%}
-	{% render "hippie/partials/log-log" with "HEAD end    :: Links parsed, starting to load." as msg -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
 	{% endblock -%}
 </head>
 
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index 4afccb7..b6edd40 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -1,5 +1,5 @@
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/full.liquid" %}
+{% layout 'hippie/full.liquid' %}
 
 {% block meta %}
 {{ block.super -}}
@@ -22,15 +22,15 @@
 
 {% block body %}
 {{ block.super -}}
-{% render "hippie/partials/nav-page.liquid" %}
+{% render 'hippie/partials/nav-page.liquid' %}
 <div id="root">
-	{% render "hippie/partials/header-page.liquid" %}
+	{% render 'hippie/partials/header-page.liquid' %}
 
 	<main class="main_site">
 		{% block main %}{% endblock %}
 	</main>
 
-	{% render "hippie/partials/footer-page.liquid" %}
+	{% render 'hippie/partials/footer-page.liquid' %}
 </div>
 {% endblock %}
 
diff --git a/source/templates/hippie/partials/links.liquid b/source/templates/hippie/partials/links.liquid
index c1a8845..32d854d 100644
--- a/source/templates/hippie/partials/links.liquid
+++ b/source/templates/hippie/partials/links.liquid
@@ -1,3 +1,3 @@
 {% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
-	<link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
+	<link rel="shortcut icon" type="image/x-icon" href="/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/nav-page.liquid b/source/templates/hippie/partials/nav-page.liquid
index 36e5184..cf52d72 100644
--- a/source/templates/hippie/partials/nav-page.liquid
+++ b/source/templates/hippie/partials/nav-page.liquid
@@ -4,7 +4,7 @@
 			<li class="js_scrolltop di_none">
 				<a href="#begin" class="a_button_meta">
 					<div class="sprite_img demo__sprite_up"></div>
-					{% comment %}<img src="{{ pageBase }}art/up.png" alt="" width="32" height="64">{% endcomment %}
+					{% comment %}<img src="/art/up.png" alt="" width="32" height="64">{% endcomment %}
 				</a>
 			</li>
 			<li>
@@ -22,7 +22,7 @@
 			<li class="js_scrolldown">
 				<a href="#end" class="a_button_meta">
 					<div class="sprite_img demo__sprite_down"></div>
-					{% comment %}<img src="{{ pageBase }}art/down.png" alt="" width="32" height="32">{% endcomment %}
+					{% comment %}<img src="/art/down.png" alt="" width="32" height="32">{% endcomment %}
 				</a>
 			</li>
 		</ul>
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
index b644f9f..b711fe6 100644
--- a/source/templates/hippie/simple.liquid
+++ b/source/templates/hippie/simple.liquid
@@ -1,5 +1,5 @@
 {% assign pageId = page.fileSlug -%}
-{% layout "hippie/default.liquid" %}
+{% layout 'hippie/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid
index f2e0ce1..86499ed 100644
--- a/source/templates/hippie/status.liquid
+++ b/source/templates/hippie/status.liquid
@@ -15,12 +15,12 @@
 		{{ hippie.titlePostfix -}}
 	</title>
 	{% block meta -%}
-	{% render "hippie/partials/meta.liquid" %}
+	{% 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"/>
+	<link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/>
 	{% endblock -%}
 	{% endblock -%}
 </head>

From 5765207e51dfadafb9a79ddfb63078f33b8d8578 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Feb 2026 14:09:10 +0100
Subject: [PATCH 152/253] feat: Change table classes

---
 source/screens/demo/basics.liquid     | 10 ++++----
 source/screens/demo/components.liquid | 10 ++++----
 source/screens/demo/layouts.liquid    | 33 +++++++++++++++------------
 source/style/hippie-style             |  2 +-
 4 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 8093d67..6d190ec 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -631,7 +631,7 @@ tags:
 			<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">
+			<table class="blank float_space_left js_pop">
 				<tr>
 					<td>Mit</td>
 					<td>ohne</td>
@@ -641,12 +641,12 @@ tags:
 				</tr>
 			</table>
 			<div class="exp_pop">
-				<code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code>
+				<code class="code_solo">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">
+		<table class="width_full fix js_pop">
 			<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
 			<thead>
 			<tr>
@@ -684,7 +684,7 @@ tags:
 			</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>
+			<code class="code_solo">table.width_full.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>
@@ -738,7 +738,7 @@ tags:
 		</p>
 		<div class="overflow">
 			<div class="float_left">
-				<table class="table_fix table_blank">
+				<table class="fix blank">
 					<tr>
 						<td>
 							<label for="demo__raw_a">Alpha:</label>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index e4faaaf..4f4dd2b 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -189,8 +189,8 @@ tags:
 		<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">
+		<pre class="pre_code"><code>table.width_full.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 fix">
 			<thead>
 			<tr>
 				<th class="cell_pre" scope="col"></th>
@@ -220,8 +220,8 @@ tags:
 			</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">
+		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
+		<table class="width_full stripe fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@@ -243,7 +243,7 @@ tags:
 				<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>
+		<pre class="pre_code"><code>table.width_full.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>
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
index d7dc539..500e902 100644
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@@ -7,7 +7,7 @@ tags:
 
 {% block title %}Gestaltungen{% endblock %}
 
-{%  block main %}
+{% block main %}
 <section class="sec_main_center">
 	<header class="header_txt">
 		<h1>Sammlung formatierter Elemente</h1>
@@ -100,7 +100,9 @@ tags:
 		<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>
+			<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>
@@ -137,7 +139,8 @@ tags:
 				</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>
+				<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>
@@ -246,8 +249,8 @@ tags:
 		</div>
 
 		<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">
+		<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
+		<table class="link js_pop">
 			<thead>
 			<tr>
 				<th>&nbsp;</th>
@@ -257,30 +260,30 @@ tags:
 			</thead>
 			<tbody>
 			<tr>
-				<td class="cell_icon" rowspan="2">■</td>
-				<td class="cell_link">
-					<a href="" target="_blank">Name</a>
+				<td class="icon" rowspan="2">■</td>
+				<td class="link">
+					<span>Name</span>
 					<a href="" target="_blank">URL</a>
 				</td>
-				<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+				<td rowspan="2">YYYY-MM-DD</td>
 			</tr>
 			<tr>
-				<td class="cell_text">
+				<td class="text">
 					<div class="shorten">Beschreibung</div>
 				</td>
 			</tr>
 			</tbody>
 			<tbody>
 			<tr>
-				<td class="cell_icon" rowspan="2">■</td>
-				<td class="cell_link">
-					<a href="" target="_blank">Name</a>
+				<td class="icon" rowspan="2">■</td>
+				<td class="link">
+					<span>Name</span>
 					<a href="" target="_blank">URL</a>
 				</td>
-				<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
+				<td rowspan="2">YYYY-MM-DD</td>
 			</tr>
 			<tr>
-				<td class="cell_text">
+				<td class="text">
 					<div class="shorten">Beschreibung</div>
 				</td>
 			</tr>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 91d136f..69535d8 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816
+Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f

From 39591b2c37e59fdcf706c6a4a83a804d0190547b Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 25 Feb 2026 17:52:23 +0100
Subject: [PATCH 153/253] docs: Update content of TODO

---
 TODO.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/TODO.md b/TODO.md
index 6704e8e..b408e3b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,20 +1,21 @@
 # General
 
 - Remove gulp and legacy files
-- Update README
-- Explain eleventy usage
 - Better README with more info for the content section
+  - Explain eleventy usage
 - Complete CHANGELOG
 - Automatic versioning for package.json and CHANGELOG
 - Add dynamic content to robots.txt during build process
 - Add dynamic content to sitemap.xml
-- Add build process for normalize.css from github.com/necolas/normalize.css
-- Add build process for bourbon from https://github.com/thoughtbot/bourbon
 
 # CSS
 
 - Check style for every basic element
 - Uniform spelling of classes and identifiers
+- Direct class dependencies instead of repeating element names in classes
+- Change io stuff
+  - Find name for styled interactive elements
+  - Find name for io module with nested class names 
 
 # Content
 

From 318af09d400e1a485b9c2ec42beeaf9b34a789ee Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 25 Feb 2026 17:54:28 +0100
Subject: [PATCH 154/253] feat: Add styles to table screen

---
 source/screens/demo/examples/ui/table.liquid | 10 +++++-----
 source/style/hippie-style                    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index a386015..96e72ea 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -39,8 +39,8 @@ tags:
 		<table id="content" class="draggable">
 			<thead>
 			<tr>
-				<th scope="col" title="Index">#</th>
-				<th scope="col"></th>
+				<th class="min" scope="col" title="Index">#</th>
+				<th class="min" scope="col"></th>
 				<th scope="col" title="Position">#</th>
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
@@ -49,7 +49,7 @@ tags:
 				<th scope="col">Unit</th>
 				<th scope="col">Price</th>
 				<th scope="col">Sum</th>
-				<th scope="col"></th>
+				<th class="min" scope="col"></th>
 			</tr>
 			</thead>
 			<tbody id="positions"></tbody>
@@ -72,9 +72,9 @@ tags:
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
-		<td><input name="amount" type="number"></td>
+		<td><input class="input_io" name="amount" type="number"></td>
 		<td>
-			<select name="units">
+			<select class="io_select" name="units">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 69535d8..ddedf3b 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f
+Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96

From 8af4dc92d92fceb268bc5e5ec925db0bf608662d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 25 Feb 2026 21:09:13 +0100
Subject: [PATCH 155/253] docs: Update content of TODO

- Add demo tasks
- Remove clock task
---
 TODO.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index b408e3b..b055503 100644
--- a/TODO.md
+++ b/TODO.md
@@ -16,6 +16,10 @@
 - Change io stuff
   - Find name for styled interactive elements
   - Find name for io module with nested class names 
+- Change demo module
+  - Keep placeholder and demo stuff
+  - Move other things
+  - Prevent styles to be global
 
 # Content
 
@@ -132,6 +136,4 @@
           - [ ] noscript
           - [ ] template
           - [ ] slot
-          - [ ] canvas
-- *Clock*
-  - Add overlays to better distinguish day, week and year
\ No newline at end of file
+          - [ ] canvas
\ No newline at end of file

From 6e75d9b2901d8b511c9a559258cddc53aefee6fc Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 25 Feb 2026 21:13:53 +0100
Subject: [PATCH 156/253] feat: New content for clock

- Add background canvas
- Add marker
- Add sections
---
 source/screens/demo/examples/clock.liquid   | 204 +++++++++++++++-----
 source/style/modules/_clock.scss            |  14 +-
 source/style/modules/demo/_demo_module.scss |  34 ++--
 3 files changed, 184 insertions(+), 68 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 7dc6998..9501af5 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -8,7 +8,10 @@ tags:
 
 {% block body %}
 <main>
-	<canvas id="rings" width="512" height="512"></canvas>
+	<div class="wrap">
+		<canvas id="background" width="512" height="512"></canvas>
+		<canvas id="rings" width="512" height="512"></canvas>
+	</div>
 	<p>
 		<button id="tglFormat">12-Stunden-Format</button>
 	</p>
@@ -17,71 +20,138 @@ tags:
 
 {% block script %}
 <script>
-	// Page script
-	const canvas = document.getElementById('rings');
-	const ctx = canvas.getContext('2d');
+	const canvasBkg = document.getElementById('background');
+	const ctxBkg = canvasBkg.getContext('2d');
+	const canvasRings = document.getElementById('rings');
+	const ctxRings = canvasRings.getContext('2d');
+	const centerX = canvasRings.width / 2;
+	const centerY = canvasRings.height / 2;
+
 	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();
+	let currentDate = new Date();
+	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
+	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
+
+	const outerMargin = 8;
+	const ringWidth = 16;
+	const ringGap = 8;
+	const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+	const sections = [
+		{
+			radius: maxSize - (ringWidth + ringGap),
+			color: `rgba(0, 0, 0, .1)`
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
+			color: `rgba(0, 0, 0, .2)`
+		},
+	];
+	const rings = [
+		{
+			radius: maxSize,
+			color: 'black'
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap),
+			color: 'lightgrey'
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 2,
+			color: 'white'
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 3 - ringGap,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
+		}
+	];
+	const markerColor = `rgba(0, 0, 0, .2)`;
+	const markers = [
+		{
+			amount: 60,
+			radius: maxSize,
+			width: 1
+		},
+		{
+			amount: 60,
+			radius: rings[1].radius,
+			width: 1
+		},
+		{
+			amount: is24HourFormat ? 24 : 12,
+			radius: rings[2].radius,
+			width: 3
+		},
+		{
+			amount: 7,
+			radius: rings[3].radius,
+			width: 5
+		},
+		{
+			amount: daysInCurrentMonth,
+			radius: rings[4].radius,
+			width: 3
+		},
+		{
+			amount: 12,
+			radius: rings[5].radius,
+			width: 3
+		}
+	];
 
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		is24HourFormat = !is24HourFormat;
 		document.getElementById('tglFormat').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;
+	ctxBkg.lineWidth = 72;
+	ctxBkg.strokeStyle = sections[0].color;
+	ctxBkg.beginPath();
+	ctxBkg.arc(centerX, centerY, sections[0].radius, 0, 2 * Math.PI);
+	ctxBkg.stroke();
+	ctxBkg.strokeStyle = sections[1].color;
+	ctxBkg.beginPath();
+	ctxBkg.arc(centerX, centerY, sections[1].radius, 0, 2 * Math.PI);
+	ctxBkg.stroke();
 
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
+	markers.forEach((marker) => {
+		for (let i = 0; i < marker.amount; i++) {
+			const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
+			const outerRadius = marker.radius + ringWidth / 2;
+			const outerX = centerX + outerRadius * Math.cos(angle);
+			const outerY = centerY + outerRadius * Math.sin(angle);
+			const innerRadius = marker.radius - ringWidth / 2;
+			const innerX = centerX + innerRadius * Math.cos(angle);
+			const innerY = centerY + innerRadius * Math.sin(angle);
 
-		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();
+			ctxBkg.strokeStyle = markerColor;
+			ctxBkg.lineWidth = marker.width;
+			ctxBkg.beginPath();
+			ctxBkg.moveTo(outerX, outerY);
+			ctxBkg.lineTo(innerX, innerY);
+			ctxBkg.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);
-	}
+	updateRings();
+	setInterval(updateRings, 1000);
 
 	function updateRings() {
-		const currentDate = new Date();
+		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());
+		currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
+		daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
 		drawRings(
 			currentSeconds,
@@ -104,7 +174,41 @@ tags:
 		return new Date(year, month, 0).getDate();
 	}
 
-	updateRings();
-	setInterval(updateRings, 1000);
+	function drawArc(value, maxValue, radius, strokeStyle) {
+		const startAngle = -0.5 * Math.PI; // Start at the top
+		const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
+
+		ctxRings.lineWidth = 16;
+		ctxRings.strokeStyle = strokeStyle;
+		ctxRings.beginPath();
+		ctxRings.arc(centerX, centerY, radius, startAngle, endAngle, false);
+		ctxRings.stroke();
+	}
+
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+		ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
+
+		drawArc(
+			(seconds === 0) ? 60 : seconds,
+			60,
+			rings[0].radius,
+			rings[0].color
+		);
+		drawArc(
+			(minutes === 0) ? 60 : minutes,
+			60,
+			rings[1].radius,
+			rings[1].color
+		);
+		drawArc(
+			is24HourFormat ? hours : hours % 12,
+			is24HourFormat ? 24 : 12,
+			rings[2].radius,
+			rings[2].color
+		);
+		drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
+		drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
+		drawArc(month, 12, rings[5].radius, rings[5].color);
+	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index fe361b7..840d70e 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -17,7 +17,19 @@
 		@extend .sec_main_center;
 		display: flex;
 		flex-flow: column nowrap;
-		justify-content: center;
+	}
+
+	.wrap {
+		position: relative;
+		width: 512px;
+		height: 512px;
+		margin: 0 auto;
+	}
+
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
 	}
 
 	p {
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index f7ab191..679de47 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -270,21 +270,21 @@
 	padding-left: hippie.$space_double;
 }
 
-// Index
-// -----------------------------------------------------------------------------
-.wrap {
-	display: flex;
-	// height: 100%;
-	align-items: center;
-	justify-content: center;
-}
-
-.hello {
-	flex: 0 1 auto;
-	width: 80%;
-
-	ul {
-		padding: 1em 5em;
-		background-color: hippie.$color_darker;
+#demo {
+	.wrap {
+		display: flex;
+		// height: 100%;
+		align-items: center;
+		justify-content: center;
 	}
-}
+
+	.hello {
+		flex: 0 1 auto;
+		width: 80%;
+
+		ul {
+			padding: 1em 5em;
+			background-color: hippie.$color_darker;
+		}
+	}
+}
\ No newline at end of file

From 8fb618115480d9c348067a08bb085f7acaad8454 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 25 Feb 2026 23:35:29 +0100
Subject: [PATCH 157/253] feat: Add day of year to clock

- Add ring for day of year
- New sections
- Move button
- Center clock
---
 source/screens/demo/examples/clock.liquid | 86 +++++++++++++++--------
 source/style/modules/_clock.scss          |  9 ++-
 2 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 9501af5..757556d 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -7,14 +7,14 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
+<header class="io pos_fix pin_top pin_right pin_left">
+	<button id="tglFormat">12-Stunden-Format</button>
+</header>
 <main>
 	<div class="wrap">
-		<canvas id="background" width="512" height="512"></canvas>
-		<canvas id="rings" width="512" height="512"></canvas>
+		<canvas id="background" width="768" height="768"></canvas>
+		<canvas id="rings" width="768" height="768"></canvas>
 	</div>
-	<p>
-		<button id="tglFormat">12-Stunden-Format</button>
-	</p>
 </main>
 {% endblock %}
 
@@ -36,16 +36,6 @@ tags:
 	const ringWidth = 16;
 	const ringGap = 8;
 	const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-	const sections = [
-		{
-			radius: maxSize - (ringWidth + ringGap),
-			color: `rgba(0, 0, 0, .1)`
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
-			color: `rgba(0, 0, 0, .2)`
-		},
-	];
 	const rings = [
 		{
 			radius: maxSize,
@@ -64,12 +54,38 @@ tags:
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
 		},
 		{
-			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
+			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap * 2,
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
 		},
 		{
-			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap,
+			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap * 3,
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap * 3,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
+		}
+	];
+	const sections = [
+		{
+			radius: rings[1].radius,
+			color: `rgba(0, 0, 0, .1)`,
+			width: 72
+		},
+		{
+			radius: rings[3].radius,
+			color: `rgba(0, 0, 0, .2)`,
+			width: ringWidth + ringGap
+		},
+		{
+			radius: rings[4].radius,
+			color: `rgba(0, 0, 0, .3)`,
+			width: ringWidth + ringGap
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
+			color: `rgba(0, 0, 0, .4)`,
+			width: ringWidth * 2 + ringGap * 2
 		}
 	];
 	const markerColor = `rgba(0, 0, 0, .2)`;
@@ -100,8 +116,13 @@ tags:
 			width: 3
 		},
 		{
-			amount: 12,
+			amount: 365,
 			radius: rings[5].radius,
+			width: 1
+		},
+		{
+			amount: 12,
+			radius: rings[6].radius,
 			width: 3
 		}
 	];
@@ -111,15 +132,13 @@ tags:
 		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	ctxBkg.lineWidth = 72;
-	ctxBkg.strokeStyle = sections[0].color;
-	ctxBkg.beginPath();
-	ctxBkg.arc(centerX, centerY, sections[0].radius, 0, 2 * Math.PI);
-	ctxBkg.stroke();
-	ctxBkg.strokeStyle = sections[1].color;
-	ctxBkg.beginPath();
-	ctxBkg.arc(centerX, centerY, sections[1].radius, 0, 2 * Math.PI);
-	ctxBkg.stroke();
+	sections.forEach((section) => {
+		ctxBkg.strokeStyle = section.color;
+		ctxBkg.lineWidth = section.width;
+		ctxBkg.beginPath();
+		ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
+		ctxBkg.stroke();
+	});
 
 	markers.forEach((marker) => {
 		for (let i = 0; i < marker.amount; i++) {
@@ -150,6 +169,7 @@ tags:
 		const currentHours = currentDate.getHours();
 		const currentDayOfWeek = getNumericWeekday(currentDate);
 		const currentDayOfMonth = currentDate.getDate();
+		const currentDayOfYear = getNumericYearDay(currentDate);
 		currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 		daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
@@ -160,6 +180,7 @@ tags:
 			currentDayOfWeek,
 			currentDayOfMonth,
 			currentMonth,
+			currentDayOfYear,
 			daysInCurrentMonth
 		);
 	}
@@ -170,6 +191,11 @@ tags:
 		return (weekday === 0) ? 7 : weekday;
 	}
 
+	function getNumericYearDay(date) {
+		const start = new Date(date.getFullYear(), 0, 0);
+		return Math.floor((date - start) / 86400000);
+	}
+
 	function daysInMonth(month, year) {
 		return new Date(year, month, 0).getDate();
 	}
@@ -185,7 +211,8 @@ tags:
 		ctxRings.stroke();
 	}
 
-	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+	// TODO: Array rings nutzen
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, daysInCurrentMonth) {
 		ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
 
 		drawArc(
@@ -208,7 +235,8 @@ tags:
 		);
 		drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
 		drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
-		drawArc(month, 12, rings[5].radius, rings[5].color);
+		drawArc(dayOfYear, 365, rings[5].radius, rings[5].color);
+		drawArc(month, 12, rings[6].radius, rings[6].color);
 	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 840d70e..249f50b 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -14,15 +14,18 @@
 
 .body_clock {
 	main {
-		@extend .sec_main_center;
 		display: flex;
 		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+		width: 100%;
 	}
 
 	.wrap {
 		position: relative;
-		width: 512px;
-		height: 512px;
+		height: 768px;
+		width: 768px;
 		margin: 0 auto;
 	}
 

From a924065931104e9687007b363326f0cf65a6142a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 26 Feb 2026 00:40:54 +0100
Subject: [PATCH 158/253] feat: Add functions to clock

- Add toggle button for sections
- Add function to draw background
---
 source/screens/demo/examples/clock.liquid | 57 +++++++++++++++++++----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 757556d..83d0253 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -8,7 +8,8 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat">12-Stunden-Format</button>
+	<button id="tglFormat" title="Toggle hour display">12-Stunden-Format</button>
+	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
 <main>
 	<div class="wrap">
@@ -28,6 +29,7 @@ tags:
 	const centerY = canvasRings.height / 2;
 
 	let is24HourFormat = true;
+	let drawSections = false;
 	let currentDate = new Date();
 	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
@@ -66,7 +68,7 @@ tags:
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
 		}
 	];
-	const sections = [
+	const groups = [
 		{
 			radius: rings[1].radius,
 			color: `rgba(0, 0, 0, .1)`,
@@ -88,8 +90,8 @@ tags:
 			width: ringWidth * 2 + ringGap * 2
 		}
 	];
-	const markerColor = `rgba(0, 0, 0, .2)`;
-	const markers = [
+	const sectionMarkerColor = `rgba(0, 0, 0, .2)`;
+	let sections = [
 		{
 			amount: 60,
 			radius: maxSize,
@@ -130,14 +132,13 @@ tags:
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		is24HourFormat = !is24HourFormat;
 		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+		sections[2].amount = is24HourFormat ? 24 : 12;
+		drawBackground();
 	});
 
-	sections.forEach((section) => {
-		ctxBkg.strokeStyle = section.color;
-		ctxBkg.lineWidth = section.width;
-		ctxBkg.beginPath();
-		ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
-		ctxBkg.stroke();
+	document.getElementById('tglSections').addEventListener('click', () => {
+		drawSections = !drawSections;
+		drawBackground();
 	});
 
 	markers.forEach((marker) => {
@@ -159,7 +160,9 @@ tags:
 		}
 	});
 
+	drawBackground();
 	updateRings();
+	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
 	setInterval(updateRings, 1000);
 
 	function updateRings() {
@@ -228,6 +231,7 @@ tags:
 			rings[1].color
 		);
 		drawArc(
+			// is24HourFormat ? ((hours === 0) ? 24 : hours) : hours % 12,
 			is24HourFormat ? hours : hours % 12,
 			is24HourFormat ? 24 : 12,
 			rings[2].radius,
@@ -238,5 +242,38 @@ tags:
 		drawArc(dayOfYear, 365, rings[5].radius, rings[5].color);
 		drawArc(month, 12, rings[6].radius, rings[6].color);
 	}
+
+	function drawBackground() {
+		ctxBkg.clearRect(0, 0, canvasBkg.width, canvasBkg.height);
+
+		groups.forEach((section) => {
+			ctxBkg.strokeStyle = section.color;
+			ctxBkg.lineWidth = section.width;
+			ctxBkg.beginPath();
+			ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
+			ctxBkg.stroke();
+		});
+
+		if (drawSections) {
+			sections.forEach((marker) => {
+				for (let i = 0; i < marker.amount; i++) {
+					const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
+					const outerRadius = marker.radius + ringWidth / 2;
+					const outerX = centerX + outerRadius * Math.cos(angle);
+					const outerY = centerY + outerRadius * Math.sin(angle);
+					const innerRadius = marker.radius - ringWidth / 2;
+					const innerX = centerX + innerRadius * Math.cos(angle);
+					const innerY = centerY + innerRadius * Math.sin(angle);
+
+					ctxBkg.strokeStyle = sectionMarkerColor;
+					ctxBkg.lineWidth = marker.width;
+					ctxBkg.beginPath();
+					ctxBkg.moveTo(outerX, outerY);
+					ctxBkg.lineTo(innerX, innerY);
+					ctxBkg.stroke();
+				}
+			});
+		}
+	}
 </script>
 {% endblock %}
\ No newline at end of file

From 2f876217565048758370545b09db95981af00ff6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 26 Feb 2026 19:30:30 +0100
Subject: [PATCH 159/253] feat: Change clock layout

- Clock is now centered in window
- Clock is resized according to window
---
 source/screens/demo/examples/clock.liquid | 60 +++++++++++++++--------
 source/style/modules/_clock.scss          |  4 +-
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 83d0253..a4bd20d 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -25,8 +25,7 @@ tags:
 	const ctxBkg = canvasBkg.getContext('2d');
 	const canvasRings = document.getElementById('rings');
 	const ctxRings = canvasRings.getContext('2d');
-	const centerX = canvasRings.width / 2;
-	const centerY = canvasRings.height / 2;
+	const wrap = document.querySelector('.wrap');
 
 	let is24HourFormat = true;
 	let drawSections = false;
@@ -37,7 +36,12 @@ tags:
 	const outerMargin = 8;
 	const ringWidth = 16;
 	const ringGap = 8;
-	const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+	let centerX = canvasRings.width / 2;
+	let centerY = canvasRings.height / 2;
+	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+
+	resizeClock();
+
 	const rings = [
 		{
 			radius: maxSize,
@@ -141,24 +145,8 @@ tags:
 		drawBackground();
 	});
 
-	markers.forEach((marker) => {
-		for (let i = 0; i < marker.amount; i++) {
-			const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
-			const outerRadius = marker.radius + ringWidth / 2;
-			const outerX = centerX + outerRadius * Math.cos(angle);
-			const outerY = centerY + outerRadius * Math.sin(angle);
-			const innerRadius = marker.radius - ringWidth / 2;
-			const innerX = centerX + innerRadius * Math.cos(angle);
-			const innerY = centerY + innerRadius * Math.sin(angle);
-
-			ctxBkg.strokeStyle = markerColor;
-			ctxBkg.lineWidth = marker.width;
-			ctxBkg.beginPath();
-			ctxBkg.moveTo(outerX, outerY);
-			ctxBkg.lineTo(innerX, innerY);
-			ctxBkg.stroke();
-		}
-	});
+	// FIXME: Konstanten mit maxSize werden nicht verändert
+	window.addEventListener('resize', resizeClock);
 
 	drawBackground();
 	updateRings();
@@ -275,5 +263,35 @@ tags:
 			});
 		}
 	}
+
+	function resizeClock() {
+		const height = window.innerHeight;
+		const width = window.innerWidth;
+		const windowDimension = {
+			value: Math.min(height, width),
+			smaller: height < width ? 'height' : 'width'
+		};
+		const clockSize = Math.floor(windowDimension.value * 0.9);
+
+		canvasBkg.style.width = clockSize + 'px';
+		canvasBkg.style.height = clockSize + 'px';
+		canvasRings.style.width = clockSize + 'px';
+		canvasRings.style.height = clockSize + 'px';
+		canvasBkg.width = clockSize;
+		canvasBkg.height = clockSize;
+		canvasRings.width = clockSize;
+		canvasRings.height = clockSize;
+
+		centerX = canvasRings.width / 2;
+		centerY = canvasRings.height / 2;
+		maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+
+		wrap.style.width = clockSize + 'px';
+		wrap.style.height = clockSize + 'px';
+
+		console.debug(windowDimension);
+		console.debug('Clock size: ', clockSize);
+		console.debug('Radius: ', maxSize);
+	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 249f50b..4caa66e 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -20,13 +20,11 @@
 		align-items: center;
 		height: 100vh;
 		width: 100%;
+		overflow: hidden;
 	}
 
 	.wrap {
 		position: relative;
-		height: 768px;
-		width: 768px;
-		margin: 0 auto;
 	}
 
 	canvas {

From 743d9fba9e6e276e809ed2949118144e30a23ee4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Feb 2026 11:27:23 +0100
Subject: [PATCH 160/253] feat: Update clock

- Update resizeClock()
- Change background of groups
---
 source/screens/demo/examples/clock.liquid | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index a4bd20d..d518436 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -39,9 +39,6 @@ tags:
 	let centerX = canvasRings.width / 2;
 	let centerY = canvasRings.height / 2;
 	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-
-	resizeClock();
-
 	const rings = [
 		{
 			radius: maxSize,
@@ -75,22 +72,22 @@ tags:
 	const groups = [
 		{
 			radius: rings[1].radius,
-			color: `rgba(0, 0, 0, .1)`,
+			color: `rgba(0, 0, 0, .05)`,
 			width: 72
 		},
 		{
 			radius: rings[3].radius,
-			color: `rgba(0, 0, 0, .2)`,
+			color: `rgba(0, 0, 0, .1)`,
 			width: ringWidth + ringGap
 		},
 		{
 			radius: rings[4].radius,
-			color: `rgba(0, 0, 0, .3)`,
+			color: `rgba(0, 0, 0, .15)`,
 			width: ringWidth + ringGap
 		},
 		{
 			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
-			color: `rgba(0, 0, 0, .4)`,
+			color: `rgba(0, 0, 0, .2)`,
 			width: ringWidth * 2 + ringGap * 2
 		}
 	];
@@ -148,8 +145,7 @@ tags:
 	// FIXME: Konstanten mit maxSize werden nicht verändert
 	window.addEventListener('resize', resizeClock);
 
-	drawBackground();
-	updateRings();
+	resizeClock();
 	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
 	setInterval(updateRings, 1000);
 
@@ -293,5 +289,8 @@ tags:
 		console.debug('Clock size: ', clockSize);
 		console.debug('Radius: ', maxSize);
 	}
+		drawBackground();
+		updateRings();
+	}
 </script>
 {% endblock %}
\ No newline at end of file

From 62b21b5e68646c6a509a67ed001cef19335fde5e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Feb 2026 11:31:57 +0100
Subject: [PATCH 161/253] feat: New class HippieClock

Adapt everything to a class based prototype.

- Functionality of clock still missing
- Original version is hidden
- Size now is dynamic
- Parts can be added
---
 source/screens/demo/examples/clock.liquid | 133 +++++++++++++++++++++-
 source/style/modules/_clock.scss          |  11 +-
 2 files changed, 135 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index d518436..4bb0a32 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -285,12 +285,137 @@ tags:
 		wrap.style.width = clockSize + 'px';
 		wrap.style.height = clockSize + 'px';
 
-		console.debug(windowDimension);
-		console.debug('Clock size: ', clockSize);
-		console.debug('Radius: ', maxSize);
-	}
 		drawBackground();
 		updateRings();
 	}
+
+	class HippieClock {
+		constructor(element, options) {
+			this.element = element;
+			this.shapes = [];
+			this.id = null;
+			this.options = options || {
+				size: Math.floor(this.getSize().value * 0.9)
+			};
+			this.parts = this.createContext(['bkg', 'hands']);
+
+			this.init();
+		}
+
+		init() {
+			// TODO: shapes[] ist zu diesem Zeitpunkt noch leer
+			this.resize();
+			window.addEventListener('resize', () => this.resize());
+		}
+
+		resize() {
+			this.parts.forEach(part => {
+				part.element.width = part.element.offsetWidth;
+				part.element.height = part.element.offsetHeight;
+				this.draw();
+			});
+		}
+
+		draw() {
+			this.parts.forEach(part => {
+				part.context.clearRect(0, 0, part.element.width, part.element.height);
+			});
+
+			this.shapes.forEach(shape => {
+				if (shape.type === 'circle') {
+					const radius = this.toPixelSize(shape.radius) / 2;
+
+					this.parts[0].context.fillStyle = shape.color;
+					this.parts[0].context.beginPath();
+					this.parts[0].context.arc(
+						this.toPixelX(shape.center),
+						this.toPixelY(shape.center),
+						radius,
+						0,
+						Math.PI * 2
+					);
+					this.parts[0].context.fill();
+				} else if (shape.type === 'ring') {
+					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+
+					this.parts[1].context.strokeStyle = shape.color;
+					this.parts[1].context.lineWidth = shape.stroke;
+					this.parts[1].context.beginPath();
+					this.parts[1].context.arc(
+						this.toPixelX(shape.center),
+						this.toPixelY(shape.center),
+						radius,
+						0,
+						Math.PI * 2
+					);
+					this.parts[1].context.stroke();
+				}
+			});
+		}
+
+		toPixelX(number) {
+			return number * this.parts[0].element.width;
+		}
+
+		toPixelY(number) {
+			return number * this.parts[0].element.height;
+		}
+
+		toPixelSize(number) {
+			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
+		}
+
+		getSize() {
+			const height = window.innerHeight;
+			const width = window.innerWidth;
+
+			return {
+				value: Math.min(height, width),
+				smaller: height < width ? 'height' : 'width'
+			};
+		}
+
+		createContext(names) {
+			let parts = [];
+			const wrap = document.createElement('div');
+			wrap.style.position = 'relative';
+			wrap.style.height = this.options.size + 'px';
+			wrap.style.width = this.options.size + 'px';
+
+			names.forEach(name => {
+				const canvas = document.createElement('canvas');
+
+				canvas.style.position = 'absolute';
+				canvas.style.top = '0px';
+				canvas.style.left = '0px';
+				canvas.style.height = '100%';
+				canvas.style.width = '100%';
+				canvas.height = canvas.offsetHeight;
+				canvas.width = canvas.offsetWidth;
+
+				wrap.appendChild(canvas);
+
+				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
+			});
+
+			this.element.appendChild(wrap);
+
+			return parts;
+		}
+
+		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
+			this.shapes.push({type: 'circle', id, center, radius, color});
+		}
+
+		addRing(id, center, radius, color = `rgb(250, 216, 3)`, stroke = 16) {
+			this.shapes.push({type: 'ring', id, center, radius, color, stroke});
+		}
+	}
+
+	const container = document.querySelector('#clock main');
+	const clock = new HippieClock(container);
+	clock.addCircle('base', .5, 1);
+	clock.addRing('seconds', .5, 1);
+	clock.draw();
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 4caa66e..4674e4b 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -24,13 +24,14 @@
 	}
 
 	.wrap {
+		display: none;
 		position: relative;
-	}
 
-	canvas {
-		position: absolute;
-		top: 0;
-		left: 0;
+		canvas {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
 	}
 
 	p {

From 667269e4e7d822ca7defd21d8fdec6186900cbf4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Feb 2026 18:56:21 +0100
Subject: [PATCH 162/253] feat: Update HippieClock

- Add update possibility
- Ring now has start and angle
- Date functions added to class
---
 source/screens/demo/examples/clock.liquid | 71 ++++++++++++++++++++---
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4bb0a32..ff28d37 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -290,14 +290,14 @@ tags:
 	}
 
 	class HippieClock {
-		constructor(element, options) {
+		constructor(element, date, options) {
 			this.element = element;
-			this.shapes = [];
-			this.id = null;
+			this.date = this.getTime(date);
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9)
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
+			this.shapes = [];
 
 			this.init();
 		}
@@ -317,6 +317,7 @@ tags:
 		}
 
 		draw() {
+			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
 				part.context.clearRect(0, 0, part.element.width, part.element.height);
 			});
@@ -337,6 +338,8 @@ tags:
 					this.parts[0].context.fill();
 				} else if (shape.type === 'ring') {
 					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+					const start = -0.5 * Math.PI; // Start at the top
+					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
 
 					this.parts[1].context.strokeStyle = shape.color;
 					this.parts[1].context.lineWidth = shape.stroke;
@@ -345,14 +348,21 @@ tags:
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
-						0,
-						Math.PI * 2
+						start,
+						angle
 					);
 					this.parts[1].context.stroke();
 				}
 			});
 		}
 
+		update() {
+			const second = this.getTime().second;
+
+			this.updateShape('seconds', (second === 0) ? 60 : second);
+			this.draw();
+		}
+
 		toPixelX(number) {
 			return number * this.parts[0].element.width;
 		}
@@ -365,6 +375,23 @@ tags:
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
+		// TODO: Parameter für Wochenstart ergänzen
+		getNumericWeekday(date) {
+			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
+
+			return (weekday === 0) ? 7 : weekday;
+		}
+
+		getNumericYearDay(date) {
+			const start = new Date(date.getFullYear(), 0, 0);
+
+			return Math.floor((date - start) / 86400000);
+		}
+
+		daysInMonth(month, year) {
+			return new Date(year, month, 0).getDate();
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -375,9 +402,25 @@ tags:
 			};
 		}
 
+		getTime(date) {
+			this.date = date || new Date();
+
+			return {
+				second: this.date.getSeconds(),
+				minute: this.date.getMinutes(),
+				hour: this.date.getHours(),
+				dayOfWeek: getNumericWeekday(this.date),
+				dayOfMonth: this.date.getDate(),
+				dayOfYear: getNumericYearDay(this.date),
+				month: this.date.getMonth() + 1, // Get current month (0-11)
+				daysInMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+			};
+		}
+
 		createContext(names) {
 			let parts = [];
 			const wrap = document.createElement('div');
+
 			wrap.style.position = 'relative';
 			wrap.style.height = this.options.size + 'px';
 			wrap.style.width = this.options.size + 'px';
@@ -403,19 +446,31 @@ tags:
 			return parts;
 		}
 
+		updateShape(id, value) {
+			const shape = this.shapes.find(s => s.id === id);
+
+			if (shape) {
+				shape.angle = value;
+			}
+		}
+
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, center, radius, color = `rgb(250, 216, 3)`, stroke = 16) {
-			this.shapes.push({type: 'ring', id, center, radius, color, stroke});
+		addRing(id, center, radius, angle, max, color = `rgb(250, 216, 3)`, stroke = 16) {
+			this.shapes.push({type: 'ring', id, center, radius, angle, max, color, stroke});
 		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
 	clock.addCircle('base', .5, 1);
-	clock.addRing('seconds', .5, 1);
+	clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
+
+	setInterval(() => {
+		clock.update();
+	}, 1000);
 </script>
 {% endblock %}
\ No newline at end of file

From ad135a58c10c25423b00c7ec5bab929c8bdb1a7f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 08:47:12 +0100
Subject: [PATCH 163/253] feat: Update HippieClock

- Add all rings
- Add 24/12 hour switch
- Options can now be updated
- Add max to updateShape()
- Change attributes for addRing()
---
 source/screens/demo/examples/clock.liquid | 58 ++++++++++++++++++-----
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ff28d37..a3690ff 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -8,7 +8,7 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat" title="Toggle hour display">12-Stunden-Format</button>
+	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
 <main>
@@ -294,7 +294,8 @@ tags:
 			this.element = element;
 			this.date = this.getTime(date);
 			this.options = options || {
-				size: Math.floor(this.getSize().value * 0.9)
+				size: Math.floor(this.getSize().value * 0.9),
+				h24: true
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
 			this.shapes = [];
@@ -303,9 +304,18 @@ tags:
 		}
 
 		init() {
-			// TODO: shapes[] ist zu diesem Zeitpunkt noch leer
+			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
+			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
+			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
+			this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`);
+			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
+			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
+			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
+
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
+
+			console.debug(this);
 		}
 
 		resize() {
@@ -358,8 +368,16 @@ tags:
 
 		update() {
 			const second = this.getTime().second;
+			const minute = this.getTime().minute;
+			const hour = this.getTime().hour;
 
 			this.updateShape('seconds', (second === 0) ? 60 : second);
+			this.updateShape('minutes', (minute === 0) ? 60 : minute);
+			this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
+			this.updateShape('dotweek', this.getTime().dayWeek);
+			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
+			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('month', this.getTime().month);
 			this.draw();
 		}
 
@@ -409,11 +427,11 @@ tags:
 				second: this.date.getSeconds(),
 				minute: this.date.getMinutes(),
 				hour: this.date.getHours(),
-				dayOfWeek: getNumericWeekday(this.date),
-				dayOfMonth: this.date.getDate(),
-				dayOfYear: getNumericYearDay(this.date),
+				dayWeek: this.getNumericWeekday(this.date),
+				dayMonth: this.date.getDate(),
+				dayYear: this.getNumericYearDay(this.date),
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysInMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
 			};
 		}
 
@@ -446,31 +464,47 @@ tags:
 			return parts;
 		}
 
-		updateShape(id, value) {
+		updateShape(id, angle, max) {
 			const shape = this.shapes.find(s => s.id === id);
 
 			if (shape) {
-				shape.angle = value;
+				shape.angle = angle;
+				if (max) shape.max = max;
 			}
 		}
 
+		updateOptions(changes) {
+			this.options = {...this.options, ...changes};
+		}
+
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, center, radius, angle, max, color = `rgb(250, 216, 3)`, stroke = 16) {
-			this.shapes.push({type: 'ring', id, center, radius, angle, max, color, stroke});
+		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
+			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
 	clock.addCircle('base', .5, 1);
-	clock.addRing('seconds', .5, 1, 0, 60);
+	// clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
 
 	setInterval(() => {
 		clock.update();
 	}, 1000);
+
+	document.getElementById('tglFormat').addEventListener('click', () => {
+		if (clock) {
+			clock.updateOptions({h24: !clock.options.h24})
+			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
+			console.debug(clock);
+		} else {
+			console.log('No clock available');
+		}
+	});
+
 </script>
 {% endblock %}
\ No newline at end of file

From 05f2ab1c0daa9e90d8f89ab8c245e65b5e335f1d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 10:49:51 +0100
Subject: [PATCH 164/253] feat: Update HippieClock

- Add sections
- Sections now use ring max value
---
 source/screens/demo/examples/clock.liquid | 78 +++++++++++++++++------
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index a3690ff..84c1f63 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -295,7 +295,8 @@ tags:
 			this.date = this.getTime(date);
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
-				h24: true
+				h24: true,
+				sections: true
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
 			this.shapes = [];
@@ -332,38 +333,68 @@ tags:
 				part.context.clearRect(0, 0, part.element.width, part.element.height);
 			});
 
-			this.shapes.forEach(shape => {
-				if (shape.type === 'circle') {
-					const radius = this.toPixelSize(shape.radius) / 2;
+			let ctx = undefined;
 
-					this.parts[0].context.fillStyle = shape.color;
-					this.parts[0].context.beginPath();
-					this.parts[0].context.arc(
+			this.shapes
+				.filter(item => item.type === 'circle')
+				.forEach((shape) => {
+					const radius = this.toPixelSize(shape.radius) / 2;
+					ctx = this.parts[0].context;
+
+					ctx.fillStyle = shape.color;
+					ctx.beginPath();
+					ctx.arc(
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
 						0,
 						Math.PI * 2
 					);
-					this.parts[0].context.fill();
-				} else if (shape.type === 'ring') {
+					ctx.fill();
+				});
+
+			this.shapes
+				.filter(item => item.type === 'ring')
+				.forEach((shape) => {
+					if (this.options.sections) {
+						const outerRadius = this.toPixelSize(shape.radius) / 2;
+						const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke;
+						ctx = this.parts[0].context;
+
+						for (let i = 0; i < shape.max; i++) {
+							const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
+							const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle);
+							const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle);
+							const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle);
+							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
+
+							ctx.strokeStyle = 'black';
+							// TODO: Stärke an shape.max orientieren
+							ctx.lineWidth = 1;
+							ctx.beginPath();
+							ctx.moveTo(outerX, outerY);
+							ctx.lineTo(innerX, innerY);
+							ctx.stroke();
+						}
+					}
+
 					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
 					const start = -0.5 * Math.PI; // Start at the top
 					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
+					ctx = this.parts[1].context;
 
-					this.parts[1].context.strokeStyle = shape.color;
-					this.parts[1].context.lineWidth = shape.stroke;
-					this.parts[1].context.beginPath();
-					this.parts[1].context.arc(
+					ctx.strokeStyle = shape.color;
+					ctx.lineWidth = shape.stroke;
+					ctx.beginPath();
+					ctx.arc(
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
 						start,
 						angle
 					);
-					this.parts[1].context.stroke();
-				}
-			});
+					ctx.stroke();
+				});
 		}
 
 		update() {
@@ -484,27 +515,38 @@ tags:
 		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
 			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
+
+		addSection(id, radius, color = 'black', center = .5, stroke = 1) {
+			this.shapes.push({type: 'section', id, radius, color, center, stroke});
+		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
+
 	clock.addCircle('base', .5, 1);
-	// clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
 
 	setInterval(() => {
 		clock.update();
 	}, 1000);
 
+	// TODO: Aktionen gehören quasi zu HippieClock
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		if (clock) {
 			clock.updateOptions({h24: !clock.options.h24})
 			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
-			console.debug(clock);
 		} else {
 			console.log('No clock available');
 		}
 	});
 
+	document.getElementById('tglSections').addEventListener('click', () => {
+		if (clock) {
+			clock.updateOptions({sections: !clock.options.sections})
+		} else {
+			console.log('No clock available');
+		}
+	});
 </script>
 {% endblock %}
\ No newline at end of file

From 56633b364e314f404aed938b67c942952349b442 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 10:50:43 +0100
Subject: [PATCH 165/253] feat: Remove legacy clock version

---
 source/screens/demo/examples/clock.liquid | 277 +---------------------
 source/style/modules/_clock.scss          |  15 --
 2 files changed, 3 insertions(+), 289 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 84c1f63..776c5d2 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -11,284 +11,13 @@ tags:
 	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
-<main>
-	<div class="wrap">
-		<canvas id="background" width="768" height="768"></canvas>
-		<canvas id="rings" width="768" height="768"></canvas>
-	</div>
-</main>
+<main></main>
 {% endblock %}
 
 {% block script %}
 <script>
-	const canvasBkg = document.getElementById('background');
-	const ctxBkg = canvasBkg.getContext('2d');
-	const canvasRings = document.getElementById('rings');
-	const ctxRings = canvasRings.getContext('2d');
-	const wrap = document.querySelector('.wrap');
-
-	let is24HourFormat = true;
-	let drawSections = false;
-	let currentDate = new Date();
-	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
-
-	const outerMargin = 8;
-	const ringWidth = 16;
-	const ringGap = 8;
-	let centerX = canvasRings.width / 2;
-	let centerY = canvasRings.height / 2;
-	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-	const rings = [
-		{
-			radius: maxSize,
-			color: 'black'
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap),
-			color: 'lightgrey'
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 2,
-			color: 'white'
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 3 - ringGap,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap * 2,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap * 3,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap * 3,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
-		}
-	];
-	const groups = [
-		{
-			radius: rings[1].radius,
-			color: `rgba(0, 0, 0, .05)`,
-			width: 72
-		},
-		{
-			radius: rings[3].radius,
-			color: `rgba(0, 0, 0, .1)`,
-			width: ringWidth + ringGap
-		},
-		{
-			radius: rings[4].radius,
-			color: `rgba(0, 0, 0, .15)`,
-			width: ringWidth + ringGap
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
-			color: `rgba(0, 0, 0, .2)`,
-			width: ringWidth * 2 + ringGap * 2
-		}
-	];
-	const sectionMarkerColor = `rgba(0, 0, 0, .2)`;
-	let sections = [
-		{
-			amount: 60,
-			radius: maxSize,
-			width: 1
-		},
-		{
-			amount: 60,
-			radius: rings[1].radius,
-			width: 1
-		},
-		{
-			amount: is24HourFormat ? 24 : 12,
-			radius: rings[2].radius,
-			width: 3
-		},
-		{
-			amount: 7,
-			radius: rings[3].radius,
-			width: 5
-		},
-		{
-			amount: daysInCurrentMonth,
-			radius: rings[4].radius,
-			width: 3
-		},
-		{
-			amount: 365,
-			radius: rings[5].radius,
-			width: 1
-		},
-		{
-			amount: 12,
-			radius: rings[6].radius,
-			width: 3
-		}
-	];
-
-	document.getElementById('tglFormat').addEventListener('click', () => {
-		is24HourFormat = !is24HourFormat;
-		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
-		sections[2].amount = is24HourFormat ? 24 : 12;
-		drawBackground();
-	});
-
-	document.getElementById('tglSections').addEventListener('click', () => {
-		drawSections = !drawSections;
-		drawBackground();
-	});
-
-	// FIXME: Konstanten mit maxSize werden nicht verändert
-	window.addEventListener('resize', resizeClock);
-
-	resizeClock();
-	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
-	setInterval(updateRings, 1000);
-
-	function updateRings() {
-		currentDate = new Date();
-		const currentSeconds = currentDate.getSeconds();
-		const currentMinutes = currentDate.getMinutes();
-		const currentHours = currentDate.getHours();
-		const currentDayOfWeek = getNumericWeekday(currentDate);
-		const currentDayOfMonth = currentDate.getDate();
-		const currentDayOfYear = getNumericYearDay(currentDate);
-		currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-		daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
-
-		drawRings(
-			currentSeconds,
-			currentMinutes,
-			currentHours,
-			currentDayOfWeek,
-			currentDayOfMonth,
-			currentMonth,
-			currentDayOfYear,
-			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 getNumericYearDay(date) {
-		const start = new Date(date.getFullYear(), 0, 0);
-		return Math.floor((date - start) / 86400000);
-	}
-
-	function daysInMonth(month, year) {
-		return new Date(year, month, 0).getDate();
-	}
-
-	function drawArc(value, maxValue, radius, strokeStyle) {
-		const startAngle = -0.5 * Math.PI; // Start at the top
-		const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
-
-		ctxRings.lineWidth = 16;
-		ctxRings.strokeStyle = strokeStyle;
-		ctxRings.beginPath();
-		ctxRings.arc(centerX, centerY, radius, startAngle, endAngle, false);
-		ctxRings.stroke();
-	}
-
-	// TODO: Array rings nutzen
-	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, daysInCurrentMonth) {
-		ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
-
-		drawArc(
-			(seconds === 0) ? 60 : seconds,
-			60,
-			rings[0].radius,
-			rings[0].color
-		);
-		drawArc(
-			(minutes === 0) ? 60 : minutes,
-			60,
-			rings[1].radius,
-			rings[1].color
-		);
-		drawArc(
-			// is24HourFormat ? ((hours === 0) ? 24 : hours) : hours % 12,
-			is24HourFormat ? hours : hours % 12,
-			is24HourFormat ? 24 : 12,
-			rings[2].radius,
-			rings[2].color
-		);
-		drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
-		drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
-		drawArc(dayOfYear, 365, rings[5].radius, rings[5].color);
-		drawArc(month, 12, rings[6].radius, rings[6].color);
-	}
-
-	function drawBackground() {
-		ctxBkg.clearRect(0, 0, canvasBkg.width, canvasBkg.height);
-
-		groups.forEach((section) => {
-			ctxBkg.strokeStyle = section.color;
-			ctxBkg.lineWidth = section.width;
-			ctxBkg.beginPath();
-			ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
-			ctxBkg.stroke();
-		});
-
-		if (drawSections) {
-			sections.forEach((marker) => {
-				for (let i = 0; i < marker.amount; i++) {
-					const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
-					const outerRadius = marker.radius + ringWidth / 2;
-					const outerX = centerX + outerRadius * Math.cos(angle);
-					const outerY = centerY + outerRadius * Math.sin(angle);
-					const innerRadius = marker.radius - ringWidth / 2;
-					const innerX = centerX + innerRadius * Math.cos(angle);
-					const innerY = centerY + innerRadius * Math.sin(angle);
-
-					ctxBkg.strokeStyle = sectionMarkerColor;
-					ctxBkg.lineWidth = marker.width;
-					ctxBkg.beginPath();
-					ctxBkg.moveTo(outerX, outerY);
-					ctxBkg.lineTo(innerX, innerY);
-					ctxBkg.stroke();
-				}
-			});
-		}
-	}
-
-	function resizeClock() {
-		const height = window.innerHeight;
-		const width = window.innerWidth;
-		const windowDimension = {
-			value: Math.min(height, width),
-			smaller: height < width ? 'height' : 'width'
-		};
-		const clockSize = Math.floor(windowDimension.value * 0.9);
-
-		canvasBkg.style.width = clockSize + 'px';
-		canvasBkg.style.height = clockSize + 'px';
-		canvasRings.style.width = clockSize + 'px';
-		canvasRings.style.height = clockSize + 'px';
-		canvasBkg.width = clockSize;
-		canvasBkg.height = clockSize;
-		canvasRings.width = clockSize;
-		canvasRings.height = clockSize;
-
-		centerX = canvasRings.width / 2;
-		centerY = canvasRings.height / 2;
-		maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-
-		wrap.style.width = clockSize + 'px';
-		wrap.style.height = clockSize + 'px';
-
-		drawBackground();
-		updateRings();
-	}
-
+	// TODO: Kalenderwoche ergänzen
+	// TODO: Mondphase ergänzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 4674e4b..bcc3e9a 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -22,19 +22,4 @@
 		width: 100%;
 		overflow: hidden;
 	}
-
-	.wrap {
-		display: none;
-		position: relative;
-
-		canvas {
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-	}
-
-	p {
-		text-align: center;
-	}
 }
\ No newline at end of file

From ee43638cbc1652c98862af4801a06063a94b0db6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:44:19 +0100
Subject: [PATCH 166/253] feat: Add global function to map values

---
 source/code/hippie/app.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 81d2494..d5f077f 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -523,6 +523,22 @@ function capitalizeFirstLetter(text) {
 	return text.charAt(0).toUpperCase() + text.slice(1);
 }
 
+function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp = false) {
+	let min = outMin;
+	let max = outMax;
+
+	if (reverse) {
+		[min, max] = [max, min];
+	}
+
+	const mapped = (value - inMin) * (max - min) / (inMax - inMin) + min;
+
+	if (clamp) {
+		return Math.max(Math.min(min, max), Math.min(Math.max(min, max), mapped));
+	}
+	return mapped;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

From 8ce1e14fadaa78ce23709c0598791c75c74d5506 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:44:49 +0100
Subject: [PATCH 167/253] docs: New JS content for TODO

---
 TODO.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/TODO.md b/TODO.md
index b055503..01e9e26 100644
--- a/TODO.md
+++ b/TODO.md
@@ -21,6 +21,10 @@
   - Move other things
   - Prevent styles to be global
 
+# JS
+
+- Use delegation for action attributes like: https://javascript.info/event-delegation#delegation-example-actions-in-markup
+
 # Content
 
 - *Intro* 

From 5261754da50321645b02ed894c2e85ee0a34aed9 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:46:19 +0100
Subject: [PATCH 168/253] docs: Update clock

- Screen now uses template script
- Use mapping for section stroke
---
 source/screens/demo/examples/clock.liquid | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 776c5d2..34be2ef 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -15,6 +15,8 @@ tags:
 {% endblock %}
 
 {% block script %}
+{{ block.super -}}
+
 <script>
 	// TODO: Kalenderwoche ergänzen
 	// TODO: Mondphase ergänzen
@@ -37,7 +39,7 @@ tags:
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
-			this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`);
+			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
 			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
@@ -98,8 +100,7 @@ tags:
 							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
 
 							ctx.strokeStyle = 'black';
-							// TODO: Stärke an shape.max orientieren
-							ctx.lineWidth = 1;
+							ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
 							ctx.beginPath();
 							ctx.moveTo(outerX, outerY);
 							ctx.lineTo(innerX, innerY);
@@ -241,7 +242,7 @@ tags:
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
+		addRing(id, radius, angle, max, color = 'white', center = .5, stroke = 16) {
 			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
 

From 0aca2bf3eebcf1ab368c40f2ec2e6a2878098374 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 12:25:35 +0100
Subject: [PATCH 169/253] docs: Add ISO 8601 week to HippieClock

---
 source/screens/demo/examples/clock.liquid | 32 +++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 34be2ef..812b92e 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -18,7 +18,6 @@ tags:
 {{ block.super -}}
 
 <script>
-	// TODO: Kalenderwoche ergänzen
 	// TODO: Mondphase ergänzen
 	class HippieClock {
 		constructor(element, date, options) {
@@ -42,7 +41,8 @@ tags:
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
-			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
+			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
+			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
@@ -138,6 +138,7 @@ tags:
 			this.updateShape('dotweek', this.getTime().dayWeek);
 			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
 			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('week', this.getTime().week);
 			this.updateShape('month', this.getTime().month);
 			this.draw();
 		}
@@ -171,6 +172,31 @@ tags:
 			return new Date(year, month, 0).getDate();
 		}
 
+		// ISO 8601
+		getISOWeek(date) {
+			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+			const dayNum = d.getUTCDay() || 7;
+			d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+
+			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+		}
+
+		getISOWeeksInYear(year) {
+			// Check if Dec 28 is in week 53
+			return this.getISOWeek(new Date(year, 11, 28)) === 53 ? 53 : 52;
+		}
+
+		getISOWeekInfo(date) {
+			const current = this.getISOWeek(date);
+			const weeksYear = this.getISOWeeksInYear(date.getFullYear());
+
+			return {
+				current,
+				weeksYear
+			};
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -191,6 +217,8 @@ tags:
 				dayWeek: this.getNumericWeekday(this.date),
 				dayMonth: this.date.getDate(),
 				dayYear: this.getNumericYearDay(this.date),
+				week: this.getISOWeekInfo(this.date).current,
+				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
 				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
 			};

From 8d1d182be4146a05bde4080c044de1c93f2f2516 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 13:01:10 +0100
Subject: [PATCH 170/253] feat: Add moon phase to HippieClock

---
 source/screens/demo/examples/clock.liquid | 31 ++++++++++++++++++++++-
 source/style/modules/_clock.scss          | 12 ---------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 812b92e..827160c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -43,6 +43,7 @@ tags:
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
 			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
+			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
@@ -140,6 +141,7 @@ tags:
 			this.updateShape('dotyear', this.getTime().dayYear);
 			this.updateShape('week', this.getTime().week);
 			this.updateShape('month', this.getTime().month);
+			this.updateShape('moon', this.getTime().moon);
 			this.draw();
 		}
 
@@ -197,6 +199,32 @@ tags:
 			};
 		}
 
+		getMoonNameFrom(phase) {
+			if (phase < 0.125) return 'New Moon';
+			if (phase < 0.25) return 'Waxing Crescent';
+			if (phase < 0.375) return 'First Quarter';
+			if (phase < 0.5) return 'Waxing Gibbous';
+			if (phase < 0.625) return 'Full Moon';
+			if (phase < 0.75) return 'Waning Gibbous';
+			if (phase < 0.875) return 'Last Quarter';
+			return 'Waning Crescent';
+		}
+
+		getMoonPhase(date) {
+			// Known new moon date: January 6, 2000
+			const newMoon = new Date(2000, 0, 6);
+			const lunarCycle = 29.53058867; // days
+
+			const daysSinceNewMoon = (date - newMoon) / (1000 * 60 * 60 * 24);
+			const phase = (daysSinceNewMoon % lunarCycle) / lunarCycle;
+
+			return {
+				illumination: Math.abs(Math.cos(Math.PI * phase)),
+				phase: mapRange(phase, 0, 1, 1, 8),
+				phaseName: this.getMoonNameFrom(phase)
+			};
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -220,7 +248,8 @@ tags:
 				week: this.getISOWeekInfo(this.date).current,
 				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
+				moon: this.getMoonPhase(this.date).phase
 			};
 		}
 
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index bcc3e9a..b58fed5 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,17 +1,5 @@
 @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 {
 		display: flex;

From 10c71a3909301d50bfecb6204820f5b4c8d3a2a9 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 13:45:30 +0100
Subject: [PATCH 171/253] feat: Update HippieClock

- Add calculation for days in year
- Combine calculations for getTime()
---
 source/screens/demo/examples/clock.liquid | 40 ++++++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 827160c..ca0cc89 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -40,7 +40,7 @@ tags:
 			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
-			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
+			this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);
 			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
@@ -49,6 +49,7 @@ tags:
 			window.addEventListener('resize', () => this.resize());
 
 			console.debug(this);
+			console.debug(this.getTime());
 		}
 
 		resize() {
@@ -158,19 +159,39 @@ tags:
 		}
 
 		// TODO: Parameter für Wochenstart ergänzen
-		getNumericWeekday(date) {
+		getWeekday(date) {
 			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
 
 			return (weekday === 0) ? 7 : weekday;
 		}
 
-		getNumericYearDay(date) {
+		getYearDay(date) {
 			const start = new Date(date.getFullYear(), 0, 0);
 
 			return Math.floor((date - start) / 86400000);
 		}
 
-		daysInMonth(month, year) {
+		isLeapYear(year) {
+			return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
+		}
+
+		getDaysInYear(year) {
+			return this.isLeapYear(year) ? 366 : 365;
+		}
+
+		getYearInfo(date) {
+			const current = this.getYearDay(date);
+			const total = this.getDaysInYear(date.getFullYear());
+			const remaining = total - current;
+
+			return {
+				total: total,
+				current: current,
+				remaining: remaining
+			}
+		}
+
+		getDaysInMonth(month, year) {
 			return new Date(year, month, 0).getDate();
 		}
 
@@ -179,9 +200,9 @@ tags:
 			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
 			const dayNum = d.getUTCDay() || 7;
 			d.setUTCDate(d.getUTCDate() + 4 - dayNum);
-			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+			const start = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
 
-			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+			return Math.ceil((((d - start) / 86400000) + 1) / 7);
 		}
 
 		getISOWeeksInYear(year) {
@@ -242,13 +263,14 @@ tags:
 				second: this.date.getSeconds(),
 				minute: this.date.getMinutes(),
 				hour: this.date.getHours(),
-				dayWeek: this.getNumericWeekday(this.date),
+				dayWeek: this.getWeekday(this.date),
 				dayMonth: this.date.getDate(),
-				dayYear: this.getNumericYearDay(this.date),
+				dayYear: this.getYearInfo(this.date).current,
+				daysYear: this.getYearInfo(this.date).total,
 				week: this.getISOWeekInfo(this.date).current,
 				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
+				daysMonth: this.getDaysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
 				moon: this.getMoonPhase(this.date).phase
 			};
 		}

From 48b6e1d0eddf313f49917e7e0272ac97bd88f03c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 16:31:10 +0100
Subject: [PATCH 172/253] feat: Changes to template inheritance

Changes to what goes where.
---
 source/screens/demo/basics.liquid             | 114 +++++++++---------
 source/screens/demo/examples/clock.liquid     |   8 +-
 .../screens/demo/examples/ui/windows.liquid   |   6 +-
 source/screens/demo/index.liquid              |  10 --
 source/templates/hippie/default.liquid        |   2 +-
 source/templates/hippie/full.liquid           |   5 +-
 source/templates/hippie/page.liquid           |   2 +-
 source/templates/hippie/simple.liquid         |   6 -
 8 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 6d190ec..a300a21 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -495,7 +495,7 @@ tags:
 			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 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>
@@ -881,61 +881,63 @@ tags:
 			<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="input_io" type="date"></div>
-				<label class="">Uhrzeit<br>
-					<code>&lt;input[type="time"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="time"></div>
-				<label class="">Datum und Zeit<br>
-					<code>&lt;input[type="datetime-local"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="datetime-local"></div>
-				<label class="">Kalendermonat<br>
-					<code>&lt;input[type="month"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="month"></div>
-				<label class="">Kalenderwoche<br>
-					<code>&lt;input[type="week"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="week"></div>
-				<label class="">@dresse<br>
-					<code>&lt;input[type="email"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="email" placeholder="@"></div>
-				<label class="">Passwort<br>
-					<code>&lt;input[type="password"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="password" value="admin"></div>
-				<label class="">Telefonnummer<br>
-					<code>&lt;input[type="tel"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="tel" value="0190123456"></div>
-				<label class="">URL<br>
-					<code>&lt;input[type="url"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="url" placeholder="url://"></div>
-				<label class="">Suche<br>
-					<code>&lt;input[type="search"]&gt;</code>
-				</label>
-				<div><input class="input_io" 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>
+			<form action="">
+				<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="input_io" type="date"></div>
+					<label class="">Uhrzeit<br>
+						<code>&lt;input[type="time"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="time"></div>
+					<label class="">Datum und Zeit<br>
+						<code>&lt;input[type="datetime-local"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="datetime-local"></div>
+					<label class="">Kalendermonat<br>
+						<code>&lt;input[type="month"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="month"></div>
+					<label class="">Kalenderwoche<br>
+						<code>&lt;input[type="week"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="week"></div>
+					<label class="">@dresse<br>
+						<code>&lt;input[type="email"]&gt;</code>
+					</label>
+					<div><input class="input_io" placeholder="@" type="email"></div>
+					<label class="">Passwort<br>
+						<code>&lt;input[type="password"]&gt;</code>
+					</label>
+					<div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
+					<label class="">Telefonnummer<br>
+						<code>&lt;input[type="tel"]&gt;</code>
+					</label>
+					<div><input class="input_io" value="0190123456" type="tel"></div>
+					<label class="">URL<br>
+						<code>&lt;input[type="url"]&gt;</code>
+					</label>
+					<div><input class="input_io" placeholder="url://" type="url"></div>
+					<label class="">Suche<br>
+						<code>&lt;input[type="search"]&gt;</code>
+					</label>
+					<div><input class="input_io" 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>
+			</form>
 		</fieldset>
 
 		<h2>Interaktive Elemente</h2>
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ca0cc89..4890c40 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -15,10 +15,12 @@ tags:
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
 
 <script>
-	// TODO: Mondphase ergänzen
+	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -129,6 +131,7 @@ tags:
 				});
 		}
 
+		// TODO: Erfassung für geänderte Formen ergänzen
 		update() {
 			const second = this.getTime().second;
 			const minute = this.getTime().minute;
@@ -336,6 +339,7 @@ tags:
 	clock.addCircle('base', .5, 1);
 	clock.draw();
 
+	// TODO: Alternative mit requestAnimationFrame()
 	setInterval(() => {
 		clock.update();
 	}, 1000);
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index d8700cd..8a9c65a 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -50,9 +50,8 @@ tags:
 {% endblock %}
 
 {%- block script %}
-{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/app.js"></script>
+{{ block.super -}}
+
 <script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
@@ -61,6 +60,7 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
+	// TODO: TimeDisplay in HippieTaskbar aufnehmen
 	const timeElement = document.getElementById('time');
 
 	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 99ba875..2c1eafc 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -62,14 +62,4 @@ tags:
 		</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/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 4cb653e..b8cdbfd 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -29,7 +29,7 @@
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
 <script>
-	// {{ title }} script
+	// {{ title }} script using default template
 </script>
 {%- block script %}{% endblock -%}
 </body>
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index 5b22b17..d445469 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -37,9 +37,12 @@
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
 <script>
-	// Full script
+	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index b6edd40..dd6e6ed 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -59,4 +59,4 @@
 		logPerf('EVENT       :: jQuery \'ready\' event fired.');
 	});
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
index b711fe6..b888886 100644
--- a/source/templates/hippie/simple.liquid
+++ b/source/templates/hippie/simple.liquid
@@ -7,9 +7,3 @@
 {{ block.super -}}
 <link href="/css/demo.css" media="all" rel="stylesheet"/>
 {% endblock %}
-
-{% block script %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
\ No newline at end of file

From 7f4b4aeaee22e2108a64c32671c13ef660737d0c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 18:47:01 +0100
Subject: [PATCH 173/253] feat: Changes to HippieClock

- Make some methods private
- Add wrap element to parts
- Change color of sections
- Fix resize by changing styles of wrap element
---
 source/screens/demo/examples/clock.liquid | 52 +++++++++++++----------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4890c40..85c7ad9 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -30,7 +30,7 @@ tags:
 				h24: true,
 				sections: true
 			};
-			this.parts = this.createContext(['bkg', 'hands']);
+			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
 
 			this.init();
@@ -56,8 +56,16 @@ tags:
 
 		resize() {
 			this.parts.forEach(part => {
+				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
+
+				if (part.name === 'wrap') {
+					part.element.style.height = this.options.size + 'px';
+					part.element.style.width = this.options.size + 'px';
+				}
+
 				part.element.width = part.element.offsetWidth;
 				part.element.height = part.element.offsetHeight;
+
 				this.draw();
 			});
 		}
@@ -65,7 +73,7 @@ tags:
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
-				part.context.clearRect(0, 0, part.element.width, part.element.height);
+				part.context?.clearRect(0, 0, part.element.width, part.element.height);
 			});
 
 			let ctx = undefined;
@@ -73,14 +81,14 @@ tags:
 			this.shapes
 				.filter(item => item.type === 'circle')
 				.forEach((shape) => {
-					const radius = this.toPixelSize(shape.radius) / 2;
+					const radius = this.#toPixelSize(shape.radius) / 2;
 					ctx = this.parts[0].context;
 
 					ctx.fillStyle = shape.color;
 					ctx.beginPath();
 					ctx.arc(
-						this.toPixelX(shape.center),
-						this.toPixelY(shape.center),
+						this.#toPixelX(shape.center),
+						this.#toPixelY(shape.center),
 						radius,
 						0,
 						Math.PI * 2
@@ -92,18 +100,18 @@ tags:
 				.filter(item => item.type === 'ring')
 				.forEach((shape) => {
 					if (this.options.sections) {
-						const outerRadius = this.toPixelSize(shape.radius) / 2;
-						const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke;
+						const outerRadius = this.#toPixelSize(shape.radius) / 2;
+						const innerRadius = this.#toPixelSize(shape.radius) / 2 - shape.stroke;
 						ctx = this.parts[0].context;
 
 						for (let i = 0; i < shape.max; i++) {
 							const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
-							const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle);
-							const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle);
-							const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle);
-							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
+							const outerX = this.#toPixelX(shape.center) + outerRadius * Math.cos(angle);
+							const outerY = this.#toPixelY(shape.center) + outerRadius * Math.sin(angle);
+							const innerX = this.#toPixelX(shape.center) + innerRadius * Math.cos(angle);
+							const innerY = this.#toPixelY(shape.center) + innerRadius * Math.sin(angle);
 
-							ctx.strokeStyle = 'black';
+							ctx.strokeStyle = `rgba(0, 0, 0, .25)`;
 							ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
 							ctx.beginPath();
 							ctx.moveTo(outerX, outerY);
@@ -112,7 +120,7 @@ tags:
 						}
 					}
 
-					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+					const radius = this.#toPixelSize(shape.radius) / 2 - shape.stroke / 2;
 					const start = -0.5 * Math.PI; // Start at the top
 					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
 					ctx = this.parts[1].context;
@@ -121,8 +129,8 @@ tags:
 					ctx.lineWidth = shape.stroke;
 					ctx.beginPath();
 					ctx.arc(
-						this.toPixelX(shape.center),
-						this.toPixelY(shape.center),
+						this.#toPixelX(shape.center),
+						this.#toPixelY(shape.center),
 						radius,
 						start,
 						angle
@@ -149,15 +157,15 @@ tags:
 			this.draw();
 		}
 
-		toPixelX(number) {
+		#toPixelX(number) {
 			return number * this.parts[0].element.width;
 		}
 
-		toPixelY(number) {
+		#toPixelY(number) {
 			return number * this.parts[0].element.height;
 		}
 
-		toPixelSize(number) {
+		#toPixelSize(number) {
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
@@ -278,7 +286,7 @@ tags:
 			};
 		}
 
-		createContext(names) {
+		#createContext(names) {
 			let parts = [];
 			const wrap = document.createElement('div');
 
@@ -298,11 +306,11 @@ tags:
 				canvas.width = canvas.offsetWidth;
 
 				wrap.appendChild(canvas);
-
 				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
 			});
 
 			this.element.appendChild(wrap);
+			parts.push({name: 'wrap', element: wrap});
 
 			return parts;
 		}
@@ -347,7 +355,7 @@ tags:
 	// TODO: Aktionen gehören quasi zu HippieClock
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		if (clock) {
-			clock.updateOptions({h24: !clock.options.h24})
+			clock.updateOptions({h24: !clock.options.h24});
 			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
 		} else {
 			console.log('No clock available');
@@ -356,7 +364,7 @@ tags:
 
 	document.getElementById('tglSections').addEventListener('click', () => {
 		if (clock) {
-			clock.updateOptions({sections: !clock.options.sections})
+			clock.updateOptions({sections: !clock.options.sections});
 		} else {
 			console.log('No clock available');
 		}

From d0fde7cc6aab3467b70745210da98d9df486b32f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 20:04:28 +0100
Subject: [PATCH 174/253] fix: HippieClock ring for hours

---
 source/screens/demo/examples/clock.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 85c7ad9..2d7902e 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -39,7 +39,7 @@ tags:
 		init() {
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
-			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
+			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);

From 91df239a42a9ec984e9f9e361952779ae7e6333d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 20:05:50 +0100
Subject: [PATCH 175/253] feat: More private methods for HippieClock

---
 source/screens/demo/examples/clock.liquid | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 2d7902e..ba05a15 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -33,10 +33,10 @@ tags:
 			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
 
-			this.init();
+			this.#init();
 		}
 
-		init() {
+		#init() {
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
@@ -47,14 +47,14 @@ tags:
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
-			this.resize();
-			window.addEventListener('resize', () => this.resize());
+			this.#resize();
+			window.addEventListener('resize', () => this.#resize());
 
 			console.debug(this);
 			console.debug(this.getTime());
 		}
 
-		resize() {
+		#resize() {
 			this.parts.forEach(part => {
 				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
 

From 6a574d92c270061bcfaed2ab674932678296a44c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 20:57:15 +0100
Subject: [PATCH 176/253] feat: Add overlay to HippieClock

- Add method to create overlay element
- Use DateDisplay and TimeDisplay classes
- Add button to toggle display
- Update style for header
- Add methods to handle shapes
---
 source/screens/demo/examples/clock.liquid | 98 +++++++++++++++++++++--
 source/style/modules/_clock.scss          |  6 ++
 2 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ba05a15..4d581b9 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -8,8 +8,11 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
-	<button id="tglSections" title="Toggle sections">Abschnitte</button>
+	<button id="tglOverlay" title="Toggle overlay">☰</button>
+	<nav>
+		<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
+		<button id="tglSections" title="Toggle sections">Abschnitte</button>
+	</nav>
 </header>
 <main></main>
 {% endblock %}
@@ -20,7 +23,6 @@ tags:
 <script src="/js/app.js"></script>
 
 <script>
-	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -28,7 +30,8 @@ tags:
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
 				h24: true,
-				sections: true
+				sections: true,
+				overlay: false
 			};
 			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
@@ -169,6 +172,7 @@ tags:
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
+		// TODO: DateDisplay und TimeDisplay benutzen
 		// TODO: Parameter für Wochenstart ergänzen
 		getWeekday(date) {
 			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
@@ -315,6 +319,56 @@ tags:
 			return parts;
 		}
 
+		createOverlay() {
+			const overlay = document.createElement('div');
+			const text = document.createElement('p');
+			const timeElement = document.createElement('span');
+			const dateElement = document.createElement('span');
+
+			new DateDisplay(dateElement);
+			new TimeDisplay(timeElement);
+
+			Object.assign(overlay.style, {
+				zIndex: 5,
+				position: 'absolute',
+				top: '0px',
+				left: '0px',
+				height: '100%',
+				width: '100%',
+				// display: this.options.overlay ? 'flex' : 'none',
+				justifyContent: 'center',
+				alignItems: 'center',
+				backgroundColor: `rgba(0, 0, 0, .6)`,
+				color: 'white'
+			});
+			overlay.dataset.part = 'overlay';
+
+			text.appendChild(timeElement);
+			text.insertAdjacentText('beforeend', ' ');
+			text.appendChild(dateElement);
+			overlay.appendChild(text);
+			this.element.appendChild(overlay);
+			this.parts.push({name: 'overlay', element: overlay});
+		}
+
+		removeOverlay() {
+			const index = this.parts.findIndex(s => s.name === 'overlay');
+
+			if (index !== -1) {
+				this.parts[index].element.remove();
+				this.parts.splice(index, 1);
+				this.draw();
+
+				return true;
+			}
+
+			return false;
+		}
+
+		updateOptions(changes) {
+			this.options = {...this.options, ...changes};
+		}
+
 		updateShape(id, angle, max) {
 			const shape = this.shapes.find(s => s.id === id);
 
@@ -324,8 +378,30 @@ tags:
 			}
 		}
 
-		updateOptions(changes) {
-			this.options = {...this.options, ...changes};
+		removeShape(id) {
+			const index = this.shapes.findIndex(s => s.id === id);
+
+			if (index !== -1) {
+				this.shapes.splice(index, 1);
+				this.draw();
+
+				return true;
+			}
+
+			return false;
+		}
+
+		clearShapes() {
+			this.shapes = [];
+			this.draw();
+		}
+
+		findShape(id) {
+			return this.shapes.some(s => s.id === id);
+		}
+
+		getShape(id) {
+			return this.shapes.find(s => s.id === id);
 		}
 
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
@@ -369,5 +445,15 @@ tags:
 			console.log('No clock available');
 		}
 	});
+
+	document.getElementById('tglOverlay').addEventListener('click', () => {
+		if (clock) {
+			// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
+			clock.options.overlay ? clock.removeOverlay() : clock.createOverlay();
+			clock.updateOptions({overlay: !clock.options.overlay});
+		} else {
+			console.log('No clock available');
+		}
+	});
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index b58fed5..0965587 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,6 +1,12 @@
 @use "../hippie-style/hippie";
 
+@use "sass:map";
+
 .body_clock {
+	header {
+		z-index: map.get(hippie.$z-indexes, "content-top");
+	}
+
 	main {
 		display: flex;
 		flex-flow: column nowrap;

From a1aae6a90201f16e892f4d7c71b1ed0fc2424df2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 22:19:19 +0100
Subject: [PATCH 177/253] fix: Change size option on resize only once

---
 source/screens/demo/examples/clock.liquid | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4d581b9..1b1e689 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -58,9 +58,8 @@ tags:
 		}
 
 		#resize() {
+			this.updateOptions({size: Math.floor(this.getSize().value * 0.9)});
 			this.parts.forEach(part => {
-				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
-
 				if (part.name === 'wrap') {
 					part.element.style.height = this.options.size + 'px';
 					part.element.style.width = this.options.size + 'px';

From c3de29d63464335e1bb23e0fececdd6606e48b99 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 22:23:14 +0100
Subject: [PATCH 178/253] feat: Move element creation to #init() for
 HippieClock

---
 source/screens/demo/examples/clock.liquid | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 1b1e689..403926c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -33,13 +33,16 @@ tags:
 				sections: true,
 				overlay: false
 			};
-			this.parts = this.#createContext(['background', 'hands']);
+			this.parts = [];
 			this.shapes = [];
 
 			this.#init();
 		}
 
 		#init() {
+			this.#createContext(['background', 'hands']);
+			this.createOverlay();
+
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
@@ -309,13 +312,11 @@ tags:
 				canvas.width = canvas.offsetWidth;
 
 				wrap.appendChild(canvas);
-				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
+				this.parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
 			});
 
 			this.element.appendChild(wrap);
-			parts.push({name: 'wrap', element: wrap});
-
-			return parts;
+			this.parts.push({name: 'wrap', element: wrap});
 		}
 
 		createOverlay() {
@@ -334,7 +335,8 @@ tags:
 				left: '0px',
 				height: '100%',
 				width: '100%',
-				// display: this.options.overlay ? 'flex' : 'none',
+				display: this.options.overlay ? 'flex' : 'none',
+				// display: 'flex',
 				justifyContent: 'center',
 				alignItems: 'center',
 				backgroundColor: `rgba(0, 0, 0, .6)`,

From 1db7faaf183f43a32f2ef9db7214ea1e97d7879b Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 2 Mar 2026 19:17:09 +0100
Subject: [PATCH 179/253] build: Update eleventy to 3.1.2

---
 package-lock.json | 1810 ++++++++++++++++-----------------------------
 package.json      |    3 +-
 2 files changed, 635 insertions(+), 1178 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cb917f..0f4acd1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.13.1",
       "license": "MIT",
       "dependencies": {
-        "@11ty/eleventy": "^2.0.1",
+        "@11ty/eleventy": "^3.1.2",
+        "@11ty/eleventy-upgrade-help": "^3.0.2",
         "bootstrap-icons": "^1.13.1",
         "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
         "jquery": "^3.7.1",
@@ -20,59 +21,71 @@
       }
     },
     "node_modules/@11ty/dependency-tree": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz",
-      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg=="
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-4.0.2.tgz",
+      "integrity": "sha512-RTF6VTZHatYf7fSZBUN3RKwiUeJh5dhWV61gDPrHhQF2/gzruAkYz8yXuvGLx3w3ZBKreGrR+MfYpSVkdbdbLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.1"
+      }
+    },
+    "node_modules/@11ty/dependency-tree-esm": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree-esm/-/dependency-tree-esm-2.0.4.tgz",
+      "integrity": "sha512-MYKC0Ac77ILr1HnRJalzKDlb9Z8To3kXQCltx299pUXXUFtJ1RIONtULlknknqW8cLe19DLVgmxVCtjEFm7h0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "acorn": "^8.15.0",
+        "dependency-graph": "^1.0.0",
+        "normalize-path": "^3.0.0"
+      }
     },
     "node_modules/@11ty/eleventy": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.1.tgz",
-      "integrity": "sha512-t8XVUbCJByhVEa1RzO0zS2QzbL3wPY8ot1yUw9noqiSHxJWUwv6jiwm1/MZDPTYtkZH2ZHvdQIRQ5/SjG9XmLw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
+      "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
+      "license": "MIT",
       "dependencies": {
-        "@11ty/dependency-tree": "^2.0.1",
-        "@11ty/eleventy-dev-server": "^1.0.4",
-        "@11ty/eleventy-utils": "^1.0.1",
+        "@11ty/dependency-tree": "^4.0.0",
+        "@11ty/dependency-tree-esm": "^2.0.0",
+        "@11ty/eleventy-dev-server": "^2.0.8",
+        "@11ty/eleventy-plugin-bundle": "^3.0.6",
+        "@11ty/eleventy-utils": "^2.0.7",
         "@11ty/lodash-custom": "^4.17.21",
-        "@iarna/toml": "^2.2.5",
-        "@sindresorhus/slugify": "^1.1.2",
-        "bcp-47-normalize": "^1.1.1",
-        "chokidar": "^3.5.3",
-        "cross-spawn": "^7.0.3",
-        "debug": "^4.3.4",
-        "dependency-graph": "^0.11.0",
-        "ejs": "^3.1.9",
-        "fast-glob": "^3.2.12",
-        "graceful-fs": "^4.2.11",
+        "@11ty/posthtml-urls": "^1.0.1",
+        "@11ty/recursive-copy": "^4.0.2",
+        "@sindresorhus/slugify": "^2.2.1",
+        "bcp-47-normalize": "^2.3.0",
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.1",
+        "dependency-graph": "^1.0.0",
+        "entities": "^6.0.1",
+        "filesize": "^10.1.6",
         "gray-matter": "^4.0.3",
-        "hamljs": "^0.6.2",
-        "handlebars": "^4.7.7",
-        "is-glob": "^4.0.3",
-        "iso-639-1": "^2.1.15",
+        "iso-639-1": "^3.1.5",
+        "js-yaml": "^4.1.0",
         "kleur": "^4.1.5",
-        "liquidjs": "^10.7.0",
-        "luxon": "^3.3.0",
-        "markdown-it": "^13.0.1",
-        "micromatch": "^4.0.5",
+        "liquidjs": "^10.21.1",
+        "luxon": "^3.6.1",
+        "markdown-it": "^14.1.0",
         "minimist": "^1.2.8",
         "moo": "^0.5.2",
-        "multimatch": "^5.0.0",
-        "mustache": "^4.2.0",
-        "normalize-path": "^3.0.0",
-        "nunjucks": "^3.2.3",
-        "path-to-regexp": "^6.2.1",
+        "node-retrieve-globals": "^6.0.1",
+        "nunjucks": "^3.2.4",
+        "picomatch": "^4.0.2",
         "please-upgrade-node": "^3.2.0",
         "posthtml": "^0.16.6",
-        "posthtml-urls": "^1.0.0",
-        "pug": "^3.0.2",
-        "recursive-copy": "^2.0.14",
-        "semver": "^7.3.8",
-        "slugify": "^1.6.6"
+        "posthtml-match-helper": "^2.0.3",
+        "semver": "^7.7.2",
+        "slugify": "^1.6.6",
+        "tinyglobby": "^0.2.14"
       },
       "bin": {
-        "eleventy": "cmd.js"
+        "eleventy": "cmd.cjs"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       },
       "funding": {
         "type": "opencollective",
@@ -80,27 +93,67 @@
       }
     },
     "node_modules/@11ty/eleventy-dev-server": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz",
-      "integrity": "sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.8.tgz",
+      "integrity": "sha512-15oC5M1DQlCaOMUq4limKRYmWiGecDaGwryr7fTE/oM9Ix8siqMvWi+I8VjsfrGr+iViDvWcH/TVI6D12d93mA==",
+      "license": "MIT",
       "dependencies": {
-        "@11ty/eleventy-utils": "^1.0.1",
-        "chokidar": "^3.5.3",
-        "debug": "^4.3.4",
-        "dev-ip": "^1.0.1",
-        "finalhandler": "^1.2.0",
+        "@11ty/eleventy-utils": "^2.0.1",
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.0",
+        "finalhandler": "^1.3.1",
         "mime": "^3.0.0",
         "minimist": "^1.2.8",
-        "morphdom": "^2.7.0",
+        "morphdom": "^2.7.4",
         "please-upgrade-node": "^3.2.0",
-        "ssri": "^8.0.1",
-        "ws": "^8.13.0"
+        "send": "^1.1.0",
+        "ssri": "^11.0.0",
+        "urlpattern-polyfill": "^10.0.0",
+        "ws": "^8.18.1"
       },
       "bin": {
         "eleventy-dev-server": "cmd.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-plugin-bundle": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
+      "integrity": "sha512-QK1tRFBhQdZASnYU8GMzpTdsMMFLVAkuU0gVVILqNyp09xJJZb81kAS3AFrNrwBCsgLxTdWHJ8N64+OTTsoKkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.2",
+        "debug": "^4.4.0",
+        "posthtml-match-helper": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-upgrade-help": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-upgrade-help/-/eleventy-upgrade-help-3.0.2.tgz",
+      "integrity": "sha512-1vnYgNQ0vPSSuD7fVa0wGFn1EUr6zqffj203rdO+yC0xUFp5E55Io2JHuVXY7oLxFpFEIsWaTNKHcIG77C6TPA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.3.3",
+        "kleur": "^4.1.5",
+        "minimist": "^1.2.8",
+        "posthtml-match-helper": "^2.0.3",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": ">=18"
       },
       "funding": {
         "type": "opencollective",
@@ -108,20 +161,60 @@
       }
     },
     "node_modules/@11ty/eleventy-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
-      "integrity": "sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA==",
-      "dependencies": {
-        "normalize-path": "^3.0.0"
-      },
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
+      "integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/@11ty/eleventy/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@11ty/lodash-custom": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
@@ -134,55 +227,41 @@
         "url": "https://opencollective.com/11ty"
       }
     },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
-      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
-      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
-      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+    "node_modules/@11ty/posthtml-urls": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.2.tgz",
+      "integrity": "sha512-0vaV3Wt0surZ+oS1VdKKe0axeeupuM+l7W/Z866WFQwF+dGg2Tc/nmhk/5l74/Y55P8KyImnLN9CdygNw2huHg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
+        "evaluate-value": "^2.0.0",
+        "http-equiv-refresh": "^2.0.1",
+        "list-to-array": "^1.1.0",
+        "parse-srcset": "^1.0.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/@iarna/toml": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
-      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
+    "node_modules/@11ty/recursive-copy": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz",
+      "integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==",
+      "license": "ISC",
+      "dependencies": {
+        "errno": "^1.0.0",
+        "junk": "^3.1.0",
+        "maximatch": "^0.1.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -195,6 +274,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -203,6 +283,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -508,57 +589,46 @@
       }
     },
     "node_modules/@sindresorhus/slugify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
-      "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
+      "integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
+      "license": "MIT",
       "dependencies": {
-        "@sindresorhus/transliterate": "^0.1.1",
-        "escape-string-regexp": "^4.0.0"
+        "@sindresorhus/transliterate": "^1.0.0",
+        "escape-string-regexp": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@sindresorhus/transliterate": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz",
-      "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
+      "integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
+      "license": "MIT",
       "dependencies": {
-        "escape-string-regexp": "^2.0.0",
-        "lodash.deburr": "^4.1.0"
+        "escape-string-regexp": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@sindresorhus/transliterate/node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@types/minimatch": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
-    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
       "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
     },
     "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -566,25 +636,18 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/acorn-walk": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
+      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "acorn": "^8.11.0"
       },
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/any-promise": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
-      "integrity": "sha512-lqzY9o+BbeGHRCOyxQkt/Tgvz0IZhTmQiA+LxQW8wSNpcTbj8K+0cZiSEvbpNZZP9/11Gy7dnLO3GNWUXO4d1g=="
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -606,35 +669,42 @@
       }
     },
     "node_modules/array-differ": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "license": "MIT",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/array-uniq": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
       "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/arrify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/asap": {
@@ -642,42 +712,21 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
-    "node_modules/assert-never": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.4.0.tgz",
-      "integrity": "sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==",
-      "license": "MIT"
-    },
-    "node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
-    },
-    "node_modules/babel-walk": {
-      "version": "3.0.0-canary-5",
-      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
-      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.9.6"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
     },
     "node_modules/bcp-47": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-1.0.8.tgz",
-      "integrity": "sha512-Y9y1QNBBtYtv7hcmoX0tR+tUNSFZGZ6OL6vKPObq8BbOhkCoyayF6ogfLTgAli/KuAEbsYHYUNq2AQuY6IuLag==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
+      "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
+      "license": "MIT",
       "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0"
+        "is-alphabetical": "^2.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0"
       },
       "funding": {
         "type": "github",
@@ -685,21 +734,23 @@
       }
     },
     "node_modules/bcp-47-match": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz",
-      "integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/bcp-47-normalize": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-1.1.1.tgz",
-      "integrity": "sha512-jWZ1Jdu3cs0EZdfCkS0UE9Gg01PtxnChjEBySeB+Zo6nkqtFfnvtoQQgP1qU1Oo4qgJgxhTI6Sf9y/pZIhPs0A==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
+      "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
+      "license": "MIT",
       "dependencies": {
-        "bcp-47": "^1.0.0",
-        "bcp-47-match": "^1.0.0"
+        "bcp-47": "^2.0.0",
+        "bcp-47-match": "^2.0.0"
       },
       "funding": {
         "type": "github",
@@ -755,47 +806,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
-      "dependencies": {
-        "is-regex": "^1.0.3"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -819,26 +829,11 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
       "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "license": "MIT",
       "engines": {
         "node": ">=14"
       }
@@ -846,37 +841,16 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "node_modules/constantinople": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
-      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
-      "dependencies": {
-        "@babel/parser": "^7.6.0",
-        "@babel/types": "^7.6.1"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -887,28 +861,22 @@
         }
       }
     },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 0.8"
       }
     },
     "node_modules/dependency-graph": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+      "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6.0"
+        "node": ">=4"
       }
     },
     "node_modules/detect-libc": {
@@ -924,23 +892,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/dev-ip": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
-      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
-      "bin": {
-        "dev-ip": "lib/dev-ip.js"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
-      "license": "MIT"
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -1003,27 +954,14 @@
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-    },
-    "node_modules/ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -1040,9 +978,10 @@
       }
     },
     "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-1.0.0.tgz",
+      "integrity": "sha512-3zV5mFS1E8/1bPxt/B0xxzI1snsg3uSCIh6Zo1qKg6iMw93hzPANk9oBFzSFBFrwuVoQuE3rLoouAUfwOAj1wQ==",
+      "license": "MIT",
       "dependencies": {
         "prr": "~1.0.1"
       },
@@ -1050,41 +989,33 @@
         "errno": "cli.js"
       }
     },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
     },
     "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/esm-import-transformer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/esm-import-transformer/-/esm-import-transformer-3.0.5.tgz",
+      "integrity": "sha512-1GKLvfuMnnpI75l8c6sHoz0L3Z872xL5akGuBudgqTDPv4Vy6f2Ec7jEMKTxlqWl/3kSvNbHELeimJtnqgYniw==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -1097,6 +1028,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/evaluate-value": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
+      "integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -1109,54 +1058,37 @@
       }
     },
     "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "micromatch": "^4.0.8"
       },
       "engines": {
         "node": ">=8.6.0"
       }
     },
     "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
+    "node_modules/filesize": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=10"
+        "node": ">= 10.4.0"
       }
     },
     "node_modules/fill-range": {
@@ -1172,16 +1104,17 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+      "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
+        "on-finished": "~2.4.1",
         "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
+        "statuses": "~2.0.2",
         "unpipe": "~1.0.0"
       },
       "engines": {
@@ -1192,6 +1125,7 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
       }
@@ -1199,12 +1133,17 @@
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
     },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -1219,51 +1158,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1275,22 +1169,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
-    },
     "node_modules/gray-matter": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
@@ -1305,97 +1183,6 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/hamljs": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
-      "integrity": "sha512-/chXRp4WpL47I+HX1vCCdSbEXAljEG2FBMmgO7Am0bYsqgnEjreeWzUdX1onXqwZtcfgxbCg5WtEYYvuZ5muBg=="
-    },
-    "node_modules/handlebars": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
-      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
-      "dependencies": {
-        "minimist": "^1.2.5",
-        "neo-async": "^2.6.2",
-        "source-map": "^0.6.1",
-        "wordwrap": "^1.0.0"
-      },
-      "bin": {
-        "handlebars": "bin/handlebars"
-      },
-      "engines": {
-        "node": ">=0.4.7"
-      },
-      "optionalDependencies": {
-        "uglify-js": "^3.1.4"
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/hippie-script": {
       "version": "1.2.1",
       "resolved": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#dfc13e61586fbf466a7bbdb5667c5b02f41abd44",
@@ -1420,11 +1207,32 @@
       }
     },
     "node_modules/http-equiv-refresh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz",
-      "integrity": "sha512-TScO04soylRN9i/QdOdgZyhydXg9z6XdaGzEyOgDKycePeDeTT4KvigjBcI+tgfTlieLWauGORMq5F1eIDa+1w==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
+      "integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.10"
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/immutable": {
@@ -1433,36 +1241,30 @@
       "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
       "license": "MIT"
     },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
     },
     "node_modules/is-alphabetical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/is-alphanumerical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
-      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
       "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0"
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
       },
       "funding": {
         "type": "github",
@@ -1480,35 +1282,16 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-decimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
-      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-expression": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
-      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "object-assign": "^4.1.1"
-      }
-    },
     "node_modules/is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -1550,68 +1333,21 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
-    },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-    },
     "node_modules/iso-639-1": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz",
-      "integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.5.tgz",
+      "integrity": "sha512-gXkz5+KN7HrG0Q5UGqSMO2qB9AsbEeyLP54kF1YrMsIxmu+g4BdB7rflReZTSTZGpfj8wywu6pfPBCylPIzGQA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.0"
       }
     },
-    "node_modules/jake": {
-      "version": "10.8.7",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
-      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
-      "dependencies": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
       "license": "MIT"
     },
-    "node_modules/js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
-      "license": "MIT"
-    },
     "node_modules/js-yaml": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
@@ -1625,21 +1361,13 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
-      "dependencies": {
-        "is-promise": "^2.0.0",
-        "promise": "^7.0.1"
-      }
-    },
     "node_modules/junk": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
-      "integrity": "sha512-3KF80UaaSSxo8jVnRYtMKNGFOoVPBdkkVPsw+Ad0y4oxKXPduS6G6iHkrf69yJVff/VAaYXkV42rtZ7daJxU3w==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
+      "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/kind-of": {
@@ -1659,17 +1387,19 @@
       }
     },
     "node_modules/linkify-it": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
-      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
       "dependencies": {
-        "uc.micro": "^1.0.1"
+        "uc.micro": "^2.0.0"
       }
     },
     "node_modules/liquidjs": {
-      "version": "10.10.2",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.10.2.tgz",
-      "integrity": "sha512-UcuTUexKg/8CmX6I5KNghk13pl3c8Rqhm+WSWqrc17pQP9LjpYPpOLDKG9OMBeHDBQ70yyn/GOqyZ/EKJ4z5yg==",
+      "version": "10.24.0",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
+      "integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
+      "license": "MIT",
       "dependencies": {
         "commander": "^10.0.0"
       },
@@ -1678,7 +1408,7 @@
         "liquidjs": "bin/liquid.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16"
       },
       "funding": {
         "type": "opencollective",
@@ -1688,56 +1418,58 @@
     "node_modules/list-to-array": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
-      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g=="
-    },
-    "node_modules/lodash.deburr": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
-      "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ=="
-    },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
+      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
+      "license": "MIT"
     },
     "node_modules/luxon": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
-      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
+      "integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/markdown-it": {
-      "version": "13.0.2",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
-      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1",
-        "entities": "~3.0.1",
-        "linkify-it": "^4.0.1",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
       },
       "bin": {
-        "markdown-it": "bin/markdown-it.js"
+        "markdown-it": "bin/markdown-it.mjs"
       }
     },
     "node_modules/markdown-it/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
     },
     "node_modules/maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
       "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
+      "license": "MIT",
       "dependencies": {
         "array-differ": "^1.0.0",
         "array-union": "^1.0.1",
@@ -1748,42 +1480,17 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/maximatch/node_modules/array-differ": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/maximatch/node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/maximatch/node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -1805,6 +1512,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "license": "MIT",
       "bin": {
         "mime": "cli.js"
       },
@@ -1812,10 +1520,36 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1827,30 +1561,18 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/moo": {
@@ -1859,45 +1581,16 @@
       "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
     },
     "node_modules/morphdom": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz",
-      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg=="
+      "version": "2.7.8",
+      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.8.tgz",
+      "integrity": "sha512-D/fR4xgGUyVRbdMGU6Nejea1RFzYxYtyurG4Fbv2Fi/daKlWKuXGLOdXtl+3eIwL110cI2hz1ZojGICjjFLgTg==",
+      "license": "MIT"
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/multimatch": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
-      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
-      "dependencies": {
-        "@types/minimatch": "^3.0.3",
-        "array-differ": "^3.0.0",
-        "array-union": "^2.1.0",
-        "arrify": "^2.0.1",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mustache": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
-      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-      "bin": {
-        "mustache": "bin/mustache"
-      }
-    },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
     },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
@@ -1906,6 +1599,17 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/node-retrieve-globals": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
+      "integrity": "sha512-j0DeFuZ/Wg3VlklfbxUgZF/mdHMTEiEipBb3q0SpMMbHaV3AVfoUQF8UGxh1s/yjqO0TgRZd4Pi/x2yRqoQ4Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "acorn-walk": "^8.3.4",
+        "esm-import-transformer": "^3.0.3"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -1953,18 +1657,11 @@
         "node": ">= 6"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -1972,54 +1669,21 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
-      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "license": "MIT"
     },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-    },
-    "node_modules/path-to-regexp": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
-      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
-      "license": "MIT"
-    },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -2031,18 +1695,11 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
       "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "license": "MIT",
       "dependencies": {
         "semver-compare": "^1.0.0"
       }
@@ -2051,6 +1708,7 @@
       "version": "0.16.6",
       "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
       "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
+      "peer": true,
       "dependencies": {
         "posthtml-parser": "^0.11.0",
         "posthtml-render": "^3.0.0"
@@ -2059,6 +1717,18 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/posthtml-match-helper": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.3.tgz",
+      "integrity": "sha512-p9oJgTdMF2dyd7WE54QI1LvpBIkNkbSiiECKezNnDVYhGhD1AaOnAkw0Uh0y5TW+OHO8iBdSqnd8Wkpb6iUqmw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "posthtml": "^0.16.6"
+      }
+    },
     "node_modules/posthtml-parser": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
@@ -2081,158 +1751,21 @@
         "node": ">=12"
       }
     },
-    "node_modules/posthtml-urls": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
-      "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==",
-      "dependencies": {
-        "http-equiv-refresh": "^1.0.0",
-        "list-to-array": "^1.1.0",
-        "parse-srcset": "^1.0.2",
-        "promise-each": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dependencies": {
-        "asap": "~2.0.3"
-      }
-    },
-    "node_modules/promise-each": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz",
-      "integrity": "sha512-67roqt1k3QDA41DZ8xi0V+rF3GoaMiX7QilbXu0vXimut+9RcKBNZ/t60xCRgcsihmNUsEjh48xLfNqOrKblUg==",
-      "dependencies": {
-        "any-promise": "^0.1.0"
-      }
-    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
-    },
-    "node_modules/pug": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz",
-      "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==",
-      "license": "MIT",
-      "dependencies": {
-        "pug-code-gen": "^3.0.3",
-        "pug-filters": "^4.0.0",
-        "pug-lexer": "^5.0.1",
-        "pug-linker": "^4.0.0",
-        "pug-load": "^3.0.0",
-        "pug-parser": "^6.0.0",
-        "pug-runtime": "^3.0.1",
-        "pug-strip-comments": "^2.0.0"
-      }
-    },
-    "node_modules/pug-attrs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
-      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
-      "license": "MIT",
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "js-stringify": "^1.0.2",
-        "pug-runtime": "^3.0.0"
-      }
-    },
-    "node_modules/pug-code-gen": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz",
-      "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==",
-      "license": "MIT",
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.2",
-        "pug-attrs": "^3.0.0",
-        "pug-error": "^2.1.0",
-        "pug-runtime": "^3.0.1",
-        "void-elements": "^3.1.0",
-        "with": "^7.0.0"
-      }
-    },
-    "node_modules/pug-error": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz",
-      "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "license": "MIT"
     },
-    "node_modules/pug-filters": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
-      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "jstransformer": "1.0.0",
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0",
-        "resolve": "^1.15.1"
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/pug-lexer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
-      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
-      "dependencies": {
-        "character-parser": "^2.2.0",
-        "is-expression": "^4.0.0",
-        "pug-error": "^2.0.0"
-      }
-    },
-    "node_modules/pug-linker": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
-      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
-      "dependencies": {
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "node_modules/pug-load": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
-      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "node_modules/pug-parser": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
-      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
-      "dependencies": {
-        "pug-error": "^2.0.0",
-        "token-stream": "1.0.0"
-      }
-    },
-    "node_modules/pug-runtime": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
-      "license": "MIT"
-    },
-    "node_modules/pug-strip-comments": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
-      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
-      "dependencies": {
-        "pug-error": "^2.0.0"
-      }
-    },
-    "node_modules/pug-walk": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
-      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2250,7 +1783,17 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
@@ -2263,58 +1806,16 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/recursive-copy": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz",
-      "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==",
-      "dependencies": {
-        "errno": "^0.1.2",
-        "graceful-fs": "^4.1.4",
-        "junk": "^1.0.1",
-        "maximatch": "^0.1.0",
-        "mkdirp": "^0.5.1",
-        "pify": "^2.3.0",
-        "promise": "^7.0.1",
-        "rimraf": "^2.7.1",
-        "slash": "^1.0.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -2333,6 +1834,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
@@ -2398,12 +1900,10 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -2414,49 +1914,48 @@
     "node_modules/semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "license": "MIT"
     },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
       "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
       },
       "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
+        "node": ">= 18"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
     },
     "node_modules/slash": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/slugify": {
@@ -2467,14 +1966,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -2489,20 +1980,22 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
     "node_modules/ssri": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
+      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
+      "license": "ISC",
       "dependencies": {
-        "minipass": "^3.1.1"
+        "minipass": "^7.0.3"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
     "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -2515,34 +2008,50 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "engines": {
-        "node": ">= 0.4"
+        "node": ">=12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/to-regex-range": {
@@ -2557,88 +2066,40 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/token-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg=="
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
     },
     "node_modules/uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
-    },
-    "node_modules/uglify-js": {
-      "version": "3.17.4",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
-      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
-      "optional": true,
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
     },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
-    "node_modules/void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/with": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
-      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.9.6",
-        "@babel/types": "^7.9.6",
-        "assert-never": "^1.2.1",
-        "babel-walk": "3.0.0-canary-5"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    "node_modules/urlpattern-polyfill": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
+      "integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
+      "license": "MIT"
     },
     "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -2655,11 +2116,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     }
   }
 }
diff --git a/package.json b/package.json
index 8036798..e863c3f 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "normalize.css": "^8.0.1"
   },
   "dependencies": {
-    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-upgrade-help": "^3.0.2",
     "bootstrap-icons": "^1.13.1",
     "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
     "jquery": "^3.7.1",

From 43de7d86faf57ff286d8e9c660f8bb571cba9a21 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 4 Mar 2026 19:22:55 +0100
Subject: [PATCH 180/253] build: Use ES module system

- Update package.json with type
- Change eleventy config to use import and export
- Add comments for jshint and inspection
---
 .eleventy.js | 11 ++++---
 package.json | 89 ++++++++++++++++++++++++++--------------------------
 2 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 34db01b..bd53224 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,7 +1,10 @@
-const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
+/* jshint strict: false */
 
-module.exports = function (eleventyConfig) {
-	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+import {HtmlBasePlugin} from "@11ty/eleventy";
+
+// noinspection JSUnusedGlobalSymbols
+export default async function (eleventyConfig) {
+	eleventyConfig.addPlugin(HtmlBasePlugin);
 
 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
@@ -82,4 +85,4 @@ module.exports = function (eleventyConfig) {
 		templateFormats: ['html', 'liquid', 'njk', 'md']
 		// pathPrefix: './demo/'
 	};
-};
+}
diff --git a/package.json b/package.json
index e863c3f..99b4954 100644
--- a/package.json
+++ b/package.json
@@ -1,46 +1,47 @@
 {
-  "name": "hippie",
-  "version": "0.13.1",
-  "description": "Hippie interweaves preeminent personal interface elements",
-  "keywords": [
-    "hippie",
-    "www site template"
-  ],
-  "homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
-  "bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
-  "license": "MIT",
-  "author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
-  "main": "",
-  "repository": {
-    "type": "git",
-    "url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
-  },
-  "scripts": {
-    "hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
-    "clean:build": "rm -rf build/*",
-    "clean:deploy": "rm -rf deploy/*",
-    "clean:report": "rm -rf report/*",
-    "clean:test": "rm -rf test/*",
-    "style:compile": "sass source/style:build/css --load-path=vendor",
-    "style:deploy": "sass source/style:deploy/css --load-path=vendor",
-    "style:watch": "sass --watch source/style:build/css --load-path=vendor",
-    "build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
-    "build": "npx @11ty/eleventy && npm run style:compile",
-    "deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
-    "serve": "npm run style:watch & npx @11ty/eleventy --serve"
-  },
-  "private": true,
-  "devDependencies": {
-    "normalize.css": "^8.0.1"
-  },
-  "dependencies": {
-    "@11ty/eleventy": "^3.1.2",
-    "@11ty/eleventy-upgrade-help": "^3.0.2",
-    "bootstrap-icons": "^1.13.1",
-    "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-    "jquery": "^3.7.1",
-    "sass": "^1.93.0"
-  }
+	"name": "hippie",
+	"version": "0.13.1",
+	"description": "Hippie interweaves preeminent personal interface elements",
+	"keywords": [
+		"hippie",
+		"www site template"
+	],
+	"homepage": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie",
+	"bugs": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie/issues",
+	"license": "MIT",
+	"author": "Stephan Hagedorn <sthag@interaktionsweise.de> (https://karte.interaktionsweise.de)",
+	"main": "",
+	"repository": {
+		"type": "git",
+		"url": "https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git"
+	},
+	"type": "module",
+	"scripts": {
+		"hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
+		"clean:build": "rm -rf build/*",
+		"clean:deploy": "rm -rf deploy/*",
+		"clean:report": "rm -rf report/*",
+		"clean:test": "rm -rf test/*",
+		"style:compile": "sass source/style:build/css --load-path=vendor",
+		"style:deploy": "sass source/style:deploy/css --load-path=vendor",
+		"style:watch": "sass --watch source/style:build/css --load-path=vendor",
+		"build:new": "npm run clean:build && npx @11ty/eleventy && npm run style:compile",
+		"build": "npx @11ty/eleventy && npm run style:compile",
+		"deploy": "npm run clean:deploy && npx @11ty/eleventy --output=deploy --pathprefix=hippie && npm run style:deploy",
+		"serve": "npm run style:watch & npx @11ty/eleventy --serve"
+	},
+	"private": true,
+	"devDependencies": {
+		"normalize.css": "^8.0.1"
+	},
+	"dependencies": {
+		"@11ty/eleventy": "^3.1.2",
+		"@11ty/eleventy-upgrade-help": "^3.0.2",
+		"bootstrap-icons": "^1.13.1",
+		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
+		"jquery": "^3.7.1",
+		"sass": "^1.93.0"
+	}
 }

From 6c98beb1485333a16c5a0ebe197b410e9904250d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 6 Mar 2026 23:42:03 +0100
Subject: [PATCH 181/253] docs: New TODO

---
 TODO.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/TODO.md b/TODO.md
index 01e9e26..6af7f1b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -24,6 +24,7 @@
 # JS
 
 - Use delegation for action attributes like: https://javascript.info/event-delegation#delegation-example-actions-in-markup
+- Proxy for class options: https://javascript.info/proxy
 
 # Content
 

From dd8b461034b038ac522c5f049e35704ce19c8fe8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 6 Mar 2026 23:45:19 +0100
Subject: [PATCH 182/253] feat: HippieClock structure

- Restructure options with defaults
- Separate date and values of geTime()
- Use this.values inside class
- Add debug console output
- Add handler to updateOptions()
---
 source/screens/demo/examples/clock.liquid | 60 ++++++++++++++++-------
 1 file changed, 41 insertions(+), 19 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 403926c..c55f9a9 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -24,15 +24,18 @@ tags:
 
 <script>
 	class HippieClock {
-		constructor(element, date, options) {
-			this.element = element;
-			this.date = this.getTime(date);
-			this.options = options || {
+		constructor(element, date = new Date(), options = {}) {
+			this.defaults = {
+				debug: true,
 				size: Math.floor(this.getSize().value * 0.9),
 				h24: true,
 				sections: true,
 				overlay: false
 			};
+			this.options = {...this.defaults, ...options};
+			this.element = element;
+			this.date = date;
+			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];
 
@@ -47,17 +50,21 @@ tags:
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
-			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
-			this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);
-			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
+			this.addRing('dotmonth', .6, 12, this.values.daysMonth, `rgb(39, 63, 139)`);
+			this.addRing('dotyear', .5, 256, this.values.daysYear, `rgb(60, 87, 154)`);
+			this.addRing('week', .4, 10, this.values.weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
 			this.#resize();
 			window.addEventListener('resize', () => this.#resize());
 
-			console.debug(this);
-			console.debug(this.getTime());
+			if (this.options.debug) {
+				console.group('Clock');
+				console.info('\nOptions:', this.options, '\n\n');
+				console.info('Date:', this.date);
+				console.groupEnd();
+			}
 		}
 
 		#resize() {
@@ -146,19 +153,20 @@ tags:
 
 		// TODO: Erfassung für geänderte Formen ergänzen
 		update() {
-			const second = this.getTime().second;
-			const minute = this.getTime().minute;
-			const hour = this.getTime().hour;
+			this.values = this.getTime();
+			const second = this.values.second;
+			const minute = this.values.minute;
+			const hour = this.values.hour;
 
 			this.updateShape('seconds', (second === 0) ? 60 : second);
 			this.updateShape('minutes', (minute === 0) ? 60 : minute);
 			this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
-			this.updateShape('dotweek', this.getTime().dayWeek);
-			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
-			this.updateShape('dotyear', this.getTime().dayYear);
-			this.updateShape('week', this.getTime().week);
-			this.updateShape('month', this.getTime().month);
-			this.updateShape('moon', this.getTime().moon);
+			this.updateShape('dotweek', this.values.dayWeek);
+			this.updateShape('dotmonth', this.values.dayMonth, this.values.daysMonth);
+			this.updateShape('dotyear', this.values.dayYear);
+			this.updateShape('week', this.values.week);
+			this.updateShape('month', this.values.month);
+			this.updateShape('moon', this.values.moon);
 			this.draw();
 		}
 
@@ -366,8 +374,17 @@ tags:
 			return false;
 		}
 
+		// TODO: Proxy für Optionen benutzen
 		updateOptions(changes) {
 			this.options = {...this.options, ...changes};
+
+			// TODO: Änderungen durch setzen von Optionen vornehmen, oder nicht?
+			const drawOptions = new Set(['sections', 'h24']);
+			const hasKey = Object.keys(changes).some(key => drawOptions.has(key));
+
+			if (hasKey) {
+				this.draw();
+			}
 		}
 
 		updateShape(id, angle, max) {
@@ -450,8 +467,13 @@ tags:
 	document.getElementById('tglOverlay').addEventListener('click', () => {
 		if (clock) {
 			// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
-			clock.options.overlay ? clock.removeOverlay() : clock.createOverlay();
 			clock.updateOptions({overlay: !clock.options.overlay});
+
+			if (clock.options.overlay) {
+				clock.createOverlay();
+			} else {
+				clock.removeOverlay();
+			}
 		} else {
 			console.log('No clock available');
 		}

From 3ae1cebdd6eef8aac4f3dfcb7751ad07bc336151 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 14:42:16 +0100
Subject: [PATCH 183/253] feat: Responsiveness for lists

- New style for lists
- Change index list layout
---
 source/screens/demo/index.liquid            | 42 ++++++++++++---------
 source/style/hippie-style                   |  2 +-
 source/style/modules/demo/_demo_module.scss | 15 ++++++--
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 2c1eafc..13c8d18 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -34,7 +34,7 @@ tags:
 			<h3>Overview</h3>
 		</div>
 		<nav>
-			<ul class="list_link">
+			<ul class="block list_link">
 				{% for link in collections.demoIndex %}
 					<li>
 						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
@@ -42,24 +42,30 @@ tags:
 				{% endfor %}
 			</ul>
 		</nav>
-		<h3>Page</h3>
-		<ul class="list_link">
-			{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
+		<div class="responsive">
+			<section>
+				<h3>Page</h3>
+				<ul class="block 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>
+					{% for link in pagesByTitle %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</section>
+			<section>
+				<h3>Example</h3>
+				<ul class="block list_link">
+					{% for link in collections.demoExample %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</section>
+		</div>
 	</div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index ddedf3b..45bb274 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96
+Subproject commit 45bb274db110db9d111207940c4e6e341da1e90c
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index 679de47..247c61b 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -281,10 +281,19 @@
 	.hello {
 		flex: 0 1 auto;
 		width: 80%;
+	}
 
-		ul {
-			padding: 1em 5em;
-			background-color: hippie.$color_darker;
+	.responsive {
+		@include hippie.forTabletPortraitUp {
+			display: flex;
+			flex-flow: row wrap;
+			align-items: stretch;
+			justify-content: space-between;
+			gap: hippie.$space_half hippie.$space_basic;
+
+			& > * {
+				flex: auto;
+			}
 		}
 	}
 }
\ No newline at end of file

From a5462dcc7e58b8109ce678590b0aae886cc26a86 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 14:54:41 +0100
Subject: [PATCH 184/253] feat: Use paired styles

Change .list_link style to &.link.
---
 source/screens/demo/components.liquid           | 4 ++--
 source/screens/demo/examples/game.liquid        | 2 +-
 source/screens/demo/examples/ui/index.liquid    | 2 +-
 source/screens/demo/index.liquid                | 6 +++---
 source/screens/demo/layouts.liquid              | 4 ++--
 source/style/hippie-style                       | 2 +-
 source/style/modules/portal/_portal_module.scss | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 4f4dd2b..7070190 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -151,8 +151,8 @@ tags:
 			<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">
+		<pre class="pre_code"><code>ul.link>(li>a)*2</code></pre>
+		<ul class="link">
 			<li>
 				<a href="">Mit</a>
 			</li>
diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid
index 734a5a6..4b368cb 100644
--- a/source/screens/demo/examples/game.liquid
+++ b/source/screens/demo/examples/game.liquid
@@ -14,7 +14,7 @@ tags:
 				<h1>{{ title }}</h1>
 				<p>Additional name</p>
 			</hgroup>
-			<ul class="list_link">
+			<ul class="link">
 				<li><a href="#new">Neues Spiel</a></li>
 				<li><a href="#continue">Spiel fortsetzen</a></li>
 				<li><a href="#options">Einstellungen</a></li>
diff --git a/source/screens/demo/examples/ui/index.liquid b/source/screens/demo/examples/ui/index.liquid
index 5952f16..0e6dcc8 100644
--- a/source/screens/demo/examples/ui/index.liquid
+++ b/source/screens/demo/examples/ui/index.liquid
@@ -12,7 +12,7 @@ tags:
 <div class="sec_main_center">
 	<nav role="doc-toc">
 		<h1>{{ title }}</h1>
-		<ul class="list_link">
+		<ul class="link">
 			{%- for ui in collections.ui -%}
 				<li>
 					<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 13c8d18..bd3e609 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -34,7 +34,7 @@ tags:
 			<h3>Overview</h3>
 		</div>
 		<nav>
-			<ul class="block list_link">
+			<ul class="block link">
 				{% for link in collections.demoIndex %}
 					<li>
 						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
@@ -45,7 +45,7 @@ tags:
 		<div class="responsive">
 			<section>
 				<h3>Page</h3>
-				<ul class="block list_link">
+				<ul class="block link">
 					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
 
 					{% for link in pagesByTitle %}
@@ -57,7 +57,7 @@ tags:
 			</section>
 			<section>
 				<h3>Example</h3>
-				<ul class="block list_link">
+				<ul class="block link">
 					{% for link in collections.demoExample %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
index 500e902..6a41fe5 100644
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@@ -231,9 +231,9 @@ tags:
 		<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
 		<hr class="dotted space_even_fourth">
 		<h3>ul</h3>
-		<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
+		<pre class="pre_code"><code>nav>ul.link>(li>a)+li>a>img+span</code></pre>
 		<nav>
-			<ul class="list_link">
+			<ul class="link">
 				<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
 				<li>
 					<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 45bb274..b4c5632 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 45bb274db110db9d111207940c4e6e341da1e90c
+Subproject commit b4c56320060548dacde62639876c6aee72b297ea
diff --git a/source/style/modules/portal/_portal_module.scss b/source/style/modules/portal/_portal_module.scss
index 6c5fb52..f4bd18e 100644
--- a/source/style/modules/portal/_portal_module.scss
+++ b/source/style/modules/portal/_portal_module.scss
@@ -129,7 +129,7 @@ $portal_icon_size: 64px;
 }
 
 .portal__list {
-  @extend .list_link;
+  @extend .link;
 
   display: none;
   position: relative;

From 76791d93baa3b56b2bb065b1479039bcd03ba76f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 16:51:39 +0100
Subject: [PATCH 185/253] feat: Move hello world to examples

---
 source/screens/demo/{pages => examples}/hello.md | 2 ++
 1 file changed, 2 insertions(+)
 rename source/screens/demo/{pages => examples}/hello.md (76%)

diff --git a/source/screens/demo/pages/hello.md b/source/screens/demo/examples/hello.md
similarity index 76%
rename from source/screens/demo/pages/hello.md
rename to source/screens/demo/examples/hello.md
index 09a9406..9bd4c71 100644
--- a/source/screens/demo/pages/hello.md
+++ b/source/screens/demo/examples/hello.md
@@ -1,6 +1,8 @@
 ---
 title: "Hello World"
 layout: hippie/world.liquid
+tags:
+- demoExample
 ---
 
 # {{ title }}

From 9b44963ba2a2edb8ac7d9d6e6bee30dbf36c918f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 17:00:04 +0100
Subject: [PATCH 186/253] feat: Make game sub

- Move game and intro to own collection
- Add index
- Add brand placeholder to shortcodes
- Add variant of placeholder to menu
---
 .eleventy.js                                  | 38 +++++++++++++++++++
 source/screens/demo/examples/game.liquid      | 25 ------------
 .../screens/demo/examples/game/index.liquid   | 24 ++++++++++++
 .../demo/examples/{ => game}/intro.njk        |  2 +-
 source/screens/demo/examples/game/menu.liquid | 29 ++++++++++++++
 source/style/modules/_game.scss               | 33 ++++++++++++++++
 6 files changed, 125 insertions(+), 26 deletions(-)
 delete mode 100644 source/screens/demo/examples/game.liquid
 create mode 100644 source/screens/demo/examples/game/index.liquid
 rename source/screens/demo/examples/{ => game}/intro.njk (99%)
 create mode 100644 source/screens/demo/examples/game/menu.liquid

diff --git a/.eleventy.js b/.eleventy.js
index bd53224..407553c 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -57,6 +57,44 @@ export default async function (eleventyConfig) {
 		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
 	});
 
+	eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
+		const logo = `
+<svg
+width="128"
+height="128"
+viewBox="0 0 128 128"
+preserveAspectRatio="xMidYMid meet">
+	<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
+		style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+		cx="64"
+		cy="64"
+		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>
+`;
+		let output = '';
+		switch (direction) {
+			case 'first':
+				output = logo + `${content}`;
+				break;
+			case 'last':
+				output = `${content}` + logo;
+				break;
+		}
+
+		return `<div class="${attrClass}">` + output + `</div>`;
+	});
+
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
 
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
diff --git a/source/screens/demo/examples/game.liquid b/source/screens/demo/examples/game.liquid
deleted file mode 100644
index 4b368cb..0000000
--- a/source/screens/demo/examples/game.liquid
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Game - TFW
-tags:
-- demoExample
-- gameExample
----
-{% assign bodyClass = 'body_game' -%}
-{% layout 'hippie/simple.liquid' %}
-
-{% block body %}
-	<div class="sec_main_center">
-		<nav role="doc-toc">
-			<hgroup>
-				<h1>{{ title }}</h1>
-				<p>Additional name</p>
-			</hgroup>
-			<ul class="link">
-				<li><a href="#new">Neues Spiel</a></li>
-				<li><a href="#continue">Spiel fortsetzen</a></li>
-				<li><a href="#options">Einstellungen</a></li>
-				<li><a href="#quit">Spiel beenden</a></li>
-			</ul>
-		</nav>
-	</div>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/index.liquid b/source/screens/demo/examples/game/index.liquid
new file mode 100644
index 0000000..d939850
--- /dev/null
+++ b/source/screens/demo/examples/game/index.liquid
@@ -0,0 +1,24 @@
+---
+title: Game
+tags:
+- demoExample
+- index
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<h1>{{ title }}</h1>
+		<ul class="link">
+			{%- for game in collections.game -%}
+				<li>
+					<a href="{{ game.page.url }}">{{ game.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/game/intro.njk
similarity index 99%
rename from source/screens/demo/examples/intro.njk
rename to source/screens/demo/examples/game/intro.njk
index 548cc3f..fbcb692 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/game/intro.njk
@@ -1,7 +1,7 @@
 ---
 title: Intro
 tags: 
-  - demoExample
+  - game
 ---
 
 {% set pageId = "init" %}
diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid
new file mode 100644
index 0000000..7852bdb
--- /dev/null
+++ b/source/screens/demo/examples/game/menu.liquid
@@ -0,0 +1,29 @@
+---
+title: Menu
+tags:
+- game
+---
+{% assign bodyClass = 'body_game' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<hgroup>
+			<h1>Game - TFW</h1>
+			<p>Additional name</p>
+		</hgroup>
+		<ul class="link">
+			<li><a href="#new">Neues Spiel</a></li>
+			<li><a href="#continue">Spiel fortsetzen</a></li>
+			<li><a href="#options">Einstellungen</a></li>
+			<li><a href="#quit">Spiel beenden</a></li>
+		</ul>
+	</nav>
+</div>
+<footer>
+	{% brand 'brand', 'last' %}
+	<p>Marke</p>
+	{% endbrand %}
+</footer>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 7bb575e..690a4e9 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,3 +1,36 @@
+@use "../hippie-style/hippie";
+
 .body_game {
+	@extend .h_full_view;
 	background-color: hotpink;
+
+	footer {
+		@extend .pos_abs;
+		@extend .pin_bottom;
+		@extend .width_full;
+
+		.brand {
+			display: flex;
+			flex-flow: row nowrap;
+			align-items: center;
+			justify-content: flex-end;
+			gap: hippie.$space_half hippie.$space_basic;
+
+			margin: hippie.$space_basic hippie.$space_double;
+
+			& > svg {
+				height: 32px;
+				width: 32px;
+
+				rect, circle, path {
+					stroke: black !important;
+				}
+			}
+
+			p {
+
+			}
+		;
+		}
+	}
 }
\ No newline at end of file

From 6ae411c83b3c32da55822d784db8533f457c77e4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 18:18:54 +0100
Subject: [PATCH 187/253] feat: Update intro and placeholder

- Change intro from njk to liquid
- New svg content for brand shortcode
- New style for brand in ui
---
 .eleventy.js                                  |  52 ++++---
 .../screens/demo/examples/game/intro.liquid   | 138 ++++++++++++++++++
 source/screens/demo/examples/game/intro.njk   | 138 ------------------
 source/style/modules/_game.scss               |   9 --
 source/style/ui.scss                          |  13 +-
 5 files changed, 181 insertions(+), 169 deletions(-)
 create mode 100644 source/screens/demo/examples/game/intro.liquid
 delete mode 100644 source/screens/demo/examples/game/intro.njk

diff --git a/.eleventy.js b/.eleventy.js
index 407553c..673656e 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -60,27 +60,39 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
 		const logo = `
 <svg
-width="128"
-height="128"
-viewBox="0 0 128 128"
-preserveAspectRatio="xMidYMid meet">
-	<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
-		style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-		cx="64"
-		cy="64"
-		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>
+   width="100%"
+   height="100%"
+   viewBox="0 0 512 512"
+   preserveAspectRatio="xMidYMid meet">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <g
+       id="g2"
+       transform="matrix(0.984375,0,0,0.984375,4,4)"
+       style="stroke-width:1.01587">
+      <rect
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect1"
+         width="512"
+         height="512"
+         x="0"
+         y="0" />
+      <circle
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path1"
+         cx="256"
+         cy="256"
+         r="256" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path2"
+         d="M 477.7025,128 256,512 34.297496,128 Z"
+    </g>
+  </g>
 </svg>
+
 `;
 		let output = '';
 		switch (direction) {
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
new file mode 100644
index 0000000..4e245b2
--- /dev/null
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -0,0 +1,138 @@
+---
+title: Intro
+tags:
+- game
+---
+
+{% assign pageId = "init" %}
+{% assign bodyClass = 'body_intro' -%}
+{% layout 'hippie/app.liquid' %}
+
+{% 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>
+</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>
+	{% brand 'brand' %}
+	<h1>Marke</h1>
+	{% endbrand %}
+	<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-overlay"></div>
+	<div class="hello">Hello World!</div>
+	<p class="hello">Only left mouse click or any key</p>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script src="/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/examples/game/intro.njk b/source/screens/demo/examples/game/intro.njk
deleted file mode 100644
index fbcb692..0000000
--- a/source/screens/demo/examples/game/intro.njk
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Intro
-tags: 
-  - game
----
-
-{% set pageId = "init" %}
-{% set bodyClass = "body_intro" %}
-
-{% extends "hippie/_app_frame.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% 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>
-	</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>
-		{{ 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-overlay"></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/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/style/modules/_game.scss b/source/style/modules/_game.scss
index 690a4e9..6d49400 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -21,16 +21,7 @@
 			& > svg {
 				height: 32px;
 				width: 32px;
-
-				rect, circle, path {
-					stroke: black !important;
-				}
 			}
-
-			p {
-
-			}
-		;
 		}
 	}
 }
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 8c802c7..f1a3dcb 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -124,6 +124,15 @@ $space_gui_half: hippie.$space_half;
 .brand {
 	text-align: center;
 
+	svg {
+		height: 128px;
+		width: 128px;
+
+		rect, circle, path {
+			stroke: white !important;
+		}
+	}
+
 	img {
 		display: inline-block;
 		width: 128px;
@@ -131,7 +140,7 @@ $space_gui_half: hippie.$space_half;
 		background-color: white;
 	}
 
-	*+h1 {
+	* + h1 {
 		margin-top: hippie.$space_small;
 		margin-bottom: hippie.$space_large;
 	}
@@ -170,7 +179,7 @@ $space_gui_half: hippie.$space_half;
 	background-color: hippie.$color_back_basic;
 	transition: background-color 4s;
 
-	&:hover>.mouse-overlay {
+	&:hover > .mouse-overlay {
 		background-color: transparent !important;
 		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 	}

From 30fcd22a7b00cf8bef1e1c4aa2763e01c18cfecd Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 18:54:44 +0100
Subject: [PATCH 188/253] fix: Intro

- Move style inside .body_intro
- Fix overlap of ids
---
 source/code/intro.js                          |   6 +-
 .../screens/demo/examples/game/intro.liquid   |   5 +-
 source/style/ui.scss                          | 286 +++++++++---------
 3 files changed, 148 insertions(+), 149 deletions(-)

diff --git a/source/code/intro.js b/source/code/intro.js
index bff5a87..26be826 100644
--- a/source/code/intro.js
+++ b/source/code/intro.js
@@ -25,7 +25,7 @@ class UI {
 				msgNo: 'No agreement today.'
 			}
 		};
-		this.intro = document.getElementById('intro');
+		this.intro = document.getElementById('init');
 		this.agreement = this.steps.agreement.element;
 		this.hint = {
 			element: document.getElementById('hint'),
@@ -61,7 +61,7 @@ class UI {
 			} else {
 				reject('No intro available.');
 			}
-		})
+		});
 	}
 
 	showHint() {
@@ -100,7 +100,7 @@ class UI {
 			} else {
 				reject();
 			}
-		})
+		});
 	}
 
 	init() {
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
index 4e245b2..c223413 100644
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -4,7 +4,6 @@ tags:
 - game
 ---
 
-{% assign pageId = "init" %}
 {% assign bodyClass = 'body_intro' -%}
 {% layout 'hippie/app.liquid' %}
 
@@ -20,7 +19,7 @@ tags:
 		<div id="status">0%</div>
 	</div>
 </div>
-<div id="intro" class="step op_hide">
+<div id="init" class="step op_hide">
 	<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
 		<p>Hold
 			<kbd>space</kbd>
@@ -74,7 +73,7 @@ tags:
 			msgNo: 'No agreement today.'
 		}
 	};
-	const intro = document.getElementById('intro');
+	const intro = document.getElementById('init');
 	const agreement = steps.agreement.element;
 	const hint = {
 		element: document.getElementById('hint'),
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f1a3dcb..1266a3a 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -33,155 +33,162 @@ $space_gui_half: hippie.$space_half;
 
 .body_intro {
 	background-color: black;
-}
 
-.step {
-	@extend %full_parent;
-}
-
-#loader {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: white;
-}
-
-#bar {
-	display: flex;
-	justify-content: space-between;
-	width: 50%;
-}
-
-#wrap {
-	flex: 1;
-	background-color: hippie.$color_back_basic;
-}
-
-#progress {
-	width: 0;
-	height: 100%;
-	background-color: black;
-}
-
-#status,
-#spinner {
-	@extend %basic;
-
-	display: flex;
-	flex-grow: 0;
-	flex-shrink: 0;
-	justify-content: center;
-	align-items: center;
-	margin-inline: $space_gui_half;
-	padding-block: calc($space_gui_half - 1px) $space_gui_half;
-	line-height: hippie.$line_basic;
-	text-align: center;
-}
-
-#status {
-	width: 4em;
-	background-color: black;
-	color: white;
-}
-
-#spinner {
-	width: 2.5em;
-	background-color: hippie.$color_back_basic;
-	color: black;
-
-	span {
-		animation: rotate 1s linear infinite;
-	}
-}
-
-@keyframes rotate {
-	from {
-		transform: rotate(0deg);
+	.step {
+		@extend %full_parent;
 	}
 
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-#intro {
-	z-index: map.get(hippie.$z-indexes, "content-top");
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: black;
-
-	h1,
-	p,
-	li {
-		color: white;
-	}
-}
-
-.brand {
-	text-align: center;
-
-	svg {
-		height: 128px;
-		width: 128px;
-
-		rect, circle, path {
-			stroke: white !important;
-		}
-	}
-
-	img {
-		display: inline-block;
-		width: 128px;
-		height: 128px;
+	#loader {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 		background-color: white;
 	}
 
-	* + h1 {
-		margin-top: hippie.$space_small;
-		margin-bottom: hippie.$space_large;
+	#bar {
+		display: flex;
+		justify-content: space-between;
+		width: 50%;
 	}
-}
 
-.tech-stack {
-	display: flex;
-	padding-left: 0;
-
-	li {
-		list-style: none;
-		padding-inline: hippie.$space_double;
+	#wrap {
+		flex: 1;
+		background-color: hippie.$color_back_basic;
 	}
-}
 
-#agreement,
-#idle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
-}
-
-#agreement {
-	flex-direction: column;
-	background-color: map.get(hippie.$color_palette, bravo);
-	user-select: none;
-
-	h1 {
-		margin-top: 0;
-		color: hippie.$color_brightest;
+	#progress {
+		width: 0;
+		height: 100%;
+		background-color: black;
 	}
-}
 
-#idle {
-	background-color: hippie.$color_back_basic;
-	transition: background-color 4s;
+	#status,
+	#spinner {
+		@extend %basic;
 
-	&:hover > .mouse-overlay {
-		background-color: transparent !important;
-		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
+		display: flex;
+		flex-grow: 0;
+		flex-shrink: 0;
+		justify-content: center;
+		align-items: center;
+		margin-inline: $space_gui_half;
+		padding-block: calc($space_gui_half - 1px) $space_gui_half;
+		line-height: hippie.$line_basic;
+		text-align: center;
+	}
+
+	#status {
+		width: 4em;
+		background-color: black;
+		color: white;
+	}
+
+	#spinner {
+		width: 2.5em;
+		background-color: hippie.$color_back_basic;
+		color: black;
+
+		span {
+			animation: rotate 1s linear infinite;
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	#init {
+		z-index: map.get(hippie.$z-indexes, "content-top");
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: black;
+
+		h1,
+		p,
+		li {
+			color: white;
+		}
+	}
+
+	.brand {
+		text-align: center;
+
+		svg {
+			height: 128px;
+			width: 128px;
+
+			rect, circle, path {
+				stroke: white !important;
+			}
+		}
+
+		img {
+			display: inline-block;
+			width: 128px;
+			height: 128px;
+			background-color: white;
+		}
+
+		* + h1 {
+			margin-top: hippie.$space_small;
+			margin-bottom: hippie.$space_large;
+		}
+	}
+
+	.tech-stack {
+		display: flex;
+		padding-left: 0;
+
+		li {
+			list-style: none;
+			padding-inline: hippie.$space_double;
+		}
+	}
+
+	#agreement,
+	#idle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100vh;
+	}
+
+	#agreement {
+		flex-direction: column;
+		background-color: map.get(hippie.$color_palette, bravo);
+		user-select: none;
+
+		h1 {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+	}
+
+	#idle {
+		background-color: hippie.$color_back_basic;
+		transition: background-color 4s;
+
+		&:hover > .mouse-overlay {
+			background-color: transparent !important;
+			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
+		}
+
+		.hello {
+			flex: 0 1 auto;
+			padding: 1em 2em;
+			background-color: rgba(hippie.$color_bright, .5);
+			font-family: hippie.$family_text_mono;
+		}
 	}
 }
 
@@ -200,10 +207,3 @@ $space_gui_half: hippie.$space_half;
 		color: hippie.$color_back_io;
 	}
 }
-
-.hello {
-	flex: 0 1 auto;
-	padding: 1em 2em;
-	background-color: rgba(hippie.$color_bright, .5);
-	font-family: hippie.$family_text_mono;
-}

From f2ff20ce735ba9a0040ae93bb3bf54f5284d2b1f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 8 Mar 2026 20:50:25 +0100
Subject: [PATCH 189/253] feat: Add location change to intro

---
 source/code/hippie/app.js                     |  5 +++
 source/code/intro.js                          | 32 ++++++++++++-------
 .../screens/demo/examples/game/intro.liquid   |  1 +
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index d5f077f..f0028a5 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -539,6 +539,11 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
 	return mapped;
 }
 
+// Source - https://stackoverflow.com/a/47480429
+// Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-03-08, License - CC BY-SA 4.0
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/code/intro.js b/source/code/intro.js
index 26be826..68dcda0 100644
--- a/source/code/intro.js
+++ b/source/code/intro.js
@@ -119,7 +119,7 @@ function init() {
 		// Set all steps to not receive pointer events
 		document.querySelectorAll('.step').forEach(element => {
 			console.log(element);
-			
+
 			element.style.pointerEvents = 'none';
 		});
 
@@ -158,7 +158,7 @@ function showIntro() {
 
 			reject('No intro available.');
 		}
-	})
+	});
 }
 
 function showAgreement() {
@@ -197,7 +197,7 @@ function showAgreement() {
 				resolve(steps.agreement.msgOut);
 			});
 		}
-	})
+	});
 }
 
 function showIdle() {
@@ -212,16 +212,24 @@ function showIdle() {
 
 			el.classList.replace('op_hide', 'op_show');
 			el.style.pointerEvents = '';
-			el.addEventListener('click', idleStart, false);
-
-			resolve('Idle.');
+			el.addEventListener('contextmenu', (event) => {
+				event.preventDefault();
+			});
+			el.addEventListener('click', (event) => {
+				if (checkButtonAndTarget(event, event.target)) {
+					console.log('OK go', event.target);
+					resolve('Idle fin.');
+				} else {
+					event.preventDefault();
+				}
+			}, false);
 		} else {
 			document.removeEventListener('mouseleave', idleStart);
 			document.removeEventListener('mouseenter', idleStop);
 
 			reject();
 		}
-	})
+	});
 }
 
 function loadCore() {
@@ -289,9 +297,9 @@ function idleStop() {
 
 /**
  * Blendet einen Schritt aus.
- * 
- * @param {*} e 
- * @returns 
+ *
+ * @param {*} e
+ * @returns
  */
 function stepHandler(e) {
 	const el = e.target;
@@ -303,8 +311,8 @@ function stepHandler(e) {
 			console.info(msg);
 
 			el.removeEventListener('transitionend', endListener);
-			
+
 			resolve(msg);
 		});
-	})
+	});
 }
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
index c223413..3c4710c 100644
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -132,6 +132,7 @@ tags:
 		.finally(() => {
 			console.debug('Init end.', isAgree);
 			// location = 'demo/examples/ui/new.html';
+			window.location.href = './menu.html';
 		});
 </script>
 {% endblock %}
\ No newline at end of file

From fdef67388674314f18d3390553fe9ffa3fc01d65 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 10 Mar 2026 19:40:03 +0100
Subject: [PATCH 190/253] feat: Update card and placeholder

- Change card from njk to liquid
- Fix flag placeholder
- Update structure of card
---
 .eleventy.js                                  |  3 +-
 source/screens/demo/examples/card.liquid      | 69 +++++++++++++++
 source/screens/demo/examples/card.njk         | 83 -------------------
 source/style/modules/card/_card_module.scss   |  2 +-
 .../hippie/partials/placeholder-flag.liquid   |  2 +-
 5 files changed, 73 insertions(+), 86 deletions(-)
 create mode 100644 source/screens/demo/examples/card.liquid
 delete mode 100644 source/screens/demo/examples/card.njk

diff --git a/.eleventy.js b/.eleventy.js
index 673656e..152f256 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -35,7 +35,8 @@ export default async function (eleventyConfig) {
 			name: 'Vorname Nachname',
 			address: 'Straße Nr., PLZ Ort',
 			phone: '+49 (0)101 1337 48',
-			mail: 'name@domain.tld'
+			mail: 'name@domain.tld',
+			domain: 'https://domain.tld'
 		},
 		debugMode: true,
 		legacyMode: false
diff --git a/source/screens/demo/examples/card.liquid b/source/screens/demo/examples/card.liquid
new file mode 100644
index 0000000..dbe560b
--- /dev/null
+++ b/source/screens/demo/examples/card.liquid
@@ -0,0 +1,69 @@
+---
+title: Card
+tags:
+- demoExample
+---
+{% assign pageClass = "html_card" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="card_bkg">
+	<div id="dither"></div>
+	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
+</div>
+<div class="card_box">
+	<main>
+		<p>Titel<br/>und Beschreibung</p>
+		<h1>{% text hippie.placeholders.name %}</h1>
+		<p>
+			{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
+			{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
+			&middot;
+			{% text hippie.placeholders.address, '', 'decent' %}</p>
+	</main>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const flag = document.getElementById('flag');
+	let colors = new Array();
+	let iId = undefined;
+	let position = 0;
+
+	for (let i = 1; i <= flag.childElementCount; i++) {
+		colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
+	}
+
+	document
+		.querySelector('main')
+		.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
+		.querySelector('main')
+		.addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
deleted file mode 100644
index e05818d..0000000
--- a/source/screens/demo/examples/card.njk
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Card
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "html_card" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="card_bkg">
-		<div id="dither"></div>
-		{{ ph.flag('svg', '', 'flag', '') }}
-		{# <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 %}
-	<script>
-		const flag = document.getElementById("flag");
-		let colors = new Array();
-		let iId = undefined;
-		let position = 0;
-
-		for (let i = 1; i <= flag.childElementCount; i++) {
-			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
-		}
-
-		// console.log(colors);
-
-		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/style/modules/card/_card_module.scss b/source/style/modules/card/_card_module.scss
index 5244c7f..86ab09c 100644
--- a/source/style/modules/card/_card_module.scss
+++ b/source/style/modules/card/_card_module.scss
@@ -32,7 +32,7 @@
 				// text-align: center;
 			}
 
-			& > div {
+			& > main {
 				position: relative;
 				padding: 64px 64px 24px 64px;
 				border: 1px solid #FFF;
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
index 280a48c..6b6b048 100644
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@@ -14,7 +14,7 @@
 		<g>
 			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
 		</g>{% endcomment %}
-		{% if desc != '' %}
+		{% if desc %}
 			<desc>{{ desc }}</desc>
 		{% endif %}
 		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>

From 6a717b7ab8d2cf1f9871b3da7a59d43087007bc1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 10 Mar 2026 20:36:54 +0100
Subject: [PATCH 191/253] feat: Update basic screens

- Add order to front matter
- Separate script and assets block
- Sort index lists
---
 source/screens/demo/basics.liquid       |  1 +
 source/screens/demo/components.liquid   |  3 ++-
 source/screens/demo/index.liquid        |  9 ++++-----
 source/screens/demo/introduction.liquid |  7 +------
 source/screens/demo/layouts.liquid      | 10 +++++-----
 source/templates/hippie/full.liquid     |  5 +++--
 source/templates/hippie/page.liquid     |  6 ++++--
 7 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index a300a21..d3c7a08 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -2,6 +2,7 @@
 title: Basics
 tags:
 - demoIndex
+order: 2
 ---
 {% layout 'hippie/page.liquid' %}
 
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 7070190..ca72d3f 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -2,6 +2,7 @@
 title: Components
 tags:
 - demoIndex
+order: 3
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -306,7 +307,7 @@ tags:
 				<input id="inpPass" type="password"/>
 				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
 				<br>
-				<input id ="inpText" type="text"/>
+				<input id="inpText" type="text"/>
 				<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
 			</form>
 		</div>
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index bd3e609..684b6b3 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -1,8 +1,6 @@
 ---
 permalink: "/"
 title: Index
-tags:
-- demoIndex
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
@@ -35,7 +33,8 @@ tags:
 		</div>
 		<nav>
 			<ul class="block link">
-				{% for link in collections.demoIndex %}
+				{% assign indexByOrder = collections.demoIndex | sort: 'data.order' %}
+				{% for link in indexByOrder %}
 					<li>
 						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 					</li>
@@ -47,7 +46,6 @@ tags:
 				<h3>Page</h3>
 				<ul class="block link">
 					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
-
 					{% for link in pagesByTitle %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
@@ -58,7 +56,8 @@ tags:
 			<section>
 				<h3>Example</h3>
 				<ul class="block link">
-					{% for link in collections.demoExample %}
+					{% assign examplesByTitle = collections.demoExample | sort: 'data.title' %}
+					{% for link in examplesByTitle %}
 						<li>
 							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
 						</li>
diff --git a/source/screens/demo/introduction.liquid b/source/screens/demo/introduction.liquid
index 91993cb..21e2e52 100644
--- a/source/screens/demo/introduction.liquid
+++ b/source/screens/demo/introduction.liquid
@@ -2,6 +2,7 @@
 title: Introduction
 tags:
 - demoIndex
+order: 1
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -28,13 +29,7 @@ tags:
 {% block script %}
 {{ block.super -}}
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
 	composeMail('.general', 'name', 'domain', 'tld', '', '')
-
-	logPerf('Application ready... not.');
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
index 6a41fe5..37da17e 100644
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@@ -2,6 +2,7 @@
 title: Layouts
 tags:
 - demoIndex
+order: 4
 ---
 {% layout 'hippie/page.liquid' %}
 
@@ -298,14 +299,13 @@ tags:
 </section>
 {% endblock %}
 
+{% block assets %}
+{{ block.super -}}
+<script src="/vendor/jq-sticky-anything.min.js"></script>
+{% endblock %}
 {% block script %}
 {{ block.super -}}
-<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
 <script>
-	assetsLoaded = true;
-	logPerf('Assets loaded.', assetsLoaded);
-	// Page specific
-	// ------------------------------------------------------------------------------
 	$(document).ready(function () {
 		// jq-sticky-anything
 		$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index d445469..dbbe4ae 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -36,12 +36,13 @@
 {% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+{%- block assets %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 <script>
 	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
 {% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index dd6e6ed..5c8881f 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -34,11 +34,13 @@
 </div>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
+{% block script %}
 <script>
 	// Setup global things for all screens
 	setup();
@@ -59,4 +61,4 @@
 		logPerf('EVENT       :: jQuery \'ready\' event fired.');
 	});
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}

From 92f3c4f81f8ea02e9cac241ca75de69693ac25df Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 10 Mar 2026 21:21:08 +0100
Subject: [PATCH 192/253] feat: Update ui screens

Separate script and assets block.
---
 source/screens/demo/examples/clock.liquid      | 4 +++-
 source/screens/demo/examples/game/intro.liquid | 7 +++++--
 source/screens/demo/examples/ui/drag.liquid    | 7 +++++--
 source/screens/demo/examples/ui/windows.liquid | 7 +++++--
 source/templates/hippie/app.liquid             | 6 ++++--
 source/templates/hippie/default.liquid         | 1 +
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index c55f9a9..b77d12b 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -17,11 +17,13 @@ tags:
 <main></main>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
 
+{% block script %}
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
index 3c4710c..ac1de27 100644
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -3,7 +3,6 @@ title: Intro
 tags:
 - game
 ---
-
 {% assign bodyClass = 'body_intro' -%}
 {% layout 'hippie/app.liquid' %}
 
@@ -46,9 +45,13 @@ tags:
 </div>
 {% endblock %}
 
-{%- block script %}
+{% block assets %}
 {{ block.super -}}
 <script src="/js/intro.js"></script>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
 <script>
 	//let intro = new Intro('Intro');
 	//intro.init();
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
index 37d806e..1c3770f 100755
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@@ -21,9 +21,12 @@ tags:
 </div>
 {% endblock %}
 
-{%- block script %}
-<script src="/js/app.js"></script>
+{% block assets %}
+{{ block.super -}}
 <script src="/js/drag.js"></script>
+{% endblock %}
+
+{%- block script %}
 <script>
 	// Get the space element
 	const space = document.getElementById('space');
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 8a9c65a..15d589b 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -49,10 +49,13 @@ tags:
 </div>
 {% endblock %}
 
+{% block assets %}
+{{ block.super -}}
+<script src="/js/windows.js"></script>
+{% endblock %}
+
 {%- block script %}
 {{ block.super -}}
-
-<script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
 	// Get the space element
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 4118172..87db0cb 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -10,12 +10,14 @@
 <link href="/css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
-{% block script %}
+{% block assets %}
 <script src="/vendor/jquery.min.js"></script>
 <script src="/vendor/hippie-script.js"></script>
 <script src="/js/globals.js"></script>
 <script src="/js/app.js"></script>
+{% endblock %}
 
+{% block script %}
 <script>
 	const frameHeader = document.querySelector('body > header.io');
 	const closeActionElements = document.querySelectorAll('[data-action=close]');
@@ -36,4 +38,4 @@
 		});
 	}
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index b8cdbfd..0d6c050 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -28,6 +28,7 @@
 
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
+{%- block assets %}{% endblock -%}
 <script>
 	// {{ title }} script using default template
 </script>

From 99b98635e74416afdd1d9754813393ab62f6a828 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 10 Mar 2026 22:13:28 +0100
Subject: [PATCH 193/253] feat: Update songbook

- Change songbook from njk to liquid
- Add song partial
---
 .eleventy.js                                 |  2 +-
 source/screens/demo/examples/songbook.liquid | 39 +++++++++++++++
 source/screens/demo/examples/songbook.njk    | 52 --------------------
 source/templates/hippie/partials/song.liquid | 10 ++++
 4 files changed, 50 insertions(+), 53 deletions(-)
 create mode 100644 source/screens/demo/examples/songbook.liquid
 delete mode 100755 source/screens/demo/examples/songbook.njk
 create mode 100644 source/templates/hippie/partials/song.liquid

diff --git a/.eleventy.js b/.eleventy.js
index 152f256..48791f7 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -47,7 +47,7 @@ export default async function (eleventyConfig) {
 	});
 
 	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
-		if (text === '') {
+		if (!text || text === '') {
 			text = target;
 		}
 
diff --git a/source/screens/demo/examples/songbook.liquid b/source/screens/demo/examples/songbook.liquid
new file mode 100644
index 0000000..5329c0a
--- /dev/null
+++ b/source/screens/demo/examples/songbook.liquid
@@ -0,0 +1,39 @@
+---
+title: Songbook
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<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
+		{% link hippie.placeholders.domain %}.<br/>
+		Bestellungen bitte an
+		{% text hippie.placeholders.name %}
+		richten.</p>
+	<hr class="double dotted">
+	{%- for piece in collections.song -%}
+		{% render 'hippie/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
+	{%- endfor -%}
+	<hr/>
+	<address>{% text hippie.placeholders.name %}</address>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk
deleted file mode 100755
index 78a9939..0000000
--- a/source/screens/demo/examples/songbook.njk
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Songbook
-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>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="double 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/templates/hippie/partials/song.liquid b/source/templates/hippie/partials/song.liquid
new file mode 100644
index 0000000..534da59
--- /dev/null
+++ b/source/templates/hippie/partials/song.liquid
@@ -0,0 +1,10 @@
+<article class="songbook_song">
+	<header>
+		<h2>{{ data.title }}</h2>
+		<h6>{{ data.releaseDate }}</h6>
+		<p>{{ data.description }}</p>
+	</header>
+	{% comment %}<pre class="pre_code"><code>{{ content }}</code></pre>{% endcomment %}
+	{{ content }}
+	<footer>{{ index }}</footer>
+</article>
\ No newline at end of file

From 2091dc4f30b319314ec35277da46bf5e14df6b90 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 10 Mar 2026 22:15:08 +0100
Subject: [PATCH 194/253] feat: Change mouse to pointer for windows

---
 source/code/hippie/app.js |  1 +
 source/code/windows.js    | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index f0028a5..50efe38 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -341,6 +341,7 @@ class DateDisplay {
 	}
 }
 
+// TODO: Kompatibilität für Zeiger
 function checkButtonAndTarget(event, element, button = 0) {
 	return (
 		event.button === button &&
diff --git a/source/code/windows.js b/source/code/windows.js
index 8a115a9..01a3c7d 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -21,9 +21,9 @@ class HippieTaskBar {
 
 	// TODO: Ereignisse besser delegieren
 	init() {
-		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
-		document.addEventListener('mousemove', this.onMouseMove.bind(this));
-		document.addEventListener('mouseup', this.onMouseUp.bind(this));
+		this.element.addEventListener('pointerdown', this.onDown.bind(this));
+		document.addEventListener('pointermove', this.onMove.bind(this));
+		document.addEventListener('pointerup', this.onUp.bind(this));
 
 		const dateElement = document.createElement('span');
 
@@ -34,7 +34,7 @@ class HippieTaskBar {
 		this.setOptions(this.options.position);
 	}
 
-	onMouseDown(event) {
+	onDown(event) {
 		if (checkButtonAndTarget(event, this.element, 0)) {
 			console.debug('Drag mode enabled');
 
@@ -48,7 +48,7 @@ class HippieTaskBar {
 		event.preventDefault();
 	}
 
-	onMouseMove(event) {
+	onMove(event) {
 		if (this.isDragging) {
 			this.options.position = getClosestEdgeToMouse(event);
 			const borderRadius = '4px';
@@ -116,7 +116,7 @@ class HippieTaskBar {
 		}
 	}
 
-	onMouseUp() {
+	onUp() {
 		if (event.target === this.placeholder) {
 			console.debug('Drag mode disabled');
 

From a7431ec85d230300fc9d4582d2d5276b537906e8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 10 Mar 2026 22:33:00 +0100
Subject: [PATCH 195/253] feat: Update blog

- Change blog from njk to liquid
- Update content
---
 source/screens/demo/examples/blog.liquid     | 32 ++++++++++++
 source/screens/demo/examples/blog.njk        | 51 --------------------
 source/screens/demo/examples/blog/article.md |  2 +-
 3 files changed, 33 insertions(+), 52 deletions(-)
 create mode 100644 source/screens/demo/examples/blog.liquid
 delete mode 100644 source/screens/demo/examples/blog.njk

diff --git a/source/screens/demo/examples/blog.liquid b/source/screens/demo/examples/blog.liquid
new file mode 100644
index 0000000..59b9752
--- /dev/null
+++ b/source/screens/demo/examples/blog.liquid
@@ -0,0 +1,32 @@
+---
+title: Blog
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<header class="header_txt">
+		<h1>Blog</h1>
+	</header>
+	<nav role="doc-toc">
+		<h2>Inhaltsverzeichnis</h2>
+		<ul>
+			{%- for blog in collections.blog -%}
+				<li>
+					<a href="{{ blog.page.url }}">{{ blog.data.title }}</a>
+				</li>
+			{%- endfor -%}
+		</ul>
+	</nav>
+	<hr class="double dotted">
+	{%- for post in collections.article -%}
+		<article>
+			{{ post.content }}
+		</article>
+	{%- endfor -%}
+	<hr/>
+	<address>{% text hippie.placeholders.name %}</address>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/blog.njk b/source/screens/demo/examples/blog.njk
deleted file mode 100644
index 9573419..0000000
--- a/source/screens/demo/examples/blog.njk
+++ /dev/null
@@ -1,51 +0,0 @@
----
-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="double 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
index 0200c08..99b92e2 100644
--- a/source/screens/demo/examples/blog/article.md
+++ b/source/screens/demo/examples/blog/article.md
@@ -3,7 +3,7 @@ tags:
   - blog
   - article
 title: "Artikel"
-releaseDate: JJJJ
+publishDate: JJJJ
 description: Text
 ---
 # Titel

From 52ee2e3dd78b1102876152cfd430a4810a7c4986 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 11 Mar 2026 20:08:22 +0100
Subject: [PATCH 196/253] fix: Clock overlay

---
 source/screens/demo/examples/clock.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index b77d12b..3740eaa 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -46,7 +46,7 @@ tags:
 
 		#init() {
 			this.#createContext(['background', 'hands']);
-			this.createOverlay();
+			// this.createOverlay();
 
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);

From 95e04603258d629fcaffb4d55d11e44f503660f6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 12 Mar 2026 20:00:24 +0100
Subject: [PATCH 197/253] feat: Update portal

- Change portal from njk to liquid
- Add gate partials as replacement for macro
---
 source/screens/demo/examples/portal.liquid    | 29 +++++++++++++
 source/screens/demo/examples/portal.njk       | 41 -------------------
 .../hippie/partials/gate-list.liquid          | 19 +++++++++
 .../hippie/partials/gate-simple.liquid        |  7 ++++
 4 files changed, 55 insertions(+), 41 deletions(-)
 create mode 100644 source/screens/demo/examples/portal.liquid
 delete mode 100644 source/screens/demo/examples/portal.njk
 create mode 100644 source/templates/hippie/partials/gate-list.liquid
 create mode 100644 source/templates/hippie/partials/gate-simple.liquid

diff --git a/source/screens/demo/examples/portal.liquid b/source/screens/demo/examples/portal.liquid
new file mode 100644
index 0000000..545c0c9
--- /dev/null
+++ b/source/screens/demo/examples/portal.liquid
@@ -0,0 +1,29 @@
+---
+title: Portal
+tags:
+- demoExample
+image:
+  src: '/art/flag_websafe_128x80.gif'
+  alt: 'Flag of Interaktionsweise'
+links:
+- name: '1'
+  href: 'http://domain.tld'
+  img: '/art/bullet.gif'
+- name: 'Zwei'
+  href: 'http://domain.tld'
+  img: '/art/bullet.gif'
+---
+{% assign bodyClass = "body_portal" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="portal">
+	{% render 'hippie/partials/gate-list',
+		name: 'Tor mit Symbol und Liste',
+		url: '../demo',
+		image: image,
+		links: links
+	%}
+	{% render 'hippie/partials/gate-simple', name: 'Tor', url: '../demo' %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/portal.njk b/source/screens/demo/examples/portal.njk
deleted file mode 100644
index 68268c7..0000000
--- a/source/screens/demo/examples/portal.njk
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Portal
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_portal" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_gate.njk" as gate %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="portal">
-		{{ gate.list(
-		'Tor mit Symbol und Liste',
-		'../demo', {
-			src: '/art/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/templates/hippie/partials/gate-list.liquid b/source/templates/hippie/partials/gate-list.liquid
new file mode 100644
index 0000000..8c5fdea
--- /dev/null
+++ b/source/templates/hippie/partials/gate-list.liquid
@@ -0,0 +1,19 @@
+<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>
diff --git a/source/templates/hippie/partials/gate-simple.liquid b/source/templates/hippie/partials/gate-simple.liquid
new file mode 100644
index 0000000..9d0b54e
--- /dev/null
+++ b/source/templates/hippie/partials/gate-simple.liquid
@@ -0,0 +1,7 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+	</section>
+</article>
\ No newline at end of file

From a5bf80cb91b311857c94d22ceb5ae35814ef3b1d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 12 Mar 2026 20:23:17 +0100
Subject: [PATCH 198/253] feat: Remove nunjucks

- Remove all nunjucks templates, macros and partials
- Remove nunjucks config from eleventy
- Remove njk from template formats
---
 .eleventy.js                                  |  18 +--
 source/templates/demo/_default.njk            |  19 ---
 source/templates/demo/_main.njk               |  21 ----
 source/templates/demo/partials/_meta.njk      |   9 --
 source/templates/demo/partials/exp-colors.njk |   7 --
 source/templates/hippie/_app.njk              |  52 --------
 source/templates/hippie/_app_frame.njk        |  19 ---
 source/templates/hippie/_default.njk          |  41 -------
 source/templates/hippie/_main.njk             |  73 -----------
 source/templates/hippie/macros/_footer.njk    |  23 ----
 source/templates/hippie/macros/_gate.njk      |  30 -----
 source/templates/hippie/macros/_header.njk    |  30 -----
 source/templates/hippie/macros/_io.njk        |  49 --------
 source/templates/hippie/macros/_log.njk       |  24 ----
 source/templates/hippie/macros/_nav.njk       |  13 --
 .../templates/hippie/macros/_placeholder.njk  | 100 ---------------
 source/templates/hippie/macros/_song.njk      |  12 --
 source/templates/hippie/macros/_state.njk     |  16 ---
 source/templates/hippie/macros/top-macro.njk  |   5 -
 .../templates/hippie/partials/_body_nav.njk   |  34 ------
 source/templates/hippie/partials/_footer.njk  |   3 -
 .../templates/hippie/partials/_head_links.njk |   4 -
 .../templates/hippie/partials/_head_meta.njk  |   8 --
 .../hippie/partials/_head_script.njk          | 114 ------------------
 source/templates/hippie/partials/_header.njk  |   3 -
 25 files changed, 3 insertions(+), 724 deletions(-)
 delete mode 100644 source/templates/demo/_default.njk
 delete mode 100644 source/templates/demo/_main.njk
 delete mode 100644 source/templates/demo/partials/_meta.njk
 delete mode 100644 source/templates/demo/partials/exp-colors.njk
 delete mode 100755 source/templates/hippie/_app.njk
 delete mode 100755 source/templates/hippie/_app_frame.njk
 delete mode 100644 source/templates/hippie/_default.njk
 delete mode 100644 source/templates/hippie/_main.njk
 delete mode 100644 source/templates/hippie/macros/_footer.njk
 delete mode 100644 source/templates/hippie/macros/_gate.njk
 delete mode 100644 source/templates/hippie/macros/_header.njk
 delete mode 100644 source/templates/hippie/macros/_io.njk
 delete mode 100644 source/templates/hippie/macros/_log.njk
 delete mode 100644 source/templates/hippie/macros/_nav.njk
 delete mode 100644 source/templates/hippie/macros/_placeholder.njk
 delete mode 100644 source/templates/hippie/macros/_song.njk
 delete mode 100644 source/templates/hippie/macros/_state.njk
 delete mode 100644 source/templates/hippie/macros/top-macro.njk
 delete mode 100644 source/templates/hippie/partials/_body_nav.njk
 delete mode 100644 source/templates/hippie/partials/_footer.njk
 delete mode 100644 source/templates/hippie/partials/_head_links.njk
 delete mode 100644 source/templates/hippie/partials/_head_meta.njk
 delete mode 100644 source/templates/hippie/partials/_head_script.njk
 delete mode 100644 source/templates/hippie/partials/_header.njk

diff --git a/.eleventy.js b/.eleventy.js
index 48791f7..74e76be 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -14,20 +14,10 @@ export default async function (eleventyConfig) {
 		// trimTagRight : true,
 	});
 
-	eleventyConfig.setNunjucksEnvironmentOptions({
-		// throwOnUndefined: true,
-		trimBlocks: true
-	});
-
 	eleventyConfig.addGlobalData('permalink', () => {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
-
-	let demoMode = false;
-	let pageBase = demoMode ? './demo/' : './';
-
 	eleventyConfig.addGlobalData('hippie', {
-		pageBase: pageBase,
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
@@ -58,7 +48,7 @@ export default async function (eleventyConfig) {
 		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
 	});
 
-	eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
+	eleventyConfig.addPairedShortcode('brand', function (content, attrClass = 'brand', direction = 'first') {
 		const logo = `
 <svg
    width="100%"
@@ -96,6 +86,7 @@ export default async function (eleventyConfig) {
 
 `;
 		let output = '';
+
 		switch (direction) {
 			case 'first':
 				output = logo + `${content}`;
@@ -109,11 +100,8 @@ export default async function (eleventyConfig) {
 	});
 
 	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});
-
 	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});
-
 	eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});
-
 	eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});
 
 	eleventyConfig.addPassthroughCopy('vendor');
@@ -133,7 +121,7 @@ export default async function (eleventyConfig) {
 			includes: '../templates',
 			data: '../data'
 		},
-		templateFormats: ['html', 'liquid', 'njk', 'md']
+		templateFormats: ['html', 'liquid', 'md']
 		// pathPrefix: './demo/'
 	};
 }
diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk
deleted file mode 100644
index e9b46de..0000000
--- a/source/templates/demo/_default.njk
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- demo.default.template -->
-{% extends "hippie/_default.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.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="/vendor/jquery.min.js"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/templates/demo/_main.njk b/source/templates/demo/_main.njk
deleted file mode 100644
index c2797e8..0000000
--- a/source/templates/demo/_main.njk
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- demo.main.template -->
-{% extends "hippie/_main.njk" %}
-
-{% block meta %}
-	{% 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 %}
-
-	<!-- <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/partials/_meta.njk b/source/templates/demo/partials/_meta.njk
deleted file mode 100644
index 1253aaa..0000000
--- a/source/templates/demo/partials/_meta.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- meta.partial -->
-<meta name="author" content="Interaktionsweise">
-<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
-<meta name="description" content="Hippie interweaves preeminent personal interface elements">
-<meta name="robots" content="noindex">
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
-{# <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #}
diff --git a/source/templates/demo/partials/exp-colors.njk b/source/templates/demo/partials/exp-colors.njk
deleted file mode 100644
index 286b30f..0000000
--- a/source/templates/demo/partials/exp-colors.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- explanation-colors.partial -->
-{# var colors = [{name: "alpha", class: "alpha_color"}] #}
-
-{% set cls = cycler("odd", "even") %}
-{% for row in rows %}
-  <div class="{{ cls.next() }}">{{ row.name }}</div>
-{% endfor %}
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
deleted file mode 100755
index f0703d2..0000000
--- a/source/templates/hippie/_app.njk
+++ /dev/null
@@ -1,52 +0,0 @@
-<!-- app.template -->
-<!DOCTYPE html>
-<html lang="de" class="html_ui" 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" %}
-				<base href="/">
-			{% endblock %}
-
-			{% block links %}{% endblock %}
-
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
-		{% block body %}{% endblock %}
-
-		{% block script %}
-			<script src="/vendor/jquery.min.js"></script>
-			<script src="/vendor/hippie-script.js"></script>
-			<script src="{{ pageBase }}js/globals.js"></script>
-			<script src="{{ pageBase }}js/app.js"></script>
-
-			<script>
-				const frameHeader = document.querySelector('body > header.io');
-				const closeActionElements = document.querySelectorAll('[data-action=close]');
-
-				if (frameHeader) {
-					console.log('frame header found', frameHeader);
-
-					frameHeader.addEventListener('click', (e) => {
-						if (e.target.dataset.action === 'close') {
-							console.debug('close', e.target);
-
-							history.back();
-
-							if (closeActionElements.length > 1) {
-								console.debug('other frames present', closeActionElements.length);
-							}
-						}
-					});
-				}
-			</script>
-		{% endblock %}
-	</body>
-</html>
\ No newline at end of file
diff --git a/source/templates/hippie/_app_frame.njk b/source/templates/hippie/_app_frame.njk
deleted file mode 100755
index 35ddd64..0000000
--- a/source/templates/hippie/_app_frame.njk
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- frame.app.template -->
-{% extends "hippie/_app.njk" %}
-{% import "hippie/macros/_io.njk" as io %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block script %}
-	{{ super() }}
-{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/_default.njk b/source/templates/hippie/_default.njk
deleted file mode 100644
index 8756e7f..0000000
--- a/source/templates/hippie/_default.njk
+++ /dev/null
@@ -1,41 +0,0 @@
-<!-- default.template -->
-{# {% if hippie.debugMode %} #}
-  {% import "hippie/macros/_log.njk" as log %}
-{# {% endif %} #}
-
-<!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 %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      {# {{ log.debug(true) }} #}
-      {{ log.start() }}
-
-      {% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
-
-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
-  </head>
-
-  <body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
-    {% block body %}{% endblock %}
-
-    {% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
-    {% 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/_main.njk b/source/templates/hippie/_main.njk
deleted file mode 100644
index 3934cc1..0000000
--- a/source/templates/hippie/_main.njk
+++ /dev/null
@@ -1,73 +0,0 @@
-<!-- main.template -->
-{% import "hippie/macros/_log.njk" as log %}
-
-<!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 %}
-
-			{% include "hippie/partials/_head_script.njk" %}
-			{{ log.debug(hippie.debugMode, true) }}
-			{{ log.start() }}
-
-			{% block links %}
-				{% include "hippie/partials/_head_links.njk" %}
-			{% endblock %}
-
-			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass }}">
-		{{ log.log('BODY start') }}
-		{% include "hippie/partials/_body_nav.njk" %}
-		<div id="root">
-			{% include "hippie/partials/_header.njk" %}
-
-			<main class="main_site">
-				{% block main %}{% endblock %}
-			</main>
-
-			{% include "hippie/partials/_footer.njk" %}
-		</div>
-
-		{% block script %}
-			{{ log.log('BODY        :: Loading script assets...') }}
-			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-			<script src="/vendor/jquery.min.js"></script>
-			<script src="/vendor/hippie-script.js"></script>
-			<script src="{{ pageBase }}js/globals.js"></script>
-			<script src="{{ pageBase }}js/app.js"></script>
-			<script>
-				// Setup global things for all screens
-				setup();
-
-				// Create instances of objects made by constructor functions
-				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
-
-				if (viewHover) {
-					let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
-				}
-
-				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/macros/_footer.njk b/source/templates/hippie/macros/_footer.njk
deleted file mode 100644
index 4b27499..0000000
--- a/source/templates/hippie/macros/_footer.njk
+++ /dev/null
@@ -1,23 +0,0 @@
-{% 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
deleted file mode 100644
index 3ae1247..0000000
--- a/source/templates/hippie/macros/_gate.njk
+++ /dev/null
@@ -1,30 +0,0 @@
-{% 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>
-{% endmacro %}
-{% macro simple(name, url) %}
-	<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
deleted file mode 100644
index e074db7..0000000
--- a/source/templates/hippie/macros/_header.njk
+++ /dev/null
@@ -1,30 +0,0 @@
-{% macro main() %}
-	<header class="header_site">
-		<div id="begin"></div>
-	</header>
-{% endmacro %}
-
-{% macro status(hippie, page) %}
-	{% import "hippie/macros/_state.njk" as state %}
-	<div id="top">
-		<h1 class="brand">
-			<a href="#">{{ hippie.brand | upper }}</a>
-		</h1>
-		<nav>
-			<ul>
-				{% for link in page %}
-					<li>
-						<a href="{{ link.href }}">{{ link.text }}</a>
-					</li>
-				{% endfor %}
-			</ul>
-		</nav>
-		<div class="state">
-			<p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-		</div>
-	</div>
-{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_io.njk b/source/templates/hippie/macros/_io.njk
deleted file mode 100644
index f9a7300..0000000
--- a/source/templates/hippie/macros/_io.njk
+++ /dev/null
@@ -1,49 +0,0 @@
-{% macro frameHeader(title) %}
-	<header class="io">
-		<nav>
-			<button title="menu">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<span>{{ title }}</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<button title="minimize">
-				<i class="bi bi-dash"></i>
-			</button>
-			<button title="maximize">
-				<i class="bi bi-fullscreen"></i>
-			</button>
-			<button title="close" data-action="close">
-				<i class="bi bi-x-square"></i>
-			</button>
-		</nav>
-	</header>
-{% endmacro %}
-
-{% macro frameFooter(title) %}
-	<footer class="io">
-		<nav>
-			<button>mode</button>
-			<span>{{ title }}</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<button>action</button>
-		</nav>
-	</footer>
-{% endmacro %}
-
-{% macro statusBar(title) %}
-	<footer class="io">
-		<nav>
-			<span>## items</span>
-			<span># selected (size)</span>
-			<span># type(s)</span>
-			<span># shared</span>
-		</nav>
-		<nav>
-			<span>{{ title | default('status-bar') }}</span>
-		</nav>
-	</footer>
-{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_log.njk b/source/templates/hippie/macros/_log.njk
deleted file mode 100644
index e469527..0000000
--- a/source/templates/hippie/macros/_log.njk
+++ /dev/null
@@ -1,24 +0,0 @@
-{% macro start() %}
-	<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>
-{% endmacro %}
-{% macro debug(state = false, display = false, assets = false) %}
-	{# {{ set hippie.debugMode = state }} #}
-	<script>
-		debugOn = {{ state }};
-		debugOnScreen = {{ display }};
-		assetsLoaded = {{ assets }};
-	</script>
-{% endmacro %}
-{% macro asset(state = false) %}
-	<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
deleted file mode 100644
index 4fc5d93..0000000
--- a/source/templates/hippie/macros/_nav.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-{% 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>
-{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk
deleted file mode 100644
index f3c2fa1..0000000
--- a/source/templates/hippie/macros/_placeholder.njk
+++ /dev/null
@@ -1,100 +0,0 @@
-{% macro email(class = '', text = '', address = 'name@domain.tld') %}
-	{% if text === '' %}
-		{% set text = address %}
-	{% endif %}
-
-	<a class="{{ class }}" href="mailto:{{ address }}">{{ 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>
-{% endmacro %}
-
-{% 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>
-{% endmacro %}
-
-{% macro phone(class = '', text = '+49 (0)101 1337 48') %}
-	<span class="{{ class }}">{{ text }}</span>
-{% endmacro %}
-
-{% 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
-				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
-				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
-				cx="64"
-				cy="64"
-				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>
-{% endmacro %}
-
-{% macro flag(type = '', src = '', id = '', desc = 'Fahne von Interaktionsweise', width = '128') %}
-	{% set height = width / 1.6 %}
-	{% if type === 'svg' or type === '' %}
-		<svg version="1.1" id="{{ id }}" 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> #}
-			{% if desc !== '' %}
-				<desc>{{ desc }}</desc>
-			{% endif %}
-			<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>
-	{% elif type === 'img' %}
-		{% if src === 'file' %}
-			<picture>
-				<source srcset="{{ pageBase }}art/flag_websafe_128x80.webp" type="image/webp"/>
-				<img src="{{ pageBase }}art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
-			</picture>
-		{% else %}
-			<img 
-				width="{{ width }}" 
-				height="{{ height }}" 
-				alt="{{ desc }}"
-				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=">
-		{% endif %}
-	{% endif %}
-{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_song.njk b/source/templates/hippie/macros/_song.njk
deleted file mode 100644
index 28c83d4..0000000
--- a/source/templates/hippie/macros/_song.njk
+++ /dev/null
@@ -1,12 +0,0 @@
-{% 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>
-{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_state.njk b/source/templates/hippie/macros/_state.njk
deleted file mode 100644
index ef1f34d..0000000
--- a/source/templates/hippie/macros/_state.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-{% 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>
-{% endmacro %}
-
-{% macro date(id) %}
-	<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/top-macro.njk b/source/templates/hippie/macros/top-macro.njk
deleted file mode 100644
index 3b681c0..0000000
--- a/source/templates/hippie/macros/top-macro.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% macro field(name, value='', type='text') %}
-<div class="field">
-  <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
-</div>
-{% endmacro %}
diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk
deleted file mode 100644
index 870d2a6..0000000
--- a/source/templates/hippie/partials/_body_nav.njk
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- nav.partial -->
-<div class="pos_rel">
-	<nav class="nav_page_meta">
-		<ul>
-			<li class="js_scrolltop di_none">
-				<a href="#begin" class="a_button_meta">
-					<div class="sprite_img demo__sprite_up"></div>
-					{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
-				</a>
-			</li>
-			<li>
-				{# <button class="">Show Meta Information</button> #}
-				{# <a href="#meta" class="js_showmeta a_button_meta">
-          <div class="sprite_img demo__sprite_meta"></div>
-        </a> #}
-				<button class="js_showmeta button_clear" type="button">
-					<div class="sprite_img demo__sprite_meta"></div>
-				</button>
-			</li>
-			<li>
-				<button id="js-toggle-fade">F</button>
-			</li>
-			<li class="js_scrolldown">
-				<a href="#end" class="a_button_meta">
-					<div class="sprite_img demo__sprite_down"></div>
-					{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
-				</a>
-			</li>
-		</ul>
-	</nav>
-</div>
-{# <div class="exp_overlay_btn exp_help_btn">
-<span class="span_solo">?</span>
-</div> #}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/_footer.njk b/source/templates/hippie/partials/_footer.njk
deleted file mode 100644
index 3b56531..0000000
--- a/source/templates/hippie/partials/_footer.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- footer.partial -->
-{% 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
deleted file mode 100644
index c95a39b..0000000
--- a/source/templates/hippie/partials/_head_links.njk
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- 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
deleted file mode 100644
index a21d094..0000000
--- a/source/templates/hippie/partials/_head_meta.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- meta.partial -->
-<meta name="robots" content="noindex">
-<meta name="generator" content="{{ eleventy.generator }}">
-<meta name="author" content="">
-<meta name="description" content="">
-<meta name="keywords" content="">
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
\ No newline at end of file
diff --git a/source/templates/hippie/partials/_head_script.njk b/source/templates/hippie/partials/_head_script.njk
deleted file mode 100644
index 7002ee5..0000000
--- a/source/templates/hippie/partials/_head_script.njk
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- script.partial -->
-<script>
-  // Entry script at page init
-  let debugOn = {{ hippie.debugMode }};
-  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/partials/_header.njk b/source/templates/hippie/partials/_header.njk
deleted file mode 100644
index 2531200..0000000
--- a/source/templates/hippie/partials/_header.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- header.partial -->
-{% import "hippie/macros/_header.njk" as header %}
-{{ header.main() }}
\ No newline at end of file

From 6520cdbcf035ce5029555c299051dd7d53044d9e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 12 Mar 2026 21:38:48 +0100
Subject: [PATCH 199/253] feat: Add login to layouts

- Add articles
- Change order of articles
- Add id attributes like in components
- Add login example
---
 source/screens/demo/layouts.liquid | 109 ++++++++++++++++-------------
 source/style/demo.scss             |   1 +
 source/style/modules/_login.scss   |  28 ++++++++
 3 files changed, 91 insertions(+), 47 deletions(-)
 create mode 100644 source/style/modules/_login.scss

diff --git a/source/screens/demo/layouts.liquid b/source/screens/demo/layouts.liquid
index 37da17e..958c545 100644
--- a/source/screens/demo/layouts.liquid
+++ b/source/screens/demo/layouts.liquid
@@ -15,7 +15,7 @@ order: 4
 		<p>Die Elemente werden fortlaufend komplexer</p>
 	</header>
 	<article>
-		<h2>Bereiche (sections)</h2>
+		<h2 id="sections">Bereiche (sections)</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">
@@ -169,46 +169,9 @@ order: 4
 				</footer>
 			</div>
 		</div>
-
-		<h2>Interaktiv (interactive)</h2>
-		<h3>input</h3>
-		<div class="flex inline">
-			<input value="Undefiniert"/>
-			<input type="text" size="8" value="Text"/>
-			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
-			<input type="button" value="Auswählen">
-			<input type="submit" value="Senden" disabled="disabled"/>
-		</div>
-		<h3>form</h3>
-		<form method="get">
-			<p>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>Gruppierung (grouping)</h2>
+	</article>
+	<article>
+		<h2 id="grouping">Gruppierung (grouping)</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>
@@ -248,8 +211,15 @@ order: 4
 			<p>Eingerückter Inhalt</p>
 			<hr/>
 		</div>
-
-		<h2>Tabellen</h2>
+	</article>
+	<article>
+		<h2>Eingebettet</h2>
+		<div class="demo__flag">
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		</div>
+	</article>
+	<article>
+		<h2 id="tabularData">Tabellen (tabular data)</h2>
 		<pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
 		<table class="link js_pop">
 			<thead>
@@ -290,12 +260,57 @@ order: 4
 			</tr>
 			</tbody>
 		</table>
-
-		<h2>Eingebettet</h2>
-		<div class="demo__flag">
-			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+	</article>
+	<article>
+		<h2 id="forms">Formulare (forms)</h2>
+		<h3>form</h3>
+		<form method="get">
+			<p>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>
+		<hr class="hidden">
+		<form action="" name="login">
+			<div>
+				<p>Anmeldung</p>
+				<input placeholder="Benutzername" name="username" type="text" autocomplete="username">
+				<input placeholder="Passwort" name="password" type="password" autocomplete="current-password">
+			</div>
+		</form>
+		<h3>input</h3>
+		<div class="flex inline">
+			<input value="Undefiniert"/>
+			<input type="text" size="8" value="Text"/>
+			<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
+			<input type="button" value="Auswählen">
+			<input type="submit" value="Senden" disabled="disabled"/>
 		</div>
 	</article>
+	<article>
+		<h2 id="interactive">Interaktiv (interactive)</h2>
+	</article>
 </section>
 {% endblock %}
 
diff --git a/source/style/demo.scss b/source/style/demo.scss
index 43d9cbd..85090ad 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -16,4 +16,5 @@
 @use "modules/start";
 @use "modules/clock";
 @use "modules/game";
+@use "modules/login";
 // @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/_login.scss b/source/style/modules/_login.scss
new file mode 100644
index 0000000..3382d86
--- /dev/null
+++ b/source/style/modules/_login.scss
@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "../hippie-style/hippie";
+
+form[name="login"] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	& > div {
+		padding: hippie.$space_double;
+		background-color: color.adjust(hippie.basic_color(echo), $alpha: -0.4);
+
+		p {
+			margin-top: 0;
+			color: hippie.$color_brightest;
+		}
+
+		& > input {
+			display: block;
+			width: 100%;
+			margin-inline: 0;
+		}
+
+		input:first-of-type {
+			margin-bottom: hippie.$space_basic;
+		}
+	}
+}
\ No newline at end of file

From 437c5618472346fd589c3d10f2f86e532906c1f4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Mar 2026 17:00:18 +0100
Subject: [PATCH 200/253] chore: Add and remove 11ty plugins

- Add eleventy-plugin-webc
- Remove eleventy-upgrade-help
---
 .eleventy.js      |    2 +
 package-lock.json | 4383 +++++++++++++++++++++++----------------------
 package.json      |    2 +-
 3 files changed, 2267 insertions(+), 2120 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 74e76be..b2c1082 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,10 +1,12 @@
 /* jshint strict: false */
 
 import {HtmlBasePlugin} from "@11ty/eleventy";
+import pluginWebc from "@11ty/eleventy-plugin-webc";
 
 // noinspection JSUnusedGlobalSymbols
 export default async function (eleventyConfig) {
 	eleventyConfig.addPlugin(HtmlBasePlugin);
+	eleventyConfig.addPlugin(pluginWebc);
 
 	eleventyConfig.setLiquidOptions({
 		// greedy: false,
diff --git a/package-lock.json b/package-lock.json
index 0f4acd1..913ed24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,2121 +1,2266 @@
 {
-  "name": "hippie",
-  "version": "0.13.1",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "hippie",
-      "version": "0.13.1",
-      "license": "MIT",
-      "dependencies": {
-        "@11ty/eleventy": "^3.1.2",
-        "@11ty/eleventy-upgrade-help": "^3.0.2",
-        "bootstrap-icons": "^1.13.1",
-        "hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-        "jquery": "^3.7.1",
-        "sass": "^1.93.0"
-      },
-      "devDependencies": {
-        "normalize.css": "^8.0.1"
-      }
-    },
-    "node_modules/@11ty/dependency-tree": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-4.0.2.tgz",
-      "integrity": "sha512-RTF6VTZHatYf7fSZBUN3RKwiUeJh5dhWV61gDPrHhQF2/gzruAkYz8yXuvGLx3w3ZBKreGrR+MfYpSVkdbdbLA==",
-      "license": "MIT",
-      "dependencies": {
-        "@11ty/eleventy-utils": "^2.0.1"
-      }
-    },
-    "node_modules/@11ty/dependency-tree-esm": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree-esm/-/dependency-tree-esm-2.0.4.tgz",
-      "integrity": "sha512-MYKC0Ac77ILr1HnRJalzKDlb9Z8To3kXQCltx299pUXXUFtJ1RIONtULlknknqW8cLe19DLVgmxVCtjEFm7h0A==",
-      "license": "MIT",
-      "dependencies": {
-        "@11ty/eleventy-utils": "^2.0.7",
-        "acorn": "^8.15.0",
-        "dependency-graph": "^1.0.0",
-        "normalize-path": "^3.0.0"
-      }
-    },
-    "node_modules/@11ty/eleventy": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
-      "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
-      "license": "MIT",
-      "dependencies": {
-        "@11ty/dependency-tree": "^4.0.0",
-        "@11ty/dependency-tree-esm": "^2.0.0",
-        "@11ty/eleventy-dev-server": "^2.0.8",
-        "@11ty/eleventy-plugin-bundle": "^3.0.6",
-        "@11ty/eleventy-utils": "^2.0.7",
-        "@11ty/lodash-custom": "^4.17.21",
-        "@11ty/posthtml-urls": "^1.0.1",
-        "@11ty/recursive-copy": "^4.0.2",
-        "@sindresorhus/slugify": "^2.2.1",
-        "bcp-47-normalize": "^2.3.0",
-        "chokidar": "^3.6.0",
-        "debug": "^4.4.1",
-        "dependency-graph": "^1.0.0",
-        "entities": "^6.0.1",
-        "filesize": "^10.1.6",
-        "gray-matter": "^4.0.3",
-        "iso-639-1": "^3.1.5",
-        "js-yaml": "^4.1.0",
-        "kleur": "^4.1.5",
-        "liquidjs": "^10.21.1",
-        "luxon": "^3.6.1",
-        "markdown-it": "^14.1.0",
-        "minimist": "^1.2.8",
-        "moo": "^0.5.2",
-        "node-retrieve-globals": "^6.0.1",
-        "nunjucks": "^3.2.4",
-        "picomatch": "^4.0.2",
-        "please-upgrade-node": "^3.2.0",
-        "posthtml": "^0.16.6",
-        "posthtml-match-helper": "^2.0.3",
-        "semver": "^7.7.2",
-        "slugify": "^1.6.6",
-        "tinyglobby": "^0.2.14"
-      },
-      "bin": {
-        "eleventy": "cmd.cjs"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy-dev-server": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.8.tgz",
-      "integrity": "sha512-15oC5M1DQlCaOMUq4limKRYmWiGecDaGwryr7fTE/oM9Ix8siqMvWi+I8VjsfrGr+iViDvWcH/TVI6D12d93mA==",
-      "license": "MIT",
-      "dependencies": {
-        "@11ty/eleventy-utils": "^2.0.1",
-        "chokidar": "^3.6.0",
-        "debug": "^4.4.0",
-        "finalhandler": "^1.3.1",
-        "mime": "^3.0.0",
-        "minimist": "^1.2.8",
-        "morphdom": "^2.7.4",
-        "please-upgrade-node": "^3.2.0",
-        "send": "^1.1.0",
-        "ssri": "^11.0.0",
-        "urlpattern-polyfill": "^10.0.0",
-        "ws": "^8.18.1"
-      },
-      "bin": {
-        "eleventy-dev-server": "cmd.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy-plugin-bundle": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
-      "integrity": "sha512-QK1tRFBhQdZASnYU8GMzpTdsMMFLVAkuU0gVVILqNyp09xJJZb81kAS3AFrNrwBCsgLxTdWHJ8N64+OTTsoKkA==",
-      "license": "MIT",
-      "dependencies": {
-        "@11ty/eleventy-utils": "^2.0.2",
-        "debug": "^4.4.0",
-        "posthtml-match-helper": "^2.0.3"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy-upgrade-help": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-upgrade-help/-/eleventy-upgrade-help-3.0.2.tgz",
-      "integrity": "sha512-1vnYgNQ0vPSSuD7fVa0wGFn1EUr6zqffj203rdO+yC0xUFp5E55Io2JHuVXY7oLxFpFEIsWaTNKHcIG77C6TPA==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-glob": "^3.3.3",
-        "kleur": "^4.1.5",
-        "minimist": "^1.2.8",
-        "posthtml-match-helper": "^2.0.3",
-        "semver": "^7.7.3"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy-utils": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
-      "integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "license": "Python-2.0"
-    },
-    "node_modules/@11ty/eleventy/node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/@11ty/eleventy/node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/@11ty/eleventy/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@11ty/lodash-custom": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
-      "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/posthtml-urls": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.2.tgz",
-      "integrity": "sha512-0vaV3Wt0surZ+oS1VdKKe0axeeupuM+l7W/Z866WFQwF+dGg2Tc/nmhk/5l74/Y55P8KyImnLN9CdygNw2huHg==",
-      "license": "MIT",
-      "dependencies": {
-        "evaluate-value": "^2.0.0",
-        "http-equiv-refresh": "^2.0.1",
-        "list-to-array": "^1.1.0",
-        "parse-srcset": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@11ty/recursive-copy": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz",
-      "integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==",
-      "license": "ISC",
-      "dependencies": {
-        "errno": "^1.0.0",
-        "junk": "^3.1.0",
-        "maximatch": "^0.1.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
-      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^1.0.3",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.5",
-        "node-addon-api": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.1",
-        "@parcel/watcher-darwin-arm64": "2.5.1",
-        "@parcel/watcher-darwin-x64": "2.5.1",
-        "@parcel/watcher-freebsd-x64": "2.5.1",
-        "@parcel/watcher-linux-arm-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm-musl": "2.5.1",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm64-musl": "2.5.1",
-        "@parcel/watcher-linux-x64-glibc": "2.5.1",
-        "@parcel/watcher-linux-x64-musl": "2.5.1",
-        "@parcel/watcher-win32-arm64": "2.5.1",
-        "@parcel/watcher-win32-ia32": "2.5.1",
-        "@parcel/watcher-win32-x64": "2.5.1"
-      }
-    },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
-      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
-      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
-      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
-      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
-      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
-      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
-      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
-      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
-      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
-      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
-      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
-      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
-      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@sindresorhus/slugify": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
-      "integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
-      "license": "MIT",
-      "dependencies": {
-        "@sindresorhus/transliterate": "^1.0.0",
-        "escape-string-regexp": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@sindresorhus/transliterate": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
-      "integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "escape-string-regexp": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/a-sync-waterfall": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
-      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
-    },
-    "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-walk": {
-      "version": "8.3.5",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
-      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.11.0"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/array-differ": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "license": "MIT",
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT"
-    },
-    "node_modules/bcp-47": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
-      "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^2.0.0",
-        "is-alphanumerical": "^2.0.0",
-        "is-decimal": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/bcp-47-match": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
-      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/bcp-47-normalize": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
-      "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
-      "license": "MIT",
-      "dependencies": {
-        "bcp-47": "^2.0.0",
-        "bcp-47-match": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/bootstrap-icons": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
-      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/commander": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "license": "MIT"
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/dependency-graph": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
-      "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "bin": {
-        "detect-libc": "bin/detect-libc.js"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/dom-serializer/node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "dependencies": {
-        "domelementtype": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "license": "MIT"
-    },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/entities": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/errno": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-1.0.0.tgz",
-      "integrity": "sha512-3zV5mFS1E8/1bPxt/B0xxzI1snsg3uSCIh6Zo1qKg6iMw93hzPANk9oBFzSFBFrwuVoQuE3rLoouAUfwOAj1wQ==",
-      "license": "MIT",
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "license": "MIT"
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
-      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/esm-import-transformer": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/esm-import-transformer/-/esm-import-transformer-3.0.5.tgz",
-      "integrity": "sha512-1GKLvfuMnnpI75l8c6sHoz0L3Z872xL5akGuBudgqTDPv4Vy6f2Ec7jEMKTxlqWl/3kSvNbHELeimJtnqgYniw==",
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.15.0"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/evaluate-value": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
-      "integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/filesize": {
-      "version": "10.1.6",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
-      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">= 10.4.0"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
-      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "~2.0.2",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/finalhandler/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/finalhandler/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
-    "node_modules/fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
-      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/gray-matter": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
-      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
-      "dependencies": {
-        "js-yaml": "^3.13.1",
-        "kind-of": "^6.0.2",
-        "section-matter": "^1.0.0",
-        "strip-bom-string": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/hippie-script": {
-      "version": "1.2.1",
-      "resolved": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#dfc13e61586fbf466a7bbdb5667c5b02f41abd44",
-      "license": "MIT"
-    },
-    "node_modules/htmlparser2": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
-      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.2",
-        "domutils": "^2.8.0",
-        "entities": "^3.0.1"
-      }
-    },
-    "node_modules/http-equiv-refresh": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
-      "integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~2.0.0",
-        "inherits": "~2.0.4",
-        "setprototypeof": "~1.2.0",
-        "statuses": "~2.0.2",
-        "toidentifier": "~1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/immutable": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
-      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
-      "license": "MIT"
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/is-alphabetical": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
-      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-alphanumerical": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
-      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^2.0.0",
-        "is-decimal": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-decimal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
-      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-json": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
-      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA=="
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/iso-639-1": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.5.tgz",
-      "integrity": "sha512-gXkz5+KN7HrG0Q5UGqSMO2qB9AsbEeyLP54kF1YrMsIxmu+g4BdB7rflReZTSTZGpfj8wywu6pfPBCylPIzGQA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT"
-    },
-    "node_modules/js-yaml": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
-      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/junk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
-      "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/linkify-it": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
-      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
-      "license": "MIT",
-      "dependencies": {
-        "uc.micro": "^2.0.0"
-      }
-    },
-    "node_modules/liquidjs": {
-      "version": "10.24.0",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
-      "integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
-      "license": "MIT",
-      "dependencies": {
-        "commander": "^10.0.0"
-      },
-      "bin": {
-        "liquid": "bin/liquid.js",
-        "liquidjs": "bin/liquid.js"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/liquidjs"
-      }
-    },
-    "node_modules/list-to-array": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
-      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
-      "license": "MIT"
-    },
-    "node_modules/luxon": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
-      "integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/markdown-it": {
-      "version": "14.1.1",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
-      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1",
-        "entities": "^4.4.0",
-        "linkify-it": "^5.0.0",
-        "mdurl": "^2.0.0",
-        "punycode.js": "^2.3.1",
-        "uc.micro": "^2.1.0"
-      },
-      "bin": {
-        "markdown-it": "bin/markdown-it.mjs"
-      }
-    },
-    "node_modules/markdown-it/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "license": "Python-2.0"
-    },
-    "node_modules/markdown-it/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/maximatch": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
-      "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
-      "license": "MIT",
-      "dependencies": {
-        "array-differ": "^1.0.0",
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "minimatch": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mdurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
-      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
-      "license": "MIT"
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
-      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "^1.54.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/moo": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
-    },
-    "node_modules/morphdom": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.8.tgz",
-      "integrity": "sha512-D/fR4xgGUyVRbdMGU6Nejea1RFzYxYtyurG4Fbv2Fi/daKlWKuXGLOdXtl+3eIwL110cI2hz1ZojGICjjFLgTg==",
-      "license": "MIT"
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/node-retrieve-globals": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
-      "integrity": "sha512-j0DeFuZ/Wg3VlklfbxUgZF/mdHMTEiEipBb3q0SpMMbHaV3AVfoUQF8UGxh1s/yjqO0TgRZd4Pi/x2yRqoQ4Eg==",
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.14.1",
-        "acorn-walk": "^8.3.4",
-        "esm-import-transformer": "^3.0.3"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/nunjucks": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
-      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
-      "dependencies": {
-        "a-sync-waterfall": "^1.0.0",
-        "asap": "^2.0.3",
-        "commander": "^5.1.0"
-      },
-      "bin": {
-        "nunjucks-precompile": "bin/precompile"
-      },
-      "engines": {
-        "node": ">= 6.9.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^3.3.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/nunjucks/node_modules/commander": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/parse-srcset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
-      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
-      "license": "MIT"
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/please-upgrade-node": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
-      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "license": "MIT",
-      "dependencies": {
-        "semver-compare": "^1.0.0"
-      }
-    },
-    "node_modules/posthtml": {
-      "version": "0.16.6",
-      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
-      "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
-      "peer": true,
-      "dependencies": {
-        "posthtml-parser": "^0.11.0",
-        "posthtml-render": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
-    "node_modules/posthtml-match-helper": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.3.tgz",
-      "integrity": "sha512-p9oJgTdMF2dyd7WE54QI1LvpBIkNkbSiiECKezNnDVYhGhD1AaOnAkw0Uh0y5TW+OHO8iBdSqnd8Wkpb6iUqmw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "posthtml": "^0.16.6"
-      }
-    },
-    "node_modules/posthtml-parser": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
-      "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
-      "dependencies": {
-        "htmlparser2": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/posthtml-render": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
-      "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
-      "dependencies": {
-        "is-json": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "license": "MIT"
-    },
-    "node_modules/punycode.js": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
-      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/sass": {
-      "version": "1.93.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
-      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
-      }
-    },
-    "node_modules/sass/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/sass/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/section-matter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
-      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-      "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "kind-of": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/semver-compare": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "license": "MIT"
-    },
-    "node_modules/send": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
-      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.3",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.1",
-        "mime-types": "^3.0.2",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "license": "ISC"
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/slugify": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
-      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
-    },
-    "node_modules/ssri": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
-      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
-      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/strip-bom-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
-      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
-    "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/uc.micro": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
-      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
-      "license": "MIT"
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/urlpattern-polyfill": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
-      "integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
-      "license": "MIT"
-    },
-    "node_modules/ws": {
-      "version": "8.19.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
-      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    }
-  }
+	"name": "hippie",
+	"version": "0.13.1",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "hippie",
+			"version": "0.13.1",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy": "^3.1.2",
+				"@11ty/eleventy-plugin-webc": "^0.11.2",
+				"bootstrap-icons": "^1.13.1",
+				"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
+				"jquery": "^3.7.1",
+				"sass": "^1.93.0"
+			},
+			"devDependencies": {
+				"normalize.css": "^8.0.1"
+			}
+		},
+		"node_modules/@11ty/dependency-tree": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-4.0.2.tgz",
+			"integrity": "sha512-RTF6VTZHatYf7fSZBUN3RKwiUeJh5dhWV61gDPrHhQF2/gzruAkYz8yXuvGLx3w3ZBKreGrR+MfYpSVkdbdbLA==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy-utils": "^2.0.1"
+			}
+		},
+		"node_modules/@11ty/dependency-tree-esm": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@11ty/dependency-tree-esm/-/dependency-tree-esm-2.0.4.tgz",
+			"integrity": "sha512-MYKC0Ac77ILr1HnRJalzKDlb9Z8To3kXQCltx299pUXXUFtJ1RIONtULlknknqW8cLe19DLVgmxVCtjEFm7h0A==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy-utils": "^2.0.7",
+				"acorn": "^8.15.0",
+				"dependency-graph": "^1.0.0",
+				"normalize-path": "^3.0.0"
+			}
+		},
+		"node_modules/@11ty/eleventy": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
+			"integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/dependency-tree": "^4.0.0",
+				"@11ty/dependency-tree-esm": "^2.0.0",
+				"@11ty/eleventy-dev-server": "^2.0.8",
+				"@11ty/eleventy-plugin-bundle": "^3.0.6",
+				"@11ty/eleventy-utils": "^2.0.7",
+				"@11ty/lodash-custom": "^4.17.21",
+				"@11ty/posthtml-urls": "^1.0.1",
+				"@11ty/recursive-copy": "^4.0.2",
+				"@sindresorhus/slugify": "^2.2.1",
+				"bcp-47-normalize": "^2.3.0",
+				"chokidar": "^3.6.0",
+				"debug": "^4.4.1",
+				"dependency-graph": "^1.0.0",
+				"entities": "^6.0.1",
+				"filesize": "^10.1.6",
+				"gray-matter": "^4.0.3",
+				"iso-639-1": "^3.1.5",
+				"js-yaml": "^4.1.0",
+				"kleur": "^4.1.5",
+				"liquidjs": "^10.21.1",
+				"luxon": "^3.6.1",
+				"markdown-it": "^14.1.0",
+				"minimist": "^1.2.8",
+				"moo": "^0.5.2",
+				"node-retrieve-globals": "^6.0.1",
+				"nunjucks": "^3.2.4",
+				"picomatch": "^4.0.2",
+				"please-upgrade-node": "^3.2.0",
+				"posthtml": "^0.16.6",
+				"posthtml-match-helper": "^2.0.3",
+				"semver": "^7.7.2",
+				"slugify": "^1.6.6",
+				"tinyglobby": "^0.2.14"
+			},
+			"bin": {
+				"eleventy": "cmd.cjs"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/eleventy-dev-server": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.8.tgz",
+			"integrity": "sha512-15oC5M1DQlCaOMUq4limKRYmWiGecDaGwryr7fTE/oM9Ix8siqMvWi+I8VjsfrGr+iViDvWcH/TVI6D12d93mA==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy-utils": "^2.0.1",
+				"chokidar": "^3.6.0",
+				"debug": "^4.4.0",
+				"finalhandler": "^1.3.1",
+				"mime": "^3.0.0",
+				"minimist": "^1.2.8",
+				"morphdom": "^2.7.4",
+				"please-upgrade-node": "^3.2.0",
+				"send": "^1.1.0",
+				"ssri": "^11.0.0",
+				"urlpattern-polyfill": "^10.0.0",
+				"ws": "^8.18.1"
+			},
+			"bin": {
+				"eleventy-dev-server": "cmd.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/eleventy-plugin-bundle": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
+			"integrity": "sha512-QK1tRFBhQdZASnYU8GMzpTdsMMFLVAkuU0gVVILqNyp09xJJZb81kAS3AFrNrwBCsgLxTdWHJ8N64+OTTsoKkA==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy-utils": "^2.0.2",
+				"debug": "^4.4.0",
+				"posthtml-match-helper": "^2.0.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/eleventy-plugin-webc": {
+			"version": "0.11.2",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-webc/-/eleventy-plugin-webc-0.11.2.tgz",
+			"integrity": "sha512-oa/XlAqI5KtVO7M14qaN92D2yJfBEMMSb66YWY6YZVbRqFSVbjO4WmRJ2Ti2ZZb1FNvxj4ypGNV8VJleGE69xw==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy-plugin-bundle": "^1.0.4",
+				"@11ty/webc": "^0.11.0"
+			},
+			"engines": {
+				"node": ">=14.18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/eleventy-plugin-webc/node_modules/@11ty/eleventy-plugin-bundle": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-1.0.5.tgz",
+			"integrity": "sha512-Esv97j+mOo/yfxjaWl4j8CyszOBsRjU/DOUWOBqVnnDLM8VDXeus2LTJUxF70nAU0g+z+b6fRn8fKnm6b2a/UQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/eleventy-utils": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
+			"integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/eleventy/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"license": "Python-2.0"
+		},
+		"node_modules/@11ty/eleventy/node_modules/entities": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+			"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/@11ty/eleventy/node_modules/js-yaml": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+			"license": "MIT",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/@11ty/eleventy/node_modules/picomatch": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/@11ty/lodash-custom": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
+			"integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/posthtml-urls": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.2.tgz",
+			"integrity": "sha512-0vaV3Wt0surZ+oS1VdKKe0axeeupuM+l7W/Z866WFQwF+dGg2Tc/nmhk/5l74/Y55P8KyImnLN9CdygNw2huHg==",
+			"license": "MIT",
+			"dependencies": {
+				"evaluate-value": "^2.0.0",
+				"http-equiv-refresh": "^2.0.1",
+				"list-to-array": "^1.1.0",
+				"parse-srcset": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/@11ty/recursive-copy": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz",
+			"integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==",
+			"license": "ISC",
+			"dependencies": {
+				"errno": "^1.0.0",
+				"junk": "^3.1.0",
+				"maximatch": "^0.1.0",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@11ty/webc": {
+			"version": "0.11.4",
+			"resolved": "https://registry.npmjs.org/@11ty/webc/-/webc-0.11.4.tgz",
+			"integrity": "sha512-q1GMcjNnx9PxUr6jyTT5CdDFma3JWkT5D45wRNYUQ/B4cxTTxpC15b2rYdzNaGuSqB6tsArQ9Qh4BPqg6Xo9cA==",
+			"license": "MIT",
+			"dependencies": {
+				"@11ty/eleventy-utils": "^1.0.1",
+				"css-tree": "^2.3.1",
+				"dependency-graph": "^0.11.0",
+				"entities": "^4.4.0",
+				"fast-glob": "^3.2.12",
+				"is-glob": "^4.0.3",
+				"nanoid": "^4.0.1",
+				"node-retrieve-globals": "^2.0.7",
+				"parse5": "^7.1.2"
+			},
+			"engines": {
+				"node": ">=14.18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/webc/node_modules/@11ty/eleventy-utils": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
+			"integrity": "sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==",
+			"license": "MIT",
+			"dependencies": {
+				"normalize-path": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/11ty"
+			}
+		},
+		"node_modules/@11ty/webc/node_modules/dependency-graph": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+			"integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
+		"node_modules/@11ty/webc/node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/@11ty/webc/node_modules/node-retrieve-globals": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-2.0.8.tgz",
+			"integrity": "sha512-mVimS/m8H28kyMdvOIfyMCM8wFNiKXM83ag1yHYP297iVmlCSmCh7Ih4b+ig9/DZ2+LbXZCPLDSZO4yRa5ttyg==",
+			"license": "MIT",
+			"dependencies": {
+				"acorn": "^8.8.2",
+				"acorn-walk": "^8.2.0"
+			}
+		},
+		"node_modules/@nodelib/fs.scandir": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.stat": "2.0.5",
+				"run-parallel": "^1.1.9"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.stat": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.walk": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.scandir": "2.1.5",
+				"fastq": "^1.6.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@parcel/watcher": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+			"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^1.0.3",
+				"is-glob": "^4.0.3",
+				"micromatch": "^4.0.5",
+				"node-addon-api": "^7.0.0"
+			},
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher-android-arm64": "2.5.1",
+				"@parcel/watcher-darwin-arm64": "2.5.1",
+				"@parcel/watcher-darwin-x64": "2.5.1",
+				"@parcel/watcher-freebsd-x64": "2.5.1",
+				"@parcel/watcher-linux-arm-glibc": "2.5.1",
+				"@parcel/watcher-linux-arm-musl": "2.5.1",
+				"@parcel/watcher-linux-arm64-glibc": "2.5.1",
+				"@parcel/watcher-linux-arm64-musl": "2.5.1",
+				"@parcel/watcher-linux-x64-glibc": "2.5.1",
+				"@parcel/watcher-linux-x64-musl": "2.5.1",
+				"@parcel/watcher-win32-arm64": "2.5.1",
+				"@parcel/watcher-win32-ia32": "2.5.1",
+				"@parcel/watcher-win32-x64": "2.5.1"
+			}
+		},
+		"node_modules/@parcel/watcher-android-arm64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+			"integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-arm64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+			"integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-x64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+			"integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-freebsd-x64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+			"integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm-glibc": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+			"integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm-musl": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+			"integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm64-glibc": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+			"integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm64-musl": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+			"integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-x64-glibc": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+			"integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-x64-musl": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+			"integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-arm64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+			"integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-ia32": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+			"integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-x64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+			"integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@sindresorhus/slugify": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
+			"integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
+			"license": "MIT",
+			"dependencies": {
+				"@sindresorhus/transliterate": "^1.0.0",
+				"escape-string-regexp": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@sindresorhus/transliterate": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
+			"integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"escape-string-regexp": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/a-sync-waterfall": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+			"integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
+		},
+		"node_modules/acorn": {
+			"version": "8.16.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+			"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-walk": {
+			"version": "8.3.5",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
+			"integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
+			"license": "MIT",
+			"dependencies": {
+				"acorn": "^8.11.0"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/anymatch": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+			"dependencies": {
+				"normalize-path": "^3.0.0",
+				"picomatch": "^2.0.4"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
+		"node_modules/array-differ": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+			"integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-union": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+			"integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+			"license": "MIT",
+			"dependencies": {
+				"array-uniq": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-uniq": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+			"integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/arrify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+			"integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/asap": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+		},
+		"node_modules/balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+			"license": "MIT"
+		},
+		"node_modules/bcp-47": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
+			"integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
+			"license": "MIT",
+			"dependencies": {
+				"is-alphabetical": "^2.0.0",
+				"is-alphanumerical": "^2.0.0",
+				"is-decimal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/bcp-47-match": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+			"integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/bcp-47-normalize": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
+			"integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
+			"license": "MIT",
+			"dependencies": {
+				"bcp-47": "^2.0.0",
+				"bcp-47-match": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/binary-extensions": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+			"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/bootstrap-icons": {
+			"version": "1.13.1",
+			"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+			"integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/twbs"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/bootstrap"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/brace-expansion": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/braces": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+			"license": "MIT",
+			"dependencies": {
+				"fill-range": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+			"dependencies": {
+				"anymatch": "~3.1.2",
+				"braces": "~3.0.2",
+				"glob-parent": "~5.1.2",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.6.0"
+			},
+			"engines": {
+				"node": ">= 8.10.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/commander": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+			"integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"license": "MIT"
+		},
+		"node_modules/css-tree": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+			"license": "MIT",
+			"dependencies": {
+				"mdn-data": "2.0.30",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+			}
+		},
+		"node_modules/debug": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/dependency-graph": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+			"integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+			"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+			"license": "Apache-2.0",
+			"optional": true,
+			"bin": {
+				"detect-libc": "bin/detect-libc.js"
+			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/dom-serializer/node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"dependencies": {
+				"domelementtype": "^2.2.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"dependencies": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/ee-first": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
+		},
+		"node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/entities": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+			"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/errno": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/errno/-/errno-1.0.0.tgz",
+			"integrity": "sha512-3zV5mFS1E8/1bPxt/B0xxzI1snsg3uSCIh6Zo1qKg6iMw93hzPANk9oBFzSFBFrwuVoQuE3rLoouAUfwOAj1wQ==",
+			"license": "MIT",
+			"dependencies": {
+				"prr": "~1.0.1"
+			},
+			"bin": {
+				"errno": "cli.js"
+			}
+		},
+		"node_modules/escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+			"license": "MIT"
+		},
+		"node_modules/escape-string-regexp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+			"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/esm-import-transformer": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/esm-import-transformer/-/esm-import-transformer-3.0.5.tgz",
+			"integrity": "sha512-1GKLvfuMnnpI75l8c6sHoz0L3Z872xL5akGuBudgqTDPv4Vy6f2Ec7jEMKTxlqWl/3kSvNbHELeimJtnqgYniw==",
+			"license": "MIT",
+			"dependencies": {
+				"acorn": "^8.15.0"
+			}
+		},
+		"node_modules/esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"bin": {
+				"esparse": "bin/esparse.js",
+				"esvalidate": "bin/esvalidate.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/evaluate-value": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
+			"integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/fast-glob": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+			"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.8"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/fastq": {
+			"version": "1.20.1",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+			"integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+			"license": "ISC",
+			"dependencies": {
+				"reusify": "^1.0.4"
+			}
+		},
+		"node_modules/filesize": {
+			"version": "10.1.6",
+			"resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+			"integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">= 10.4.0"
+			}
+		},
+		"node_modules/fill-range": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+			"license": "MIT",
+			"dependencies": {
+				"to-regex-range": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/finalhandler": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+			"integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "2.6.9",
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"on-finished": "~2.4.1",
+				"parseurl": "~1.3.3",
+				"statuses": "~2.0.2",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/finalhandler/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/finalhandler/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
+		},
+		"node_modules/fresh": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+			"integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"hasInstallScript": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/gray-matter": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+			"integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+			"dependencies": {
+				"js-yaml": "^3.13.1",
+				"kind-of": "^6.0.2",
+				"section-matter": "^1.0.0",
+				"strip-bom-string": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/hippie-script": {
+			"version": "1.2.1",
+			"resolved": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git#dfc13e61586fbf466a7bbdb5667c5b02f41abd44",
+			"license": "MIT"
+		},
+		"node_modules/htmlparser2": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+			"integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.2",
+				"domutils": "^2.8.0",
+				"entities": "^3.0.1"
+			}
+		},
+		"node_modules/http-equiv-refresh": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
+			"integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/http-errors": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+			"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+			"license": "MIT",
+			"dependencies": {
+				"depd": "~2.0.0",
+				"inherits": "~2.0.4",
+				"setprototypeof": "~1.2.0",
+				"statuses": "~2.0.2",
+				"toidentifier": "~1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/immutable": {
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+			"integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+			"license": "MIT"
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"license": "ISC"
+		},
+		"node_modules/is-alphabetical": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+			"integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-alphanumerical": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+			"integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+			"license": "MIT",
+			"dependencies": {
+				"is-alphabetical": "^2.0.0",
+				"is-decimal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-binary-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"dependencies": {
+				"binary-extensions": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-decimal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+			"integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-extendable": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+			"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-json": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
+			"integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA=="
+		},
+		"node_modules/is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.12.0"
+			}
+		},
+		"node_modules/iso-639-1": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.5.tgz",
+			"integrity": "sha512-gXkz5+KN7HrG0Q5UGqSMO2qB9AsbEeyLP54kF1YrMsIxmu+g4BdB7rflReZTSTZGpfj8wywu6pfPBCylPIzGQA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/jquery": {
+			"version": "3.7.1",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+			"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+			"license": "MIT"
+		},
+		"node_modules/js-yaml": {
+			"version": "3.14.2",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+			"integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+			"license": "MIT",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/junk": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
+			"integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/kind-of": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+			"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/kleur": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/linkify-it": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+			"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+			"license": "MIT",
+			"dependencies": {
+				"uc.micro": "^2.0.0"
+			}
+		},
+		"node_modules/liquidjs": {
+			"version": "10.24.0",
+			"resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
+			"integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^10.0.0"
+			},
+			"bin": {
+				"liquid": "bin/liquid.js",
+				"liquidjs": "bin/liquid.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/liquidjs"
+			}
+		},
+		"node_modules/list-to-array": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
+			"integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
+			"license": "MIT"
+		},
+		"node_modules/luxon": {
+			"version": "3.7.2",
+			"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
+			"integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/markdown-it": {
+			"version": "14.1.1",
+			"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+			"integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+			"license": "MIT",
+			"dependencies": {
+				"argparse": "^2.0.1",
+				"entities": "^4.4.0",
+				"linkify-it": "^5.0.0",
+				"mdurl": "^2.0.0",
+				"punycode.js": "^2.3.1",
+				"uc.micro": "^2.1.0"
+			},
+			"bin": {
+				"markdown-it": "bin/markdown-it.mjs"
+			}
+		},
+		"node_modules/markdown-it/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"license": "Python-2.0"
+		},
+		"node_modules/markdown-it/node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/maximatch": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
+			"integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
+			"license": "MIT",
+			"dependencies": {
+				"array-differ": "^1.0.0",
+				"array-union": "^1.0.1",
+				"arrify": "^1.0.0",
+				"minimatch": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/mdn-data": {
+			"version": "2.0.30",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+			"license": "CC0-1.0"
+		},
+		"node_modules/mdurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+			"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+			"license": "MIT"
+		},
+		"node_modules/merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/micromatch": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"license": "MIT",
+			"dependencies": {
+				"braces": "^3.0.3",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/mime": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+			"license": "MIT",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/mime-db": {
+			"version": "1.54.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+			"integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+			"integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "^1.54.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/minimatch": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+			"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/minipass": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+			"integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/moo": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+			"integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+		},
+		"node_modules/morphdom": {
+			"version": "2.7.8",
+			"resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.8.tgz",
+			"integrity": "sha512-D/fR4xgGUyVRbdMGU6Nejea1RFzYxYtyurG4Fbv2Fi/daKlWKuXGLOdXtl+3eIwL110cI2hz1ZojGICjjFLgTg==",
+			"license": "MIT"
+		},
+		"node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
+		},
+		"node_modules/nanoid": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
+			"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18"
+			}
+		},
+		"node_modules/node-addon-api": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+			"license": "MIT",
+			"optional": true
+		},
+		"node_modules/node-retrieve-globals": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
+			"integrity": "sha512-j0DeFuZ/Wg3VlklfbxUgZF/mdHMTEiEipBb3q0SpMMbHaV3AVfoUQF8UGxh1s/yjqO0TgRZd4Pi/x2yRqoQ4Eg==",
+			"license": "MIT",
+			"dependencies": {
+				"acorn": "^8.14.1",
+				"acorn-walk": "^8.3.4",
+				"esm-import-transformer": "^3.0.3"
+			}
+		},
+		"node_modules/normalize-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/normalize.css": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+			"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/nunjucks": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+			"integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
+			"dependencies": {
+				"a-sync-waterfall": "^1.0.0",
+				"asap": "^2.0.3",
+				"commander": "^5.1.0"
+			},
+			"bin": {
+				"nunjucks-precompile": "bin/precompile"
+			},
+			"engines": {
+				"node": ">= 6.9.0"
+			},
+			"peerDependencies": {
+				"chokidar": "^3.3.0"
+			},
+			"peerDependenciesMeta": {
+				"chokidar": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/nunjucks/node_modules/commander": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+			"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"license": "MIT",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/parse-srcset": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+			"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+			"license": "MIT"
+		},
+		"node_modules/parse5": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+			"integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+			"license": "MIT",
+			"dependencies": {
+				"entities": "^6.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
+		"node_modules/parse5/node_modules/entities": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+			"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/parseurl": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/please-upgrade-node": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+			"integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+			"license": "MIT",
+			"dependencies": {
+				"semver-compare": "^1.0.0"
+			}
+		},
+		"node_modules/posthtml": {
+			"version": "0.16.6",
+			"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
+			"integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
+			"peer": true,
+			"dependencies": {
+				"posthtml-parser": "^0.11.0",
+				"posthtml-render": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/posthtml-match-helper": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.3.tgz",
+			"integrity": "sha512-p9oJgTdMF2dyd7WE54QI1LvpBIkNkbSiiECKezNnDVYhGhD1AaOnAkw0Uh0y5TW+OHO8iBdSqnd8Wkpb6iUqmw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"posthtml": "^0.16.6"
+			}
+		},
+		"node_modules/posthtml-parser": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
+			"integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
+			"dependencies": {
+				"htmlparser2": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/posthtml-render": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
+			"integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
+			"dependencies": {
+				"is-json": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/prr": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+			"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+			"license": "MIT"
+		},
+		"node_modules/punycode.js": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+			"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/readdirp": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"dependencies": {
+				"picomatch": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=8.10.0"
+			}
+		},
+		"node_modules/reusify": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+			"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+			"license": "MIT",
+			"engines": {
+				"iojs": ">=1.0.0",
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/run-parallel": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"queue-microtask": "^1.2.2"
+			}
+		},
+		"node_modules/sass": {
+			"version": "1.93.2",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
+			"integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+			"license": "MIT",
+			"dependencies": {
+				"chokidar": "^4.0.0",
+				"immutable": "^5.0.2",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher": "^2.4.1"
+			}
+		},
+		"node_modules/sass/node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/sass/node_modules/readdirp": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/section-matter": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+			"integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+			"dependencies": {
+				"extend-shallow": "^2.0.1",
+				"kind-of": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/semver": {
+			"version": "7.7.4",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+			"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/semver-compare": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+			"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+			"license": "MIT"
+		},
+		"node_modules/send": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+			"integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.3",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"etag": "^1.8.1",
+				"fresh": "^2.0.0",
+				"http-errors": "^2.0.1",
+				"mime-types": "^3.0.2",
+				"ms": "^2.1.3",
+				"on-finished": "^2.4.1",
+				"range-parser": "^1.2.1",
+				"statuses": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
+		},
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/slugify": {
+			"version": "1.6.6",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+			"integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/source-map-js": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/sprintf-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+			"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+		},
+		"node_modules/ssri": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
+			"integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
+			"license": "ISC",
+			"dependencies": {
+				"minipass": "^7.0.3"
+			},
+			"engines": {
+				"node": "^16.14.0 || >=18.0.0"
+			}
+		},
+		"node_modules/statuses": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+			"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/strip-bom-string": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+			"integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.15",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+			"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
+		"node_modules/tinyglobby/node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/tinyglobby/node_modules/picomatch": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"license": "MIT",
+			"dependencies": {
+				"is-number": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/toidentifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/uc.micro": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+			"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+			"license": "MIT"
+		},
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/urlpattern-polyfill": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
+			"integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
+			"license": "MIT"
+		},
+		"node_modules/ws": {
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+			"integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		}
+	}
 }
diff --git a/package.json b/package.json
index 99b4954..1d127ed 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^3.1.2",
-		"@11ty/eleventy-upgrade-help": "^3.0.2",
+		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"bootstrap-icons": "^1.13.1",
 		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
 		"jquery": "^3.7.1",

From d3ab17d5a1a91355b9c7bcf2c259b7f0318ec7ef Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Mar 2026 08:52:09 +0100
Subject: [PATCH 201/253] feat: Add check for content

The `source/screens` directory is checked for any present file. This changes the permalink path for demo/index.liquid.

- Add fs module to eleventy config
- Add function to check for files
- Add demoPath to global data
- Change permalink for demo index to use demoPath
---
 .eleventy.js                     | 17 +++++++++++++++--
 source/screens/demo/index.liquid |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index b2c1082..28f22fa 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,8 +1,19 @@
 /* jshint strict: false */
 
+import fs from 'fs/promises';
 import {HtmlBasePlugin} from "@11ty/eleventy";
 import pluginWebc from "@11ty/eleventy-plugin-webc";
 
+async function hasFiles(dirPath) {
+	try {
+		const entries = await fs.readdir(dirPath, {withFileTypes: true});
+		return entries.some(entry => entry.isFile());
+	} catch (err) {
+		console.error('Error reading directory:', err);
+		return false;
+	}
+}
+
 // noinspection JSUnusedGlobalSymbols
 export default async function (eleventyConfig) {
 	eleventyConfig.addPlugin(HtmlBasePlugin);
@@ -19,6 +30,9 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addGlobalData('permalink', () => {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
+
+	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
+
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
 		titlePrefix: '',
@@ -30,6 +44,7 @@ export default async function (eleventyConfig) {
 			mail: 'name@domain.tld',
 			domain: 'https://domain.tld'
 		},
+		demoPath: demoPath,
 		debugMode: true,
 		legacyMode: false
 	});
@@ -85,7 +100,6 @@ export default async function (eleventyConfig) {
     </g>
   </g>
 </svg>
-
 `;
 		let output = '';
 
@@ -124,6 +138,5 @@ export default async function (eleventyConfig) {
 			data: '../data'
 		},
 		templateFormats: ['html', 'liquid', 'md']
-		// pathPrefix: './demo/'
 	};
 }
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 684b6b3..a07c2d4 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -1,5 +1,5 @@
 ---
-permalink: "/"
+permalink: "{{ hippie.demoPath }}"
 title: Index
 ---
 {% assign pageId = page.fileSlug -%}

From c4947a9c04c483dd7cdf9336062f9b02af858df6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Mar 2026 09:27:33 +0100
Subject: [PATCH 202/253] docs: Update README

Change project description to current toolset and update usage.
---
 .eleventy.js |  2 +-
 README.md    | 53 +++++++++++++++++++++++++++++++++-------------------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 28f22fa..522c4dd 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -137,6 +137,6 @@ export default async function (eleventyConfig) {
 			includes: '../templates',
 			data: '../data'
 		},
-		templateFormats: ['html', 'liquid', 'md']
+		templateFormats: ['html', 'liquid', 'md', 'njk']
 	};
 }
diff --git a/README.md b/README.md
index 83ea378..e40ece3 100644
--- a/README.md
+++ b/README.md
@@ -4,15 +4,20 @@ Hippie interweaves preeminent personal interface elements
 
 > WORK IN PROGRESS (it is not ready to be used)
 
-This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.
+This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.  
+It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together.
 
-It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
+Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with
+templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used,
+but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are
+also options.
 
 ## Installing
 
-Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your build environment.
+Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your
+build environment.
 
-Change to the newly created folder. By default this would be *hippie*.
+Change to the newly created folder. By default, this would be *hippie*.
 
 Run the command `git submodule update --init`.
 This will load the submodules.
@@ -22,21 +27,26 @@ This will install all dependencies into the folder *node_modules*.
 
 ## Usage
 
-The command `gulp --tasks` will give you an overview of possible actions.
+Different *scripts* are provided through `package.json`:
 
-Run the command `gulp` for a live development environment.
-This will create a folder *build* with the resulting files.
-Also the source files will be watched for changes which are reflected live at [localhost:3000](http://localhost:3000) and the *build* directory.
+Run the command `npm run serve` for a live development environment.
+This will create a folder `/build` with the resulting files.
+Also, the source files will be watched for changes which are reflected live at [localhost:8080](http://localhost:8080)
+and the `/build` directory.
 
-`gulp build` will create the resulting *build* directory ready for deployment.
+`npm run build` will just create the resulting `/build` directory and `npm run deploy` will use a path prefix (*hippie*
+by default) and create the results in `/deploy` ready for deployment.
 
-HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.
+HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to
+have a different look and feel. It also can be used to build a new basis on top of it.
 
 ## Content
 
 ### Intro
 
-There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.
+There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods
+and also shows variations. The page is written in german language. However, it has a semantic structure and the text
+itself can also just be seen as example content.
 
 ### Sass (CSS)
 
@@ -44,15 +54,16 @@ Everything has its default style.
 
 CSS classes follow a naming scheme of `<object>_<description>`.
 
-- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling
+- *Object* usually is the name of the HTML element. If it is not an element directly it is the thing which receives the
+  styling
 - *Description* is a name of the style e.g. what it does, how it looks
 
 ### JavaScript (JS)
 
 The codebase uses ECMAScript 2023 Language Specification (14th edition).  
-However, currently the JSHint configuration only allows 11 as highest version. 
+However, currently the JSHint configuration only allows 11 as highest version.
 
-ID values are written in *camelCase*. The scheme further uses parts for specific contexts. 
+ID values are written in *camelCase*. The scheme further uses parts for specific contexts.
 
 If the ID is for an interactive element the first part is an abbreviation of the action.
 
@@ -65,19 +76,23 @@ If the ID is for an interactive element the first part is an abbreviation of the
 
 ## Versioning
 
-This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
+This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see
+the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
 
 ## Contribution
 
-For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.  
+For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
+specification.  
 The commit *type* can include the following:
 
 - feat – A new feature is introduced with the changes
 - fix – A bug fix has occurred
-- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
+- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating
+  dependencies)
 - refactor – Refactored code that neither fixes a bug nor adds a feature
-- docs – Updates to documentation such as a the README or other markdown files
-- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
+- docs – Updates to documentation such as the README or other Markdown files
+- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space,
+  missing semicolons, and so on.
 - test – Including new or correcting previous tests
 - perf – Performance improvements
 - ci – Continuous integration related

From 245227d7e90ee095bf1a3a43eb5af17440efb34c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Mar 2026 11:32:59 +0100
Subject: [PATCH 203/253] feat: Reflect new table styles

Add examples to components.
---
 source/screens/demo/components.liquid | 28 +++++++++++++++++++++------
 source/style/hippie-style             |  2 +-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index ca72d3f..7e14f0d 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -190,11 +190,11 @@ order: 3
 		<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.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3</code></pre>
 		<table class="width_full fix">
 			<thead>
 			<tr>
-				<th class="cell_pre" scope="col"></th>
+				<th class="pre" scope="col"></th>
 				<th scope="col">Kopfzeile</th>
 				<th scope="col">A</th>
 				<th scope="col">B</th>
@@ -202,19 +202,19 @@ order: 3
 			</thead>
 			<tbody>
 			<tr>
-				<td class="cell_pre">Vorspalte</td>
+				<td class="pre">Vorspalte</td>
 				<td>Eine</td>
 				<td></td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="cell_pre">1</td>
+				<td class="pre">1</td>
 				<td></td>
 				<td>erweiterte</td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="cell_pre">2</td>
+				<td class="pre">2</td>
 				<td></td>
 				<td></td>
 				<td>Tabelle</td>
@@ -244,7 +244,7 @@ order: 3
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+		<pre class="pre_code"><code>table>(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>
@@ -278,6 +278,22 @@ order: 3
 			</tr>
 			</tfoot>
 		</table>
+		<pre class="pre_code"><code>table>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
+		<table class="width_full fix">
+			<tr>
+				<td>Index</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
+			</tr>
+		</table>
+		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
+		<table class="flexible">
+			<tr>
+				<td>Index</td>
+				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Zelle mit Angabe der Breite.</td>
+			</tr>
+		</table>
 	</article>
 	<article>
 		<h1 id="forms">Formulare</h1>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index b4c5632..89db97c 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit b4c56320060548dacde62639876c6aee72b297ea
+Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5

From d5335635692d016348210e1086e6129b02aef466 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Mar 2026 12:25:23 +0100
Subject: [PATCH 204/253] feat: Change - to _ for selector names

---
 source/code/hippie/app.js                      |  2 +-
 source/screens/demo/components.liquid          |  6 +++---
 source/screens/demo/examples/game/intro.liquid |  2 +-
 source/screens/demo/examples/start.liquid      |  4 ++--
 source/style/hippie-style                      |  2 +-
 source/style/modules/_start.scss               |  2 +-
 source/style/modules/ui/_frame_module.scss     | 10 +++++-----
 source/style/modules/ui/_new_module.scss       |  2 +-
 source/style/ui.scss                           |  2 +-
 9 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 50efe38..7cda8b6 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -69,7 +69,7 @@ function HippieFade(toggleElement, initState) {
 	const fragment = document.createDocumentFragment();
 	const overlay = document.createElement('div');
 
-	overlay.id = 'mouse-overlay';
+	overlay.id = 'mouse_overlay';
 
 	if (initState) {
 		overlay.classList.add('active');
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 7e14f0d..2ea1d8d 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -221,8 +221,8 @@ order: 3
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
-		<table class="width_full stripe fix free">
+		<pre class="pre_code"><code>table.width_full.striped.fix.free>tr>td*3</code></pre>
+		<table class="width_full striped fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@@ -278,7 +278,7 @@ order: 3
 			</tr>
 			</tfoot>
 		</table>
-		<pre class="pre_code"><code>table>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
 		<table class="width_full fix">
 			<tr>
 				<td>Index</td>
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
index ac1de27..93988bd 100644
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -39,7 +39,7 @@ tags:
 	<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-overlay"></div>
+	<div class="mouse_overlay"></div>
 	<div class="hello">Hello World!</div>
 	<p class="hello">Only left mouse click or any key</p>
 </div>
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index e11d3f8..4c68c5a 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -9,7 +9,7 @@ tags:
 
 {% block body %}
 <main>
-	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
+	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
 		<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
 		<input class="button_io" value="Suchen" type="submit"/>
 	</form>
@@ -65,7 +65,7 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	document.getElementById('www-search').addEventListener('submit', function (e) {
+	document.getElementById('www_search').addEventListener('submit', function (e) {
 		e.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 89db97c..eb4349f 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5
+Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
index 031f7f7..564e8a3 100644
--- a/source/style/modules/_start.scss
+++ b/source/style/modules/_start.scss
@@ -5,7 +5,7 @@
 		@extend .sec_main_center;
 	}
 
-	#www-search {
+	#www_search {
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index 91182ad..9742af3 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -9,7 +9,7 @@
 }
 
 .body_frame {
-	@extend %flex-column;
+	@extend %flex_column;
 
 	background-color: hippie.$color_back_basic;
 
@@ -27,7 +27,7 @@
 	}
 
 	main {
-		@extend %flex-row;
+		@extend %flex_row;
 
 		flex: 1;
 
@@ -53,7 +53,7 @@
 		}
 
 		section {
-			@extend %flex-column;
+			@extend %flex_column;
 			gap: 0;
 		}
 	}
@@ -66,12 +66,12 @@
 }
 
 #cli {
-	@extend %flex-column;
+	@extend %flex_column;
 
 	background-color: black;
 
 	#line {
-		@extend %flex-row;
+		@extend %flex_row;
 	}
 
 	#prompt {
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index 4e36346..bc4fbcf 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -6,7 +6,7 @@ $module_top_height: 32px;
 $body_top_space: $module_top_height + hippie.$space_basic;
 
 .body_new {
-	@extend %flex-column;
+	@extend %flex_column;
 	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
 }
 
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 1266a3a..8663bfc 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -178,7 +178,7 @@ $space_gui_half: hippie.$space_half;
 		background-color: hippie.$color_back_basic;
 		transition: background-color 4s;
 
-		&:hover > .mouse-overlay {
+		&:hover > .mouse_overlay {
 			background-color: transparent !important;
 			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 		}

From e9c383b41e50eb6b35afb52c24bd07571da5d7b1 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 17 Mar 2026 00:45:27 +0100
Subject: [PATCH 205/253] feat: Update table screen

- Move logic for rows to cloneRow function
- Add random selection of type to loop
- Refine row types
- Add event for group toggle
---
 source/screens/demo/examples/ui/table.liquid | 187 ++++++++++++-------
 source/style/hippie-style                    |   2 +-
 2 files changed, 125 insertions(+), 64 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 96e72ea..900a84b 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -62,12 +62,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td class="rigid"></td>
-		<td></td>
+		<td><input class="input_io" name="number" type="text"></td>
+		<td><input class="input_io" name="name" type="text"></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
@@ -80,7 +81,7 @@ tags:
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td class="unit"></td>
+		<td><input class="input_io" name="price" type="text"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -96,13 +97,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
 		<td class="rigid"></td>
 		<td></td>
-		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
@@ -130,14 +131,44 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td class="rigid"></td>
-		<td colspan="6">
+		<td colspan="7">
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
+		<td class="io">
+			<nav>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true" class="header">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<input class="input_io" name="active" type="checkbox">
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td colspan="7">Group</td>
+		<td class="io">
+			<nav>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+	<tr>
+		<th scope="row"></th>
+		<td></td>
+		<td class="pos-num"></td>
+		<td colspan="7">Content</td>
 		<td class="io">
 			<nav>
 				<button title="Event"><i class="bi bi-calendar-event"></i></button>
@@ -146,40 +177,11 @@ tags:
 			</nav>
 		</td>
 	</tr>
-</template>
-<template id="rowGroup">
-	<tr draggable="true">
+	<tr class="footer">
 		<th scope="row"></th>
-		<td class="io">
-			<nav>
-				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
-				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
-			</nav>
-		</td>
-		<td class="pos-num"></td>
-		<td class="rigid"></td>
 		<td></td>
-		{% comment %}<td class="ellipsis"></td>{% endcomment %}
-		<td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
-		</td>
-		<td><input name="amount" type="number"></td>
-		<td>
-			<select name="units">
-				<option value="">None</option>
-				<option value="piece">Piece(s)</option>
-				<option value="hour">Hour(s)</option>
-			</select>
-		</td>
-		<td class="unit"></td>
-		<td class="unit"></td>
-		<td class="io">
-			<nav>
-				<button title="Event"><i class="bi bi-calendar-event"></i></button>
-				<button title="Note"><i class="bi bi-journal"></i></button>
-				<button title="Delete"><i class="bi bi-trash"></i></button>
-			</nav>
-		</td>
+		<td class="pos-num"></td>
+		<td colspan="8">End</td>
 	</tr>
 </template>
 
@@ -226,6 +228,7 @@ tags:
 	tbodyPosition.addEventListener('click', (event) => {
 		const rows = tbodyPosition.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
+		const groupTarget = event.target.closest('[name="group"]');
 
 		if (rowTarget && event.button === 0) {
 			for (row of rows) {
@@ -234,32 +237,33 @@ tags:
 
 			rowTarget.classList.add('active');
 		}
+
+		if (groupTarget && event.button === 0) {
+			console.log('group');
+			let currentRow = groupTarget.closest('tr').nextElementSibling;
+
+			while (currentRow && !currentRow.classList.contains('footer')) {
+				currentRow.classList.toggle('di_none');
+				currentRow = currentRow.nextElementSibling;
+			}
+		}
 	});
 
 	for (let i = 0; i < 256; i++) {
-		const clone = cloneRow();
-		const tr = clone.querySelector('tr');
-		const th = clone.querySelector('th');
-		const td = clone.querySelectorAll('td');
+		const t = Math.random();
+		let type = undefined;
 
-		const j = i % placeholderNames.length;
-		const k = randomIntFrom(0, placeholderContents.length - 1);
-		const amount = randomIntFrom(1, 100);
-		const price = randomFloatFrom(1, 10000, 2);
-		const sum = amount * price;
+		if (t < .2) {
+			type = 'default';
+		} else if (t >= .2 && t < .4) {
+			type = 'text';
+		} else if (t >= .4 && t < .5) {
+			type = 'group';
+		} else {
+			type = 'article';
+		}
 
-		tr.setAttribute('data-id', i);
-		th.textContent = i + 1;
-		td[2].textContent = getRandomFormattedString();
-		td[3].textContent = placeholderNames[j];
-		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
-		td[4].firstElementChild.textContent = placeholderContents[k];
-		td[5].firstElementChild.value = amount;
-		td[5].firstElementChild.style.width = '4em';
-		td[7].textContent = currencyEuro.format(price);
-		td[8].textContent = currencyEuro.format(sum);
-
-		tbodyPosition.appendChild(clone);
+		tbodyPosition.appendChild(cloneRow(i, type));
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -377,11 +381,51 @@ tags:
 		console.debug('Drop');
 	});
 
-	function cloneRow(type = 'default') {
-		type = 'row' + capitalizeFirstLetter(type);
+	function cloneRow(index, type = 'article') {
+		const id = 'row' + capitalizeFirstLetter(type);
 
-		const rowFragment = document.getElementById(type).content;
-		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
+		const rowFragment = document.getElementById(id).content;
+		const tr = rowFragment.querySelector('tr');
+		const th = rowFragment.querySelector('th');
+		const td = rowFragment.querySelectorAll('td');
+
+		const j = index % placeholderNames.length;
+		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const l = Math.random() > .2;
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;
+
+		tr.setAttribute('data-id', index);
+		th.textContent = index + 1;
+		td[0].querySelector('[name="active"]').checked = l;
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+
+		switch (type) {
+			case 'default':
+				td[2].firstElementChild.style.width = '9ch';
+				td[3].firstElementChild.style.width = '6ch';
+				td[4].firstElementChild.textContent = placeholderContents[k];
+				td[5].firstElementChild.value = amount;
+				td[5].firstElementChild.style.width = '4em';
+				td[7].firstElementChild.style.width = '8ch';
+				td[8].textContent = currencyEuro.format(sum);
+				break;
+			case 'article':
+				td[2].textContent = getRandomFormattedString();
+				td[3].textContent = placeholderNames[j];
+				td[4].firstElementChild.textContent = placeholderContents[k];
+				td[5].firstElementChild.value = amount;
+				td[5].firstElementChild.style.width = '4em';
+				td[7].textContent = currencyEuro.format(price);
+				td[8].textContent = currencyEuro.format(sum);
+				break;
+			case 'text':
+				td[2].firstElementChild.textContent = placeholderContents[k];
+				break;
+			default:
+				console.debug('No matching type found.');
+		}
 
 		return document.importNode(rowFragment, true);
 	}
@@ -395,5 +439,22 @@ tags:
 			th.textContent = i + 1;
 		}
 	}
+
+	function toggleGroup(headerRow) {
+		// Get the toggle icon
+		const icon = headerRow.querySelector('.toggle-icon');
+
+		// Get all rows after this header
+		let currentRow = headerRow.nextElementSibling;
+
+		// Toggle visibility of group rows until next header
+		while (currentRow && !currentRow.classList.contains('group-header')) {
+			currentRow.classList.toggle('hidden');
+			currentRow = currentRow.nextElementSibling;
+		}
+
+		// Toggle the icon rotation
+		icon.classList.toggle('collapsed');
+	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index eb4349f..b42c8cd 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211
+Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984

From 65041f65b33f0a0777661821048f688447522adc Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 17 Mar 2026 01:13:33 +0100
Subject: [PATCH 206/253] feat: Update ui table styles

---
 source/screens/demo/examples/ui/table.liquid | 10 +++++-----
 source/style/hippie-style                    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 900a84b..570d1dc 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -36,20 +36,20 @@ tags:
 				{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
 			</nav>
 		</header>
-		<table id="content" class="draggable">
+		<table id="content" class="draggable content horizontal">
 			<thead>
 			<tr>
-				<th class="min" scope="col" title="Index">#</th>
-				<th class="min" scope="col"></th>
+				<th scope="col" title="Index">#</th>
+				<th scope="col"></th>
 				<th scope="col" title="Position">#</th>
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
-				<th scope="col">Description</th>
+				<th class="max" scope="col">Description</th>
 				<th scope="col">Amount</th>
 				<th scope="col">Unit</th>
 				<th scope="col">Price</th>
 				<th scope="col">Sum</th>
-				<th class="min" scope="col"></th>
+				<th scope="col"></th>
 			</tr>
 			</thead>
 			<tbody id="positions"></tbody>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index b42c8cd..43f66d8 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984
+Subproject commit 43f66d8178c7225931d6358d1f37797461a0a94d

From 88c7974d5c2464f79fd2a759ab7ea31597193702 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 10:39:29 +0100
Subject: [PATCH 207/253] feat: Add style block to default template

---
 source/screens/demo/examples/10print.liquid | 4 +---
 source/templates/hippie/default.liquid      | 2 ++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 9ee9246..8ed878e 100644
--- a/source/screens/demo/examples/10print.liquid
+++ b/source/screens/demo/examples/10print.liquid
@@ -5,8 +5,7 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block head %}
-{{ block.super -}}
+{% block style %}
 <style>
 	canvas {
 		display: block;
@@ -20,7 +19,6 @@ tags:
 
 {% block script %}
 <script>
-	// Page script
 	const canvas = document.getElementById('pattern');
 	const ctx = canvas.getContext('2d');
 
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 0d6c050..4ff5f5a 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -17,12 +17,14 @@
 		{% block title %}{% endblock -%}
 		{{ hippie.titlePostfix -}}
 	</title>
+
 	{% block meta -%}
 	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
 	{% render 'hippie/partials/links.liquid' %}
 	{% endblock -%}
+	{% block style -%}{% endblock -%}
 	{% endblock -%}
 </head>
 

From 4f6af7e200ec717b7e98fa942b3d3e486136adc2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 10:51:10 +0100
Subject: [PATCH 208/253] feat: Rearrange HippieClock class fields

---
 source/screens/demo/examples/clock.liquid | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 3740eaa..57cdd7c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -27,6 +27,8 @@ tags:
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
+			this.element = element;
+			this.date = date;
 			this.defaults = {
 				debug: true,
 				size: Math.floor(this.getSize().value * 0.9),
@@ -35,8 +37,6 @@ tags:
 				overlay: false
 			};
 			this.options = {...this.defaults, ...options};
-			this.element = element;
-			this.date = date;
 			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];

From e7aaf257e39afc6af3315bb8f5ca873286e2bd5f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 11:48:20 +0100
Subject: [PATCH 209/253] refactor: Standardize order of @use

---
 source/style/hippie-style        | 2 +-
 source/style/modules/_clock.scss | 4 ++--
 source/style/modules/_login.scss | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index 43f66d8..5b5944e 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 43f66d8178c7225931d6358d1f37797461a0a94d
+Subproject commit 5b5944e22912d8c4c9bf7b7747a45fb80fea262a
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 0965587..6ffbc12 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,7 +1,7 @@
-@use "../hippie-style/hippie";
-
 @use "sass:map";
 
+@use "../hippie-style/hippie";
+
 .body_clock {
 	header {
 		z-index: map.get(hippie.$z-indexes, "content-top");
diff --git a/source/style/modules/_login.scss b/source/style/modules/_login.scss
index 3382d86..42c57a0 100644
--- a/source/style/modules/_login.scss
+++ b/source/style/modules/_login.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+
 @use "../hippie-style/hippie";
 
 form[name="login"] {

From ebed5a2d424ca720c20c99f3b68e88691c1f93e3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 14:49:10 +0100
Subject: [PATCH 210/253] feat: Add new game screen

- Add first person view screen
- Add HippieCrosshair class
- Controls for crosshair options
- Add styles to game module
---
 source/code/game.js                          | 230 +++++++++++++++++++
 source/screens/demo/examples/game/fpv.liquid |  79 +++++++
 source/style/modules/_game.scss              |  19 ++
 3 files changed, 328 insertions(+)
 create mode 100644 source/code/game.js
 create mode 100644 source/screens/demo/examples/game/fpv.liquid

diff --git a/source/code/game.js b/source/code/game.js
new file mode 100644
index 0000000..1492a63
--- /dev/null
+++ b/source/code/game.js
@@ -0,0 +1,230 @@
+class HippieCrosshair {
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.ctx = canvas.getContext('2d');
+
+		this.debug = options.debug || false;
+
+		// Crosshair options
+		this.size = options.size || 16;
+		this.thickness = options.thickness || 2;
+		this.color = options.color || '#000';
+		this.gapSize = options.gapSize || 8;
+		this.style = options.style || 'cross';
+
+		// Line options
+		this.lineColor = options.lineColor || '#fff';
+		this.lineWidth = options.lineWidth || 1;
+		this.showConnector = options.showConnector !== false;
+
+		// Symbol options
+		this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol
+		this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols
+		this.symbolSize = options.symbolSize || 8;
+		this.symbolColor = options.symbolColor || '#000';
+		this.symbolStyle = options.symbolStyle || 'arrow';
+
+		this.mouseX = canvas.width / 2;
+		this.mouseY = canvas.height / 2;
+
+		this.setupEventListeners();
+		this.animate();
+	}
+
+	setupEventListeners() {
+		document.addEventListener('mousemove', (e) => {
+			this.mouseX = e.clientX;
+			this.mouseY = e.clientY;
+		});
+	}
+
+	animate() {
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+		if (this.showConnector) {
+			if (this.debug) this.drawLine();
+			this.drawConnector();
+		}
+
+		// TODO: Autom. Zug zum Zentrum hin ermöglichen
+		this.drawCrosshair();
+
+		requestAnimationFrame(() => this.animate());
+	}
+
+	drawLine() {
+		const centerX = this.canvas.width / 2;
+		const centerY = this.canvas.height / 2;
+
+		this.ctx.strokeStyle = this.lineColor;
+		this.ctx.lineWidth = this.lineWidth;
+		this.ctx.beginPath();
+		this.ctx.moveTo(centerX, centerY);
+		this.ctx.lineTo(this.mouseX, this.mouseY);
+		this.ctx.stroke();
+	}
+
+	// TODO: Ausblenden nach Distanz
+	drawConnector() {
+		const centerX = this.canvas.width / 2;
+		const centerY = this.canvas.height / 2;
+
+		const dx = this.mouseX - centerX;
+		const dy = this.mouseY - centerY;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		// Only draw symbols if cursor is far enough from center
+		if (distance < this.symbolDistance) {
+			return;
+		}
+
+		const angle = Math.atan2(dy, dx);
+
+		// Calculate how many symbols to draw
+		const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
+
+		for (let i = 0; i < symbolCount; i++) {
+			const symbolDistance = this.symbolDistance + (i * this.symbolSpacing);
+			const symbolX = centerX + Math.cos(angle) * symbolDistance;
+			const symbolY = centerY + Math.sin(angle) * symbolDistance;
+
+			this.drawSymbol(symbolX, symbolY, angle);
+		}
+	}
+
+	drawSymbol(x, y, angle = 0) {
+		this.ctx.fillStyle = this.symbolColor;
+		this.ctx.strokeStyle = this.symbolColor;
+		this.ctx.lineWidth = 1;
+
+		switch (this.symbolStyle) {
+			case 'circle':
+				this.ctx.beginPath();
+				this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2);
+				this.ctx.fill();
+				break;
+			case 'diamond':
+				const size = this.symbolSize - (this.symbolSize / 4);
+				this.ctx.beginPath();
+				this.ctx.moveTo(x, y - size);
+				this.ctx.lineTo(x + size, y);
+				this.ctx.lineTo(x, y + size);
+				this.ctx.lineTo(x - size, y);
+				this.ctx.closePath();
+				this.ctx.fill();
+				break;
+			case 'square':
+				this.ctx.fillRect(
+					x - this.symbolSize / 2,
+					y - this.symbolSize / 2,
+					this.symbolSize,
+					this.symbolSize
+				);
+				break;
+			case 'arrow':
+				this.arrow(x, y, angle);
+				break;
+		}
+	}
+
+	arrow(x, y, angle) {
+		const size = this.symbolSize - (this.symbolSize / 4);
+
+		this.ctx.save();
+		this.ctx.translate(x, y);
+		this.ctx.rotate(angle);
+
+		// Arrow pointing right
+		this.ctx.beginPath();
+		this.ctx.moveTo(size, 0); // Tip
+		this.ctx.lineTo(-size, -size); // Back left
+		// this.ctx.lineTo(-size * 0.4, 0); // Middle
+		this.ctx.lineTo(-size, size); // Back right
+		this.ctx.closePath();
+		this.ctx.fill();
+
+		this.ctx.restore();
+	}
+
+	drawCrosshair() {
+		this.ctx.strokeStyle = this.color;
+		this.ctx.lineWidth = this.thickness;
+		this.ctx.lineCap = 'round';
+
+		switch (this.style) {
+			case 'cross':
+				this.cross();
+				break;
+			case 'circle':
+				this.circle();
+				break;
+			case 'dot':
+				this.dot();
+				break;
+		}
+	}
+
+	cross() {
+		// Horizontal line
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX - this.size, this.mouseY);
+		this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY);
+		this.ctx.lineTo(this.mouseX + this.size, this.mouseY);
+		this.ctx.stroke();
+
+		// Vertical line
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX, this.mouseY - this.size);
+		this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize);
+		this.ctx.lineTo(this.mouseX, this.mouseY + this.size);
+		this.ctx.stroke();
+	}
+
+	circle() {
+		// Outer circle
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2);
+		this.ctx.stroke();
+
+		// Inner dot
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness * 1.5, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	dot() {
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	setCrosshairStyle(style) {
+		this.style = style;
+	}
+
+	setColor(color) {
+		this.color = color;
+	}
+
+	setSymbolStyle(style) {
+		this.symbolStyle = style;
+	}
+
+	setSymbolColor(color) {
+		this.symbolColor = color;
+	}
+
+	setLineVisible(visible) {
+		this.showConnector = visible;
+	}
+}
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
new file mode 100644
index 0000000..a4f53a7
--- /dev/null
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -0,0 +1,79 @@
+---
+title: FPV
+tags:
+- game
+---
+{% assign bodyClass = 'body_fpv' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+{% endblock %}
+
+{% block body %}
+<canvas id="view"></canvas>
+
+<header class="io controls">
+	<nav>
+		<span>Color</span>
+		<button onclick="changeColor('black')">Black</button>
+		<button onclick="changeColor('white')">White</button>
+		<button onclick="changeColor('crimson')">Red</button>
+		<button onclick="changeColor('#00ffff')">Cyan</button>
+	</nav>
+	<nav>
+		<span>Crosshair</span>
+		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
+		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
+		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
+	</nav>
+	<nav>
+		<span>Connector</span>
+		<button onclick="toggleLine()">Toggle</button>
+		<hr class="vertical">
+		<button onclick="changeSymbolStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
+		<button onclick="changeSymbolStyle('square')"><i class="bi bi-square-fill"></i></button>
+		<button onclick="changeSymbolStyle('circle')"><i class="bi bi-circle-fill"></i></button>
+		<button onclick="changeSymbolStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
+	</nav>
+</header>
+{% endblock %}
+
+{% block assets %}
+<script src="/js/game.js"></script>
+{% endblock %}
+
+{% block script %}
+<script>
+	const canvas = document.getElementById('view');
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+
+	const crosshair = new HippieCrosshair(canvas);
+
+	function changeCrosshairStyle(style) {
+		crosshair.setCrosshairStyle(style);
+	}
+
+	function changeSymbolStyle(style) {
+		crosshair.setSymbolStyle(style);
+	}
+
+	function changeColor(color) {
+		crosshair.setColor(color);
+		crosshair.setSymbolColor(color);
+		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
+	}
+
+	function toggleLine() {
+		crosshair.setLineVisible(!crosshair.showConnector);
+	}
+
+	window.addEventListener('resize', () => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	});
+</script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 6d49400..d9a36f1 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "../hippie-style/hippie";
 
 .body_game {
@@ -24,4 +26,21 @@
 			}
 		}
 	}
+}
+
+.body_fpv {
+	@extend .h_full_view;
+
+	canvas {
+		display: block;
+		cursor: none;
+		background-color: lightblue;
+	}
+
+	.controls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		border-radius: hippie.$radius_basic;
+	}
 }
\ No newline at end of file

From 2387e08ad0d86e391b5f7b63971cbf38dcfa9218 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 17:49:48 +0100
Subject: [PATCH 211/253] feat: Combine start and tile screens

- Combine start and tile content to start screen
- Remove tile screen
- Remove new css module
- Integrate style to start module
---
 source/code/hippie/app.js                     |  94 ++---------
 source/screens/demo/basics.liquid             |   8 +-
 source/screens/demo/components.liquid         |  13 +-
 .../screens/demo/examples/game/index.liquid   |   2 -
 source/screens/demo/examples/start.liquid     | 152 +++++++++++++++---
 source/screens/demo/examples/ui/tile.liquid   |  45 ------
 source/style/hippie-style                     |   2 +-
 source/style/modules/_start.scss              |  98 ++++++++++-
 source/style/modules/ui/_new_module.scss      |  99 ------------
 source/style/ui.scss                          |   1 -
 10 files changed, 247 insertions(+), 267 deletions(-)
 delete mode 100644 source/screens/demo/examples/ui/tile.liquid
 delete mode 100755 source/style/modules/ui/_new_module.scss

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 7cda8b6..eb6eda9 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -540,6 +540,15 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
 	return mapped;
 }
 
+function zeroFill(number, width) {
+	width -= number.toString().length;
+
+	if (width > 0) {
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
+	}
+	return number + ''; // always return a string
+}
+
 // Source - https://stackoverflow.com/a/47480429
 // Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
@@ -603,91 +612,6 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-function ongoing() {
-
-	var now = new Date();
-
-	var w = Math.floor(now.getDay());
-	var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-	var DNumb = Math.floor(now.getDate());
-	var MNumb = Math.floor(now.getMonth());
-	var M = ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', '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);
-
-	var utc = new Date();
-	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);
-
-	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 e = 23.439 - 0.0000004 * N;
-	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 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 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) {
-	width -= number.toString().length;
-	if (width > 0) {
-		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
-	}
-	return number + ''; // always return a string
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;
diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index d3c7a08..f1c8560 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -801,7 +801,7 @@ order: 2
 			<code>&lt;fieldset&gt;</code>
 			realisiert.</p>
 		<fieldset>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
 															  readonly="readonly" id="demo__input">
 				<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
@@ -813,7 +813,7 @@ order: 2
 			auch eine eigene Beschriftung erhalten.</p>
 		<fieldset>
 			<legend>Einfache Eingabeelemente</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div>
 					<button>Senden</button>
@@ -846,7 +846,7 @@ order: 2
 		</fieldset>
 		<fieldset>
 			<legend>Einfache Eingabeelemente mit Stil</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div class="flex inline">
 					<button class="button_io">Senden</button>
@@ -883,7 +883,7 @@ order: 2
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
 			<form action="">
-				<div class="grid grid_column_2">
+				<div class="dis_grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
 					</label>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 2ea1d8d..98f582c 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -286,12 +286,17 @@ order: 3
 				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
-		<table class="flexible">
+		<pre class="pre_code"><code>table.grid>(tr>td+td.ellipsis+td)*2</code></pre>
+		<table class="grid">
 			<tr>
 				<td>Index</td>
-				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td>Zelle mit Angabe der Breite.</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Inhalt bestimmt die Breite</td>
+			</tr>
+			<tr>
+				<td>101</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Zelle</td>
 			</tr>
 		</table>
 	</article>
diff --git a/source/screens/demo/examples/game/index.liquid b/source/screens/demo/examples/game/index.liquid
index d939850..6dc8d2f 100644
--- a/source/screens/demo/examples/game/index.liquid
+++ b/source/screens/demo/examples/game/index.liquid
@@ -6,8 +6,6 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block title %}{{ title }}{% endblock %}
-
 {% block body %}
 <div class="sec_main_center">
 	<nav role="doc-toc">
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 4c68c5a..5e3d261 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -8,34 +8,44 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
 <main>
-	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
-		<input id="qrySearch" 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>
+	<header class="io">
+		<form id="wwwForm" class="group-input" action="https://duckduckgo.com/">
+			<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+			<input class="button_io" value="Suchen" type="submit"/>
+		</form>
+		<nav>
+			<hr class="vertical">
+			<ul>
+				<li>
+					<a href="" class="a_button">A</a>
+				</li>
+				<li>
+					<a href="" class="a_button">B</a>
+				</li>
+			</ul>
+		</nav>
+	</header>
+	<div class="area">
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
 	</div>
 </main>
 {% endblock %}
 
+{% block assets %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
+
 {% block script %}
 <script>
-	// Page script
+	const timeElement = document.getElementById('time');
+	const dateElement = document.getElementById('date');
 	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
 	const defaultOptions = {
 		kl: 'de-de',
@@ -65,8 +75,26 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	document.getElementById('www_search').addEventListener('submit', function (e) {
-		e.preventDefault();
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+
+	new TimeDisplay(timeElement, {hour: '2-digit', minute: '2-digit'});
+	new DateDisplay(dateElement, {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+	// ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+
+	document.getElementById('wwwForm').addEventListener('submit', function (event) {
+		event.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 
 		if (!query) return;
@@ -76,7 +104,81 @@ tags:
 		window.open(url, '_blank', 'noopener');
 	});
 
-	// Example of setting options programmatically:
-	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+	function ongoing() {
+		var now = new Date();
+		var w = Math.floor(now.getDay());
+		var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+		var DNumb = Math.floor(now.getDate());
+		var MNumb = Math.floor(now.getMonth());
+		var M = ['Januar', 'Februar', 'Mä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);
+
+		var utc = new Date();
+		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);
+
+		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 e = 23.439 - 0.0000004 * N;
+		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 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 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);
+
+		const travelWidth = document.body.clientWidth;
+		const travelHeight = document.body.clientHeight;
+		var sunPosX = 0;
+		var sunPosY = 0;
+		var moonPosX = 0;
+		var moonPosY = 0;
+
+		const sun = document.getElementById('sun');
+
+		if (sun) {
+			sun.style.left = (s / 60) * travelWidth;
+			sun.style.top = (m / 60) * travelHeight;
+		}
+
+		/*document.getElementById('time').textContent = '' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2);
+		document.getElementById('day').textContent = D[w];
+		document.getElementById('dayNumb').textContent = DNumb;
+		document.getElementById('month').textContent = M[MNumb];
+		document.getElementById('year').textContent = y;
+
+		document.getElementById('julian').textContent = jd.toFixed(6);
+		document.getElementById('star').textContent = stH + ':' + stM + ':' + stS;
+		document.getElementById('star').textContent = stH + ':' + stM;
+		document.getElementById('star1').textContent = stGMT;
+		document.getElementById('star2').textContent = stGMT2;*/
+	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tile.liquid b/source/screens/demo/examples/ui/tile.liquid
deleted file mode 100644
index be51071..0000000
--- a/source/screens/demo/examples/ui/tile.liquid
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Tile
-tags:
-- ui
----
-{% assign bodyClass = 'body_new' -%}
-{% layout 'hippie/app.liquid' %}
-
-{% block body %}
-{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
-<header class="area menu io">
-	<nav>
-		<ul>
-			<li>
-				<a href="" class="a_button">Func 1</a>
-			</li>
-			<li>
-				<a href="" class="a_button">Func 2</a>
-			</li>
-		</ul>
-	</nav>
-</header>
-<div class="area grid">
-	<div class="item">1</div>
-	<div class="item">2</div>
-	<div class="item">3</div>
-	<div class="item">4</div>
-</div>
-{% endblock %}
-
-{%- block script %}
-{{ block.super -}}
-<script>
-	const timeElement = document.getElementById('time');
-	const timeDisplay = new TimeDisplay(timeElement);
-
-	ongoing();
-
-	document.addEventListener('mousemove', (event) => {
-		document
-			.getElementById('log')
-			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-	});
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 5b5944e..2ae3075 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 5b5944e22912d8c4c9bf7b7747a45fb80fea262a
+Subproject commit 2ae30754f0ce21e0de1c229992f4ea1ae82730ba
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
index 564e8a3..d2f31f9 100644
--- a/source/style/modules/_start.scss
+++ b/source/style/modules/_start.scss
@@ -1,15 +1,111 @@
+@use "sass:color";
+
 @use "../hippie-style/hippie";
 
+$module_top_height: 32px;
+$body_top_space: $module_top_height + hippie.$space_basic;
+
 .body_start {
+	@extend .h_full_view;
+
+	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
+
 	main {
 		@extend .sec_main_center;
+		@extend %flex_column;
+
+		height: 100%;
 	}
 
-	#www_search {
+	form {
+		flex: 1;
+
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;
 			line-height: hippie.$line_text_basic;
 		}
 	}
+
+	.area {
+		display: grid;
+		grid-gap: hippie.$space_basic;
+		flex: 1;
+		// grid-template-rows: repeat(2, 1fr);
+		// grid-template-columns: repeat(2, 1fr);
+		grid-template-areas: "a a";
+		grid-auto-rows: 1fr;
+		grid-auto-columns: 1fr;
+		transition: hippie.$transition_best;
+
+		&:hover {
+			background-color: #999;
+		}
+
+		& > div {
+			// height: unset;
+			border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
+			border-style: dotted;
+			border-width: hippie.$width_border_8;
+			border-radius: hippie.$width_border_8;
+			padding: hippie.$space_basic;
+			background-color: rgb(hippie.$color_back_basic, .5);
+			// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
+			// background-color: gold;
+		}
+	}
+}
+
+#top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: $module_top_height;
+	background-color: rgb(0, 0, 0, .8);
+	z-index: hippie.$z_top;
+
+	div:last-child {
+		flex: 1;
+	}
+
+	p,
+	li {
+		color: #fff;
+	}
+
+	h1 a {
+		color: #000;
+	}
+
+	p,
+	li {
+		margin-top: 8px;
+		margin-bottom: 7px;
+		padding: 0 4px;
+		font-size: 12px;
+		line-height: 17px;
+	}
+
+	nav ul {
+		display: flex;
+		margin: 0 0 0 16px;
+	}
+
+	.brand {
+		height: 36px;
+		background-color: #fff;
+		margin: 0 0 0 128px;
+		padding: 7px 24px;
+		font-size: 16px;
+		line-height: 22px;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.state {
+		margin-right: 16px;
+		text-align: right;
+	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
deleted file mode 100755
index bc4fbcf..0000000
--- a/source/style/modules/ui/_new_module.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-@use "sass:color";
-
-@use "../../hippie-style/hippie";
-
-$module_top_height: 32px;
-$body_top_space: $module_top_height + hippie.$space_basic;
-
-.body_new {
-	@extend %flex_column;
-	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
-}
-
-.area {
-	transition: hippie.$transition_best;
-
-	&:hover {
-		background-color: #999;
-	}
-}
-
-.grid {
-	display: grid;
-	flex: 1;
-	// grid-template-rows: repeat(2, 1fr);
-	// grid-template-columns: repeat(2, 1fr);
-	grid-template-areas: "a a";
-	grid-auto-rows: 1fr;
-	grid-auto-columns: 1fr;
-}
-
-.item {
-	// height: unset;
-	border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
-	border-style: dotted;
-	border-width: hippie.$width_border_8;
-	border-radius: hippie.$width_border_8;
-	padding: hippie.$space_basic;
-	background-color: rgb(hippie.$color_back_basic, .5);
-	// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
-	// background-color: gold;
-}
-
-.float {
-	min-height: 50%;
-}
-
-#top {
-	position: fixed;
-	top: 0;
-	left: 0;
-	display: flex;
-	width: 100%;
-	height: $module_top_height;
-	background-color: rgb(0, 0, 0, .8);
-	z-index: hippie.$z_top;
-
-	div:last-child {
-		flex: 1;
-	}
-
-	p,
-	li {
-		color: #fff;
-	}
-
-	h1 a {
-		color: #000;
-	}
-
-	p,
-	li {
-		margin-top: 8px;
-		margin-bottom: 7px;
-		padding: 0 4px;
-		font-size: 12px;
-		line-height: 17px;
-	}
-
-	nav ul {
-		display: flex;
-		margin: 0 0 0 16px;
-	}
-
-	.brand {
-		height: 36px;
-		background-color: #fff;
-		margin: 0 0 0 128px;
-		padding: 7px 24px;
-		font-size: 16px;
-		line-height: 22px;
-		font-weight: bold;
-		text-align: center;
-	}
-
-	.state {
-		margin-right: 16px;
-		text-align: right;
-	}
-}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 8663bfc..f396598 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -4,7 +4,6 @@
 @use "hippie-style/hippie";
 
 @use "modules/ui/frame_module";
-@use "modules/ui/new_module";
 @use "modules/ui/drag_module";
 @use "modules/ui/form_module";
 @use "modules/ui/gallery_module";

From a83dc59eb2015d21e943399419791966fea58086 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 17:50:12 +0100
Subject: [PATCH 212/253] docs: Add TODO

---
 TODO.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/TODO.md b/TODO.md
index 6af7f1b..5c33350 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,6 +20,9 @@
   - Keep placeholder and demo stuff
   - Move other things
   - Prevent styles to be global
+- Adapt bootstrap utility API
+  - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss
+  - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
 
 # JS
 

From 65eec5f6bd87675f7bc59961dc2b9ec4b72091b3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 19:39:23 +0100
Subject: [PATCH 213/253] feat: Rename nav classes

---
 source/screens/demo/examples/start.liquid      | 2 +-
 source/screens/demo/examples/ui/gallery.liquid | 2 +-
 source/screens/demo/examples/ui/table.liquid   | 6 +++---
 source/style/hippie-style                      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 5e3d261..1b4a39c 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -11,7 +11,7 @@ tags:
 {% render 'hippie/partials/header-status', hippie: hippie, links: start %}
 <main>
 	<header class="io">
-		<form id="wwwForm" class="group-input" action="https://duckduckgo.com/">
+		<form id="wwwForm" class="group_nav" action="https://duckduckgo.com/">
 			<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
 			<input class="button_io" value="Suchen" type="submit"/>
 		</form>
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index 0d372d4..b2871d2 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -12,7 +12,7 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
 					<label class="right" for="setSize">Größe</label>
 				</div>
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 570d1dc..bd0bbbb 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -12,11 +12,11 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<button id="addEntry" title="Add entry">
 						<i class="bi bi-plus-circle"></i>
 					</button>
-					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
+					<div class="wrap_input"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
 			</nav>
@@ -24,7 +24,7 @@ tags:
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
-				<div class="group-input">
+				<div class="group_nav">
 					<select id="sltNum" name="position-number">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 2ae3075..848754c 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 2ae30754f0ce21e0de1c229992f4ea1ae82730ba
+Subproject commit 848754c6150df95207dffa36f388c696330cf56b

From cc391bc7e43acba6d3e7f044ca8b115333f3cf8a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 22:21:26 +0100
Subject: [PATCH 214/253] feat: Add toggle for animation to FPV

---
 source/code/game.js                          | 29 +++++++++++++++++---
 source/screens/demo/examples/game/fpv.liquid |  7 +++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/source/code/game.js b/source/code/game.js
index 1492a63..bab55c4 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -27,18 +27,27 @@ class HippieCrosshair {
 		this.mouseX = canvas.width / 2;
 		this.mouseY = canvas.height / 2;
 
+		// Animation control
+		this.isAnimating = true;
+		this.animationFrameId = null;
+
 		this.setupEventListeners();
 		this.animate();
 	}
 
 	setupEventListeners() {
-		document.addEventListener('mousemove', (e) => {
-			this.mouseX = e.clientX;
-			this.mouseY = e.clientY;
+		document.addEventListener('mousemove', (event) => {
+			this.mouseX = event.clientX;
+			this.mouseY = event.clientY;
 		});
 	}
 
 	animate() {
+		if (!this.isAnimating) {
+			this.animationFrameId = requestAnimationFrame(() => this.animate());
+			return;
+		}
+
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
 		if (this.showConnector) {
@@ -49,7 +58,7 @@ class HippieCrosshair {
 		// TODO: Autom. Zug zum Zentrum hin ermöglichen
 		this.drawCrosshair();
 
-		requestAnimationFrame(() => this.animate());
+		this.animationFrameId = requestAnimationFrame(() => this.animate());
 	}
 
 	drawLine() {
@@ -227,4 +236,16 @@ class HippieCrosshair {
 	setLineVisible(visible) {
 		this.showConnector = visible;
 	}
+
+	startAnimation() {
+		this.isAnimating = true;
+	}
+
+	stopAnimation() {
+		this.isAnimating = false;
+	}
+
+	toggleAnimation() {
+		this.isAnimating = !this.isAnimating;
+	}
 }
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index a4f53a7..7dd1b54 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -15,6 +15,9 @@ tags:
 <canvas id="view"></canvas>
 
 <header class="io controls">
+	<nav>
+		<button onclick="toggleAnimation()">Toggle</button>
+	</nav>
 	<nav>
 		<span>Color</span>
 		<button onclick="changeColor('black')">Black</button>
@@ -70,6 +73,10 @@ tags:
 		crosshair.setLineVisible(!crosshair.showConnector);
 	}
 
+	function toggleAnimation() {
+		crosshair.toggleAnimation();
+	}
+
 	window.addEventListener('resize', () => {
 		canvas.width = window.innerWidth;
 		canvas.height = window.innerHeight;

From 5480e83e29f60402083fd08bb0d816f033d6bffa Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 22:21:42 +0100
Subject: [PATCH 215/253] feat: Change start links

---
 source/data/start.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/data/start.json b/source/data/start.json
index cc0da22..65bfb14 100644
--- a/source/data/start.json
+++ b/source/data/start.json
@@ -8,7 +8,7 @@
 		"href": "/demo/basics.html"
 	},
 	{
-		"text": "Drag",
-		"href": "/demo/examples/ui/drag.html"
+		"text": "Portal",
+		"href": "/demo/examples/portal.html"
 	}
 ]
\ No newline at end of file

From 45b0aef67d5994bea35c1cbb7b4f3b5f2adf0e3e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 20:43:53 +0100
Subject: [PATCH 216/253] feat: Add background animation to FPV

---
 source/style/modules/_game.scss | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index d9a36f1..1c24812 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,7 +1,34 @@
+@use 'sass:list';
 @use "sass:map";
 
 @use "../hippie-style/hippie";
 
+$colors: hippie.$color_palette;
+$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
+
+@function getColor($index, $colors) {
+	$color_keys: map.keys($colors);
+	$key_count: list.length($color_keys);
+	$cycled_index: ($index % $key_count) + 1;
+	$key: list.nth($color_keys, $cycled_index);
+	@return map.get($colors, $key);
+}
+
+@mixin fadeColors($steps, $colors) {
+	@keyframes fadeColor {
+		@for $i from 1 through list.length($steps) {
+			$percent: list.nth($steps, $i);
+			$color: getColor($i - 1, $colors);
+
+			#{$percent}% {
+				background-color: $color;
+			}
+		}
+	}
+
+	animation: fadeColor 16s infinite linear;
+}
+
 .body_game {
 	@extend .h_full_view;
 	background-color: hotpink;
@@ -32,9 +59,10 @@
 	@extend .h_full_view;
 
 	canvas {
+		@include fadeColors($steps, $colors);
+
 		display: block;
 		cursor: none;
-		background-color: lightblue;
 	}
 
 	.controls {

From 4f029a1a73e77fa4d11c4c3c7b085ef18703ec51 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 20:59:14 +0100
Subject: [PATCH 217/253] feat: Change HippieCrosshair

- Change structure for options
- Add mergeOptions method to combine defaults with options
- Rename stuff
---
 source/code/game.js                          | 126 ++++++++++++-------
 source/screens/demo/examples/game/fpv.liquid |  22 ++--
 2 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/source/code/game.js b/source/code/game.js
index bab55c4..9b75f3f 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -5,24 +5,48 @@ class HippieCrosshair {
 
 		this.debug = options.debug || false;
 
+		const defaults = {
+			crosshair: {
+				size: 16,
+				thickness: 2,
+				color: '#000',
+				gapSize: 8,
+				style: 'cross'
+			},
+			connector: {
+				distance: 128, // Distance to draw next symbol
+				spacing: 64, // Space between symbols
+				size: 8,
+				color: '#000',
+				style: 'arrow',
+				visibility: true
+			},
+			line: {
+				color: 'rgba(0, 0, 0, 0.1)',
+				width: 1
+			}
+		};
+		const merged = this.mergeOptions(defaults, options);
+		const { crosshair, connector, line } = merged;
+
 		// Crosshair options
-		this.size = options.size || 16;
-		this.thickness = options.thickness || 2;
-		this.color = options.color || '#000';
-		this.gapSize = options.gapSize || 8;
-		this.style = options.style || 'cross';
+		this.size = crosshair.size;
+		this.thickness = crosshair.thickness;
+		this.color = crosshair.color;
+		this.gapSize = crosshair.gapSize;
+		this.style = crosshair.style;
+
+		// Connector options
+		this.distance = connector.distance;
+		this.spacing = connector.spacing;
+		this.connectorSize = connector.size;
+		this.connectorColor = connector.color;
+		this.connectorStyle = connector.style;
+		this.connectorShow = connector.visibility;
 
 		// Line options
-		this.lineColor = options.lineColor || '#fff';
-		this.lineWidth = options.lineWidth || 1;
-		this.showConnector = options.showConnector !== false;
-
-		// Symbol options
-		this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol
-		this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols
-		this.symbolSize = options.symbolSize || 8;
-		this.symbolColor = options.symbolColor || '#000';
-		this.symbolStyle = options.symbolStyle || 'arrow';
+		this.lineColor = line.color || '#fff';
+		this.lineWidth = line.width || 1;
 
 		this.mouseX = canvas.width / 2;
 		this.mouseY = canvas.height / 2;
@@ -35,6 +59,22 @@ class HippieCrosshair {
 		this.animate();
 	}
 
+	mergeOptions(defaults, options) {
+		const merged = JSON.parse(JSON.stringify(defaults));
+
+		if (options.crosshair) {
+			Object.assign(merged.crosshair, options.crosshair);
+		}
+		if (options.connector) {
+			Object.assign(merged.connector, options.connector);
+		}
+		if (options.line) {
+			Object.assign(merged.line, options.line);
+		}
+
+		return merged;
+	}
+
 	setupEventListeners() {
 		document.addEventListener('mousemove', (event) => {
 			this.mouseX = event.clientX;
@@ -50,7 +90,7 @@ class HippieCrosshair {
 
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-		if (this.showConnector) {
+		if (this.connectorShow) {
 			if (this.debug) this.drawLine();
 			this.drawConnector();
 		}
@@ -80,40 +120,38 @@ class HippieCrosshair {
 
 		const dx = this.mouseX - centerX;
 		const dy = this.mouseY - centerY;
-		const distance = Math.sqrt(dx * dx + dy * dy);
+		const delta = Math.sqrt(dx * dx + dy * dy);
 
-		// Only draw symbols if cursor is far enough from center
-		if (distance < this.symbolDistance) {
+		// Only draw connectors if cursor is far enough from center
+		if (delta < this.distance) {
 			return;
 		}
 
 		const angle = Math.atan2(dy, dx);
+		const count = Math.floor((delta - this.distance) / this.spacing);
 
-		// Calculate how many symbols to draw
-		const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
+		for (let i = 0; i < count; i++) {
+			const distance = this.distance + (i * this.spacing);
+			const x = centerX + Math.cos(angle) * distance;
+			const y = centerY + Math.sin(angle) * distance;
 
-		for (let i = 0; i < symbolCount; i++) {
-			const symbolDistance = this.symbolDistance + (i * this.symbolSpacing);
-			const symbolX = centerX + Math.cos(angle) * symbolDistance;
-			const symbolY = centerY + Math.sin(angle) * symbolDistance;
-
-			this.drawSymbol(symbolX, symbolY, angle);
+			this.drawSymbol(x, y, angle);
 		}
 	}
 
 	drawSymbol(x, y, angle = 0) {
-		this.ctx.fillStyle = this.symbolColor;
-		this.ctx.strokeStyle = this.symbolColor;
+		this.ctx.fillStyle = this.connectorColor;
+		this.ctx.strokeStyle = this.connectorColor;
 		this.ctx.lineWidth = 1;
 
-		switch (this.symbolStyle) {
+		switch (this.connectorStyle) {
 			case 'circle':
 				this.ctx.beginPath();
-				this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2);
+				this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2);
 				this.ctx.fill();
 				break;
 			case 'diamond':
-				const size = this.symbolSize - (this.symbolSize / 4);
+				const size = this.connectorSize - (this.connectorSize / 4);
 				this.ctx.beginPath();
 				this.ctx.moveTo(x, y - size);
 				this.ctx.lineTo(x + size, y);
@@ -124,10 +162,10 @@ class HippieCrosshair {
 				break;
 			case 'square':
 				this.ctx.fillRect(
-					x - this.symbolSize / 2,
-					y - this.symbolSize / 2,
-					this.symbolSize,
-					this.symbolSize
+					x - this.connectorSize / 2,
+					y - this.connectorSize / 2,
+					this.connectorSize,
+					this.connectorSize
 				);
 				break;
 			case 'arrow':
@@ -137,7 +175,7 @@ class HippieCrosshair {
 	}
 
 	arrow(x, y, angle) {
-		const size = this.symbolSize - (this.symbolSize / 4);
+		const size = this.connectorSize - (this.connectorSize / 4);
 
 		this.ctx.save();
 		this.ctx.translate(x, y);
@@ -221,20 +259,20 @@ class HippieCrosshair {
 		this.style = style;
 	}
 
-	setColor(color) {
+	setCrosshairColor(color) {
 		this.color = color;
 	}
 
-	setSymbolStyle(style) {
-		this.symbolStyle = style;
+	setConnectorStyle(style) {
+		this.connectorStyle = style;
 	}
 
-	setSymbolColor(color) {
-		this.symbolColor = color;
+	setConnectorColor(color) {
+		this.connectorColor = color;
 	}
 
-	setLineVisible(visible) {
-		this.showConnector = visible;
+	setConnectorVisibility(visible) {
+		this.connectorShow = visible;
 	}
 
 	startAnimation() {
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index 7dd1b54..1a1fa13 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -33,12 +33,12 @@ tags:
 	</nav>
 	<nav>
 		<span>Connector</span>
-		<button onclick="toggleLine()">Toggle</button>
+		<button onclick="toggleConnector()">Toggle</button>
 		<hr class="vertical">
-		<button onclick="changeSymbolStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
-		<button onclick="changeSymbolStyle('square')"><i class="bi bi-square-fill"></i></button>
-		<button onclick="changeSymbolStyle('circle')"><i class="bi bi-circle-fill"></i></button>
-		<button onclick="changeSymbolStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
+		<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
+		<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
+		<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
+		<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
 	</nav>
 </header>
 {% endblock %}
@@ -59,18 +59,18 @@ tags:
 		crosshair.setCrosshairStyle(style);
 	}
 
-	function changeSymbolStyle(style) {
-		crosshair.setSymbolStyle(style);
+	function changeConnectorStyle(style) {
+		crosshair.setConnectorStyle(style);
 	}
 
 	function changeColor(color) {
-		crosshair.setColor(color);
-		crosshair.setSymbolColor(color);
+		crosshair.setCrosshairColor(color);
+		crosshair.setConnectorColor(color);
 		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
 	}
 
-	function toggleLine() {
-		crosshair.setLineVisible(!crosshair.showConnector);
+	function toggleConnector() {
+		crosshair.setConnectorVisibility(!crosshair.connectorShow);
 	}
 
 	function toggleAnimation() {

From a56b8f8ca719710bf9bf24e22575473477d2da7c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 23:05:09 +0100
Subject: [PATCH 218/253] feat: New style for HippieCrosshair

---
 source/code/game.js                          | 26 +++++++++++++++++++-
 source/screens/demo/examples/game/fpv.liquid |  1 +
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/source/code/game.js b/source/code/game.js
index 9b75f3f..b961fdb 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -208,6 +208,9 @@ class HippieCrosshair {
 			case 'dot':
 				this.dot();
 				break;
+			case 'level':
+				this.level();
+				break;
 		}
 	}
 
@@ -244,7 +247,7 @@ class HippieCrosshair {
 		// Inner dot
 		this.ctx.fillStyle = this.color;
 		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.thickness * 1.5, 0, Math.PI * 2);
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
 		this.ctx.fill();
 	}
 
@@ -255,6 +258,27 @@ class HippieCrosshair {
 		this.ctx.fill();
 	}
 
+	level() {
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX - this.size * 2, this.mouseY);
+		this.ctx.lineTo(this.mouseX - this.gapSize * 2, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX + this.gapSize * 2, this.mouseY);
+		this.ctx.lineTo(this.mouseX + this.size * 2, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
 	setCrosshairStyle(style) {
 		this.style = style;
 	}
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index 1a1fa13..a4c61a6 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -30,6 +30,7 @@ tags:
 		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
 		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
 		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
+		<button onclick="changeCrosshairStyle('level')"><i class="bi bi-dash-circle"></i></button>
 	</nav>
 	<nav>
 		<span>Connector</span>

From 780eb6a8066d32abf8cb8dd0bb9ccdeb9b38662c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:10:45 +0100
Subject: [PATCH 219/253] feat: Add matrix screen

---
 source/screens/demo/examples/matrix.liquid | 242 +++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 source/screens/demo/examples/matrix.liquid

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
new file mode 100644
index 0000000..1e2c266
--- /dev/null
+++ b/source/screens/demo/examples/matrix.liquid
@@ -0,0 +1,242 @@
+---
+title: Matrix
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block style %}
+<style>
+	:root {
+		--space: 16px;
+	}
+
+	html, body {
+		height: calc(100vh - calc(var(--space) * 2));
+		box-sizing: border-box;
+	}
+
+	body {
+		position: relative;
+		margin: var(--space);
+		/* background-color: grey; */
+		border: 1px solid black;
+		font-family: 'Courier New', Courier, monospace;
+	}
+
+	.container {
+		background-color: grey;
+	}
+
+	.glyph {
+		position: absolute;
+		top: 0;
+		left: 0;
+		font-size: 24px;
+		line-height: 1;
+		font-weight: bold;
+	}
+</style>
+{% endblock %}
+
+{% block body %}
+<canvas id="canvas">
+	<div>Canvas element not supported.</div>
+</canvas>
+<div id="container">
+	<span id="a" class="glyph">A</span>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	const glyphEls = document.getElementsByClassName('glyph');
+	const glyphEl = document.getElementById('a');
+	const cEl = document.getElementById('container');
+
+	let createId = undefined;
+	let holdId = undefined;
+	let cleanId = undefined;
+	let createInterval = 300;
+	let holdInterval = 5000;
+	let cleanInterval = 1000;
+	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
+	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
+	let glyphW = glyphEl.offsetWidth;
+	let glyphH = glyphEl.offsetHeight;
+	let maxHeight = bodyHeight - glyphY - 2 * 16;
+
+	cEl.style.display = 'none';
+
+	function canvasTrail() {
+		const canvas = document.getElementById("canvas");
+		const body = document.querySelector("body");
+		canvas.width = body.clientWidth - 2;
+		canvas.height = body.clientHeight - 2;
+
+		if (canvas.getContext) {
+			const ctx = canvas.getContext("2d");
+
+			ctx.font = "24px 'Courier New', Courier, monospace";
+			// ctx.textBaseline = "top";
+
+			let glyphText = "A";
+			let glyphMeasure = ctx.measureText(glyphText);
+			let glyphX = 0;
+			let glyphY = 0;
+			let glyphW = Math.max(glyphMeasure.actualBoundingBoxLeft + glyphMeasure.actualBoundingBoxRight, glyphMeasure.width);
+			let glyphH = glyphMeasure.fontBoundingBoxDescent + glyphMeasure.fontBoundingBoxAscent;
+			let glyph = {
+				text: glyphText,
+				measure: glyphMeasure,
+				x: glyphX,
+				y: glyphY,
+				w: glyphW,
+				h: glyphH
+			}
+			let lane = [];
+
+			ctx.fillStyle = "grey";
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+			// ctx.fillStyle = "black";
+			// ctx.fillRect(glyphX, glyphY, glyphW, glyphH);
+			// ctx.fillStyle = "red";
+			// ctx.fillText(glyphText, glyphX, glyphY + glyphMeasure.fontBoundingBoxAscent);
+
+			ctx.fillStyle = "black";
+
+			createId = setInterval(createGlyph, createInterval, ctx, characters, glyph, lane);
+		} else {
+			console.log('Canvas element not supported.');
+		}
+	}
+
+	function createGlyph(ctx, chars, glyph, lane) {
+		clearTimeout(cleanId);
+		glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
+		console.log(glyph.text, glyph.y);
+
+		lane.push([glyph.text, glyph.y]);
+
+		// ctx.fillStyle = "black";
+		// ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
+		ctx.fillStyle = "white";
+		ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.measure.fontBoundingBoxAscent);
+
+		if (glyph.y >= glyph.h) {
+			let prevY = glyph.y - glyph.h;
+			let bkg = "rgba(128, 128, 128, " + randomBetween(.1, 1) + ")";
+
+			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "grey";
+			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "black";
+			ctx.fillText(glyph.text, glyph.x, prevY + glyph.measure.fontBoundingBoxAscent);
+			ctx.fillStyle = bkg;
+			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+		}
+
+		glyph.y += glyph.h;
+
+		if (glyph.y > canvas.height) {
+			// holdLane(ctx, chars, glyph, lane);
+			clearInterval(createId);
+			holdId = setTimeout(holdLane, holdInterval, ctx, chars, glyph, lane);
+		}
+	}
+
+	function holdLane(ctx, chars, glyph, lane) {
+		console.log("hold");
+
+		glyph.y = 0;
+
+		// clearInterval(createId);
+
+		// Änderung der Transparenz (sehr selten)
+
+		// Änderung des Symbols (selten)
+
+		cleanId = setTimeout(cleanLane, cleanInterval, ctx, chars, glyph, lane);
+	}
+
+	function cleanLane(ctx, chars, glyph, lane) {
+		console.log("clean");
+
+		clearTimeout(holdId);
+
+		lane = [];
+
+		ctx.clearRect(glyph.x, glyph.y, glyph.w, canvas.height);
+		ctx.fillStyle = "grey";
+		ctx.fillRect(0, 0, glyph.w, canvas.height);
+
+		createId = setInterval(createGlyph, randomIntFrom(100, 1000), ctx, chars, glyph, lane);
+	}
+
+	function containerTrail(position, container) {
+		const laneEl = document.createElement('div');
+
+		laneEl.className = 'lane';
+		container.appendChild(laneEl);
+
+		let changeGlyphId = setInterval(() => {
+			let newEl = glyphEl.cloneNode();
+			let glyphX = position;
+
+			glyphY += glyphEl.clientHeight;
+			newEl.innerHTML = characters.charAt(Math.floor(Math.random() * characters.length));
+			newEl.id = '';
+			newEl.style.top = glyphY + 'px';
+			newEl.style.left = glyphX + 'px';
+			newEl.style.opacity = 1;
+
+			if (glyphY > maxHeight) {
+				glyphY = 0;
+				laneEl.textContent = '';
+			}
+
+			laneEl.appendChild(newEl);
+			let prevEl = newEl.previousElementSibling;
+
+			if (prevEl !== null) {
+				prevEl.style.opacity = randomBetween(.5, 1);
+			}
+		}, createInterval);
+	}
+
+	function addTrails(amount) {
+		for (let index = 0; index <= amount; index++) {
+			let position = index * glyphW;
+			containerTrail(position);
+		}
+	}
+
+	function getGlyph(fontSize = 24, lineHeight = 1) {
+		const glyphEl = document.createElement('span');
+
+		glyphEl.style = 'glyph';
+
+		return glyphEl;
+	}
+
+	function createStyle() {
+		const stylesheet = document.styleSheets[0];
+		stylesheet.cssRules[0].style.backgroundColor = "aqua";
+	}
+
+	// containerTrail(0, cEl);
+	window.addEventListener("load", canvasTrail);
+
+	function randomBetween(min, max) {
+		return (Math.random() * (max - min) + min).toFixed(2);
+	}
+
+	function randomIntFrom(min, max) {
+		min = Math.ceil(min);
+		max = Math.floor(max);
+
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	}
+</script>
+{% endblock %}
\ No newline at end of file

From 8fe884aad6d7150fa3a7db4ebd7d2c3a8e1aaa75 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:21:59 +0100
Subject: [PATCH 220/253] feat: Change matrix

Add change function and test in console.
---
 source/screens/demo/examples/matrix.liquid | 41 +++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 1e2c266..5685600 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -56,16 +56,19 @@ tags:
 	const cEl = document.getElementById('container');
 
 	let createId = undefined;
+	let changeId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
 	let createInterval = 300;
-	let holdInterval = 5000;
+	let changeInterval = 300;
+	let holdInterval = 1000;
 	let cleanInterval = 1000;
 	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
 	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
 	let glyphW = glyphEl.offsetWidth;
 	let glyphH = glyphEl.offsetHeight;
 	let maxHeight = bodyHeight - glyphY - 2 * 16;
+	let index = 0;
 
 	cEl.style.display = 'none';
 
@@ -226,17 +229,47 @@ tags:
 	}
 
 	// containerTrail(0, cEl);
-	window.addEventListener("load", canvasTrail);
+	// window.addEventListener("load", canvasTrail);
+
+	/**
+	 * Change glyph
+	 */
+	console.log("init", changeInterval);
+	changeId = setInterval(change, changeInterval);
+
+	function change() {
+		clearInterval(holdId);
+		let char = characters.charAt(Math.floor(Math.random() * characters.length));
+		console.log(index, char);
+
+		index++;
+
+		if (index > 10) {
+			clearInterval(changeId);
+			index = 0;
+			changeInterval = randomIntFrom(100, 1000, 2);
+			console.clear();
+			console.log("hold", holdInterval);
+
+			holdId = setTimeout(() => {
+				holdInterval = randomIntFrom(1000, 10000, 3);
+
+				console.log("change", changeInterval);
+				changeId = setInterval(change, changeInterval);
+			}, holdInterval);
+		}
+	}
 
 	function randomBetween(min, max) {
 		return (Math.random() * (max - min) + min).toFixed(2);
 	}
 
-	function randomIntFrom(min, max) {
+	function randomIntFrom(min, max, pos = 0) {
+		pos = Math.pow(10, pos);
 		min = Math.ceil(min);
 		max = Math.floor(max);
 
-		return Math.floor(Math.random() * (max - min + 1) + min);
+		return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 	}
 </script>
 {% endblock %}
\ No newline at end of file

From c1633e0bc9ae8a70e8b7661446d294426e07a9d3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:44:07 +0100
Subject: [PATCH 221/253] feat: Change matrix

- Use blocks for now
- Hold and clean for line
- Only one line for now
---
 source/screens/demo/examples/matrix.liquid | 294 ++++++---------------
 1 file changed, 83 insertions(+), 211 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 5685600..8306978 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -7,255 +7,127 @@ tags:
 
 {% block style %}
 <style>
-	:root {
-		--space: 16px;
-	}
-
 	html, body {
-		height: calc(100vh - calc(var(--space) * 2));
+		height: 100vh;
 		box-sizing: border-box;
 	}
 
 	body {
-		position: relative;
-		margin: var(--space);
-		/* background-color: grey; */
-		border: 1px solid black;
+		margin: 0;
+		background-color: grey;
 		font-family: 'Courier New', Courier, monospace;
 	}
 
-	.container {
-		background-color: grey;
-	}
-
-	.glyph {
-		position: absolute;
-		top: 0;
-		left: 0;
-		font-size: 24px;
-		line-height: 1;
-		font-weight: bold;
+	#canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
 	}
 </style>
 {% endblock %}
 
 {% block body %}
-<canvas id="canvas">
-	<div>Canvas element not supported.</div>
-</canvas>
-<div id="container">
-	<span id="a" class="glyph">A</span>
-</div>
+<canvas id="canvas"></canvas>
 {% endblock %}
 
 {% block script %}
 <script>
 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	const glyphEls = document.getElementsByClassName('glyph');
-	const glyphEl = document.getElementById('a');
-	const cEl = document.getElementById('container');
+	const canvas = document.getElementById("canvas");
+	const ctx = canvas.getContext("2d");
+	const observer = new ResizeObserver(() => {
+		canvas.width = canvas.clientWidth;
+		canvas.height = canvas.clientHeight;
+		console.log("resize");
+	});
 
-	let createId = undefined;
-	let changeId = undefined;
+	let newId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
-	let createInterval = 300;
-	let changeInterval = 300;
+	let newInterval = 300;
 	let holdInterval = 1000;
-	let cleanInterval = 1000;
-	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
-	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
-	let glyphW = glyphEl.offsetWidth;
-	let glyphH = glyphEl.offsetHeight;
-	let maxHeight = bodyHeight - glyphY - 2 * 16;
+	let cleanInterval = 3000;
 	let index = 0;
 
-	cEl.style.display = 'none';
+	ctx.font = "24px 'Courier New', Courier, monospace";
 
-	function canvasTrail() {
-		const canvas = document.getElementById("canvas");
-		const body = document.querySelector("body");
-		canvas.width = body.clientWidth - 2;
-		canvas.height = body.clientHeight - 2;
-
-		if (canvas.getContext) {
-			const ctx = canvas.getContext("2d");
-
-			ctx.font = "24px 'Courier New', Courier, monospace";
-			// ctx.textBaseline = "top";
-
-			let glyphText = "A";
-			let glyphMeasure = ctx.measureText(glyphText);
-			let glyphX = 0;
-			let glyphY = 0;
-			let glyphW = Math.max(glyphMeasure.actualBoundingBoxLeft + glyphMeasure.actualBoundingBoxRight, glyphMeasure.width);
-			let glyphH = glyphMeasure.fontBoundingBoxDescent + glyphMeasure.fontBoundingBoxAscent;
-			let glyph = {
-				text: glyphText,
-				measure: glyphMeasure,
-				x: glyphX,
-				y: glyphY,
-				w: glyphW,
-				h: glyphH
-			}
-			let lane = [];
-
-			ctx.fillStyle = "grey";
-			ctx.fillRect(0, 0, canvas.width, canvas.height);
-			// ctx.fillStyle = "black";
-			// ctx.fillRect(glyphX, glyphY, glyphW, glyphH);
-			// ctx.fillStyle = "red";
-			// ctx.fillText(glyphText, glyphX, glyphY + glyphMeasure.fontBoundingBoxAscent);
-
-			ctx.fillStyle = "black";
-
-			createId = setInterval(createGlyph, createInterval, ctx, characters, glyph, lane);
-		} else {
-			console.log('Canvas element not supported.');
-		}
+	let char = characters.charAt(Math.floor(Math.random() * characters.length));
+	let charMeasure = ctx.measureText(char);
+	let glyph = {
+		text: char,
+		x: 0,
+		y: 0,
+		w: Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width)),
+		h: charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent
 	}
+	let lane = [];
 
-	function createGlyph(ctx, chars, glyph, lane) {
-		clearTimeout(cleanId);
-		glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
-		console.log(glyph.text, glyph.y);
+	console.log("init", newInterval);
+	console.log(glyph);
 
-		lane.push([glyph.text, glyph.y]);
+	observer.observe(canvas);
 
-		// ctx.fillStyle = "black";
-		// ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
-		ctx.fillStyle = "white";
-		ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.measure.fontBoundingBoxAscent);
+	newId = setInterval(newTrail, newInterval);
 
-		if (glyph.y >= glyph.h) {
-			let prevY = glyph.y - glyph.h;
-			let bkg = "rgba(128, 128, 128, " + randomBetween(.1, 1) + ")";
-
-			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
-			ctx.fillStyle = "grey";
-			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
-			ctx.fillStyle = "black";
-			ctx.fillText(glyph.text, glyph.x, prevY + glyph.measure.fontBoundingBoxAscent);
-			ctx.fillStyle = bkg;
-			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
-		}
-
-		glyph.y += glyph.h;
-
-		if (glyph.y > canvas.height) {
-			// holdLane(ctx, chars, glyph, lane);
-			clearInterval(createId);
-			holdId = setTimeout(holdLane, holdInterval, ctx, chars, glyph, lane);
-		}
-	}
-
-	function holdLane(ctx, chars, glyph, lane) {
-		console.log("hold");
-
-		glyph.y = 0;
-
-		// clearInterval(createId);
-
-		// Änderung der Transparenz (sehr selten)
-
-		// Änderung des Symbols (selten)
-
-		cleanId = setTimeout(cleanLane, cleanInterval, ctx, chars, glyph, lane);
-	}
-
-	function cleanLane(ctx, chars, glyph, lane) {
-		console.log("clean");
-
-		clearTimeout(holdId);
-
-		lane = [];
-
-		ctx.clearRect(glyph.x, glyph.y, glyph.w, canvas.height);
-		ctx.fillStyle = "grey";
-		ctx.fillRect(0, 0, glyph.w, canvas.height);
-
-		createId = setInterval(createGlyph, randomIntFrom(100, 1000), ctx, chars, glyph, lane);
-	}
-
-	function containerTrail(position, container) {
-		const laneEl = document.createElement('div');
-
-		laneEl.className = 'lane';
-		container.appendChild(laneEl);
-
-		let changeGlyphId = setInterval(() => {
-			let newEl = glyphEl.cloneNode();
-			let glyphX = position;
-
-			glyphY += glyphEl.clientHeight;
-			newEl.innerHTML = characters.charAt(Math.floor(Math.random() * characters.length));
-			newEl.id = '';
-			newEl.style.top = glyphY + 'px';
-			newEl.style.left = glyphX + 'px';
-			newEl.style.opacity = 1;
-
-			if (glyphY > maxHeight) {
-				glyphY = 0;
-				laneEl.textContent = '';
-			}
-
-			laneEl.appendChild(newEl);
-			let prevEl = newEl.previousElementSibling;
-
-			if (prevEl !== null) {
-				prevEl.style.opacity = randomBetween(.5, 1);
-			}
-		}, createInterval);
-	}
-
-	function addTrails(amount) {
-		for (let index = 0; index <= amount; index++) {
-			let position = index * glyphW;
-			containerTrail(position);
-		}
-	}
-
-	function getGlyph(fontSize = 24, lineHeight = 1) {
-		const glyphEl = document.createElement('span');
-
-		glyphEl.style = 'glyph';
-
-		return glyphEl;
-	}
-
-	function createStyle() {
-		const stylesheet = document.styleSheets[0];
-		stylesheet.cssRules[0].style.backgroundColor = "aqua";
-	}
-
-	// containerTrail(0, cEl);
-	// window.addEventListener("load", canvasTrail);
-
-	/**
-	 * Change glyph
-	 */
-	console.log("init", changeInterval);
-	changeId = setInterval(change, changeInterval);
-
-	function change() {
+	function newTrail() {
 		clearInterval(holdId);
-		let char = characters.charAt(Math.floor(Math.random() * characters.length));
-		console.log(index, char);
+
+		glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
+		console.log(index, glyph.text);
+
+		lane.push([index, glyph.text, glyph.y]);
+
+		ctx.fillStyle = "white";
+		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
+		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
+
+		if (index > 0) {
+			let prevY = glyph.y - glyph.h;
+			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
+			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+		}
 
 		index++;
+		glyph.y += glyph.h;
 
 		if (index > 10) {
-			clearInterval(changeId);
-			index = 0;
-			changeInterval = randomIntFrom(100, 1000, 2);
-			console.clear();
 			console.log("hold", holdInterval);
 
-			holdId = setTimeout(() => {
-				holdInterval = randomIntFrom(1000, 10000, 3);
+			clearInterval(newId);
 
-				console.log("change", changeInterval);
-				changeId = setInterval(change, changeInterval);
+			index = 0;
+			glyph.y = 0;
+			newInterval = randomIntFrom(100, 1000, 2);
+
+			holdId = setTimeout(() => {
+				console.log("clean", cleanInterval);
+
+				holdInterval = randomIntFrom(1000, 10000, 3);
+				cleanId = setInterval(cleanTrail, cleanInterval);
+			}, holdInterval);
+		}
+	}
+
+	function cleanTrail() {
+		clearInterval(holdId);
+
+		let pos = lane.shift();
+		console.log(pos);
+
+		ctx.clearRect(0, pos[2], glyph.w, glyph.h);
+		// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		if (!lane.length) {
+			console.log("hold", holdInterval);
+
+			clearInterval(cleanId);
+
+			holdId = setTimeout(() => {
+				console.clear();
+				console.log("new", newInterval);
+
+				cleanInterval = randomIntFrom(1000, 10000, 3);
+				newId = setInterval(newTrail, newInterval);
 			}, holdInterval);
 		}
 	}

From 87bea407760638e79c7b37283b3e5b954943dc10 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:49:13 +0100
Subject: [PATCH 222/253] feat: Change matrix

Improvements to line trailing.
---
 source/screens/demo/examples/matrix.liquid | 70 ++++++++++++----------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 8306978..5e06d92 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -41,26 +41,30 @@ tags:
 		console.log("resize");
 	});
 
+	ctx.font = "24px 'Courier New', Courier, monospace";
+
+	let char = characters.charAt(Math.floor(Math.random() * characters.length));
+	let charMeasure = ctx.measureText(char);
+	let charW = Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width));
+	let charH = charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent;
+	let glyph = {
+		text: char,
+		x: 0,
+		y: 0,
+		w: 13,
+		h: 24
+	}
+	let lane = [];
+	let max = Math.floor(canvas.clientHeight / glyph.h);
+
 	let newId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
 	let newInterval = 300;
 	let holdInterval = 1000;
-	let cleanInterval = 3000;
-	let index = 0;
-
-	ctx.font = "24px 'Courier New', Courier, monospace";
-
-	let char = characters.charAt(Math.floor(Math.random() * characters.length));
-	let charMeasure = ctx.measureText(char);
-	let glyph = {
-		text: char,
-		x: 0,
-		y: 0,
-		w: Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width)),
-		h: charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent
-	}
-	let lane = [];
+	let cleanInterval = 400;
+	let newIndex = 0;
+	let cleanIndex = randomIntFrom(1, max);
 
 	console.log("init", newInterval);
 	console.log(glyph);
@@ -73,49 +77,53 @@ tags:
 		clearInterval(holdId);
 
 		glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
-		console.log(index, glyph.text);
+		console.log(newIndex, glyph.text);
 
-		lane.push([index, glyph.text, glyph.y]);
+		lane.push([newIndex, glyph.text, glyph.y]);
 
 		ctx.fillStyle = "white";
 		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
 		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
 
-		if (index > 0) {
+		if (newIndex > 0) {
 			let prevY = glyph.y - glyph.h;
 			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
 			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
 		}
 
-		index++;
+		if (newIndex === cleanIndex) {
+			console.log("clean", cleanInterval, cleanIndex);
+
+			cleanId = setInterval(cleanTrail, cleanInterval);
+		}
+
+		newIndex++;
 		glyph.y += glyph.h;
 
-		if (index > 10) {
-			console.log("hold", holdInterval);
+		if (newIndex > max) {
+			// console.log("hold", holdInterval);
+			console.log("end");
 
 			clearInterval(newId);
 
-			index = 0;
+			newIndex = 0;
 			glyph.y = 0;
 			newInterval = randomIntFrom(100, 1000, 2);
 
-			holdId = setTimeout(() => {
-				console.log("clean", cleanInterval);
+			// holdId = setTimeout(() => {
+			// 	console.log("clean", cleanInterval);
 
-				holdInterval = randomIntFrom(1000, 10000, 3);
-				cleanId = setInterval(cleanTrail, cleanInterval);
-			}, holdInterval);
+			// 	holdInterval = randomIntFrom(1000, 10000, 3);
+			// 	cleanId = setInterval(cleanTrail, cleanInterval);
+			// }, holdInterval);
 		}
 	}
 
 	function cleanTrail() {
-		clearInterval(holdId);
-
 		let pos = lane.shift();
 		console.log(pos);
 
 		ctx.clearRect(0, pos[2], glyph.w, glyph.h);
-		// ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 		if (!lane.length) {
 			console.log("hold", holdInterval);
@@ -126,7 +134,9 @@ tags:
 				console.clear();
 				console.log("new", newInterval);
 
+				cleanIndex = randomIntFrom(1, max);
 				cleanInterval = randomIntFrom(1000, 10000, 3);
+				holdInterval = randomIntFrom(1000, 10000, 3);
 				newId = setInterval(newTrail, newInterval);
 			}, holdInterval);
 		}

From a9620461830ffb4f842f8808b2af3f4213a951ad Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:53:49 +0100
Subject: [PATCH 223/253] feat: Change matrix

- Show characters
- Stop using observer
---
 source/screens/demo/examples/matrix.liquid | 32 ++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 5e06d92..3eb62e9 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -35,13 +35,19 @@ tags:
 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 	const canvas = document.getElementById("canvas");
 	const ctx = canvas.getContext("2d");
-	const observer = new ResizeObserver(() => {
-		canvas.width = canvas.clientWidth;
-		canvas.height = canvas.clientHeight;
-		console.log("resize");
-	});
+	// const observer = new ResizeObserver(() => {
+	// 	canvas.width = canvas.clientWidth;
+	// 	canvas.height = canvas.clientHeight;
+	// 	console.log("resize");
+	// });
+
+	canvas.width = canvas.clientWidth;
+	canvas.height = canvas.clientHeight;
+
+	// observer.observe(canvas);
 
 	ctx.font = "24px 'Courier New', Courier, monospace";
+	ctx.textBaseline = "top";
 
 	let char = characters.charAt(Math.floor(Math.random() * characters.length));
 	let charMeasure = ctx.measureText(char);
@@ -51,8 +57,8 @@ tags:
 		text: char,
 		x: 0,
 		y: 0,
-		w: 13,
-		h: 24
+		w: charH,
+		h: charH
 	}
 	let lane = [];
 	let max = Math.floor(canvas.clientHeight / glyph.h);
@@ -69,8 +75,6 @@ tags:
 	console.log("init", newInterval);
 	console.log(glyph);
 
-	observer.observe(canvas);
-
 	newId = setInterval(newTrail, newInterval);
 
 	function newTrail() {
@@ -83,12 +87,18 @@ tags:
 
 		ctx.fillStyle = "white";
 		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
-		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
+		ctx.fillStyle = "black";
+		ctx.fillText(glyph.text, Math.floor((charH - charW) / 2), glyph.y);
 
 		if (newIndex > 0) {
 			let prevY = glyph.y - glyph.h;
-			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
+			let alpha = randomBetween(.2, 1);
+			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
 			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
+			ctx.fillStyle = "rgba(255, 255, 255, " + alpha + ")";
+			// TODO: can not use array lane if it is changed by cleanTrail()
+			ctx.fillText(lane[newIndex - 1][1], Math.floor((charH - charW) / 2), prevY);
 		}
 
 		if (newIndex === cleanIndex) {

From c518672db076903c40b49cb387f514fc37ec5c95 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Fri, 3 Apr 2026 12:35:36 +0200
Subject: [PATCH 224/253] feat: Demo config changed

---
 .eleventy.js                     | 5 +++--
 source/screens/demo/index.liquid | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 522c4dd..0e51f7d 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -31,7 +31,8 @@ export default async function (eleventyConfig) {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
 
-	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
+	// TODO: Demo entfernen
+	const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';
 
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
@@ -44,7 +45,7 @@ export default async function (eleventyConfig) {
 			mail: 'name@domain.tld',
 			domain: 'https://domain.tld'
 		},
-		demoPath: demoPath,
+		permalink: permalinkPath,
 		debugMode: true,
 		legacyMode: false
 	});
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index a07c2d4..95aeefa 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -1,5 +1,5 @@
 ---
-permalink: "{{ hippie.demoPath }}"
+permalink: "{{ hippie.permalink }}"
 title: Index
 ---
 {% assign pageId = page.fileSlug -%}

From a1b5aa8c59ea52f06f0ac1fb47c47de7ad8f61ab Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 08:17:56 +0200
Subject: [PATCH 225/253] feat: New game screen

- Basic layout
- Menu structure
- First screen
- Add RandomPixelCanvas class
---
 source/code/hippie/app.js                     |  56 +++++++
 source/screens/demo/examples/game/menu.liquid |   4 +-
 source/screens/demo/examples/game/new.liquid  | 146 +++++++++++++++++
 source/style/modules/_game.scss               | 153 +++++++++++++++++-
 4 files changed, 356 insertions(+), 3 deletions(-)
 create mode 100644 source/screens/demo/examples/game/new.liquid

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index eb6eda9..2b46f36 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -554,6 +554,62 @@ function zeroFill(number, width) {
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
+class RandomPixelCanvas {
+	constructor(containerElement, options = {}) {
+		this.container = containerElement;
+		this.width = options.width || 400;
+		this.height = options.height || 300;
+		this.colors = options.colors || ['#000000', '#ffffff'];
+		this.filter = options.filter || '';
+		this.canvas = this.createCanvas();
+
+		this.fillWithRandomPixels();
+	}
+
+	createCanvas() {
+		const canvas = document.createElement('canvas');
+		canvas.width = this.width;
+		canvas.height = this.height;
+		canvas.style.filter = this.filter;
+
+		this.container.appendChild(canvas);
+
+		return canvas;
+	}
+
+	fillWithRandomPixels() {
+		const ctx = this.canvas.getContext('2d');
+		const imageData = ctx.createImageData(this.width, this.height);
+		const data = imageData.data;
+
+		for (let i = 0; i < data.length; i += 4) {
+			const color = this.getRandomColor();
+			const rgb = this.hexToRgb(color);
+
+			data[i] = rgb.r;     // Red
+			data[i + 1] = rgb.g; // Green
+			data[i + 2] = rgb.b; // Blue
+			data[i + 3] = 255;   // Alpha
+		}
+
+		ctx.putImageData(imageData, 0, 0);
+	}
+
+	getRandomColor() {
+		return this.colors[Math.floor(Math.random() * this.colors.length)];
+	}
+
+	hexToRgb(hex) {
+		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+		return result ? {
+			r: parseInt(result[1], 16),
+			g: parseInt(result[2], 16),
+			b: parseInt(result[3], 16)
+		} : {r: 0, g: 0, b: 0};
+	}
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid
index 7852bdb..34e00e7 100644
--- a/source/screens/demo/examples/game/menu.liquid
+++ b/source/screens/demo/examples/game/menu.liquid
@@ -3,7 +3,7 @@ title: Menu
 tags:
 - game
 ---
-{% assign bodyClass = 'body_game' -%}
+{% assign bodyClass = 'body_menu' -%}
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
@@ -14,7 +14,7 @@ tags:
 			<p>Additional name</p>
 		</hgroup>
 		<ul class="link">
-			<li><a href="#new">Neues Spiel</a></li>
+			<li><a href="./new.html">Neues Spiel</a></li>
 			<li><a href="#continue">Spiel fortsetzen</a></li>
 			<li><a href="#options">Einstellungen</a></li>
 			<li><a href="#quit">Spiel beenden</a></li>
diff --git a/source/screens/demo/examples/game/new.liquid b/source/screens/demo/examples/game/new.liquid
new file mode 100644
index 0000000..a799fef
--- /dev/null
+++ b/source/screens/demo/examples/game/new.liquid
@@ -0,0 +1,146 @@
+---
+title: TFW
+---
+{% assign bodyClass = 'body_tfw' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<header class="io">
+	<button data-action="escape">☰</button>
+	<button data-action="previous">&lt;</button>
+	<button data-action="quest">Quests</button>
+	<button data-action="region">Regions</button>
+	<button data-action="vendor">Vendors</button>
+	<button data-action="manufacture">Manufacture</button>
+	<button data-action="character">Characters</button>
+	<button data-action="stash">Stash</button>
+	<button data-action="secret">Secret Storage</button>
+	<button data-action="squad">Squads</button>
+	<button data-action="ready">Ready Room</button>
+	<button data-action="next">&gt;</button>
+</header>
+<div>
+	<main>
+		<nav>
+			<div class="important">Filter</div>
+			<input placeholder="Search" type="text">
+			<div>
+				<p>Quest type</p>
+				<menu>
+					<li></li>
+				</menu>
+			</div>
+		</nav>
+		<div>
+			<div>
+				<table>
+					<colgroup>
+						<col class="l">
+						<col class="q">
+						<col class="t">
+					</colgroup>
+					<tr>
+						<th>Location</th>
+						<th>Quest</th>
+						<th>Type</th>
+					</tr>
+					<tr>
+						<td>
+							<span>Scorched Earth</span>
+							<div class="background"></div>
+						</td>
+						<td>...</td>
+						<td class="subtle">Available</td>
+					</tr>
+					<tr>
+						<td>
+							<span>Location name</span>
+							<div id="location" class="background"></div>
+						</td>
+						<td>...</td>
+						<td class="subtle">Available</td>
+					</tr>
+				</table>
+			</div>
+			<div>
+				<table>
+					<colgroup>
+						<col class="l">
+						<col class="q">
+						<col class="s">
+					</colgroup>
+					<tr>
+						<th colspan="3">Active quests (Max.: 4)</th>
+					</tr>
+					<tr>
+						<td>
+							<div class="background"></div>
+						</td>
+						<td>King Of Kings</td>
+						<td class="subtle">Active</td>
+					</tr>
+					<tr>
+						<td>
+							<div class="background"></div>
+						</td>
+						<td>Garage Days Pt. 1</td>
+						<td class="subtle success">Complete</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+		<div>
+			<h2>King Of Kings</h2>
+			<p>A hijacked medium mech dubbed the "Rat King" ...</p>
+			<hr class="dotted">
+			<p>Collect Rat King residue.</p>
+			<hr>
+			<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
+				rating</p>
+		</div>
+	</main>
+	<footer class="io">
+		<button data-action="back">Back</button>
+		<button data-action="accept">Accept</button>
+	</footer>
+</div>
+{% endblock %}
+
+{% block assets %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const menu = document.querySelector('body > header');
+	const locations = document.querySelectorAll('main table .background');
+
+	menu.addEventListener('click', (event) => {
+		const buttons = menu.querySelectorAll('button');
+		const buttonTarget = event.target.closest('button');
+
+		if (buttonTarget && event.button === 0) {
+			for (button of buttons) {
+				button.classList.remove('active');
+			}
+
+			buttonTarget.classList.add('active');
+		}
+	});
+
+	locations.forEach(element => {
+		const blur = randomIntFrom(0, 4);
+		const grayscale = randomFloatFrom(0, 1);
+
+		new RandomPixelCanvas(element, {
+			width: Math.floor(element.parentElement.clientWidth),
+			height: Math.floor(element.parentElement.clientHeight),
+			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
+			filter: 'grayscale(' + grayscale + ') blur(' + blur + 'px)'
+		});
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 1c24812..7ad3f4d 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -29,7 +29,7 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 	animation: fadeColor 16s infinite linear;
 }
 
-.body_game {
+.body_menu {
 	@extend .h_full_view;
 	background-color: hotpink;
 
@@ -71,4 +71,155 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 		left: 0;
 		border-radius: hippie.$radius_basic;
 	}
+}
+
+.body_tfw {
+	@extend .h_full_view;
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	th,
+	.important {
+		color: white;
+		background-color: hippie.basic_color(echo);
+	}
+
+	.important {
+		padding: hippie.$space_half;
+		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
+		font-weight: bold;
+	}
+
+	.subtle {
+		@extend .txt_smaller;
+
+		color: hippie.$color_darkest;
+		text-transform: uppercase;
+	}
+
+	.success {
+		color: hippie.basic_color(alpha);
+	}
+
+	& > header {
+		& > button.active {
+			border-color: hippie.$color_highlight_basic;
+			color: hippie.$color_highlight_basic;
+			background-color: hippie.$color_action_basic;
+		}
+
+		& > button:not(:first-child, :last-child, :nth-child(2)) {
+			flex: 1;
+		}
+	}
+
+	& > div {
+		display: flex;
+		flex-flow: column nowrap;
+		flex: auto;
+		min-height: 0;
+
+		& > main {
+			display: flex;
+			flex-flow: row nowrap;
+			flex: auto;
+			gap: hippie.$space_double;
+			min-height: 0;
+
+			& > div:first-child {
+				flex: 1;
+			}
+
+			& > div:last-child {
+				flex: 2;
+			}
+
+			& > div:nth-child(2) {
+				flex: 4;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				div:first-child {
+					flex: auto;
+					overflow: auto;
+					min-height: 0;
+				}
+
+				div:last-child {
+					flex: 0 0 auto;
+				}
+			}
+
+			nav {
+				& > *:not(:last-child) {
+					margin-bottom: hippie.$space_basic;
+				}
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+			}
+
+			table {
+				table-layout: fixed;
+				width: 100%;
+				margin: 0;
+
+				th {
+					text-align: center;
+				}
+
+				td {
+					position: relative;
+					height: 4em;
+					vertical-align: top;
+
+					span {
+						z-index: map.get(hippie.$z-indexes, "content-bottom");
+						position: relative;
+						color: white;
+					}
+
+					canvas {
+						z-index: map.get(hippie.$z-indexes, "default");
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+					}
+
+					&:last-child {
+						text-align: center;
+						vertical-align: middle;
+					}
+				}
+
+				.l {
+					width: 30%;
+				}
+
+				.q {
+					width: 50%;
+				}
+
+				.t, .s {
+					width: 20%;
+				}
+			}
+		}
+
+		& > footer {
+			justify-content: space-between;
+			padding: hippie.$space_basic;
+
+			& > button:last-child {
+				//margin-left: auto;
+				padding-inline: 2em;
+			}
+		}
+	}
 }
\ No newline at end of file

From 19577eca8cc64a94e783bec101032621ac7a6a41 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 09:21:34 +0200
Subject: [PATCH 226/253] feat: Change game structure

- New template
- Rename screens
- New partial for menu
- New data file for menu content
- Separate styles
---
 source/data/menu.json                         |  18 ++
 source/screens/demo/examples/game/menu.liquid |  15 +-
 .../examples/game/{fpv.liquid => mwo.liquid}  |   7 +-
 .../examples/game/{new.liquid => tfw.liquid}  |  10 +-
 source/style/modules/_game.scss               | 197 +-----------------
 source/style/modules/game/_mwo.scss           |  48 +++++
 source/style/modules/game/_tfw.scss           | 155 ++++++++++++++
 source/style/ui.scss                          |   2 +
 source/templates/hippie/game.liquid           |  15 ++
 .../hippie/partials/game-menu.liquid          |  15 ++
 10 files changed, 261 insertions(+), 221 deletions(-)
 create mode 100644 source/data/menu.json
 rename source/screens/demo/examples/game/{fpv.liquid => mwo.liquid} (96%)
 rename source/screens/demo/examples/game/{new.liquid => tfw.liquid} (94%)
 create mode 100644 source/style/modules/game/_mwo.scss
 create mode 100644 source/style/modules/game/_tfw.scss
 create mode 100644 source/templates/hippie/game.liquid
 create mode 100644 source/templates/hippie/partials/game-menu.liquid

diff --git a/source/data/menu.json b/source/data/menu.json
new file mode 100644
index 0000000..f437630
--- /dev/null
+++ b/source/data/menu.json
@@ -0,0 +1,18 @@
+[
+	{
+		"text": "New",
+		"href": "#new"
+	},
+	{
+		"text": "Continue",
+		"href": "#continue"
+	},
+	{
+		"text": "Settings",
+		"href": "#options"
+	},
+	{
+		"text": "Leave",
+		"href": "/"
+	}
+]
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid
index 34e00e7..c29a2ed 100644
--- a/source/screens/demo/examples/game/menu.liquid
+++ b/source/screens/demo/examples/game/menu.liquid
@@ -7,20 +7,7 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
-<div class="sec_main_center">
-	<nav role="doc-toc">
-		<hgroup>
-			<h1>Game - TFW</h1>
-			<p>Additional name</p>
-		</hgroup>
-		<ul class="link">
-			<li><a href="./new.html">Neues Spiel</a></li>
-			<li><a href="#continue">Spiel fortsetzen</a></li>
-			<li><a href="#options">Einstellungen</a></li>
-			<li><a href="#quit">Spiel beenden</a></li>
-		</ul>
-	</nav>
-</div>
+{% render 'hippie/partials/game-menu.liquid', links: menu %}
 <footer>
 	{% brand 'brand', 'last' %}
 	<p>Marke</p>
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/mwo.liquid
similarity index 96%
rename from source/screens/demo/examples/game/fpv.liquid
rename to source/screens/demo/examples/game/mwo.liquid
index a4c61a6..ccce96e 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/mwo.liquid
@@ -1,10 +1,10 @@
 ---
-title: FPV
+title: MWO
 tags:
 - game
 ---
-{% assign bodyClass = 'body_fpv' -%}
-{% layout 'hippie/simple.liquid' %}
+{% assign bodyClass = 'body_mwo' -%}
+{% layout 'hippie/game.liquid' %}
 
 {% block links %}
 {{ block.super -}}
@@ -83,5 +83,4 @@ tags:
 		canvas.height = window.innerHeight;
 	});
 </script>
-
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/new.liquid b/source/screens/demo/examples/game/tfw.liquid
similarity index 94%
rename from source/screens/demo/examples/game/new.liquid
rename to source/screens/demo/examples/game/tfw.liquid
index a799fef..4736098 100644
--- a/source/screens/demo/examples/game/new.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -1,8 +1,10 @@
 ---
 title: TFW
+tags:
+- game
 ---
 {% assign bodyClass = 'body_tfw' -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie/game.liquid' %}
 
 {% block body %}
 <header class="io">
@@ -106,12 +108,6 @@ title: TFW
 </div>
 {% endblock %}
 
-{% block assets %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
-
 {%- block script %}
 {{ block.super -}}
 <script>
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 7ad3f4d..0c679d5 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -3,35 +3,9 @@
 
 @use "../hippie-style/hippie";
 
-$colors: hippie.$color_palette;
-$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
-
-@function getColor($index, $colors) {
-	$color_keys: map.keys($colors);
-	$key_count: list.length($color_keys);
-	$cycled_index: ($index % $key_count) + 1;
-	$key: list.nth($color_keys, $cycled_index);
-	@return map.get($colors, $key);
-}
-
-@mixin fadeColors($steps, $colors) {
-	@keyframes fadeColor {
-		@for $i from 1 through list.length($steps) {
-			$percent: list.nth($steps, $i);
-			$color: getColor($i - 1, $colors);
-
-			#{$percent}% {
-				background-color: $color;
-			}
-		}
-	}
-
-	animation: fadeColor 16s infinite linear;
-}
-
 .body_menu {
 	@extend .h_full_view;
-	background-color: hotpink;
+	background-color: hippie.basic_color(delta);
 
 	footer {
 		@extend .pos_abs;
@@ -54,172 +28,3 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 		}
 	}
 }
-
-.body_fpv {
-	@extend .h_full_view;
-
-	canvas {
-		@include fadeColors($steps, $colors);
-
-		display: block;
-		cursor: none;
-	}
-
-	.controls {
-		position: fixed;
-		top: 0;
-		left: 0;
-		border-radius: hippie.$radius_basic;
-	}
-}
-
-.body_tfw {
-	@extend .h_full_view;
-
-	display: flex;
-	flex-flow: column nowrap;
-
-	th,
-	.important {
-		color: white;
-		background-color: hippie.basic_color(echo);
-	}
-
-	.important {
-		padding: hippie.$space_half;
-		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
-		font-weight: bold;
-	}
-
-	.subtle {
-		@extend .txt_smaller;
-
-		color: hippie.$color_darkest;
-		text-transform: uppercase;
-	}
-
-	.success {
-		color: hippie.basic_color(alpha);
-	}
-
-	& > header {
-		& > button.active {
-			border-color: hippie.$color_highlight_basic;
-			color: hippie.$color_highlight_basic;
-			background-color: hippie.$color_action_basic;
-		}
-
-		& > button:not(:first-child, :last-child, :nth-child(2)) {
-			flex: 1;
-		}
-	}
-
-	& > div {
-		display: flex;
-		flex-flow: column nowrap;
-		flex: auto;
-		min-height: 0;
-
-		& > main {
-			display: flex;
-			flex-flow: row nowrap;
-			flex: auto;
-			gap: hippie.$space_double;
-			min-height: 0;
-
-			& > div:first-child {
-				flex: 1;
-			}
-
-			& > div:last-child {
-				flex: 2;
-			}
-
-			& > div:nth-child(2) {
-				flex: 4;
-				display: flex;
-				flex-flow: column nowrap;
-				gap: hippie.$space_basic;
-				min-height: 0;
-
-				div:first-child {
-					flex: auto;
-					overflow: auto;
-					min-height: 0;
-				}
-
-				div:last-child {
-					flex: 0 0 auto;
-				}
-			}
-
-			nav {
-				& > *:not(:last-child) {
-					margin-bottom: hippie.$space_basic;
-				}
-
-				input:not([type="checkbox"], [type="range"]) {
-					@extend .input_io;
-				}
-			}
-
-			table {
-				table-layout: fixed;
-				width: 100%;
-				margin: 0;
-
-				th {
-					text-align: center;
-				}
-
-				td {
-					position: relative;
-					height: 4em;
-					vertical-align: top;
-
-					span {
-						z-index: map.get(hippie.$z-indexes, "content-bottom");
-						position: relative;
-						color: white;
-					}
-
-					canvas {
-						z-index: map.get(hippie.$z-indexes, "default");
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: 100%;
-						height: 100%;
-					}
-
-					&:last-child {
-						text-align: center;
-						vertical-align: middle;
-					}
-				}
-
-				.l {
-					width: 30%;
-				}
-
-				.q {
-					width: 50%;
-				}
-
-				.t, .s {
-					width: 20%;
-				}
-			}
-		}
-
-		& > footer {
-			justify-content: space-between;
-			padding: hippie.$space_basic;
-
-			& > button:last-child {
-				//margin-left: auto;
-				padding-inline: 2em;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/source/style/modules/game/_mwo.scss b/source/style/modules/game/_mwo.scss
new file mode 100644
index 0000000..89259ff
--- /dev/null
+++ b/source/style/modules/game/_mwo.scss
@@ -0,0 +1,48 @@
+@use 'sass:list';
+@use "sass:map";
+
+@use "../../hippie-style/hippie";
+
+$colors: hippie.$color_palette;
+$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
+
+@function getColor($index, $colors) {
+	$color_keys: map.keys($colors);
+	$key_count: list.length($color_keys);
+	$cycled_index: ($index % $key_count) + 1;
+	$key: list.nth($color_keys, $cycled_index);
+	@return map.get($colors, $key);
+}
+
+@mixin fadeColors($steps, $colors) {
+	@keyframes fadeColor {
+		@for $i from 1 through list.length($steps) {
+			$percent: list.nth($steps, $i);
+			$color: getColor($i - 1, $colors);
+
+			#{$percent}% {
+				background-color: $color;
+			}
+		}
+	}
+
+	animation: fadeColor 16s infinite linear;
+}
+
+.body_mwo {
+	@extend .h_full_view;
+
+	canvas {
+		@include fadeColors($steps, $colors);
+
+		display: block;
+		cursor: none;
+	}
+
+	.controls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		border-radius: hippie.$radius_basic;
+	}
+}
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
new file mode 100644
index 0000000..8931705
--- /dev/null
+++ b/source/style/modules/game/_tfw.scss
@@ -0,0 +1,155 @@
+@use 'sass:list';
+@use "sass:map";
+
+@use "../../hippie-style/hippie";
+
+.body_tfw {
+	@extend .h_full_view;
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	th,
+	.important {
+		color: white;
+		background-color: hippie.basic_color(echo);
+	}
+
+	.important {
+		padding: hippie.$space_half;
+		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
+		font-weight: bold;
+	}
+
+	.subtle {
+		@extend .txt_smaller;
+
+		color: hippie.$color_darkest;
+		text-transform: uppercase;
+	}
+
+	.success {
+		color: hippie.basic_color(alpha);
+	}
+
+	& > header {
+		& > button.active {
+			border-color: hippie.$color_highlight_basic;
+			color: hippie.$color_highlight_basic;
+			background-color: hippie.$color_action_basic;
+		}
+
+		& > button:not(:first-child, :last-child, :nth-child(2)) {
+			flex: 1;
+		}
+	}
+
+	& > div {
+		display: flex;
+		flex-flow: column nowrap;
+		flex: auto;
+		min-height: 0;
+
+		& > main {
+			display: flex;
+			flex-flow: row nowrap;
+			flex: auto;
+			gap: hippie.$space_double;
+			min-height: 0;
+
+			& > div:first-child {
+				flex: 1;
+			}
+
+			& > div:last-child {
+				flex: 2;
+			}
+
+			& > div:nth-child(2) {
+				flex: 4;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				div:first-child {
+					flex: auto;
+					overflow: auto;
+					min-height: 0;
+				}
+
+				div:last-child {
+					flex: 0 0 auto;
+				}
+			}
+
+			nav {
+				& > *:not(:last-child) {
+					margin-bottom: hippie.$space_basic;
+				}
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+			}
+
+			table {
+				table-layout: fixed;
+				width: 100%;
+				margin: 0;
+
+				th {
+					text-align: center;
+				}
+
+				td {
+					position: relative;
+					height: 4em;
+					vertical-align: top;
+
+					span {
+						z-index: map.get(hippie.$z-indexes, "content-bottom");
+						position: relative;
+						color: white;
+					}
+
+					canvas {
+						z-index: map.get(hippie.$z-indexes, "default");
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+					}
+
+					&:last-child {
+						text-align: center;
+						vertical-align: middle;
+					}
+				}
+
+				.l {
+					width: 30%;
+				}
+
+				.q {
+					width: 50%;
+				}
+
+				.t, .s {
+					width: 20%;
+				}
+			}
+		}
+
+		& > footer {
+			justify-content: space-between;
+			padding: hippie.$space_basic;
+
+			& > button:last-child {
+				//margin-left: auto;
+				padding-inline: 2em;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f396598..97d7c8f 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -9,6 +9,8 @@
 @use "modules/ui/gallery_module";
 @use "modules/ui/windows_module";
 @use "modules/ui/table_module";
+@use "modules/game/mwo";
+@use "modules/game/tfw";
 
 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;
diff --git a/source/templates/hippie/game.liquid b/source/templates/hippie/game.liquid
new file mode 100644
index 0000000..37c890b
--- /dev/null
+++ b/source/templates/hippie/game.liquid
@@ -0,0 +1,15 @@
+{% assign pageId = page.fileSlug -%}
+{% layout 'hippie/default.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block assets %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
diff --git a/source/templates/hippie/partials/game-menu.liquid b/source/templates/hippie/partials/game-menu.liquid
new file mode 100644
index 0000000..c59d802
--- /dev/null
+++ b/source/templates/hippie/partials/game-menu.liquid
@@ -0,0 +1,15 @@
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<hgroup>
+			<h1>{{ title | default: 'Game title' }}</h1>
+			<p>{{ additional | default: 'Additional name' }}</p>
+		</hgroup>
+		<ul class="link">
+			{% for link in links %}
+				<li>
+					<a href="{{ link.href }}">{{ link.text }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
+</div>

From a67a36decb4d32dfb047f5f4fbcbb06209e3a573 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 09:59:43 +0200
Subject: [PATCH 227/253] fix: randomFloatFrom now correctly stays in range

---
 source/code/hippie/app.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 2b46f36..e9b5dd3 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -1,3 +1,5 @@
+/* jshint strict: false */
+
 // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
 // Benennung und Beschreibungen verbessern.
 
@@ -424,10 +426,10 @@ function randomIntFrom(min, max, pos = 0) {
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 }
 
-function randomFloatFrom(min, max, dec = 0) {
+function randomFloatFrom(min, max, dec = 1) {
 	dec = Math.pow(10, dec);
 
-	return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
+	return Math.round((Math.random() * (max - min) + min) * dec) / dec;
 }
 
 /**

From afcb06a8088498b6e69f95d0d98edb854706b7b8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 10:22:04 +0200
Subject: [PATCH 228/253] feat: Change styles for game

---
 source/screens/demo/examples/game/tfw.liquid | 47 ++++++++--------
 source/style/modules/game/_tfw.scss          | 58 +++++++++++++++-----
 2 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid
index 4736098..8dfb6b6 100644
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -21,17 +21,20 @@ tags:
 	<button data-action="ready">Ready Room</button>
 	<button data-action="next">&gt;</button>
 </header>
-<div>
-	<main>
+<div class="flex_auto">
+	<main class="flex_auto">
 		<nav>
 			<div class="important">Filter</div>
 			<input placeholder="Search" type="text">
-			<div>
-				<p>Quest type</p>
-				<menu>
-					<li></li>
-				</menu>
-			</div>
+			<select name="type">
+				<option value="" selected>Type</option>
+				<option value="all">All</option>
+				<option value="assasin">Assasination</option>
+				<option value="loot">Looting</option>
+				<option value="extract">Extract</option>
+				<option value="fetch">Fetch</option>
+				<option value="kill">Kill</option>
+			</select>
 		</nav>
 		<div>
 			<div>
@@ -47,17 +50,15 @@ tags:
 						<th>Type</th>
 					</tr>
 					<tr>
-						<td>
+						<td class="background">
 							<span>Scorched Earth</span>
-							<div class="background"></div>
 						</td>
 						<td>...</td>
 						<td class="subtle">Available</td>
 					</tr>
 					<tr>
-						<td>
+						<td class="background">
 							<span>Location name</span>
-							<div id="location" class="background"></div>
 						</td>
 						<td>...</td>
 						<td class="subtle">Available</td>
@@ -75,16 +76,12 @@ tags:
 						<th colspan="3">Active quests (Max.: 4)</th>
 					</tr>
 					<tr>
-						<td>
-							<div class="background"></div>
-						</td>
+						<td class="background"></td>
 						<td>King Of Kings</td>
 						<td class="subtle">Active</td>
 					</tr>
 					<tr>
-						<td>
-							<div class="background"></div>
-						</td>
+						<td class="background"></td>
 						<td>Garage Days Pt. 1</td>
 						<td class="subtle success">Complete</td>
 					</tr>
@@ -92,7 +89,9 @@ tags:
 			</div>
 		</div>
 		<div>
-			<h2>King Of Kings</h2>
+			<div class="background">
+				<h2>King Of Kings</h2>
+			</div>
 			<p>A hijacked medium mech dubbed the "Rat King" ...</p>
 			<hr class="dotted">
 			<p>Collect Rat King residue.</p>
@@ -112,7 +111,7 @@ tags:
 {{ block.super -}}
 <script>
 	const menu = document.querySelector('body > header');
-	const locations = document.querySelectorAll('main table .background');
+	const placeholder = document.querySelectorAll('.background');
 
 	menu.addEventListener('click', (event) => {
 		const buttons = menu.querySelectorAll('button');
@@ -127,15 +126,17 @@ tags:
 		}
 	});
 
-	locations.forEach(element => {
-		const blur = randomIntFrom(0, 4);
+	placeholder.forEach(element => {
+		const hue = randomIntFrom(0, 360);
 		const grayscale = randomFloatFrom(0, 1);
 
+		console.log(hue, grayscale);
+
 		new RandomPixelCanvas(element, {
 			width: Math.floor(element.parentElement.clientWidth),
 			height: Math.floor(element.parentElement.clientHeight),
 			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') blur(' + blur + 'px)'
+			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
 		});
 	});
 </script>
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 8931705..6e92dde 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -9,6 +9,21 @@
 	display: flex;
 	flex-flow: column nowrap;
 
+	.flex_auto {
+		display: flex;
+		flex: auto;
+		min-height: 0;
+	}
+
+	th,
+	.important,
+	.subtle,
+	button,
+	input[type="text"],
+	select {
+		text-transform: uppercase;
+	}
+
 	th,
 	.important {
 		color: white;
@@ -25,13 +40,32 @@
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
-		text-transform: uppercase;
 	}
 
 	.success {
 		color: hippie.basic_color(alpha);
 	}
 
+	.background {
+		position: relative;
+		overflow: hidden;
+
+		*:not(canvas) {
+			z-index: map.get(hippie.$z-indexes, "content-bottom");
+			position: relative;
+			color: white;
+		}
+
+		canvas {
+			z-index: map.get(hippie.$z-indexes, "default");
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
 	& > header {
 		& > button.active {
 			border-color: hippie.$color_highlight_basic;
@@ -45,21 +79,11 @@
 	}
 
 	& > div {
-		display: flex;
 		flex-flow: column nowrap;
-		flex: auto;
-		min-height: 0;
 
 		& > main {
-			display: flex;
 			flex-flow: row nowrap;
-			flex: auto;
 			gap: hippie.$space_double;
-			min-height: 0;
-
-			& > div:first-child {
-				flex: 1;
-			}
 
 			& > div:last-child {
 				flex: 2;
@@ -84,13 +108,19 @@
 			}
 
 			nav {
-				& > *:not(:last-child) {
-					margin-bottom: hippie.$space_basic;
-				}
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
 
 				input:not([type="checkbox"], [type="range"]) {
 					@extend .input_io;
 				}
+
+				select {
+					@extend .io_select;
+				}
 			}
 
 			table {

From e698161a2d9c2192441899f881cfd5a0fe87a34d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 11:11:32 +0200
Subject: [PATCH 229/253] refactor: Improve for...of

---
 source/code/hippie/app.js                    | 10 +++++-----
 source/screens/demo/examples/ui/table.liquid |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index e9b5dd3..e68fa40 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -192,13 +192,13 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 		el.innerHTML = elContent + text;
 		el.setAttribute('href', 'mailto:' + mailString + topic);
 	} else {
-		const els = document.getElementsByClassName(tag.slice(1));
+		const elements = document.getElementsByClassName(tag.slice(1));
 
-		for (let el of els) {
-			const elContent = el.innerHTML;
+		for (const element of elements) {
+			const content = element.innerHTML;
 
-			el.innerHTML = elContent + text;
-			el.setAttribute('href', 'mailto:' + mailString + topic);
+			element.innerHTML = content + text;
+			element.setAttribute('href', 'mailto:' + mailString + topic);
 		}
 	}
 }
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index bd0bbbb..fbd5d74 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -231,7 +231,7 @@ tags:
 		const groupTarget = event.target.closest('[name="group"]');
 
 		if (rowTarget && event.button === 0) {
-			for (row of rows) {
+			for (const row of rows) {
 				row.classList.remove('active');
 			}
 
@@ -296,7 +296,7 @@ tags:
 		const cells = content.querySelectorAll('th:first-child');
 		const isHidden = cells[0].classList.contains('di_none');
 
-		for (cell of cells) {
+		for (const cell of cells) {
 			if (isHidden) {
 				cell.classList.remove('di_none');
 			} else {

From aa408774699c02b50c3d7cab06f70a6af9c47f1e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 11:17:54 +0200
Subject: [PATCH 230/253] feat: Add a menu class to game

Use event delegation and the data-action attribute.
---
 source/screens/demo/examples/game/tfw.liquid | 47 ++++++++++++++------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid
index 8dfb6b6..983aaa6 100644
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -113,25 +113,44 @@ tags:
 	const menu = document.querySelector('body > header');
 	const placeholder = document.querySelectorAll('.background');
 
-	menu.addEventListener('click', (event) => {
-		const buttons = menu.querySelectorAll('button');
-		const buttonTarget = event.target.closest('button');
-
-		if (buttonTarget && event.button === 0) {
-			for (button of buttons) {
-				button.classList.remove('active');
-			}
-
-			buttonTarget.classList.add('active');
+	class Menu {
+		constructor(element) {
+			// this._elem = element;
+			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
 		}
-	});
+
+		escape() {
+			console.log('escape');
+		}
+
+		previous() {
+			console.log('previous');
+		}
+
+		quest() {
+			console.log('quest');
+		}
+
+		onClick(event) {
+			console.debug(event.target);
+			const action = event.target.dataset.action;
+			const siblings = event.target.parentElement.querySelectorAll('button');
+
+			if (action && event.button === 0) {
+				for (const sibling of siblings) {
+					sibling.classList.remove('active');
+				}
+
+				event.target.classList.add('active');
+				this[action]();
+			}
+		};
+	}
 
 	placeholder.forEach(element => {
 		const hue = randomIntFrom(0, 360);
 		const grayscale = randomFloatFrom(0, 1);
 
-		console.log(hue, grayscale);
-
 		new RandomPixelCanvas(element, {
 			width: Math.floor(element.parentElement.clientWidth),
 			height: Math.floor(element.parentElement.clientHeight),
@@ -139,5 +158,7 @@ tags:
 			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
 		});
 	});
+
+	new Menu(menu);
 </script>
 {% endblock %}
\ No newline at end of file

From ba96b889da5689effb469dc49613db079efc82b6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 11:31:52 +0200
Subject: [PATCH 231/253] refactor: Mouse button of event

---
 source/screens/demo/examples/ui/table.liquid | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index fbd5d74..4c25154 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -230,7 +230,9 @@ tags:
 		const rowTarget = event.target.closest('tr');
 		const groupTarget = event.target.closest('[name="group"]');
 
-		if (rowTarget && event.button === 0) {
+		if (event.button !== 0) return;
+
+		if (rowTarget) {
 			for (const row of rows) {
 				row.classList.remove('active');
 			}
@@ -238,7 +240,7 @@ tags:
 			rowTarget.classList.add('active');
 		}
 
-		if (groupTarget && event.button === 0) {
+		if (groupTarget) {
 			console.log('group');
 			let currentRow = groupTarget.closest('tr').nextElementSibling;
 

From 019e25945edc195d687fa2cb17aafe724f90b49f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 12:12:21 +0200
Subject: [PATCH 232/253] feat: Change menu for game

- Add next and previous behaviour
- Separate views, directions and actions
---
 source/screens/demo/examples/game/tfw.liquid | 60 +++++++++++++-------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid
index 983aaa6..c97595f 100644
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -9,17 +9,17 @@ tags:
 {% block body %}
 <header class="io">
 	<button data-action="escape">☰</button>
-	<button data-action="previous">&lt;</button>
-	<button data-action="quest">Quests</button>
-	<button data-action="region">Regions</button>
-	<button data-action="vendor">Vendors</button>
-	<button data-action="manufacture">Manufacture</button>
-	<button data-action="character">Characters</button>
-	<button data-action="stash">Stash</button>
-	<button data-action="secret">Secret Storage</button>
-	<button data-action="squad">Squads</button>
-	<button data-action="ready">Ready Room</button>
-	<button data-action="next">&gt;</button>
+	<button data-direction="previous">&lt;</button>
+	<button data-view="quest">Quests</button>
+	<button data-view="region">Regions</button>
+	<button data-view="vendor">Vendors</button>
+	<button data-view="manufacture">Manufacture</button>
+	<button data-view="character">Characters</button>
+	<button data-view="stash">Stash</button>
+	<button data-view="secret">Secret Storage</button>
+	<button data-view="squad">Squads</button>
+	<button data-view="ready">Ready Room</button>
+	<button data-direction="next">&gt;</button>
 </header>
 <div class="flex_auto">
 	<main class="flex_auto">
@@ -115,7 +115,7 @@ tags:
 
 	class Menu {
 		constructor(element) {
-			// this._elem = element;
+			this._element = element;
 			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
 		}
 
@@ -123,27 +123,47 @@ tags:
 			console.log('escape');
 		}
 
-		previous() {
-			console.log('previous');
-		}
-
 		quest() {
 			console.log('quest');
 		}
 
 		onClick(event) {
-			console.debug(event.target);
 			const action = event.target.dataset.action;
-			const siblings = event.target.parentElement.querySelectorAll('button');
+			const view = event.target.dataset.view;
+			const direction = event.target.dataset.direction;
+			const siblings = this._element.querySelectorAll('button[data-view]');
 
-			if (action && event.button === 0) {
+			if (event.button !== 0) return;
+
+			if (direction) {
+				const current = this._element.querySelector('.active');
+				let view = undefined;
+				console.log(direction, current);
+
+				if (current === null) return;
+
+				view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling;
+
+				current.classList.remove('active');
+
+				if (view.dataset.view) {
+					view.classList.add('active');
+				} else {
+					view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
+					view.classList.add('active');
+				}
+			}
+
+			if (view) {
 				for (const sibling of siblings) {
 					sibling.classList.remove('active');
 				}
 
 				event.target.classList.add('active');
-				this[action]();
+				this[view]();
 			}
+
+			if (action) this[action]();
 		};
 	}
 

From 46491f8df745df27438c308bbb132ebea4d36807 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 13:03:59 +0200
Subject: [PATCH 233/253] feat: Change game screen and menu class

- Add default option
- Add init and changeView
- Change style to be more specific
- Rename constants and variables
---
 source/screens/demo/examples/game/tfw.liquid | 66 ++++++++++++++------
 source/style/modules/game/_tfw.scss          | 14 ++---
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid
index c97595f..ca55174 100644
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -21,8 +21,8 @@ tags:
 	<button data-view="ready">Ready Room</button>
 	<button data-direction="next">&gt;</button>
 </header>
-<div class="flex_auto">
-	<main class="flex_auto">
+<div id="viewQuest" class="view">
+	<main>
 		<nav>
 			<div class="important">Filter</div>
 			<input placeholder="Search" type="text">
@@ -105,6 +105,8 @@ tags:
 		<button data-action="accept">Accept</button>
 	</footer>
 </div>
+<div id="viewRegion" class="view"></div>
+<div id="viewVendor" class="view"></div>
 {% endblock %}
 
 {%- block script %}
@@ -114,44 +116,70 @@ tags:
 	const placeholder = document.querySelectorAll('.background');
 
 	class Menu {
-		constructor(element) {
+		constructor(element, options = {}) {
 			this._element = element;
+			this._siblings = element.querySelectorAll('button[data-view]');
+			this.default = options.default || 'quest';
+
 			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
+
+			this.#init();
 		}
 
 		escape() {
 			console.log('escape');
 		}
 
-		quest() {
-			console.log('quest');
+		#init() {
+			const currentBtn = Array.from(this._siblings).find(
+				el => el.dataset.view === this.default
+			);
+
+			currentBtn.classList.add('active');
+			this.changeView(this.default);
+		}
+
+		changeView(type) {
+			console.debug(type);
+			const id = 'view' + capitalizeFirstLetter(type);
+			const views = document.querySelectorAll('.view');
+
+			for (const view of views) {
+				view.style.display = 'none';
+			}
+
+			document.getElementById(id).style.display = 'flex';
 		}
 
 		onClick(event) {
+			const siblings = this._siblings;
 			const action = event.target.dataset.action;
 			const view = event.target.dataset.view;
 			const direction = event.target.dataset.direction;
-			const siblings = this._element.querySelectorAll('button[data-view]');
 
 			if (event.button !== 0) return;
 
 			if (direction) {
-				const current = this._element.querySelector('.active');
-				let view = undefined;
-				console.log(direction, current);
+				const currentBtn = this._element.querySelector('.active');
+				let newButton, newView = undefined;
 
-				if (current === null) return;
+				if (currentBtn === null) return;
 
-				view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling;
-
-				current.classList.remove('active');
-
-				if (view.dataset.view) {
-					view.classList.add('active');
+				if (direction === 'next') {
+					newButton = currentBtn.nextElementSibling;
+					newView = currentBtn.nextElementSibling.dataset.view;
 				} else {
-					view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
-					view.classList.add('active');
+					newButton = currentBtn.previousElementSibling;
+					newView = currentBtn.previousElementSibling.dataset.view;
 				}
+
+				if (!newButton.dataset.view) {
+					newButton = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
+				}
+
+				currentBtn.classList.remove('active');
+				newButton.classList.add('active');
+				this.changeView(newView);
 			}
 
 			if (view) {
@@ -159,8 +187,8 @@ tags:
 					sibling.classList.remove('active');
 				}
 
+				this.changeView(view);
 				event.target.classList.add('active');
-				this[view]();
 			}
 
 			if (action) this[action]();
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 6e92dde..289d22b 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -9,12 +9,6 @@
 	display: flex;
 	flex-flow: column nowrap;
 
-	.flex_auto {
-		display: flex;
-		flex: auto;
-		min-height: 0;
-	}
-
 	th,
 	.important,
 	.subtle,
@@ -78,12 +72,18 @@
 		}
 	}
 
-	& > div {
+	.view {
+		flex: auto;
+		display: flex;
 		flex-flow: column nowrap;
+		min-height: 0;
 
 		& > main {
+			flex: auto;
+			display: flex;
 			flex-flow: row nowrap;
 			gap: hippie.$space_double;
+			min-height: 0;
 
 			& > div:last-child {
 				flex: 2;

From d5dfacb9a9072523098d49080a3a4d86b3b48715 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 13:57:48 +0200
Subject: [PATCH 234/253] chore: Resolve problems

- Missing labels
- Deprecated attributes
- Missing attribute alt
- Redundant info
---
 CHANGELOG.md                                  | 104 +++++++++---------
 source/screens/demo/basics.liquid             |   6 +-
 source/screens/demo/examples/ui/table.liquid  |  32 +++---
 .../hippie/partials/gate-list.liquid          |   2 +-
 .../hippie/partials/placeholder-flag.liquid   |   2 +-
 5 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c9dd37..4e82455 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,52 +1,52 @@
-| Commit | Version | Description |
-| :--- | :----: | :--- |
-| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again |
-| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content |
-| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | |
-| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | |
-| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard |
-| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | |
-| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | |
-| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | |
-| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | |
-| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | |
-| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | |
-| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | |
-| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | |
-| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage |
-| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | |
-| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | |
-| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | |
-| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | |
-| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update |
-| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | |
-| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables |
-| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | |
-| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | |
-| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | |
-| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | |
-| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | |
-| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | |
-| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | |
-| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | |
-| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | |
-| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | |
-| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | |
-| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | |
-| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | |
-| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | |
-| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules |
-| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | |
-| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | |
-| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | |
-| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | |
-| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | |
-| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery |
-| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home |
-| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | |
-| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | |
-| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | |
-| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | |
-| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | |
-| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty |
-| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | |
\ No newline at end of file
+| Commit                                   | Version | Description                                     |
+|:-----------------------------------------|:-------:|:------------------------------------------------|
+| 6095870ce33fd3775718a1de3d33f604fd0630ab |  0.4.2  | Javascript again                                |
+| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 |  0.5.0  | Changes to content                              |
+| e2bbe9273a292a3806de1599f752258a2721d067 |  0.5.1  |                                                 |
+| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 |  0.5.2  |                                                 |
+| 371cb450f81cd0d692c9005952af35ec066e01e1 |  0.6.0  | New es6 coding standard                         |
+| 175816c3595d783e7d8b48f5336fbdd54dae145b |  0.6.1  |                                                 |
+| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 |  0.6.2  |                                                 |
+| abeb843718988fab978de7c75d6d45806f5d35a7 |  0.6.3  |                                                 |
+| 4401761a6bec9db19293353942479aea7bb8ead1 |  0.6.4  |                                                 |
+| 83464a1cf4ba3efc6382eafb6f68f106c6650161 |  0.6.5  |                                                 |
+| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 |  0.6.6  |                                                 |
+| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d |  0.6.7  |                                                 |
+| 830037f5e5237d33ad66fe89ba45167a62d87829 |  0.6.8  |                                                 |
+| d205031fff29ee4d48251e30b17090143ae5458c |  0.7.0  | switched to style submodule usage               |
+| d18254b61d87eb3d09d17b93783117dad7d13686 |  0.7.1  |                                                 |
+| 9b9b0cb1c631273f574d3cd7618bd799f561db6c |  0.7.2  |                                                 |
+| 11b30671d4948dfd30b7da14fe7295f386b54257 |  0.7.3  |                                                 |
+| 767b3024fa3bbededab2a8d665b4b35b55854a1c |  0.7.4  |                                                 |
+| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d |  0.8.0  | changes to license file and submodule update    |
+| 8567604ea6b129ded8b0e6108362a30d039235a7 |  0.8.1  |                                                 |
+| b2ea5b01aa47783b5f797310e16f1897e1839eb9 |  0.9.0  | Requirements updated and new nunjucks variables |
+| df064b8a942f00dd3277a9dde696e91324dfd166 |  0.9.1  |                                                 |
+| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba |  0.9.2  |                                                 |
+| 84957f75a017d5d06a32874282d9eb9f3d537534 |  0.9.3  |                                                 |
+| 489786aadc30bb589be769fe627389611c4f71f5 |  0.9.4  |                                                 |
+| 003a1159231241140a262ae67bb1236978b22ec0 |  0.9.5  |                                                 |
+| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 |  0.9.6  |                                                 |
+| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b |  0.9.7  |                                                 |
+| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 |  0.9.8  |                                                 |
+| 06ba1113929183f51e8501d440c950e4b4d9f0d2 |  0.9.9  |                                                 |
+| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10  |                                                 |
+| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11  |                                                 |
+| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12  |                                                 |
+| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13  |                                                 |
+| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14  |                                                 |
+| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0  | Added card and portal modules                   |
+| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1  |                                                 |
+| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2  |                                                 |
+| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3  |                                                 |
+| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4  |                                                 |
+| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5  |                                                 |
+| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0  | logPerf without JQuery                          |
+| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0  | Migration to new home                           |
+| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1  |                                                 |
+| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2  |                                                 |
+| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3  |                                                 |
+| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4  |                                                 |
+| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5  |                                                 |
+| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0  | Introduced 11ty                                 |
+| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1  |                                                 |
\ No newline at end of file
diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index f1c8560..d607592 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -208,7 +208,7 @@ order: 2
 		<figure class="js_pop">
 			<figcaption>Fahne</figcaption>
 			{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
-			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg 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"/>
@@ -243,7 +243,7 @@ order: 2
 	<article>
 		<h1 id="textlevel">Textebene</h1>
 		<h2>Verweise</h2>
-		<p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
+		<p id="links">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>
@@ -948,7 +948,7 @@ order: 2
 		<div class="box_placeholder"></div>
 		<hr class="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"
+			<svg 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'/>
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 4c25154..54b12ff 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -25,7 +25,7 @@ tags:
 					<i class="bi bi-hash"></i>
 				</button>
 				<div class="group_nav">
-					<select id="sltNum" name="position-number">
+					<select id="sltNum" name="position-number" aria-label="numbering">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>
 						<option value="latin">ABC</option>
@@ -62,26 +62,26 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td><input class="input_io" name="number" type="text"></td>
-		<td><input class="input_io" name="name" type="text"></td>
+		<td><input class="input_io" name="number" aria-label="number" type="text"></td>
+		<td><input class="input_io" name="name" aria-label="name" type="text"></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
-		<td><input class="input_io" name="amount" type="number"></td>
+		<td><input class="input_io" name="amount" aria-label="amount" type="number"></td>
 		<td>
-			<select class="io_select" name="units">
+			<select class="io_select" name="unit" aria-label="unit">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td><input class="input_io" name="price" type="text"></td>
+		<td><input class="input_io" name="price" aria-label="price" type="text"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -97,7 +97,7 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
@@ -105,11 +105,11 @@ tags:
 		<td class="rigid"></td>
 		<td></td>
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
-		<td><input name="amount" type="number"></td>
+		<td><input name="amount" aria-label="number" type="number"></td>
 		<td>
-			<select name="units">
+			<select name="unit" aria-label="unit">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
@@ -131,13 +131,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
 		<td colspan="7">
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
 		<td class="io">
 			<nav>
@@ -151,7 +151,7 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
@@ -314,7 +314,7 @@ tags:
 		const clone = cloneRow();
 		const viewportHeight = window.innerHeight;
 		const elementActive = tbodyPosition.querySelector('tr.active');
-		let elementNew = undefined;
+		let elementNew;
 		let elementBound = undefined;
 
 		if (elementActive) {
diff --git a/source/templates/hippie/partials/gate-list.liquid b/source/templates/hippie/partials/gate-list.liquid
index 8c5fdea..7ef18bd 100644
--- a/source/templates/hippie/partials/gate-list.liquid
+++ b/source/templates/hippie/partials/gate-list.liquid
@@ -10,7 +10,7 @@
 			<ul class="portal__list">
 				{% for link in links %}
 					<li>
-						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16" alt="icon"/>{{ link.name }}</a>
 					</li>
 				{% endfor %}
 			</ul>
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
index 6b6b048..0534104 100644
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@@ -1,7 +1,7 @@
 {% assign height = width | divided_by: 1.6 %}
 
 {% if type == 'svg' or type == '' %}
-	<svg version="1.1" id="{{ id }}" 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">
+	<svg id="{{ id }}" 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">
 		{% comment %}<defs>
 			<filter id="turb3">
 				<feColorMatrix type="saturate" values="1" />

From 31457088dab86c3a968a91fa18b5e6da41ad0a1d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 11:04:30 +0200
Subject: [PATCH 235/253] fix: Resize behavior for clock

Use option value instead of offset of elements.
---
 source/screens/demo/examples/clock.liquid | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 57cdd7c..c8535c6 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -61,6 +61,7 @@ tags:
 			this.#resize();
 			window.addEventListener('resize', () => this.#resize());
 
+			// console.debug(this);
 			if (this.options.debug) {
 				console.group('Clock');
 				console.info('\nOptions:', this.options, '\n\n');
@@ -77,13 +78,16 @@ tags:
 					part.element.style.width = this.options.size + 'px';
 				}
 
-				part.element.width = part.element.offsetWidth;
-				part.element.height = part.element.offsetHeight;
+				// part.element.width = part.element.offsetWidth;
+				// part.element.height = part.element.offsetHeight;
+				part.element.width = this.options.size;
+				part.element.height = this.options.size;
 
 				this.draw();
 			});
 		}
 
+		// TODO: Zuweisung von shapes zu parts anpassen
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
@@ -303,7 +307,6 @@ tags:
 		}
 
 		#createContext(names) {
-			let parts = [];
 			const wrap = document.createElement('div');
 
 			wrap.style.position = 'relative';
@@ -444,6 +447,7 @@ tags:
 	clock.draw();
 
 	// TODO: Alternative mit requestAnimationFrame()
+	// TODO: Möglichkeit für Start/Stop wie bei TimeDisplay
 	setInterval(() => {
 		clock.update();
 	}, 1000);

From 9fc463393ef0f01d56c1731fd6f98600b0083ecc Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 12:15:38 +0200
Subject: [PATCH 236/253] feat: Change RandomPixelCanvas

RandomPixelCanvas is now RandomPixelPlaceholder and can also output an img element.
---
 source/code/hippie/app.js | 53 +++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index e68fa40..cbf1533 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -559,28 +559,59 @@ const delay = ms => new Promise(res => setTimeout(res, ms));
 class RandomPixelCanvas {
 	constructor(containerElement, options = {}) {
 		this.container = containerElement;
+class RandomPixelPlaceholder {
+	constructor(parent, options = {}) {
+		this.container = parent;
 		this.width = options.width || 400;
 		this.height = options.height || 300;
 		this.colors = options.colors || ['#000000', '#ffffff'];
 		this.filter = options.filter || '';
-		this.canvas = this.createCanvas();
+		this.type = options.type || 'canvas'; // 'canvas' or 'img'
+		this.element = this.createElement();
 
-		this.fillWithRandomPixels();
+		this.addContextToElement();
 	}
 
-	createCanvas() {
-		const canvas = document.createElement('canvas');
-		canvas.width = this.width;
-		canvas.height = this.height;
-		canvas.style.filter = this.filter;
+	createElement() {
+		if (this.type === 'img') {
+			const img = document.createElement('img');
+			img.style.filter = this.filter;
 
-		this.container.appendChild(canvas);
+			this.container.appendChild(img);
 
-		return canvas;
+			return img;
+		} else {
+			const canvas = document.createElement('canvas');
+			canvas.width = this.width;
+			canvas.height = this.height;
+			canvas.style.filter = this.filter;
+
+			this.container.appendChild(canvas);
+
+			return canvas;
+		}
 	}
 
-	fillWithRandomPixels() {
-		const ctx = this.canvas.getContext('2d');
+	addContextToElement() {
+		if (this.type === 'img') {
+			// Create intermediate canvas
+			const canvas = document.createElement('canvas');
+			canvas.width = this.width;
+			canvas.height = this.height;
+
+			this.fillWithRandomPixels(canvas);
+
+			// Convert canvas to image data URL and set as img src
+			this.element.src = canvas.toDataURL();
+			this.element.width = this.width;
+			this.element.height = this.height;
+		} else {
+			this.fillWithRandomPixels(this.element);
+		}
+	}
+
+	fillWithRandomPixels(canvas) {
+		const ctx = canvas.getContext('2d');
 		const imageData = ctx.createImageData(this.width, this.height);
 		const data = imageData.data;
 

From 167e35ae3371617bc57e5426ce4e3941c135780b Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 12:17:17 +0200
Subject: [PATCH 237/253] fix: Duplicate styles

---
 source/style/modules/game/_tfw.scss | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 289d22b..188660e 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -44,13 +44,13 @@
 		position: relative;
 		overflow: hidden;
 
-		*:not(canvas) {
+		*:not(canvas, img) {
 			z-index: map.get(hippie.$z-indexes, "content-bottom");
 			position: relative;
 			color: white;
 		}
 
-		canvas {
+		canvas, img {
 			z-index: map.get(hippie.$z-indexes, "default");
 			position: absolute;
 			top: 0;
@@ -133,7 +133,6 @@
 				}
 
 				td {
-					position: relative;
 					height: 4em;
 					vertical-align: top;
 
@@ -143,15 +142,6 @@
 						color: white;
 					}
 
-					canvas {
-						z-index: map.get(hippie.$z-indexes, "default");
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: 100%;
-						height: 100%;
-					}
-
 					&:last-child {
 						text-align: center;
 						vertical-align: middle;

From 38274c127710039287e5016917b77ef5fa2d7a00 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 12:18:40 +0200
Subject: [PATCH 238/253] feat: Update game screen

- Use new RandomPixelPlaceholder
- Add first event for view
---
 source/screens/demo/examples/game/tfw.liquid | 52 ++++++++++++++------
 source/style/modules/game/_tfw.scss          |  5 ++
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid
index ca55174..1365630 100644
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -25,8 +25,8 @@ tags:
 	<main>
 		<nav>
 			<div class="important">Filter</div>
-			<input placeholder="Search" type="text">
-			<select name="type">
+			<input placeholder="Search" aria-label="search" type="text">
+			<select name="type" aria-label="type">
 				<option value="" selected>Type</option>
 				<option value="all">All</option>
 				<option value="assasin">Assasination</option>
@@ -89,15 +89,17 @@ tags:
 			</div>
 		</div>
 		<div>
-			<div class="background">
-				<h2>King Of Kings</h2>
+			<div class="quest">
+				<div class="background">
+					<h2>King Of Kings</h2>
+				</div>
+				<p>A hijacked medium mech dubbed the "Rat King" ...</p>
+				<hr class="dotted">
+				<p>Collect Rat King residue.</p>
+				<hr>
+				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
+					rating</p>
 			</div>
-			<p>A hijacked medium mech dubbed the "Rat King" ...</p>
-			<hr class="dotted">
-			<p>Collect Rat King residue.</p>
-			<hr>
-			<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
-				rating</p>
 		</div>
 	</main>
 	<footer class="io">
@@ -114,6 +116,7 @@ tags:
 <script>
 	const menu = document.querySelector('body > header');
 	const placeholder = document.querySelectorAll('.background');
+	const viewQuest = document.getElementById('viewQuest');
 
 	class Menu {
 		constructor(element, options = {}) {
@@ -139,6 +142,7 @@ tags:
 			this.changeView(this.default);
 		}
 
+		// TODO: Sollte auch die Menüauswahl anpassen
 		changeView(type) {
 			console.debug(type);
 			const id = 'view' + capitalizeFirstLetter(type);
@@ -195,15 +199,35 @@ tags:
 		};
 	}
 
+	// TODO: Allgemeinere Umsetzung anstreben
+	viewQuest.addEventListener('click', (event) => {
+		const rows = viewQuest.querySelectorAll('tr');
+		const rowTarget = event.target.closest('tr');
+
+		if (event.button !== 0) return;
+
+		// TODO: Ziele unterscheiden
+		if (rowTarget) {
+			for (const row of rows) {
+				row.classList.remove('active');
+			}
+
+			rowTarget.classList.add('active');
+			document.querySelector('.quest').style.opacity = 1;
+			document.querySelector('footer button[data-action=accept]').style.display = 'inline-block';
+		}
+	});
+
 	placeholder.forEach(element => {
 		const hue = randomIntFrom(0, 360);
 		const grayscale = randomFloatFrom(0, 1);
 
-		new RandomPixelCanvas(element, {
-			width: Math.floor(element.parentElement.clientWidth),
-			height: Math.floor(element.parentElement.clientHeight),
+		new RandomPixelPlaceholder(element, {
+			width: Math.floor(element.clientWidth),
+			height: Math.floor(element.clientHeight),
 			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
+			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
+			type: 'img'
 		});
 	});
 
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 188660e..3c5e950 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -172,4 +172,9 @@
 			}
 		}
 	}
+
+	.quest,
+	footer *:not(button[data-action="back"]) {
+		opacity: 0;
+	}
 }
\ No newline at end of file

From 610e22b3c9b1b6e9c71c3d52abcd9e0c55d847da Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 12:28:19 +0200
Subject: [PATCH 239/253] feat: Update hippie-style

---
 source/style/hippie-style | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index 848754c..80a0dee 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 848754c6150df95207dffa36f388c696330cf56b
+Subproject commit 80a0deedd5ec1858c2f9f201412da282462c3a99

From b67a8a893a5e013112153c2e715d1fbd3ca2535e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 14:13:32 +0200
Subject: [PATCH 240/253] feat: Change file structure

- Move return object to named export for 11ty config
- screens is now view
- 11ty data files moved to view/_data
- templates is now view/_includes
- Both are the default directories
- data is now used as intended, for user data
- Update index to reflect filenames and structure
---
 .eleventy.js                                  | 21 +++++++++----------
 TODO.md                                       |  5 ++++-
 source/{data => view/_data}/menu.json         |  0
 source/{data => view/_data}/start.json        |  0
 .../_includes}/hippie/app.liquid              |  0
 .../_includes}/hippie/default.liquid          |  0
 .../_includes}/hippie/full.liquid             |  0
 .../_includes}/hippie/game.liquid             |  0
 .../_includes}/hippie/page.liquid             |  2 +-
 .../hippie/partials/footer-page.liquid        |  0
 .../hippie/partials/footer-pinned.liquid      |  0
 .../hippie/partials/footer-status.liquid      |  0
 .../hippie/partials/frame-header.liquid       |  0
 .../hippie/partials/frame-mode.liquid         |  0
 .../hippie/partials/frame-status.liquid       |  0
 .../hippie/partials/game-menu.liquid          |  0
 .../hippie/partials/gate-list.liquid          |  0
 .../hippie/partials/gate-simple.liquid        |  0
 .../hippie/partials/header-page.liquid        |  0
 .../hippie/partials/header-status.liquid      |  0
 .../_includes}/hippie/partials/links.liquid   |  0
 .../hippie/partials/log-assets.liquid         |  0
 .../_includes}/hippie/partials/log-log.liquid |  0
 .../hippie/partials/log-setup.liquid          |  0
 .../hippie/partials/log-start.liquid          |  0
 .../_includes}/hippie/partials/meta.liquid    |  0
 .../hippie/partials/nav-page.liquid           |  0
 .../hippie/partials/placeholder-flag.liquid   |  0
 .../hippie/partials/script-log.liquid         |  0
 .../_includes}/hippie/partials/song.liquid    |  0
 .../hippie/partials/status-coord.liquid       |  0
 .../hippie/partials/status-date.liquid        |  0
 .../hippie/partials/status-time.liquid        |  0
 .../_includes}/hippie/simple.liquid           |  0
 .../_includes}/hippie/status.liquid           |  0
 .../_includes}/hippie/world.liquid            |  0
 source/{screens => view}/demo/basics.liquid   |  0
 .../{screens => view}/demo/components.liquid  |  0
 .../demo/examples/10print.liquid              |  0
 .../demo/examples/blog.liquid                 |  0
 .../demo/examples/blog/article.md             |  0
 .../demo/examples/card.liquid                 |  0
 .../demo/examples/clock.liquid                |  0
 .../demo/examples/game/index.liquid           |  0
 .../demo/examples/game/intro.liquid           |  0
 .../demo/examples/game/menu.liquid            |  0
 .../demo/examples/game/mwo.liquid             |  0
 .../demo/examples/game/tfw.liquid             |  0
 .../{screens => view}/demo/examples/hello.md  |  0
 .../demo/examples/matrix.liquid               |  0
 .../demo/examples/portal.liquid               |  0
 .../demo/examples/songbook.liquid             |  0
 .../demo/examples/songbook/0_artist-title.md  |  0
 .../demo/examples/start.liquid                |  0
 .../demo/examples/ui/cli.liquid               |  0
 .../demo/examples/ui/drag.liquid              |  0
 .../demo/examples/ui/explorer.liquid          |  0
 .../demo/examples/ui/form.liquid              |  0
 .../demo/examples/ui/gallery.liquid           |  0
 .../demo/examples/ui/index.liquid             |  0
 .../demo/examples/ui/table.liquid             |  0
 .../demo/examples/ui/tui.liquid               |  0
 .../demo/examples/ui/windows.liquid           |  0
 source/{screens => view}/demo/index.liquid    | 12 +++++------
 .../demo/introduction.liquid                  |  0
 source/{screens => view}/demo/layouts.liquid  |  0
 .../{screens => view}/demo/pages/blank.liquid |  0
 .../demo/pages/default.liquid                 |  0
 .../demo/pages/error/304.liquid               |  0
 .../demo/pages/error/400.liquid               |  0
 .../demo/pages/error/401.liquid               |  0
 .../demo/pages/error/403.liquid               |  0
 .../demo/pages/error/404.liquid               |  0
 .../demo/pages/error/408.liquid               |  0
 .../demo/pages/error/500.liquid               |  0
 .../demo/pages/error/503.liquid               |  0
 .../demo/pages/maintenance.liquid             |  0
 .../{screens => view}/demo/pages/pages.json   |  0
 78 files changed, 21 insertions(+), 19 deletions(-)
 rename source/{data => view/_data}/menu.json (100%)
 rename source/{data => view/_data}/start.json (100%)
 rename source/{templates => view/_includes}/hippie/app.liquid (100%)
 rename source/{templates => view/_includes}/hippie/default.liquid (100%)
 rename source/{templates => view/_includes}/hippie/full.liquid (100%)
 rename source/{templates => view/_includes}/hippie/game.liquid (100%)
 rename source/{templates => view/_includes}/hippie/page.liquid (98%)
 rename source/{templates => view/_includes}/hippie/partials/footer-page.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/footer-pinned.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/footer-status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/frame-header.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/frame-mode.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/frame-status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/game-menu.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/gate-list.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/gate-simple.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/header-page.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/header-status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/links.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-assets.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-log.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-setup.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/log-start.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/meta.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/nav-page.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/placeholder-flag.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/script-log.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/song.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/status-coord.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/status-date.liquid (100%)
 rename source/{templates => view/_includes}/hippie/partials/status-time.liquid (100%)
 rename source/{templates => view/_includes}/hippie/simple.liquid (100%)
 rename source/{templates => view/_includes}/hippie/status.liquid (100%)
 rename source/{templates => view/_includes}/hippie/world.liquid (100%)
 rename source/{screens => view}/demo/basics.liquid (100%)
 rename source/{screens => view}/demo/components.liquid (100%)
 rename source/{screens => view}/demo/examples/10print.liquid (100%)
 rename source/{screens => view}/demo/examples/blog.liquid (100%)
 rename source/{screens => view}/demo/examples/blog/article.md (100%)
 rename source/{screens => view}/demo/examples/card.liquid (100%)
 rename source/{screens => view}/demo/examples/clock.liquid (100%)
 rename source/{screens => view}/demo/examples/game/index.liquid (100%)
 rename source/{screens => view}/demo/examples/game/intro.liquid (100%)
 rename source/{screens => view}/demo/examples/game/menu.liquid (100%)
 rename source/{screens => view}/demo/examples/game/mwo.liquid (100%)
 rename source/{screens => view}/demo/examples/game/tfw.liquid (100%)
 rename source/{screens => view}/demo/examples/hello.md (100%)
 rename source/{screens => view}/demo/examples/matrix.liquid (100%)
 rename source/{screens => view}/demo/examples/portal.liquid (100%)
 rename source/{screens => view}/demo/examples/songbook.liquid (100%)
 rename source/{screens => view}/demo/examples/songbook/0_artist-title.md (100%)
 rename source/{screens => view}/demo/examples/start.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/cli.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/drag.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/explorer.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/form.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/gallery.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/index.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/table.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/tui.liquid (100%)
 rename source/{screens => view}/demo/examples/ui/windows.liquid (100%)
 rename source/{screens => view}/demo/index.liquid (88%)
 rename source/{screens => view}/demo/introduction.liquid (100%)
 rename source/{screens => view}/demo/layouts.liquid (100%)
 rename source/{screens => view}/demo/pages/blank.liquid (100%)
 rename source/{screens => view}/demo/pages/default.liquid (100%)
 rename source/{screens => view}/demo/pages/error/304.liquid (100%)
 rename source/{screens => view}/demo/pages/error/400.liquid (100%)
 rename source/{screens => view}/demo/pages/error/401.liquid (100%)
 rename source/{screens => view}/demo/pages/error/403.liquid (100%)
 rename source/{screens => view}/demo/pages/error/404.liquid (100%)
 rename source/{screens => view}/demo/pages/error/408.liquid (100%)
 rename source/{screens => view}/demo/pages/error/500.liquid (100%)
 rename source/{screens => view}/demo/pages/error/503.liquid (100%)
 rename source/{screens => view}/demo/pages/maintenance.liquid (100%)
 rename source/{screens => view}/demo/pages/pages.json (100%)

diff --git a/.eleventy.js b/.eleventy.js
index 0e51f7d..a29e297 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -32,7 +32,7 @@ export default async function (eleventyConfig) {
 	});
 
 	// TODO: Demo entfernen
-	const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';
+	const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/';
 
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
@@ -130,14 +130,13 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'});
 
 	eleventyConfig.addWatchTarget('./source/style/');
-
-	return {
-		dir: {
-			input: 'source/screens',
-			output: 'build',
-			includes: '../templates',
-			data: '../data'
-		},
-		templateFormats: ['html', 'liquid', 'md', 'njk']
-	};
 }
+
+// noinspection JSUnusedGlobalSymbols
+export const config = {
+	dir: {
+		input: 'source/view',
+		output: 'build'
+	},
+	templateFormats: ['html', 'liquid', 'md', 'njk']
+};
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
index 5c33350..2c1ec95 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,5 @@
 # General
 
-- Remove gulp and legacy files
 - Better README with more info for the content section
   - Explain eleventy usage
 - Complete CHANGELOG
@@ -8,6 +7,10 @@
 - Add dynamic content to robots.txt during build process
 - Add dynamic content to sitemap.xml
 
+# 11ty
+
+- Look into teh difference of layouts and templates
+
 # CSS
 
 - Check style for every basic element
diff --git a/source/data/menu.json b/source/view/_data/menu.json
similarity index 100%
rename from source/data/menu.json
rename to source/view/_data/menu.json
diff --git a/source/data/start.json b/source/view/_data/start.json
similarity index 100%
rename from source/data/start.json
rename to source/view/_data/start.json
diff --git a/source/templates/hippie/app.liquid b/source/view/_includes/hippie/app.liquid
similarity index 100%
rename from source/templates/hippie/app.liquid
rename to source/view/_includes/hippie/app.liquid
diff --git a/source/templates/hippie/default.liquid b/source/view/_includes/hippie/default.liquid
similarity index 100%
rename from source/templates/hippie/default.liquid
rename to source/view/_includes/hippie/default.liquid
diff --git a/source/templates/hippie/full.liquid b/source/view/_includes/hippie/full.liquid
similarity index 100%
rename from source/templates/hippie/full.liquid
rename to source/view/_includes/hippie/full.liquid
diff --git a/source/templates/hippie/game.liquid b/source/view/_includes/hippie/game.liquid
similarity index 100%
rename from source/templates/hippie/game.liquid
rename to source/view/_includes/hippie/game.liquid
diff --git a/source/templates/hippie/page.liquid b/source/view/_includes/hippie/page.liquid
similarity index 98%
rename from source/templates/hippie/page.liquid
rename to source/view/_includes/hippie/page.liquid
index 5c8881f..5cf93c9 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/view/_includes/hippie/page.liquid
@@ -42,7 +42,7 @@
 {% endblock %}
 {% block script %}
 <script>
-	// Setup global things for all screens
+	// Setup global things
 	setup();
 
 	// Create instances of objects made by constructor functions
diff --git a/source/templates/hippie/partials/footer-page.liquid b/source/view/_includes/hippie/partials/footer-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/footer-page.liquid
rename to source/view/_includes/hippie/partials/footer-page.liquid
diff --git a/source/templates/hippie/partials/footer-pinned.liquid b/source/view/_includes/hippie/partials/footer-pinned.liquid
similarity index 100%
rename from source/templates/hippie/partials/footer-pinned.liquid
rename to source/view/_includes/hippie/partials/footer-pinned.liquid
diff --git a/source/templates/hippie/partials/footer-status.liquid b/source/view/_includes/hippie/partials/footer-status.liquid
similarity index 100%
rename from source/templates/hippie/partials/footer-status.liquid
rename to source/view/_includes/hippie/partials/footer-status.liquid
diff --git a/source/templates/hippie/partials/frame-header.liquid b/source/view/_includes/hippie/partials/frame-header.liquid
similarity index 100%
rename from source/templates/hippie/partials/frame-header.liquid
rename to source/view/_includes/hippie/partials/frame-header.liquid
diff --git a/source/templates/hippie/partials/frame-mode.liquid b/source/view/_includes/hippie/partials/frame-mode.liquid
similarity index 100%
rename from source/templates/hippie/partials/frame-mode.liquid
rename to source/view/_includes/hippie/partials/frame-mode.liquid
diff --git a/source/templates/hippie/partials/frame-status.liquid b/source/view/_includes/hippie/partials/frame-status.liquid
similarity index 100%
rename from source/templates/hippie/partials/frame-status.liquid
rename to source/view/_includes/hippie/partials/frame-status.liquid
diff --git a/source/templates/hippie/partials/game-menu.liquid b/source/view/_includes/hippie/partials/game-menu.liquid
similarity index 100%
rename from source/templates/hippie/partials/game-menu.liquid
rename to source/view/_includes/hippie/partials/game-menu.liquid
diff --git a/source/templates/hippie/partials/gate-list.liquid b/source/view/_includes/hippie/partials/gate-list.liquid
similarity index 100%
rename from source/templates/hippie/partials/gate-list.liquid
rename to source/view/_includes/hippie/partials/gate-list.liquid
diff --git a/source/templates/hippie/partials/gate-simple.liquid b/source/view/_includes/hippie/partials/gate-simple.liquid
similarity index 100%
rename from source/templates/hippie/partials/gate-simple.liquid
rename to source/view/_includes/hippie/partials/gate-simple.liquid
diff --git a/source/templates/hippie/partials/header-page.liquid b/source/view/_includes/hippie/partials/header-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/header-page.liquid
rename to source/view/_includes/hippie/partials/header-page.liquid
diff --git a/source/templates/hippie/partials/header-status.liquid b/source/view/_includes/hippie/partials/header-status.liquid
similarity index 100%
rename from source/templates/hippie/partials/header-status.liquid
rename to source/view/_includes/hippie/partials/header-status.liquid
diff --git a/source/templates/hippie/partials/links.liquid b/source/view/_includes/hippie/partials/links.liquid
similarity index 100%
rename from source/templates/hippie/partials/links.liquid
rename to source/view/_includes/hippie/partials/links.liquid
diff --git a/source/templates/hippie/partials/log-assets.liquid b/source/view/_includes/hippie/partials/log-assets.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-assets.liquid
rename to source/view/_includes/hippie/partials/log-assets.liquid
diff --git a/source/templates/hippie/partials/log-log.liquid b/source/view/_includes/hippie/partials/log-log.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-log.liquid
rename to source/view/_includes/hippie/partials/log-log.liquid
diff --git a/source/templates/hippie/partials/log-setup.liquid b/source/view/_includes/hippie/partials/log-setup.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-setup.liquid
rename to source/view/_includes/hippie/partials/log-setup.liquid
diff --git a/source/templates/hippie/partials/log-start.liquid b/source/view/_includes/hippie/partials/log-start.liquid
similarity index 100%
rename from source/templates/hippie/partials/log-start.liquid
rename to source/view/_includes/hippie/partials/log-start.liquid
diff --git a/source/templates/hippie/partials/meta.liquid b/source/view/_includes/hippie/partials/meta.liquid
similarity index 100%
rename from source/templates/hippie/partials/meta.liquid
rename to source/view/_includes/hippie/partials/meta.liquid
diff --git a/source/templates/hippie/partials/nav-page.liquid b/source/view/_includes/hippie/partials/nav-page.liquid
similarity index 100%
rename from source/templates/hippie/partials/nav-page.liquid
rename to source/view/_includes/hippie/partials/nav-page.liquid
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/view/_includes/hippie/partials/placeholder-flag.liquid
similarity index 100%
rename from source/templates/hippie/partials/placeholder-flag.liquid
rename to source/view/_includes/hippie/partials/placeholder-flag.liquid
diff --git a/source/templates/hippie/partials/script-log.liquid b/source/view/_includes/hippie/partials/script-log.liquid
similarity index 100%
rename from source/templates/hippie/partials/script-log.liquid
rename to source/view/_includes/hippie/partials/script-log.liquid
diff --git a/source/templates/hippie/partials/song.liquid b/source/view/_includes/hippie/partials/song.liquid
similarity index 100%
rename from source/templates/hippie/partials/song.liquid
rename to source/view/_includes/hippie/partials/song.liquid
diff --git a/source/templates/hippie/partials/status-coord.liquid b/source/view/_includes/hippie/partials/status-coord.liquid
similarity index 100%
rename from source/templates/hippie/partials/status-coord.liquid
rename to source/view/_includes/hippie/partials/status-coord.liquid
diff --git a/source/templates/hippie/partials/status-date.liquid b/source/view/_includes/hippie/partials/status-date.liquid
similarity index 100%
rename from source/templates/hippie/partials/status-date.liquid
rename to source/view/_includes/hippie/partials/status-date.liquid
diff --git a/source/templates/hippie/partials/status-time.liquid b/source/view/_includes/hippie/partials/status-time.liquid
similarity index 100%
rename from source/templates/hippie/partials/status-time.liquid
rename to source/view/_includes/hippie/partials/status-time.liquid
diff --git a/source/templates/hippie/simple.liquid b/source/view/_includes/hippie/simple.liquid
similarity index 100%
rename from source/templates/hippie/simple.liquid
rename to source/view/_includes/hippie/simple.liquid
diff --git a/source/templates/hippie/status.liquid b/source/view/_includes/hippie/status.liquid
similarity index 100%
rename from source/templates/hippie/status.liquid
rename to source/view/_includes/hippie/status.liquid
diff --git a/source/templates/hippie/world.liquid b/source/view/_includes/hippie/world.liquid
similarity index 100%
rename from source/templates/hippie/world.liquid
rename to source/view/_includes/hippie/world.liquid
diff --git a/source/screens/demo/basics.liquid b/source/view/demo/basics.liquid
similarity index 100%
rename from source/screens/demo/basics.liquid
rename to source/view/demo/basics.liquid
diff --git a/source/screens/demo/components.liquid b/source/view/demo/components.liquid
similarity index 100%
rename from source/screens/demo/components.liquid
rename to source/view/demo/components.liquid
diff --git a/source/screens/demo/examples/10print.liquid b/source/view/demo/examples/10print.liquid
similarity index 100%
rename from source/screens/demo/examples/10print.liquid
rename to source/view/demo/examples/10print.liquid
diff --git a/source/screens/demo/examples/blog.liquid b/source/view/demo/examples/blog.liquid
similarity index 100%
rename from source/screens/demo/examples/blog.liquid
rename to source/view/demo/examples/blog.liquid
diff --git a/source/screens/demo/examples/blog/article.md b/source/view/demo/examples/blog/article.md
similarity index 100%
rename from source/screens/demo/examples/blog/article.md
rename to source/view/demo/examples/blog/article.md
diff --git a/source/screens/demo/examples/card.liquid b/source/view/demo/examples/card.liquid
similarity index 100%
rename from source/screens/demo/examples/card.liquid
rename to source/view/demo/examples/card.liquid
diff --git a/source/screens/demo/examples/clock.liquid b/source/view/demo/examples/clock.liquid
similarity index 100%
rename from source/screens/demo/examples/clock.liquid
rename to source/view/demo/examples/clock.liquid
diff --git a/source/screens/demo/examples/game/index.liquid b/source/view/demo/examples/game/index.liquid
similarity index 100%
rename from source/screens/demo/examples/game/index.liquid
rename to source/view/demo/examples/game/index.liquid
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/view/demo/examples/game/intro.liquid
similarity index 100%
rename from source/screens/demo/examples/game/intro.liquid
rename to source/view/demo/examples/game/intro.liquid
diff --git a/source/screens/demo/examples/game/menu.liquid b/source/view/demo/examples/game/menu.liquid
similarity index 100%
rename from source/screens/demo/examples/game/menu.liquid
rename to source/view/demo/examples/game/menu.liquid
diff --git a/source/screens/demo/examples/game/mwo.liquid b/source/view/demo/examples/game/mwo.liquid
similarity index 100%
rename from source/screens/demo/examples/game/mwo.liquid
rename to source/view/demo/examples/game/mwo.liquid
diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/view/demo/examples/game/tfw.liquid
similarity index 100%
rename from source/screens/demo/examples/game/tfw.liquid
rename to source/view/demo/examples/game/tfw.liquid
diff --git a/source/screens/demo/examples/hello.md b/source/view/demo/examples/hello.md
similarity index 100%
rename from source/screens/demo/examples/hello.md
rename to source/view/demo/examples/hello.md
diff --git a/source/screens/demo/examples/matrix.liquid b/source/view/demo/examples/matrix.liquid
similarity index 100%
rename from source/screens/demo/examples/matrix.liquid
rename to source/view/demo/examples/matrix.liquid
diff --git a/source/screens/demo/examples/portal.liquid b/source/view/demo/examples/portal.liquid
similarity index 100%
rename from source/screens/demo/examples/portal.liquid
rename to source/view/demo/examples/portal.liquid
diff --git a/source/screens/demo/examples/songbook.liquid b/source/view/demo/examples/songbook.liquid
similarity index 100%
rename from source/screens/demo/examples/songbook.liquid
rename to source/view/demo/examples/songbook.liquid
diff --git a/source/screens/demo/examples/songbook/0_artist-title.md b/source/view/demo/examples/songbook/0_artist-title.md
similarity index 100%
rename from source/screens/demo/examples/songbook/0_artist-title.md
rename to source/view/demo/examples/songbook/0_artist-title.md
diff --git a/source/screens/demo/examples/start.liquid b/source/view/demo/examples/start.liquid
similarity index 100%
rename from source/screens/demo/examples/start.liquid
rename to source/view/demo/examples/start.liquid
diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/view/demo/examples/ui/cli.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/cli.liquid
rename to source/view/demo/examples/ui/cli.liquid
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/view/demo/examples/ui/drag.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/drag.liquid
rename to source/view/demo/examples/ui/drag.liquid
diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/view/demo/examples/ui/explorer.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/explorer.liquid
rename to source/view/demo/examples/ui/explorer.liquid
diff --git a/source/screens/demo/examples/ui/form.liquid b/source/view/demo/examples/ui/form.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/form.liquid
rename to source/view/demo/examples/ui/form.liquid
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/view/demo/examples/ui/gallery.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/gallery.liquid
rename to source/view/demo/examples/ui/gallery.liquid
diff --git a/source/screens/demo/examples/ui/index.liquid b/source/view/demo/examples/ui/index.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/index.liquid
rename to source/view/demo/examples/ui/index.liquid
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/view/demo/examples/ui/table.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/table.liquid
rename to source/view/demo/examples/ui/table.liquid
diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/view/demo/examples/ui/tui.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/tui.liquid
rename to source/view/demo/examples/ui/tui.liquid
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/view/demo/examples/ui/windows.liquid
similarity index 100%
rename from source/screens/demo/examples/ui/windows.liquid
rename to source/view/demo/examples/ui/windows.liquid
diff --git a/source/screens/demo/index.liquid b/source/view/demo/index.liquid
similarity index 88%
rename from source/screens/demo/index.liquid
rename to source/view/demo/index.liquid
index 95aeefa..7159acf 100644
--- a/source/screens/demo/index.liquid
+++ b/source/view/demo/index.liquid
@@ -12,17 +12,17 @@ title: Index
 		<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>
+			<code>index.liquid|njk</code>
 			inside the
-			<i>source/screens</i>
+			<i>source/view</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>
+			<i>source/view</i>
+			folder as a global data source for your template 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>
+			<code>blank.liquid|njk</code>. You can find it at
+			<i>/source/view/demo/pages</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
diff --git a/source/screens/demo/introduction.liquid b/source/view/demo/introduction.liquid
similarity index 100%
rename from source/screens/demo/introduction.liquid
rename to source/view/demo/introduction.liquid
diff --git a/source/screens/demo/layouts.liquid b/source/view/demo/layouts.liquid
similarity index 100%
rename from source/screens/demo/layouts.liquid
rename to source/view/demo/layouts.liquid
diff --git a/source/screens/demo/pages/blank.liquid b/source/view/demo/pages/blank.liquid
similarity index 100%
rename from source/screens/demo/pages/blank.liquid
rename to source/view/demo/pages/blank.liquid
diff --git a/source/screens/demo/pages/default.liquid b/source/view/demo/pages/default.liquid
similarity index 100%
rename from source/screens/demo/pages/default.liquid
rename to source/view/demo/pages/default.liquid
diff --git a/source/screens/demo/pages/error/304.liquid b/source/view/demo/pages/error/304.liquid
similarity index 100%
rename from source/screens/demo/pages/error/304.liquid
rename to source/view/demo/pages/error/304.liquid
diff --git a/source/screens/demo/pages/error/400.liquid b/source/view/demo/pages/error/400.liquid
similarity index 100%
rename from source/screens/demo/pages/error/400.liquid
rename to source/view/demo/pages/error/400.liquid
diff --git a/source/screens/demo/pages/error/401.liquid b/source/view/demo/pages/error/401.liquid
similarity index 100%
rename from source/screens/demo/pages/error/401.liquid
rename to source/view/demo/pages/error/401.liquid
diff --git a/source/screens/demo/pages/error/403.liquid b/source/view/demo/pages/error/403.liquid
similarity index 100%
rename from source/screens/demo/pages/error/403.liquid
rename to source/view/demo/pages/error/403.liquid
diff --git a/source/screens/demo/pages/error/404.liquid b/source/view/demo/pages/error/404.liquid
similarity index 100%
rename from source/screens/demo/pages/error/404.liquid
rename to source/view/demo/pages/error/404.liquid
diff --git a/source/screens/demo/pages/error/408.liquid b/source/view/demo/pages/error/408.liquid
similarity index 100%
rename from source/screens/demo/pages/error/408.liquid
rename to source/view/demo/pages/error/408.liquid
diff --git a/source/screens/demo/pages/error/500.liquid b/source/view/demo/pages/error/500.liquid
similarity index 100%
rename from source/screens/demo/pages/error/500.liquid
rename to source/view/demo/pages/error/500.liquid
diff --git a/source/screens/demo/pages/error/503.liquid b/source/view/demo/pages/error/503.liquid
similarity index 100%
rename from source/screens/demo/pages/error/503.liquid
rename to source/view/demo/pages/error/503.liquid
diff --git a/source/screens/demo/pages/maintenance.liquid b/source/view/demo/pages/maintenance.liquid
similarity index 100%
rename from source/screens/demo/pages/maintenance.liquid
rename to source/view/demo/pages/maintenance.liquid
diff --git a/source/screens/demo/pages/pages.json b/source/view/demo/pages/pages.json
similarity index 100%
rename from source/screens/demo/pages/pages.json
rename to source/view/demo/pages/pages.json

From 0c16b43ec78870ca66214cd6712dd55cf2dcf8da Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 14:20:14 +0200
Subject: [PATCH 241/253] feat: Update app and windows

- Move setAttributesAccordingToPosition to HippieTaskbar
- Use TimeDisplay inside HippieTaskbar
- Add readJsonFile and loadJson to app
- Initialize taskbar with config from data/windows.json
- Update jshint globals
---
 .jshintrc                                   | 18 ++++----
 source/code/hippie/app.js                   | 48 +++++++++++++--------
 source/code/windows.js                      | 33 +++++++++++---
 source/data/windows.json                    | 13 ++++++
 source/view/demo/examples/ui/windows.liquid | 38 ++++++++--------
 5 files changed, 102 insertions(+), 48 deletions(-)
 create mode 100644 source/data/windows.json

diff --git a/.jshintrc b/.jshintrc
index 24ef2fe..13fcfa1 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -14,20 +14,20 @@
 	"unused": false,
 	"browser": true,
 	"globals": {
-		"HIPPIE": false,
-		"hippie": true,
-		"viewHover": true,
-		"basicEase": true,
-		"debugOn": true,
-		"TimeDisplay": true,
 		"DateDisplay": true,
+		"HIPPIE": false,
+		"HippieTaskBar": true,
+		"TimeDisplay": true,
+		"basicEase": true,
+		"centerElementUnderCursor": false,
 		"checkButtonAndTarget": false,
+		"debugOn": true,
 		"getClosestEdgeToElement": false,
 		"getClosestEdgeToMouse": false,
-		"centerElementUnderCursor": false,
-		"setAttributesAccordingToPosition": false,
+		"hippie": true,
 		"randomIntFrom": false,
+		"readJsonFile": false,
 		"replaceLineBreaks": false,
-		"HippieTaskBar": true
+		"viewHover": true
 	}
 }
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index cbf1533..60eeeef 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -394,20 +394,6 @@ function centerElementUnderCursor(event, element) {
 	element.style.top = `${y}px`;
 }
 
-function setAttributesAccordingToPosition(element, position, attributes) {
-	'use strict';
-
-	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
-	Object.keys(attributes[position].styles).forEach(key => {
-		element.style[key] = '';
-	});
-
-	element.classList.add(attributes[position].className);
-	Object.entries(attributes[position].styles).forEach(([key, value]) => {
-		element.style[key] = value;
-	});
-}
-
 /**
  * Gibt eine Zahl zwischen <min> und <max> aus.
  * Die Werte <min> und <max> sind dabei mit eingeschlossen.
@@ -556,9 +542,37 @@ function zeroFill(number, width) {
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
-class RandomPixelCanvas {
-	constructor(containerElement, options = {}) {
-		this.container = containerElement;
+async function readJsonFile(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+
+		reader.readAsText(file);
+		reader.onload = function () {
+			try {
+				resolve(JSON.parse(reader.result));
+			} catch (error) {
+				reject(error);
+			}
+		};
+		reader.onerror = function () {
+			reject(reader.error);
+		};
+	});
+}
+
+async function loadJson(filePath) {
+	try {
+		const response = await fetch(filePath);
+
+		if (!response.ok) throw new Error(`Failed to load file: ${response.status}`);
+
+		return await response.json();
+	} catch (error) {
+		console.error('Error loading file:', error);
+		throw error;
+	}
+}
+
 class RandomPixelPlaceholder {
 	constructor(parent, options = {}) {
 		this.container = parent;
diff --git a/source/code/windows.js b/source/code/windows.js
index 01a3c7d..ca85af2 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -3,9 +3,10 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
+		this.time = null;
 		this.isDragging = false;
 		this.barSize = '';
-		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
+		// TODO: Ergänzen und nicht ersetzen
 		this.options = options || {
 			direction: 0,
 			position: 'bottom',
@@ -13,7 +14,8 @@ class HippieTaskBar {
 				year: 'numeric',
 				month: '2-digit',
 				day: '2-digit'
-			}
+			},
+			time: {hour: '2-digit', minute: '2-digit'}
 		};
 
 		this.init();
@@ -25,11 +27,20 @@ class HippieTaskBar {
 		document.addEventListener('pointermove', this.onMove.bind(this));
 		document.addEventListener('pointerup', this.onUp.bind(this));
 
+		const clock = this.element.querySelector('.clock');
 		const dateElement = document.createElement('span');
+		const timeElement = document.createElement('span');
+		const br = document.createElement('br');
 
 		dateElement.id = 'date';
-		this.element.querySelector('.clock').appendChild(dateElement);
+		timeElement.id = 'time';
 		this.date = new DateDisplay(dateElement, this.options.date);
+		this.time = new TimeDisplay(timeElement, this.options.time);
+
+		// TODO: Reihenfolge anpassbar machen
+		clock.appendChild(timeElement);
+		clock.appendChild(br);
+		clock.appendChild(dateElement);
 
 		this.setOptions(this.options.position);
 	}
@@ -111,7 +122,7 @@ class HippieTaskBar {
 				}
 			};
 
-			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
+			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -142,6 +153,18 @@ class HippieTaskBar {
 		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 
+	setAttributesAccordingToPosition(element, position, attributes) {
+		element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+		Object.keys(attributes[position].styles).forEach(key => {
+			element.style[key] = '';
+		});
+
+		element.classList.add(attributes[position].className);
+		Object.entries(attributes[position].styles).forEach(([key, value]) => {
+			element.style[key] = value;
+		});
+	}
+
 	setOptions(position) {
 		const attributes = {
 			top: {
@@ -182,7 +205,7 @@ class HippieTaskBar {
 			}
 		};
 
-		setAttributesAccordingToPosition(this.element, position, attributes);
+		this.setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':
diff --git a/source/data/windows.json b/source/data/windows.json
new file mode 100644
index 0000000..565adaa
--- /dev/null
+++ b/source/data/windows.json
@@ -0,0 +1,13 @@
+{
+	"taskbar": {
+		"position": "top",
+		"color": "white",
+		"hover": {
+			"active": true,
+			"color": "#52bed1"
+		}
+	},
+	"window": {
+		"name": "Custom"
+	}
+}
\ No newline at end of file
diff --git a/source/view/demo/examples/ui/windows.liquid b/source/view/demo/examples/ui/windows.liquid
index 15d589b..443b276 100644
--- a/source/view/demo/examples/ui/windows.liquid
+++ b/source/view/demo/examples/ui/windows.liquid
@@ -29,10 +29,7 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<div class="clock">
-			<span id="time">##:##</span>
-			<br>
-		</div>
+		<div class="clock"></div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -63,20 +60,27 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
-	// TODO: TimeDisplay in HippieTaskbar aufnehmen
-	const timeElement = document.getElementById('time');
 
-	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
-	const timeFormat = {hour: '2-digit', minute: '2-digit'};
-	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
+	initializeApp();
 
-	document.getElementById('setPause').addEventListener('click', () => {
-		timeDisplay.pause();
-		console.info('Pause time');
-	});
-	document.getElementById('setPlay').addEventListener('click', () => {
-		timeDisplay.resume();
-		console.info('Resume time');
-	});
+	async function initializeApp() {
+		try {
+			const config = await loadJson('/json/windows.json');
+			// TODO: Elemente in der Klasse selbst erzeugen
+			const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar);
+
+			// TODO: In HippieTaskbar aufnehmen
+			document.getElementById('setPause').addEventListener('click', () => {
+				taskBar.time.pause();
+				console.info('Pause time');
+			});
+			document.getElementById('setPlay').addEventListener('click', () => {
+				taskBar.time.resume();
+				console.info('Resume time');
+			});
+		} catch (error) {
+			console.error('Failed to initialize app:', error);
+		}
+	}
 </script>
 {% endblock %}
\ No newline at end of file

From 904e9e8e47c568dd5683f3be30abaf3c8a2a74c2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 13 Apr 2026 23:05:20 +0200
Subject: [PATCH 242/253] build: Update dependencies

- Update jquery from 3 to 4
- Update sass minor version
- Update eleventy patch version
---
 package-lock.json | 154 +++++++++++++++-------------------------------
 package.json      |   6 +-
 2 files changed, 53 insertions(+), 107 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 913ed24..0c46b1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,12 @@
 			"version": "0.13.1",
 			"license": "MIT",
 			"dependencies": {
-				"@11ty/eleventy": "^3.1.2",
+				"@11ty/eleventy": "^3.1.5",
 				"@11ty/eleventy-plugin-webc": "^0.11.2",
 				"bootstrap-icons": "^1.13.1",
 				"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-				"jquery": "^3.7.1",
-				"sass": "^1.93.0"
+				"jquery": "^4.0.0",
+				"sass": "^1.99.0"
 			},
 			"devDependencies": {
 				"normalize.css": "^8.0.1"
@@ -42,44 +42,44 @@
 			}
 		},
 		"node_modules/@11ty/eleventy": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
-			"integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.5.tgz",
+			"integrity": "sha512-hZ0g6MwZyRxCqXsPm82gIM304LraKbUz3ZmezOSjsqxttZG6cHTib3Qq8QkESJoKwnr+yX1eyfOkPC5/mEgZnQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@11ty/dependency-tree": "^4.0.0",
-				"@11ty/dependency-tree-esm": "^2.0.0",
+				"@11ty/dependency-tree": "^4.0.2",
+				"@11ty/dependency-tree-esm": "^2.0.4",
 				"@11ty/eleventy-dev-server": "^2.0.8",
-				"@11ty/eleventy-plugin-bundle": "^3.0.6",
+				"@11ty/eleventy-plugin-bundle": "^3.0.7",
 				"@11ty/eleventy-utils": "^2.0.7",
 				"@11ty/lodash-custom": "^4.17.21",
-				"@11ty/posthtml-urls": "^1.0.1",
-				"@11ty/recursive-copy": "^4.0.2",
+				"@11ty/posthtml-urls": "^1.0.2",
+				"@11ty/recursive-copy": "^4.0.4",
 				"@sindresorhus/slugify": "^2.2.1",
 				"bcp-47-normalize": "^2.3.0",
 				"chokidar": "^3.6.0",
-				"debug": "^4.4.1",
+				"debug": "^4.4.3",
 				"dependency-graph": "^1.0.0",
 				"entities": "^6.0.1",
 				"filesize": "^10.1.6",
 				"gray-matter": "^4.0.3",
 				"iso-639-1": "^3.1.5",
-				"js-yaml": "^4.1.0",
+				"js-yaml": "^4.1.1",
 				"kleur": "^4.1.5",
-				"liquidjs": "^10.21.1",
-				"luxon": "^3.6.1",
-				"markdown-it": "^14.1.0",
+				"liquidjs": "^10.25.0",
+				"luxon": "^3.7.2",
+				"markdown-it": "^14.1.1",
 				"minimist": "^1.2.8",
-				"moo": "^0.5.2",
+				"moo": "0.5.2",
 				"node-retrieve-globals": "^6.0.1",
 				"nunjucks": "^3.2.4",
-				"picomatch": "^4.0.2",
+				"picomatch": "^4.0.3",
 				"please-upgrade-node": "^3.2.0",
-				"posthtml": "^0.16.6",
+				"posthtml": "^0.16.7",
 				"posthtml-match-helper": "^2.0.3",
-				"semver": "^7.7.2",
-				"slugify": "^1.6.6",
-				"tinyglobby": "^0.2.14"
+				"semver": "^7.7.4",
+				"slugify": "^1.6.8",
+				"tinyglobby": "^0.2.15"
 			},
 			"bin": {
 				"eleventy": "cmd.cjs"
@@ -256,14 +256,14 @@
 			}
 		},
 		"node_modules/@11ty/recursive-copy": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz",
-			"integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==",
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.4.tgz",
+			"integrity": "sha512-oI7m8pa7/IAU/3lqRU9vjBbs20iKFo7x+1K9kT3aVira6scc1X9MjBdgLCHzLJeJ7iB6wydioA+kr9/qPnvmlQ==",
 			"license": "ISC",
 			"dependencies": {
 				"errno": "^1.0.0",
 				"junk": "^3.1.0",
-				"maximatch": "^0.1.0",
+				"minimatch": "^3.1.5",
 				"slash": "^3.0.0"
 			},
 			"engines": {
@@ -752,45 +752,6 @@
 				"sprintf-js": "~1.0.2"
 			}
 		},
-		"node_modules/array-differ": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-			"integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/array-union": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-			"integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-			"license": "MIT",
-			"dependencies": {
-				"array-uniq": "^1.0.1"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/array-uniq": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-			"integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/arrify": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-			"integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/asap": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -869,9 +830,9 @@
 			"license": "MIT"
 		},
 		"node_modules/brace-expansion": {
-			"version": "1.1.12",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+			"version": "1.1.14",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+			"integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
 			"license": "MIT",
 			"dependencies": {
 				"balanced-match": "^1.0.0",
@@ -1333,9 +1294,9 @@
 			}
 		},
 		"node_modules/immutable": {
-			"version": "5.1.4",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
-			"integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+			"version": "5.1.5",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+			"integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
 			"license": "MIT"
 		},
 		"node_modules/inherits": {
@@ -1440,9 +1401,9 @@
 			}
 		},
 		"node_modules/jquery": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-			"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz",
+			"integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==",
 			"license": "MIT"
 		},
 		"node_modules/js-yaml": {
@@ -1493,9 +1454,9 @@
 			}
 		},
 		"node_modules/liquidjs": {
-			"version": "10.24.0",
-			"resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
-			"integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
+			"version": "10.25.5",
+			"resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz",
+			"integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==",
 			"license": "MIT",
 			"dependencies": {
 				"commander": "^10.0.0"
@@ -1562,21 +1523,6 @@
 				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
 		},
-		"node_modules/maximatch": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
-			"integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
-			"license": "MIT",
-			"dependencies": {
-				"array-differ": "^1.0.0",
-				"array-union": "^1.0.1",
-				"arrify": "^1.0.0",
-				"minimatch": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -1850,10 +1796,10 @@
 			}
 		},
 		"node_modules/posthtml": {
-			"version": "0.16.6",
-			"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
-			"integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
-			"peer": true,
+			"version": "0.16.7",
+			"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
+			"integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
+			"license": "MIT",
 			"dependencies": {
 				"posthtml-parser": "^0.11.0",
 				"posthtml-render": "^3.0.0"
@@ -1985,13 +1931,13 @@
 			}
 		},
 		"node_modules/sass": {
-			"version": "1.93.2",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
-			"integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+			"version": "1.99.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
+			"integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==",
 			"license": "MIT",
 			"dependencies": {
 				"chokidar": "^4.0.0",
-				"immutable": "^5.0.2",
+				"immutable": "^5.1.5",
 				"source-map-js": ">=0.6.2 <2.0.0"
 			},
 			"bin": {
@@ -2104,9 +2050,10 @@
 			}
 		},
 		"node_modules/slugify": {
-			"version": "1.6.6",
-			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
-			"integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+			"version": "1.6.9",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
+			"integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=8.0.0"
 			}
@@ -2191,7 +2138,6 @@
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=12"
 			},
diff --git a/package.json b/package.json
index 1d127ed..99e61a7 100644
--- a/package.json
+++ b/package.json
@@ -37,11 +37,11 @@
 		"normalize.css": "^8.0.1"
 	},
 	"dependencies": {
-		"@11ty/eleventy": "^3.1.2",
+		"@11ty/eleventy": "^3.1.5",
 		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"bootstrap-icons": "^1.13.1",
 		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-		"jquery": "^3.7.1",
-		"sass": "^1.93.0"
+		"jquery": "^4.0.0",
+		"sass": "^1.99.0"
 	}
 }

From 42e8e6f5f565960ecfda9a8389b4f75998048b3f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 13 Apr 2026 23:46:45 +0200
Subject: [PATCH 243/253] feat: Update events and style for quest view

- New buttons
- Refine event delegation
---
 source/style/modules/game/_tfw.scss       | 13 ++++---
 source/view/demo/examples/game/tfw.liquid | 43 +++++++++++++++++++----
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 3c5e950..4960713 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -36,7 +36,8 @@
 		color: hippie.$color_darkest;
 	}
 
-	.success {
+	.complete .subtle,
+	button[data-action="claim"] {
 		color: hippie.basic_color(alpha);
 	}
 
@@ -166,15 +167,17 @@
 			justify-content: space-between;
 			padding: hippie.$space_basic;
 
-			& > button:last-child {
-				//margin-left: auto;
+			& > button:not(:first-child) {
 				padding-inline: 2em;
 			}
 		}
 	}
 
-	.quest,
-	footer *:not(button[data-action="back"]) {
+	.quest {
 		opacity: 0;
 	}
+
+	footer *:not(button[data-action="back"]) {
+		display: none;
+	}
 }
\ No newline at end of file
diff --git a/source/view/demo/examples/game/tfw.liquid b/source/view/demo/examples/game/tfw.liquid
index 1365630..ab44818 100644
--- a/source/view/demo/examples/game/tfw.liquid
+++ b/source/view/demo/examples/game/tfw.liquid
@@ -38,7 +38,7 @@ tags:
 		</nav>
 		<div>
 			<div>
-				<table>
+				<table id="questSelection">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -66,25 +66,29 @@ tags:
 				</table>
 			</div>
 			<div>
-				<table>
+				<table id="questActive">
 					<colgroup>
 						<col class="l">
 						<col class="q">
 						<col class="s">
 					</colgroup>
+					<thead>
 					<tr>
 						<th colspan="3">Active quests (Max.: 4)</th>
 					</tr>
+					</thead>
+					<tbody>
 					<tr>
 						<td class="background"></td>
 						<td>King Of Kings</td>
 						<td class="subtle">Active</td>
 					</tr>
-					<tr>
+					<tr class="complete">
 						<td class="background"></td>
 						<td>Garage Days Pt. 1</td>
-						<td class="subtle success">Complete</td>
+						<td class="subtle">Complete</td>
 					</tr>
+					</tbody>
 				</table>
 			</div>
 		</div>
@@ -104,7 +108,9 @@ tags:
 	</main>
 	<footer class="io">
 		<button data-action="back">Back</button>
-		<button data-action="accept">Accept</button>
+		<button data-action="accept">Accept quest</button>
+		<button data-action="abandon">Abandon quest</button>
+		<button data-action="claim">Claim reward</button>
 	</footer>
 </div>
 <div id="viewRegion" class="view"></div>
@@ -203,6 +209,12 @@ tags:
 	viewQuest.addEventListener('click', (event) => {
 		const rows = viewQuest.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
+		const rowSelection = event.target.closest('#questSelection tr');
+		const rowActive = event.target.closest('#questActive tr:not(.complete)');
+		const rowComplete = event.target.closest('#questActive tr.complete');
+		const buttonAccept = viewQuest.querySelector('footer button[data-action=accept]');
+		const buttonAbandon = viewQuest.querySelector('footer button[data-action=abandon]');
+		const buttonClaim = viewQuest.querySelector('footer button[data-action=claim]');
 
 		if (event.button !== 0) return;
 
@@ -213,8 +225,25 @@ tags:
 			}
 
 			rowTarget.classList.add('active');
-			document.querySelector('.quest').style.opacity = 1;
-			document.querySelector('footer button[data-action=accept]').style.display = 'inline-block';
+			viewQuest.querySelector('.quest').style.opacity = 1;
+
+			if (rowSelection) {
+				buttonClaim.style.display = 'none';
+				buttonAbandon.style.display = 'none';
+				buttonAccept.style.display = 'inline-block';
+			}
+
+			if (rowActive) {
+				buttonAccept.style.display = 'none';
+				buttonClaim.style.display = 'none';
+				buttonAbandon.style.display = 'inline-block';
+			}
+
+			if (rowComplete) {
+				buttonAccept.style.display = 'none';
+				buttonAbandon.style.display = 'none';
+				buttonClaim.style.display = 'inline-block';
+			}
 		}
 	});
 

From 1d4d5624d5599b4a75031ea7d177e892bbb11695 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 19 Apr 2026 12:19:16 +0200
Subject: [PATCH 244/253] fix: Change aside elements

---
 source/style/hippie-style          | 2 +-
 source/view/demo/basics.liquid     | 2 +-
 source/view/demo/components.liquid | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index 80a0dee..a66010a 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 80a0deedd5ec1858c2f9f201412da282462c3a99
+Subproject commit a66010a9ed535ad8ca5bbb7faed222861fc40ad4
diff --git a/source/view/demo/basics.liquid b/source/view/demo/basics.liquid
index d607592..e32b6cc 100644
--- a/source/view/demo/basics.liquid
+++ b/source/view/demo/basics.liquid
@@ -561,7 +561,7 @@ order: 2
 		<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>
+		<aside class="left">
 			<ins>Dies ist auch wichtig.</ins>
 		</aside>
 		<p>Der Inhalt wird dann mit
diff --git a/source/view/demo/components.liquid b/source/view/demo/components.liquid
index 98f582c..52ce6c3 100644
--- a/source/view/demo/components.liquid
+++ b/source/view/demo/components.liquid
@@ -65,7 +65,7 @@ order: 3
 		<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>
+			<aside class="right">Seitenbereich, rechts ausgerichtet.</aside>
 			<div class="bside">Hauptbereich</div>
 		</section>
 		<h2>&lt;h*&gt;</h2>

From 5cd55ab2bc88230d58e21d3a6d085fa23f983619 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 19 Apr 2026 12:21:38 +0200
Subject: [PATCH 245/253] feat: Add content for quest view

- New faction selection
- New detail structure
- Refactor behavior for deselecting elements
- Add events
---
 source/style/modules/game/_tfw.scss       |  67 +++++++++-----
 source/view/demo/examples/game/tfw.liquid | 104 ++++++++++++++++++++--
 2 files changed, 140 insertions(+), 31 deletions(-)

diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 4960713..81f9312 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -30,7 +30,8 @@
 		font-weight: bold;
 	}
 
-	.subtle {
+	.subtle,
+	hgroup p {
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
@@ -45,10 +46,13 @@
 		position: relative;
 		overflow: hidden;
 
+		h2, span {
+			color: white;
+		}
+
 		*:not(canvas, img) {
 			z-index: map.get(hippie.$z-indexes, "content-bottom");
 			position: relative;
-			color: white;
 		}
 
 		canvas, img {
@@ -86,11 +90,23 @@
 			gap: hippie.$space_double;
 			min-height: 0;
 
-			& > div:last-child {
-				flex: 2;
+			nav {
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+
+				select {
+					@extend .io_select;
+				}
 			}
 
-			& > div:nth-child(2) {
+			& > div {
 				flex: 4;
 				display: flex;
 				flex-flow: column nowrap;
@@ -108,19 +124,15 @@
 				}
 			}
 
-			nav {
-				flex: 1;
-				display: flex;
-				flex-flow: column nowrap;
-				gap: hippie.$space_basic;
-				min-height: 0;
+			aside {
+				flex: 2;
 
-				input:not([type="checkbox"], [type="range"]) {
-					@extend .input_io;
+				.background {
+					border-bottom: 1px solid hippie.basic_color(echo);
 				}
 
-				select {
-					@extend .io_select;
+				& > div {
+					display: none;
 				}
 			}
 
@@ -134,7 +146,6 @@
 				}
 
 				td {
-					height: 4em;
 					vertical-align: top;
 
 					span {
@@ -143,12 +154,24 @@
 						color: white;
 					}
 
-					&:last-child {
+					&.subtle {
 						text-align: center;
 						vertical-align: middle;
 					}
 				}
 
+				&#questSelection {
+					display: none;
+				}
+
+				&[data-type="faction"] td {
+					height: 6em;
+				}
+
+				&[data-type="quest"] td {
+					height: 4em;
+				}
+
 				.l {
 					width: 30%;
 				}
@@ -157,7 +180,11 @@
 					width: 50%;
 				}
 
-				.t, .s {
+				.g {
+					width: 40%;
+				}
+
+				.t, .s, .c, .f {
 					width: 20%;
 				}
 			}
@@ -173,10 +200,6 @@
 		}
 	}
 
-	.quest {
-		opacity: 0;
-	}
-
 	footer *:not(button[data-action="back"]) {
 		display: none;
 	}
diff --git a/source/view/demo/examples/game/tfw.liquid b/source/view/demo/examples/game/tfw.liquid
index ab44818..991a933 100644
--- a/source/view/demo/examples/game/tfw.liquid
+++ b/source/view/demo/examples/game/tfw.liquid
@@ -38,7 +38,45 @@ tags:
 		</nav>
 		<div>
 			<div>
-				<table id="questSelection">
+				<table id="factionSelection" data-type="faction">
+					<colgroup>
+						<col class="g">
+						<col class="c">
+						<col class="f">
+						<col class="s">
+					</colgroup>
+					<tr>
+						<th>Giver</th>
+						<th>Category</th>
+						<th>Faction</th>
+						<th>Status</th>
+					</tr>
+					<tr>
+						<td class="background">
+							<span>Scavengers</span>
+						</td>
+						<td class="subtle">All</td>
+						<td class="subtle">Scav</td>
+						<td class="subtle">Open</td>
+					</tr>
+					<tr>
+						<td class="background">
+							<span>Eastern Consulate</span>
+						</td>
+						<td class="subtle">All</td>
+						<td class="subtle">Eurasia</td>
+						<td class="subtle">Closed</td>
+					</tr>
+					<tr>
+						<td class="background">
+							<span>СПЕЦНАЗ Commission</span>
+						</td>
+						<td class="subtle">All</td>
+						<td class="subtle">Euruska</td>
+						<td class="subtle">Open</td>
+					</tr>
+				</table>
+				<table id="questSelection" data-type="quest">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -66,7 +104,7 @@ tags:
 				</table>
 			</div>
 			<div>
-				<table id="questActive">
+				<table id="questActive" data-type="quest">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -92,7 +130,21 @@ tags:
 				</table>
 			</div>
 		</div>
-		<div>
+		<aside>
+			<div class="faction">
+				<div class="background">
+					<hgroup>
+						<h2>Western Embassy</h2>
+						<p>Europa</p>
+					</hgroup>
+				</div>
+				<p>A hijacked medium mech dubbed the "Rat King" ...</p>
+				<hr class="dotted">
+				<p>Collect Rat King residue.</p>
+				<hr>
+				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
+					rating</p>
+			</div>
 			<div class="quest">
 				<div class="background">
 					<h2>King Of Kings</h2>
@@ -104,7 +156,7 @@ tags:
 				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
 					rating</p>
 			</div>
-		</div>
+		</aside>
 	</main>
 	<footer class="io">
 		<button data-action="back">Back</button>
@@ -207,8 +259,10 @@ tags:
 
 	// TODO: Allgemeinere Umsetzung anstreben
 	viewQuest.addEventListener('click', (event) => {
+		const tableTarget = event.target.closest('table');
 		const rows = viewQuest.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
+		const rowFaction = event.target.closest('#factionSelection tr');
 		const rowSelection = event.target.closest('#questSelection tr');
 		const rowActive = event.target.closest('#questActive tr:not(.complete)');
 		const rowComplete = event.target.closest('#questActive tr.complete');
@@ -218,14 +272,26 @@ tags:
 
 		if (event.button !== 0) return;
 
-		// TODO: Ziele unterscheiden
 		if (rowTarget) {
-			for (const row of rows) {
-				row.classList.remove('active');
-			}
+			const rowsRemain = Array.from(rows).filter(
+				element => element !== rowTarget
+			);
+			const type = tableTarget.dataset.type;
+			const tableSibling = tableTarget.nextElementSibling;
+
+			rowsRemain.forEach((element) => {
+				element.classList.remove('active');
+			});
 
 			rowTarget.classList.add('active');
-			viewQuest.querySelector('.quest').style.opacity = 1;
+
+			viewQuest.querySelector('aside > :not(.' + type + ')').style.display = 'none';
+			viewQuest.querySelector('aside > .' + type).style.display = 'block';
+
+			if (rowFaction) {
+				tableTarget.style.display = 'none';
+				tableSibling.style.display = 'table';
+			}
 
 			if (rowSelection) {
 				buttonClaim.style.display = 'none';
@@ -244,6 +310,8 @@ tags:
 				buttonAbandon.style.display = 'none';
 				buttonClaim.style.display = 'inline-block';
 			}
+		} else {
+			deselector('quest');
 		}
 	});
 
@@ -261,5 +329,23 @@ tags:
 	});
 
 	new Menu(menu);
+
+	function deselector(type) {
+		const id = 'view' + capitalizeFirstLetter(type);
+		const view = document.getElementById(id);
+		const rows = view.querySelectorAll('tr');
+		const buttonAccept = view.querySelector('footer button[data-action=accept]');
+		const buttonAbandon = view.querySelector('footer button[data-action=abandon]');
+		const buttonClaim = view.querySelector('footer button[data-action=claim]');
+
+		for (const row of rows) {
+			row.classList.remove('active');
+		}
+
+		view.querySelector('.' + type).style.opacity = 0;
+		buttonAbandon.style.display = 'none';
+		buttonAccept.style.display = 'none';
+		buttonClaim.style.display = 'none';
+	}
 </script>
 {% endblock %}
\ No newline at end of file

From 0f9217414350ea88a42e7a4225fc247595349097 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 20 Apr 2026 20:13:58 +0200
Subject: [PATCH 246/253] feat: New collection and view

- Add art collection
- Move views to art
- Add new view
---
 .../demo/{examples => art}/10print.liquid     |   2 +-
 .../view/demo/{examples => art}/matrix.liquid |   2 +-
 source/view/demo/art/squares.liquid           | 186 ++++++++++++++++++
 source/view/demo/index.liquid                 |  11 ++
 4 files changed, 199 insertions(+), 2 deletions(-)
 rename source/view/demo/{examples => art}/10print.liquid (98%)
 rename source/view/demo/{examples => art}/matrix.liquid (99%)
 create mode 100644 source/view/demo/art/squares.liquid

diff --git a/source/view/demo/examples/10print.liquid b/source/view/demo/art/10print.liquid
similarity index 98%
rename from source/view/demo/examples/10print.liquid
rename to source/view/demo/art/10print.liquid
index 8ed878e..761218c 100644
--- a/source/view/demo/examples/10print.liquid
+++ b/source/view/demo/art/10print.liquid
@@ -1,7 +1,7 @@
 ---
 title: 10print
 tags:
-- demoExample
+- demoArt
 ---
 {% layout 'hippie/simple.liquid' %}
 
diff --git a/source/view/demo/examples/matrix.liquid b/source/view/demo/art/matrix.liquid
similarity index 99%
rename from source/view/demo/examples/matrix.liquid
rename to source/view/demo/art/matrix.liquid
index 3eb62e9..2078d39 100644
--- a/source/view/demo/examples/matrix.liquid
+++ b/source/view/demo/art/matrix.liquid
@@ -1,7 +1,7 @@
 ---
 title: Matrix
 tags:
-- demoExample
+- demoArt
 ---
 {% layout 'hippie/simple.liquid' %}
 
diff --git a/source/view/demo/art/squares.liquid b/source/view/demo/art/squares.liquid
new file mode 100644
index 0000000..e10e247
--- /dev/null
+++ b/source/view/demo/art/squares.liquid
@@ -0,0 +1,186 @@
+---
+title: Squares²
+tags:
+- demoArt
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block style %}
+<style>
+	canvas {
+		display: block;
+	}
+</style>
+{% endblock %}
+
+{% block body %}{% endblock %}
+
+{% block script %}
+<script>
+	function fillCanvasWithSquares(maxSquareSize = 128, minSquareSize = 8, largeSquarePercentage = 40) {
+		const canvas = document.createElement('canvas');
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		document.body.appendChild(canvas);
+
+		const ctx = canvas.getContext('2d');
+		const colors = [
+			'#fad803', '#d30a51', '#273f8b',
+			'#b7e0f0', '#52bed1', '#0c85ff'
+		];
+
+		// Verify maxSquareSize and minSquareSize are powers of 2
+		if (!isPowerOfTwo(maxSquareSize) || !isPowerOfTwo(minSquareSize)) {
+			console.error('Both maxSquareSize and minSquareSize must be powers of 2');
+			return;
+		}
+
+		if (minSquareSize > maxSquareSize) {
+			console.error('minSquareSize must be <= maxSquareSize');
+			return;
+		}
+
+		if (largeSquarePercentage < 0 || largeSquarePercentage > 100) {
+			console.error('largeSquarePercentage must be between 0 and 100');
+			return;
+		}
+
+		function isPowerOfTwo(n) {
+			return n > 0 && (n & (n - 1)) === 0;
+		}
+
+		// Grid to track occupied cells
+		let grid = [];
+
+		function initializeGrid() {
+			grid = Array(Math.ceil(canvas.height / minSquareSize))
+				.fill(null)
+				.map(() => Array(Math.ceil(canvas.width / minSquareSize)).fill(false));
+		}
+
+		function canPlaceSquare(gridX, gridY, sizeInCells) {
+			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) {
+				return false;
+			}
+
+			for (let y = gridY; y < gridY + sizeInCells; y++) {
+				for (let x = gridX; x < gridX + sizeInCells; x++) {
+					if (grid[y][x]) return false;
+				}
+			}
+			return true;
+		}
+
+		function markSquareOccupied(gridX, gridY, sizeInCells) {
+			for (let y = gridY; y < gridY + sizeInCells; y++) {
+				for (let x = gridX; x < gridX + sizeInCells; x++) {
+					grid[y][x] = true;
+				}
+			}
+		}
+
+		function drawSquare(gridX, gridY, sizeInPixels) {
+			const pixelX = gridX * minSquareSize;
+			const pixelY = gridY * minSquareSize;
+
+			const color = colors[Math.floor(Math.random() * colors.length)];
+			ctx.fillStyle = color;
+			ctx.fillRect(pixelX, pixelY, sizeInPixels, sizeInPixels);
+
+			ctx.strokeStyle = '#333';
+			ctx.lineWidth = 1;
+			ctx.strokeRect(pixelX, pixelY, sizeInPixels, sizeInPixels);
+		}
+
+		function getSizesInDescendingOrder() {
+			const sizes = [];
+			for (let size = maxSquareSize; size >= minSquareSize; size /= 2) {
+				sizes.push(size);
+			}
+			return sizes;
+		}
+
+		function countPossibleSquares(size) {
+			const sizeInCells = size / minSquareSize;
+			let count = 0;
+
+			for (let gridY = 0; gridY < grid.length; gridY++) {
+				for (let gridX = 0; gridX < grid[0].length; gridX++) {
+					if (canPlaceSquare(gridX, gridY, sizeInCells)) {
+						count++;
+					}
+				}
+			}
+			return count;
+		}
+
+		function fillCanvasWithPercentage() {
+			const sizes = getSizesInDescendingOrder();
+
+			// Fill the largest squares based on percentage
+			const largestSize = sizes[0];
+			const maxPossibleLargeSquares = countPossibleSquares(largestSize);
+			const targetLargeSquares = Math.floor((maxPossibleLargeSquares * largeSquarePercentage) / 100);
+			const largestSizeInCells = largestSize / minSquareSize;
+
+			// Collect all valid positions for largest squares
+			if (targetLargeSquares > 0) {
+				const positions = [];
+				for (let gridY = 0; gridY < grid.length; gridY++) {
+					for (let gridX = 0; gridX < grid[0].length; gridX++) {
+						if (canPlaceSquare(gridX, gridY, largestSizeInCells)) {
+							positions.push({gridX, gridY});
+						}
+					}
+				}
+
+				// Shuffle positions array
+				positions.sort(() => Math.random() - 0.5);
+
+				// Place squares up to target percentage
+				let placedCount = 0;
+				for (let i = 0; i < positions.length && placedCount < targetLargeSquares; i++) {
+					const {gridX, gridY} = positions[i];
+					// Double-check the position is still valid before placing
+					if (canPlaceSquare(gridX, gridY, largestSizeInCells)) {
+						markSquareOccupied(gridX, gridY, largestSizeInCells);
+						drawSquare(gridX, gridY, largestSize);
+						placedCount++;
+					}
+				}
+			}
+
+			// Fill remaining space with all sizes in descending order
+			// Skip the largest size since we already handled it
+			for (let i = 1; i < sizes.length; i++) {
+				const size = sizes[i];
+				const sizeInCells = size / minSquareSize;
+
+				for (let gridY = 0; gridY < grid.length; gridY++) {
+					for (let gridX = 0; gridX < grid[0].length; gridX++) {
+						if (canPlaceSquare(gridX, gridY, sizeInCells)) {
+							markSquareOccupied(gridX, gridY, sizeInCells);
+							drawSquare(gridX, gridY, size);
+						}
+					}
+				}
+			}
+		}
+
+		initializeGrid();
+		fillCanvasWithPercentage();
+
+		window.addEventListener('resize', () => {
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+			initializeGrid();
+			fillCanvasWithPercentage();
+		});
+	}
+
+	fillCanvasWithSquares(128, 8, 40);
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/view/demo/index.liquid b/source/view/demo/index.liquid
index 7159acf..4ec424f 100644
--- a/source/view/demo/index.liquid
+++ b/source/view/demo/index.liquid
@@ -64,6 +64,17 @@ title: Index
 					{% endfor %}
 				</ul>
 			</section>
+			<section>
+				<h3>Art</h3>
+				<ul class="block link">
+					{% assign artByTitle = collections.demoArt | sort: 'data.title' %}
+					{% for link in artByTitle %}
+						<li>
+							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</section>
 		</div>
 	</div>
 </div>

From c73f4fbdb3a0e764cc554bcc223b08a8946a4137 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 20 Apr 2026 20:39:35 +0200
Subject: [PATCH 247/253] refactor: fillCanvasWithSquares

---
 source/view/demo/art/squares.liquid | 142 ++++++++--------------------
 1 file changed, 41 insertions(+), 101 deletions(-)

diff --git a/source/view/demo/art/squares.liquid b/source/view/demo/art/squares.liquid
index e10e247..a0975e2 100644
--- a/source/view/demo/art/squares.liquid
+++ b/source/view/demo/art/squares.liquid
@@ -29,40 +29,21 @@ tags:
 			'#b7e0f0', '#52bed1', '#0c85ff'
 		];
 
-		// Verify maxSquareSize and minSquareSize are powers of 2
-		if (!isPowerOfTwo(maxSquareSize) || !isPowerOfTwo(minSquareSize)) {
-			console.error('Both maxSquareSize and minSquareSize must be powers of 2');
-			return;
-		}
-
-		if (minSquareSize > maxSquareSize) {
-			console.error('minSquareSize must be <= maxSquareSize');
-			return;
-		}
-
-		if (largeSquarePercentage < 0 || largeSquarePercentage > 100) {
-			console.error('largeSquarePercentage must be between 0 and 100');
-			return;
-		}
-
 		function isPowerOfTwo(n) {
 			return n > 0 && (n & (n - 1)) === 0;
 		}
 
-		// Grid to track occupied cells
-		let grid = [];
-
-		function initializeGrid() {
-			grid = Array(Math.ceil(canvas.height / minSquareSize))
-				.fill(null)
-				.map(() => Array(Math.ceil(canvas.width / minSquareSize)).fill(false));
+		if (!isPowerOfTwo(maxSquareSize) || !isPowerOfTwo(minSquareSize)) {
+			console.error('Both sizes must be powers of 2');
+			return;
 		}
 
-		function canPlaceSquare(gridX, gridY, sizeInCells) {
-			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) {
-				return false;
-			}
+		let grid = Array(Math.ceil(canvas.height / minSquareSize))
+			.fill(null)
+			.map(() => Array(Math.ceil(canvas.width / minSquareSize)).fill(false));
 
+		function canPlace(gridX, gridY, sizeInCells) {
+			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) return false;
 			for (let y = gridY; y < gridY + sizeInCells; y++) {
 				for (let x = gridX; x < gridX + sizeInCells; x++) {
 					if (grid[y][x]) return false;
@@ -71,7 +52,7 @@ tags:
 			return true;
 		}
 
-		function markSquareOccupied(gridX, gridY, sizeInCells) {
+		function markOccupied(gridX, gridY, sizeInCells) {
 			for (let y = gridY; y < gridY + sizeInCells; y++) {
 				for (let x = gridX; x < gridX + sizeInCells; x++) {
 					grid[y][x] = true;
@@ -79,108 +60,67 @@ tags:
 			}
 		}
 
-		function drawSquare(gridX, gridY, sizeInPixels) {
-			const pixelX = gridX * minSquareSize;
-			const pixelY = gridY * minSquareSize;
-
-			const color = colors[Math.floor(Math.random() * colors.length)];
-			ctx.fillStyle = color;
-			ctx.fillRect(pixelX, pixelY, sizeInPixels, sizeInPixels);
-
+		function draw(gridX, gridY, sizeInPixels) {
+			const x = gridX * minSquareSize;
+			const y = gridY * minSquareSize;
+			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
+			ctx.fillRect(x, y, sizeInPixels, sizeInPixels);
 			ctx.strokeStyle = '#333';
 			ctx.lineWidth = 1;
-			ctx.strokeRect(pixelX, pixelY, sizeInPixels, sizeInPixels);
+			ctx.strokeRect(x, y, sizeInPixels, sizeInPixels);
 		}
 
-		function getSizesInDescendingOrder() {
-			const sizes = [];
-			for (let size = maxSquareSize; size >= minSquareSize; size /= 2) {
-				sizes.push(size);
-			}
-			return sizes;
-		}
-
-		function countPossibleSquares(size) {
-			const sizeInCells = size / minSquareSize;
-			let count = 0;
+		function fill() {
+			const largestSizeInCells = maxSquareSize / minSquareSize;
 
+			// Collect and shuffle positions for largest squares
+			const positions = [];
 			for (let gridY = 0; gridY < grid.length; gridY++) {
 				for (let gridX = 0; gridX < grid[0].length; gridX++) {
-					if (canPlaceSquare(gridX, gridY, sizeInCells)) {
-						count++;
+					if (canPlace(gridX, gridY, largestSizeInCells)) {
+						positions.push({ gridX, gridY });
 					}
 				}
 			}
-			return count;
-		}
+			positions.sort(() => Math.random() - 0.5);
 
-		function fillCanvasWithPercentage() {
-			const sizes = getSizesInDescendingOrder();
-
-			// Fill the largest squares based on percentage
-			const largestSize = sizes[0];
-			const maxPossibleLargeSquares = countPossibleSquares(largestSize);
-			const targetLargeSquares = Math.floor((maxPossibleLargeSquares * largeSquarePercentage) / 100);
-			const largestSizeInCells = largestSize / minSquareSize;
-
-			// Collect all valid positions for largest squares
-			if (targetLargeSquares > 0) {
-				const positions = [];
-				for (let gridY = 0; gridY < grid.length; gridY++) {
-					for (let gridX = 0; gridX < grid[0].length; gridX++) {
-						if (canPlaceSquare(gridX, gridY, largestSizeInCells)) {
-							positions.push({gridX, gridY});
-						}
-					}
-				}
-
-				// Shuffle positions array
-				positions.sort(() => Math.random() - 0.5);
-
-				// Place squares up to target percentage
-				let placedCount = 0;
-				for (let i = 0; i < positions.length && placedCount < targetLargeSquares; i++) {
-					const {gridX, gridY} = positions[i];
-					// Double-check the position is still valid before placing
-					if (canPlaceSquare(gridX, gridY, largestSizeInCells)) {
-						markSquareOccupied(gridX, gridY, largestSizeInCells);
-						drawSquare(gridX, gridY, largestSize);
-						placedCount++;
-					}
+			// Place largest squares up to percentage
+			const target = Math.floor(positions.length * largeSquarePercentage / 100);
+			for (let i = 0; i < target; i++) {
+				const { gridX, gridY } = positions[i];
+				if (canPlace(gridX, gridY, largestSizeInCells)) {
+					markOccupied(gridX, gridY, largestSizeInCells);
+					draw(gridX, gridY, maxSquareSize);
 				}
 			}
 
-			// Fill remaining space with all sizes in descending order
-			// Skip the largest size since we already handled it
-			for (let i = 1; i < sizes.length; i++) {
-				const size = sizes[i];
-				const sizeInCells = size / minSquareSize;
-
+			// Fill remaining space with smaller sizes
+			for (let size = maxSquareSize / 2; size >= minSquareSize; size /= 2) {
+				const cellSize = size / minSquareSize;
 				for (let gridY = 0; gridY < grid.length; gridY++) {
 					for (let gridX = 0; gridX < grid[0].length; gridX++) {
-						if (canPlaceSquare(gridX, gridY, sizeInCells)) {
-							markSquareOccupied(gridX, gridY, sizeInCells);
-							drawSquare(gridX, gridY, size);
+						if (canPlace(gridX, gridY, cellSize)) {
+							markOccupied(gridX, gridY, cellSize);
+							draw(gridX, gridY, size);
 						}
 					}
 				}
 			}
 		}
 
-		initializeGrid();
-		fillCanvasWithPercentage();
+		fill();
 
 		window.addEventListener('resize', () => {
 			canvas.width = window.innerWidth;
 			canvas.height = window.innerHeight;
-
+			grid = Array(Math.ceil(canvas.height / minSquareSize))
+				.fill(null)
+				.map(() => Array(Math.ceil(canvas.width / minSquareSize)).fill(false));
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-			initializeGrid();
-			fillCanvasWithPercentage();
+			fill();
 		});
 	}
 
-	fillCanvasWithSquares(128, 8, 40);
+	fillCanvasWithSquares(128, 8, 10);
 </script>
 {% endblock %}
\ No newline at end of file

From 04072e7706019455c39c5aca39e910db5146409f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 20 Apr 2026 21:05:35 +0200
Subject: [PATCH 248/253] feat: Change square2 view

- Fill is now determined by max size, steps and percentage
- Steps reduce size by half
- Percentages are given for every but the last step
---
 source/view/demo/art/squares.liquid | 116 ++++++++++++++++++----------
 1 file changed, 77 insertions(+), 39 deletions(-)

diff --git a/source/view/demo/art/squares.liquid b/source/view/demo/art/squares.liquid
index a0975e2..ef66ed7 100644
--- a/source/view/demo/art/squares.liquid
+++ b/source/view/demo/art/squares.liquid
@@ -17,7 +17,7 @@ tags:
 
 {% block script %}
 <script>
-	function fillCanvasWithSquares(maxSquareSize = 128, minSquareSize = 8, largeSquarePercentage = 40) {
+	function fillCanvasWithSquares(maxSquareSize = 128, steps = 3, percentages = [40, 30, 20]) {
 		const canvas = document.createElement('canvas');
 		canvas.width = window.innerWidth;
 		canvas.height = window.innerHeight;
@@ -25,22 +25,56 @@ tags:
 
 		const ctx = canvas.getContext('2d');
 		const colors = [
-			'#fad803', '#d30a51', '#273f8b',
-			'#b7e0f0', '#52bed1', '#0c85ff'
+			'#e1d170',
+			'#cfb16a',
+			'#8b3050',
+			'#683657',
+			'#354063',
+			'#4b5776',
+			'#c8dbe2',
+			'#90bac2',
+			'#7daeb7'
 		];
 
 		function isPowerOfTwo(n) {
 			return n > 0 && (n & (n - 1)) === 0;
 		}
 
-		if (!isPowerOfTwo(maxSquareSize) || !isPowerOfTwo(minSquareSize)) {
-			console.error('Both sizes must be powers of 2');
+		if (!isPowerOfTwo(maxSquareSize)) {
+			console.error('maxSquareSize must be a power of 2');
 			return;
 		}
 
-		let grid = Array(Math.ceil(canvas.height / minSquareSize))
+		if (steps < 1) {
+			console.error('steps must be at least 1');
+			return;
+		}
+
+		// Generate sizes by halving for each step
+		const sizes = [];
+		for (let i = 0; i < steps; i++) {
+			sizes.push(maxSquareSize / Math.pow(2, i));
+		}
+
+		// Validate percentages array
+		if (!Array.isArray(percentages)) {
+			console.error('percentages must be an array');
+			return;
+		}
+
+		if (percentages.length !== sizes.length - 1) {
+			console.warn(`percentages array should have ${sizes.length - 1} elements. Adjusting...`);
+			percentages = percentages.slice(0, sizes.length - 1);
+			while (percentages.length < sizes.length - 1) {
+				percentages.push(50);
+			}
+		}
+
+		const minSize = sizes[sizes.length - 1];
+
+		let grid = Array(Math.ceil(canvas.height / minSize))
 			.fill(null)
-			.map(() => Array(Math.ceil(canvas.width / minSquareSize)).fill(false));
+			.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
 
 		function canPlace(gridX, gridY, sizeInCells) {
 			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) return false;
@@ -61,8 +95,9 @@ tags:
 		}
 
 		function draw(gridX, gridY, sizeInPixels) {
-			const x = gridX * minSquareSize;
-			const y = gridY * minSquareSize;
+			const x = gridX * minSize;
+			const y = gridY * minSize;
+
 			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
 			ctx.fillRect(x, y, sizeInPixels, sizeInPixels);
 			ctx.strokeStyle = '#333';
@@ -71,39 +106,42 @@ tags:
 		}
 
 		function fill() {
-			const largestSizeInCells = maxSquareSize / minSquareSize;
+			// Process each size with its corresponding percentage
+			for (let sizeIndex = 0; sizeIndex < sizes.length; sizeIndex++) {
+				const size = sizes[sizeIndex];
+				const sizeInCells = size / minSize;
+				const percentage = sizeIndex < percentages.length ? percentages[sizeIndex] : 0;
 
-			// Collect and shuffle positions for largest squares
-			const positions = [];
-			for (let gridY = 0; gridY < grid.length; gridY++) {
-				for (let gridX = 0; gridX < grid[0].length; gridX++) {
-					if (canPlace(gridX, gridY, largestSizeInCells)) {
-						positions.push({ gridX, gridY });
+				if (sizeIndex < sizes.length - 1) {
+					// For all sizes except the last, apply percentage
+					const positions = [];
+					for (let gridY = 0; gridY < grid.length; gridY++) {
+						for (let gridX = 0; gridX < grid[0].length; gridX++) {
+							if (canPlace(gridX, gridY, sizeInCells)) {
+								positions.push({ gridX, gridY });
+							}
+						}
 					}
-				}
-			}
-			positions.sort(() => Math.random() - 0.5);
+					positions.sort(() => Math.random() - 0.5);
 
-			// Place largest squares up to percentage
-			const target = Math.floor(positions.length * largeSquarePercentage / 100);
-			for (let i = 0; i < target; i++) {
-				const { gridX, gridY } = positions[i];
-				if (canPlace(gridX, gridY, largestSizeInCells)) {
-					markOccupied(gridX, gridY, largestSizeInCells);
-					draw(gridX, gridY, maxSquareSize);
-				}
-			}
-
-			// Fill remaining space with smaller sizes
-			for (let size = maxSquareSize / 2; size >= minSquareSize; size /= 2) {
-				const cellSize = size / minSquareSize;
-				for (let gridY = 0; gridY < grid.length; gridY++) {
-					for (let gridX = 0; gridX < grid[0].length; gridX++) {
-						if (canPlace(gridX, gridY, cellSize)) {
-							markOccupied(gridX, gridY, cellSize);
+					const target = Math.floor(positions.length * percentage / 100);
+					for (let i = 0; i < target; i++) {
+						const { gridX, gridY } = positions[i];
+						if (canPlace(gridX, gridY, sizeInCells)) {
+							markOccupied(gridX, gridY, sizeInCells);
 							draw(gridX, gridY, size);
 						}
 					}
+				} else {
+					// Fill remaining space with the smallest size
+					for (let gridY = 0; gridY < grid.length; gridY++) {
+						for (let gridX = 0; gridX < grid[0].length; gridX++) {
+							if (canPlace(gridX, gridY, sizeInCells)) {
+								markOccupied(gridX, gridY, sizeInCells);
+								draw(gridX, gridY, size);
+							}
+						}
+					}
 				}
 			}
 		}
@@ -113,14 +151,14 @@ tags:
 		window.addEventListener('resize', () => {
 			canvas.width = window.innerWidth;
 			canvas.height = window.innerHeight;
-			grid = Array(Math.ceil(canvas.height / minSquareSize))
+			grid = Array(Math.ceil(canvas.height / minSize))
 				.fill(null)
-				.map(() => Array(Math.ceil(canvas.width / minSquareSize)).fill(false));
+				.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 			fill();
 		});
 	}
 
-	fillCanvasWithSquares(128, 8, 10);
+	fillCanvasWithSquares(128, 4, [2, 24, 64]);
 </script>
 {% endblock %}
\ No newline at end of file

From 5538a6ae0be875fa1c53f8e3959875cecba3c1e8 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 20 Apr 2026 22:58:40 +0200
Subject: [PATCH 249/253] feat: Add sample function to app

---
 source/code/hippie/app.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 60eeeef..89af792 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -657,6 +657,10 @@ class RandomPixelPlaceholder {
 	}
 }
 
+function sample(array) {
+	return array[Math.floor(Math.random() * array.length)];
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

From 86f3c679c3cc1e67319cc0a7ce42bef78e1def0c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 20 Apr 2026 22:59:29 +0200
Subject: [PATCH 250/253] feat: Change colors for square2

---
 .../demo/art/{squares.liquid => squares2.liquid} | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)
 rename source/view/demo/art/{squares.liquid => squares2.liquid} (92%)

diff --git a/source/view/demo/art/squares.liquid b/source/view/demo/art/squares2.liquid
similarity index 92%
rename from source/view/demo/art/squares.liquid
rename to source/view/demo/art/squares2.liquid
index ef66ed7..1383fad 100644
--- a/source/view/demo/art/squares.liquid
+++ b/source/view/demo/art/squares2.liquid
@@ -35,6 +35,17 @@ tags:
 			'#90bac2',
 			'#7daeb7'
 		];
+		/*const colors = [
+			'#fad803',
+			'#f2af13',
+			'#d30a51',
+			'#8e1f68',
+			'#273f8b',
+			'#3c579a',
+			'#b7e0f0',
+			'#6bc7d9',
+			'#52bed1'
+		];*/
 
 		function isPowerOfTwo(n) {
 			return n > 0 && (n & (n - 1)) === 0;
@@ -97,10 +108,13 @@ tags:
 		function draw(gridX, gridY, sizeInPixels) {
 			const x = gridX * minSize;
 			const y = gridY * minSize;
+			const type = Math.random() < 0.5;
 
 			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
 			ctx.fillRect(x, y, sizeInPixels, sizeInPixels);
-			ctx.strokeStyle = '#333';
+			// TODO: Linie anpassen und wiederholen
+			ctx.strokeStyle = '#404040';
+			// ctx.strokeStyle = type ? '#fff' : '#000';
 			ctx.lineWidth = 1;
 			ctx.strokeRect(x, y, sizeInPixels, sizeInPixels);
 		}

From bffa82030b990d865dd9214ac8cc191b7af64702 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 23 Apr 2026 21:45:14 +0200
Subject: [PATCH 251/253] feat: Replace directory for includes with submodule

Create new repository hippie-view for _includes.
---
 .gitmodules                                   |   3 +
 source/view/_includes/hippie-view             |   1 +
 source/view/_includes/hippie/app.liquid       |  41 -------
 source/view/_includes/hippie/default.liquid   |  39 ------
 source/view/_includes/hippie/full.liquid      |  49 --------
 source/view/_includes/hippie/game.liquid      |  15 ---
 source/view/_includes/hippie/page.liquid      |  64 ----------
 .../hippie/partials/footer-page.liquid        |   3 -
 .../hippie/partials/footer-pinned.liquid      |   3 -
 .../hippie/partials/footer-status.liquid      |   9 --
 .../hippie/partials/frame-header.liquid       |  20 ----
 .../hippie/partials/frame-mode.liquid         |  10 --
 .../hippie/partials/frame-status.liquid       |  11 --
 .../hippie/partials/game-menu.liquid          |  15 ---
 .../hippie/partials/gate-list.liquid          |  19 ---
 .../hippie/partials/gate-simple.liquid        |   7 --
 .../hippie/partials/header-page.liquid        |   3 -
 .../hippie/partials/header-status.liquid      |  21 ----
 .../_includes/hippie/partials/links.liquid    |   3 -
 .../hippie/partials/log-assets.liquid         |   3 -
 .../_includes/hippie/partials/log-log.liquid  |   3 -
 .../hippie/partials/log-setup.liquid          |   6 -
 .../hippie/partials/log-start.liquid          |   4 -
 .../_includes/hippie/partials/meta.liquid     |   7 --
 .../_includes/hippie/partials/nav-page.liquid |  33 -----
 .../hippie/partials/placeholder-flag.liquid   |  43 -------
 .../hippie/partials/script-log.liquid         | 113 ------------------
 .../_includes/hippie/partials/song.liquid     |  10 --
 .../hippie/partials/status-coord.liquid       |   1 -
 .../hippie/partials/status-date.liquid        |   6 -
 .../hippie/partials/status-time.liquid        |   1 -
 source/view/_includes/hippie/simple.liquid    |   9 --
 source/view/_includes/hippie/status.liquid    |  37 ------
 source/view/_includes/hippie/world.liquid     |  11 --
 source/view/demo/art/10print.liquid           |   2 +-
 source/view/demo/art/matrix.liquid            |   2 +-
 source/view/demo/art/squares2.liquid          |   2 +-
 source/view/demo/basics.liquid                |   6 +-
 source/view/demo/components.liquid            |   4 +-
 source/view/demo/examples/blog.liquid         |   2 +-
 source/view/demo/examples/card.liquid         |   4 +-
 source/view/demo/examples/clock.liquid        |   2 +-
 source/view/demo/examples/game/index.liquid   |   2 +-
 source/view/demo/examples/game/intro.liquid   |   2 +-
 source/view/demo/examples/game/menu.liquid    |   4 +-
 source/view/demo/examples/game/mwo.liquid     |  17 ++-
 source/view/demo/examples/game/tfw.liquid     |   2 +-
 source/view/demo/examples/hello.md            |   2 +-
 source/view/demo/examples/portal.liquid       |   6 +-
 source/view/demo/examples/songbook.liquid     |   4 +-
 source/view/demo/examples/start.liquid        |   4 +-
 source/view/demo/examples/ui/cli.liquid       |   2 +-
 source/view/demo/examples/ui/drag.liquid      |   6 +-
 source/view/demo/examples/ui/explorer.liquid  |   8 +-
 source/view/demo/examples/ui/form.liquid      |   4 +-
 source/view/demo/examples/ui/gallery.liquid   |   8 +-
 source/view/demo/examples/ui/index.liquid     |   2 +-
 source/view/demo/examples/ui/table.liquid     |   8 +-
 source/view/demo/examples/ui/tui.liquid       |   6 +-
 source/view/demo/examples/ui/windows.liquid   |   2 +-
 source/view/demo/index.liquid                 |   2 +-
 source/view/demo/introduction.liquid          |   2 +-
 source/view/demo/layouts.liquid               |   6 +-
 source/view/demo/pages/blank.liquid           |   2 +-
 source/view/demo/pages/default.liquid         |   2 +-
 source/view/demo/pages/error/304.liquid       |   2 +-
 source/view/demo/pages/error/400.liquid       |   2 +-
 source/view/demo/pages/error/401.liquid       |   2 +-
 source/view/demo/pages/error/403.liquid       |   2 +-
 source/view/demo/pages/error/404.liquid       |   2 +-
 source/view/demo/pages/error/408.liquid       |   2 +-
 source/view/demo/pages/error/500.liquid       |   2 +-
 source/view/demo/pages/error/503.liquid       |   2 +-
 source/view/demo/pages/maintenance.liquid     |   2 +-
 74 files changed, 84 insertions(+), 684 deletions(-)
 create mode 160000 source/view/_includes/hippie-view
 delete mode 100644 source/view/_includes/hippie/app.liquid
 delete mode 100644 source/view/_includes/hippie/default.liquid
 delete mode 100644 source/view/_includes/hippie/full.liquid
 delete mode 100644 source/view/_includes/hippie/game.liquid
 delete mode 100644 source/view/_includes/hippie/page.liquid
 delete mode 100644 source/view/_includes/hippie/partials/footer-page.liquid
 delete mode 100644 source/view/_includes/hippie/partials/footer-pinned.liquid
 delete mode 100644 source/view/_includes/hippie/partials/footer-status.liquid
 delete mode 100644 source/view/_includes/hippie/partials/frame-header.liquid
 delete mode 100644 source/view/_includes/hippie/partials/frame-mode.liquid
 delete mode 100644 source/view/_includes/hippie/partials/frame-status.liquid
 delete mode 100644 source/view/_includes/hippie/partials/game-menu.liquid
 delete mode 100644 source/view/_includes/hippie/partials/gate-list.liquid
 delete mode 100644 source/view/_includes/hippie/partials/gate-simple.liquid
 delete mode 100644 source/view/_includes/hippie/partials/header-page.liquid
 delete mode 100644 source/view/_includes/hippie/partials/header-status.liquid
 delete mode 100644 source/view/_includes/hippie/partials/links.liquid
 delete mode 100644 source/view/_includes/hippie/partials/log-assets.liquid
 delete mode 100644 source/view/_includes/hippie/partials/log-log.liquid
 delete mode 100644 source/view/_includes/hippie/partials/log-setup.liquid
 delete mode 100644 source/view/_includes/hippie/partials/log-start.liquid
 delete mode 100644 source/view/_includes/hippie/partials/meta.liquid
 delete mode 100644 source/view/_includes/hippie/partials/nav-page.liquid
 delete mode 100644 source/view/_includes/hippie/partials/placeholder-flag.liquid
 delete mode 100644 source/view/_includes/hippie/partials/script-log.liquid
 delete mode 100644 source/view/_includes/hippie/partials/song.liquid
 delete mode 100644 source/view/_includes/hippie/partials/status-coord.liquid
 delete mode 100644 source/view/_includes/hippie/partials/status-date.liquid
 delete mode 100644 source/view/_includes/hippie/partials/status-time.liquid
 delete mode 100644 source/view/_includes/hippie/simple.liquid
 delete mode 100644 source/view/_includes/hippie/status.liquid
 delete mode 100644 source/view/_includes/hippie/world.liquid

diff --git a/.gitmodules b/.gitmodules
index 068fd29..410b0db 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -2,3 +2,6 @@
 	path = source/style/hippie-style
 	url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git
 	branch = development
+[submodule "source/view/_includes/hippie-view"]
+	path = source/view/_includes/hippie-view
+	url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-view.git
diff --git a/source/view/_includes/hippie-view b/source/view/_includes/hippie-view
new file mode 160000
index 0000000..980b611
--- /dev/null
+++ b/source/view/_includes/hippie-view
@@ -0,0 +1 @@
+Subproject commit 980b611a319c34004be536238814ff9b093059cd
diff --git a/source/view/_includes/hippie/app.liquid b/source/view/_includes/hippie/app.liquid
deleted file mode 100644
index 87db0cb..0000000
--- a/source/view/_includes/hippie/app.liquid
+++ /dev/null
@@ -1,41 +0,0 @@
-{% assign pageId = page.fileSlug -%}
-{% assign pageClass = 'html_ui' -%}
-{% layout 'hippie/default.liquid' %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-{{ block.super -}}
-<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-<link href="/css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block assets %}
-<script src="/vendor/jquery.min.js"></script>
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
-
-{% block script %}
-<script>
-	const frameHeader = document.querySelector('body > header.io');
-	const closeActionElements = document.querySelectorAll('[data-action=close]');
-
-	if (frameHeader) {
-		console.log('frame header found', frameHeader);
-
-		frameHeader.addEventListener('click', (e) => {
-			if (e.target.dataset.action === 'close') {
-				console.debug('close', e.target);
-
-				history.back();
-
-				if (closeActionElements.length > 1) {
-					console.debug('other frames present', closeActionElements.length);
-				}
-			}
-		});
-	}
-</script>
-{% endblock %}
diff --git a/source/view/_includes/hippie/default.liquid b/source/view/_includes/hippie/default.liquid
deleted file mode 100644
index 4ff5f5a..0000000
--- a/source/view/_includes/hippie/default.liquid
+++ /dev/null
@@ -1,39 +0,0 @@
-<!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 %}{% endblock -%}
-		{{ hippie.titlePostfix -}}
-	</title>
-
-	{% block meta -%}
-	{% render 'hippie/partials/meta.liquid' %}
-	{% endblock -%}
-	{% block links -%}
-	{% render 'hippie/partials/links.liquid' %}
-	{% endblock -%}
-	{% block style -%}{% endblock -%}
-	{% endblock -%}
-</head>
-
-<body{{ bodyClassAttr }}>
-{%- block body %}{% endblock -%}
-{%- block assets %}{% endblock -%}
-<script>
-	// {{ title }} script using default template
-</script>
-{%- block script %}{% endblock -%}
-</body>
-</html>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/full.liquid b/source/view/_includes/hippie/full.liquid
deleted file mode 100644
index dbbe4ae..0000000
--- a/source/view/_includes/hippie/full.liquid
+++ /dev/null
@@ -1,49 +0,0 @@
-<!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', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
-	{% 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' %}
-	<link rel="stylesheet" media="all" href="/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 -%}
-{% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
-{%- block assets %}{% endblock -%}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
-<script>
-	// {{ title }} script using full template
-</script>
-{%- block script %}{% endblock -%}
-{% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
-{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
-</body>
-</html>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/game.liquid b/source/view/_includes/hippie/game.liquid
deleted file mode 100644
index 37c890b..0000000
--- a/source/view/_includes/hippie/game.liquid
+++ /dev/null
@@ -1,15 +0,0 @@
-{% assign pageId = page.fileSlug -%}
-{% layout 'hippie/default.liquid' %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-{{ block.super -}}
-<link href="/css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block assets %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
diff --git a/source/view/_includes/hippie/page.liquid b/source/view/_includes/hippie/page.liquid
deleted file mode 100644
index 5cf93c9..0000000
--- a/source/view/_includes/hippie/page.liquid
+++ /dev/null
@@ -1,64 +0,0 @@
-{% assign pageId = page.fileSlug -%}
-{% layout 'hippie/full.liquid' %}
-
-{% block meta %}
-{{ block.super -}}
-{% comment %}<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">{% endcomment %}
-{% comment %}<meta http-equiv="X-UA-Compatible" content="IE=edge" />{% endcomment %}
-{% endblock %}
-
-{% block links %}
-{{ block.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]-->
-	{% comment %}<script src="./code/html5shiv.min.js"></script>{% endcomment %}
-	{% comment %}<!--Only use one of the above!-->{% endcomment %}
-{% endif %}
-
-{% comment %}<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>{% endcomment %}
-{% comment %}<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/>{% endcomment %}
-{% endblock %}
-
-{% block body %}
-{{ block.super -}}
-{% render 'hippie/partials/nav-page.liquid' %}
-<div id="root">
-	{% render 'hippie/partials/header-page.liquid' %}
-
-	<main class="main_site">
-		{% block main %}{% endblock %}
-	</main>
-
-	{% render 'hippie/partials/footer-page.liquid' %}
-</div>
-{% endblock %}
-
-{% block assets %}
-<script src="/vendor/jquery.min.js"></script>
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
-{% block script %}
-<script>
-	// Setup global things
-	setup();
-
-	// Create instances of objects made by constructor functions
-	let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
-	let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
-
-	if (viewHover) {
-		let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
-	}
-
-	document.addEventListener('scroll', () => {
-		scrollUi.check();
-	});
-
-	$(document).ready(function () {
-		logPerf('EVENT       :: jQuery \'ready\' event fired.');
-	});
-</script>
-{% endblock %}
diff --git a/source/view/_includes/hippie/partials/footer-page.liquid b/source/view/_includes/hippie/partials/footer-page.liquid
deleted file mode 100644
index 7aa500a..0000000
--- a/source/view/_includes/hippie/partials/footer-page.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<footer class="footer_site">
-	<div id="end"></div>
-</footer>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/footer-pinned.liquid b/source/view/_includes/hippie/partials/footer-pinned.liquid
deleted file mode 100644
index 5f4160a..0000000
--- a/source/view/_includes/hippie/partials/footer-pinned.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<footer class="pos_abs pin_{{ pos | default: 'bottom' }} pin_right pin_left">
-	<p class="txt_center">Unten fixiert</p>
-</footer>
diff --git a/source/view/_includes/hippie/partials/footer-status.liquid b/source/view/_includes/hippie/partials/footer-status.liquid
deleted file mode 100644
index b46ecf2..0000000
--- a/source/view/_includes/hippie/partials/footer-status.liquid
+++ /dev/null
@@ -1,9 +0,0 @@
-<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/view/_includes/hippie/partials/frame-header.liquid b/source/view/_includes/hippie/partials/frame-header.liquid
deleted file mode 100644
index 14d04bc..0000000
--- a/source/view/_includes/hippie/partials/frame-header.liquid
+++ /dev/null
@@ -1,20 +0,0 @@
-<header class="io">
-	<nav>
-		<button title="menu">
-			<i class="bi bi-three-dots"></i>
-		</button>
-		<span>{{ title | default: 'title-bar' }}</span>
-	</nav>
-	<nav>
-		<div class="spacer a"></div>
-		<button title="minimize">
-			<i class="bi bi-dash"></i>
-		</button>
-		<button title="maximize">
-			<i class="bi bi-fullscreen"></i>
-		</button>
-		<button title="close" data-action="close">
-			<i class="bi bi-x-square"></i>
-		</button>
-	</nav>
-</header>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/frame-mode.liquid b/source/view/_includes/hippie/partials/frame-mode.liquid
deleted file mode 100644
index 4e87985..0000000
--- a/source/view/_includes/hippie/partials/frame-mode.liquid
+++ /dev/null
@@ -1,10 +0,0 @@
-<footer class="io">
-	<nav>
-		<button>mode</button>
-		<span>{{ title | default: 'mode-bar' }}</span>
-	</nav>
-	<nav>
-		<div class="spacer a"></div>
-		<button>action</button>
-	</nav>
-</footer>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/frame-status.liquid b/source/view/_includes/hippie/partials/frame-status.liquid
deleted file mode 100644
index 98c94f9..0000000
--- a/source/view/_includes/hippie/partials/frame-status.liquid
+++ /dev/null
@@ -1,11 +0,0 @@
-<footer class="io">
-	<nav>
-		<span>## items</span>
-		<span># selected (size)</span>
-		<span># type(s)</span>
-		<span># shared</span>
-	</nav>
-	<nav>
-		<span>{{ title | default: 'status-bar' }}</span>
-	</nav>
-</footer>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/game-menu.liquid b/source/view/_includes/hippie/partials/game-menu.liquid
deleted file mode 100644
index c59d802..0000000
--- a/source/view/_includes/hippie/partials/game-menu.liquid
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="sec_main_center">
-	<nav role="doc-toc">
-		<hgroup>
-			<h1>{{ title | default: 'Game title' }}</h1>
-			<p>{{ additional | default: 'Additional name' }}</p>
-		</hgroup>
-		<ul class="link">
-			{% for link in links %}
-				<li>
-					<a href="{{ link.href }}">{{ link.text }}</a>
-				</li>
-			{% endfor %}
-		</ul>
-	</nav>
-</div>
diff --git a/source/view/_includes/hippie/partials/gate-list.liquid b/source/view/_includes/hippie/partials/gate-list.liquid
deleted file mode 100644
index 7ef18bd..0000000
--- a/source/view/_includes/hippie/partials/gate-list.liquid
+++ /dev/null
@@ -1,19 +0,0 @@
-<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" alt="icon"/>{{ link.name }}</a>
-					</li>
-				{% endfor %}
-			</ul>
-		{% endif %}
-	</section>
-</article>
diff --git a/source/view/_includes/hippie/partials/gate-simple.liquid b/source/view/_includes/hippie/partials/gate-simple.liquid
deleted file mode 100644
index 9d0b54e..0000000
--- a/source/view/_includes/hippie/partials/gate-simple.liquid
+++ /dev/null
@@ -1,7 +0,0 @@
-<article class="portal__entry">
-	<section>
-		<h2>
-			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
-		</h2>
-	</section>
-</article>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/header-page.liquid b/source/view/_includes/hippie/partials/header-page.liquid
deleted file mode 100644
index a37637a..0000000
--- a/source/view/_includes/hippie/partials/header-page.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<header class="header_site">
-	<div id="begin"></div>
-</header>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/header-status.liquid b/source/view/_includes/hippie/partials/header-status.liquid
deleted file mode 100644
index 725e305..0000000
--- a/source/view/_includes/hippie/partials/header-status.liquid
+++ /dev/null
@@ -1,21 +0,0 @@
-<div id="top">
-	<h1 class="brand">
-		<a href="#">{{ hippie.brand | upcase }}</a>
-	</h1>
-	<nav>
-		<ul>
-			{% for link in links %}
-				<li>
-					<a href="{{ link.href }}">{{ link.text }}</a>
-				</li>
-			{% endfor %}
-		</ul>
-	</nav>
-	<div class="state">
-		<p>{% render 'hippie/partials/status-coord', id: "log" %}
-			/
-			{% render 'hippie/partials/status-date', id: "date" %}
-			/
-			{% render 'hippie/partials/status-time', id: "time" %}</p>
-	</div>
-</div>
diff --git a/source/view/_includes/hippie/partials/links.liquid b/source/view/_includes/hippie/partials/links.liquid
deleted file mode 100644
index 32d854d..0000000
--- a/source/view/_includes/hippie/partials/links.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-{% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
-	<link rel="shortcut icon" type="image/x-icon" href="/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/view/_includes/hippie/partials/log-assets.liquid b/source/view/_includes/hippie/partials/log-assets.liquid
deleted file mode 100644
index a34b417..0000000
--- a/source/view/_includes/hippie/partials/log-assets.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<script>
-	assetsLoaded = {{ state | default: false, allow_false: true }};
-</script>
diff --git a/source/view/_includes/hippie/partials/log-log.liquid b/source/view/_includes/hippie/partials/log-log.liquid
deleted file mode 100644
index ba21f2a..0000000
--- a/source/view/_includes/hippie/partials/log-log.liquid
+++ /dev/null
@@ -1,3 +0,0 @@
-<script>
-	logPerf('{{ msg }}', {{ arg | default: '' }});
-</script>
diff --git a/source/view/_includes/hippie/partials/log-setup.liquid b/source/view/_includes/hippie/partials/log-setup.liquid
deleted file mode 100644
index 04fd9b2..0000000
--- a/source/view/_includes/hippie/partials/log-setup.liquid
+++ /dev/null
@@ -1,6 +0,0 @@
-{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
-<script>
-	debugOn = {{ state }};
-	debugOnScreen = {{ display | default: false }};
-	assetsLoaded = {{ assets | default: false }};
-</script>
diff --git a/source/view/_includes/hippie/partials/log-start.liquid b/source/view/_includes/hippie/partials/log-start.liquid
deleted file mode 100644
index e137e33..0000000
--- a/source/view/_includes/hippie/partials/log-start.liquid
+++ /dev/null
@@ -1,4 +0,0 @@
-<script>
-	logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
-	logPerf('HEAD start  :: Debugging performance...', debugOn);
-</script>
diff --git a/source/view/_includes/hippie/partials/meta.liquid b/source/view/_includes/hippie/partials/meta.liquid
deleted file mode 100644
index a4b3cc2..0000000
--- a/source/view/_includes/hippie/partials/meta.liquid
+++ /dev/null
@@ -1,7 +0,0 @@
-<meta name="robots" content="noindex">
-	<meta name="generator" content="{{ eleventy.generator }}">
-	<meta name="author" content="{{ author | default: '' }}">
-	<meta name="description" content="{{ desc | default: '' }}">
-	<meta name="keywords" content="{{ keys | default: '' }}">
-
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/nav-page.liquid b/source/view/_includes/hippie/partials/nav-page.liquid
deleted file mode 100644
index cf52d72..0000000
--- a/source/view/_includes/hippie/partials/nav-page.liquid
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="pos_rel">
-	<nav class="nav_page_meta">
-		<ul>
-			<li class="js_scrolltop di_none">
-				<a href="#begin" class="a_button_meta">
-					<div class="sprite_img demo__sprite_up"></div>
-					{% comment %}<img src="/art/up.png" alt="" width="32" height="64">{% endcomment %}
-				</a>
-			</li>
-			<li>
-				{% comment %}<button class="">Show Meta Information</button>{% endcomment %}
-				{% comment %}<a href="#meta" class="js_showmeta a_button_meta">
-					<div class="sprite_img demo__sprite_meta"></div>
-				</a>{% endcomment %}
-				<button class="js_showmeta button_clear" type="button">
-					<div class="sprite_img demo__sprite_meta"></div>
-				</button>
-			</li>
-			<li>
-				<button id="js-toggle-fade">F</button>
-			</li>
-			<li class="js_scrolldown">
-				<a href="#end" class="a_button_meta">
-					<div class="sprite_img demo__sprite_down"></div>
-					{% comment %}<img src="/art/down.png" alt="" width="32" height="32">{% endcomment %}
-				</a>
-			</li>
-		</ul>
-	</nav>
-</div>
-{% comment %}<div class="exp_overlay_btn exp_help_btn">
-	<span class="span_solo">?</span>
-</div>{% endcomment %}
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/placeholder-flag.liquid b/source/view/_includes/hippie/partials/placeholder-flag.liquid
deleted file mode 100644
index 0534104..0000000
--- a/source/view/_includes/hippie/partials/placeholder-flag.liquid
+++ /dev/null
@@ -1,43 +0,0 @@
-{% assign height = width | divided_by: 1.6 %}
-
-{% if type == 'svg' or type == '' %}
-	<svg id="{{ id }}" 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">
-		{% comment %}<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>{% endcomment %}
-		{% if desc %}
-			<desc>{{ desc }}</desc>
-		{% endif %}
-		<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>
-{% elsif type == 'img' %}
-	{% if src == 'file' %}
-		<picture>
-			<source srcset="/art/flag_websafe_128x80.webp" type="image/webp"/>
-			<img src="/art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
-		</picture>
-	{% else %}
-		<img
-			width="{{ width }}"
-			height="{{ height }}"
-			alt="{{ desc }}"
-			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=">
-	{% endif %}
-{% endif %}
diff --git a/source/view/_includes/hippie/partials/script-log.liquid b/source/view/_includes/hippie/partials/script-log.liquid
deleted file mode 100644
index 7e270c7..0000000
--- a/source/view/_includes/hippie/partials/script-log.liquid
+++ /dev/null
@@ -1,113 +0,0 @@
-<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/view/_includes/hippie/partials/song.liquid b/source/view/_includes/hippie/partials/song.liquid
deleted file mode 100644
index 534da59..0000000
--- a/source/view/_includes/hippie/partials/song.liquid
+++ /dev/null
@@ -1,10 +0,0 @@
-<article class="songbook_song">
-	<header>
-		<h2>{{ data.title }}</h2>
-		<h6>{{ data.releaseDate }}</h6>
-		<p>{{ data.description }}</p>
-	</header>
-	{% comment %}<pre class="pre_code"><code>{{ content }}</code></pre>{% endcomment %}
-	{{ content }}
-	<footer>{{ index }}</footer>
-</article>
\ No newline at end of file
diff --git a/source/view/_includes/hippie/partials/status-coord.liquid b/source/view/_includes/hippie/partials/status-coord.liquid
deleted file mode 100644
index 29e592f..0000000
--- a/source/view/_includes/hippie/partials/status-coord.liquid
+++ /dev/null
@@ -1 +0,0 @@
-<span id="{{ id }}">{{ text | default: 'X: #, Y: ##' }}</span>
diff --git a/source/view/_includes/hippie/partials/status-date.liquid b/source/view/_includes/hippie/partials/status-date.liquid
deleted file mode 100644
index 296a866..0000000
--- a/source/view/_includes/hippie/partials/status-date.liquid
+++ /dev/null
@@ -1,6 +0,0 @@
-<span id="{{ id }}">
-	<span id="day">Wochentag</span>,
-	<span id="dayNumb">##</span>.
-	<span id="month">Monat</span>
-	<span id="year">####</span>
-</span>
diff --git a/source/view/_includes/hippie/partials/status-time.liquid b/source/view/_includes/hippie/partials/status-time.liquid
deleted file mode 100644
index f981e80..0000000
--- a/source/view/_includes/hippie/partials/status-time.liquid
+++ /dev/null
@@ -1 +0,0 @@
-<span id="{{ id }}">{{ text | default: '00:00:00' }}</span><span>{{ postfix | default: ' Uhr' }}</span>
diff --git a/source/view/_includes/hippie/simple.liquid b/source/view/_includes/hippie/simple.liquid
deleted file mode 100644
index b888886..0000000
--- a/source/view/_includes/hippie/simple.liquid
+++ /dev/null
@@ -1,9 +0,0 @@
-{% assign pageId = page.fileSlug -%}
-{% layout 'hippie/default.liquid' %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-{{ block.super -}}
-<link href="/css/demo.css" media="all" rel="stylesheet"/>
-{% endblock %}
diff --git a/source/view/_includes/hippie/status.liquid b/source/view/_includes/hippie/status.liquid
deleted file mode 100644
index 86499ed..0000000
--- a/source/view/_includes/hippie/status.liquid
+++ /dev/null
@@ -1,37 +0,0 @@
-<!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="/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
diff --git a/source/view/_includes/hippie/world.liquid b/source/view/_includes/hippie/world.liquid
deleted file mode 100644
index ca935dc..0000000
--- a/source/view/_includes/hippie/world.liquid
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-	<meta charset="utf-8">
-	<title>{{ title }}</title>
-</head>
-
-<body>
-{{ content }}
-</body>
-</html>
\ No newline at end of file
diff --git a/source/view/demo/art/10print.liquid b/source/view/demo/art/10print.liquid
index 761218c..2a62d3d 100644
--- a/source/view/demo/art/10print.liquid
+++ b/source/view/demo/art/10print.liquid
@@ -3,7 +3,7 @@ title: 10print
 tags:
 - demoArt
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block style %}
 <style>
diff --git a/source/view/demo/art/matrix.liquid b/source/view/demo/art/matrix.liquid
index 2078d39..326c77e 100644
--- a/source/view/demo/art/matrix.liquid
+++ b/source/view/demo/art/matrix.liquid
@@ -3,7 +3,7 @@ title: Matrix
 tags:
 - demoArt
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block style %}
 <style>
diff --git a/source/view/demo/art/squares2.liquid b/source/view/demo/art/squares2.liquid
index 1383fad..fb44db9 100644
--- a/source/view/demo/art/squares2.liquid
+++ b/source/view/demo/art/squares2.liquid
@@ -3,7 +3,7 @@ title: Squares²
 tags:
 - demoArt
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block style %}
 <style>
diff --git a/source/view/demo/basics.liquid b/source/view/demo/basics.liquid
index e32b6cc..a43bd90 100644
--- a/source/view/demo/basics.liquid
+++ b/source/view/demo/basics.liquid
@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 2
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/page.liquid' %}
 
 {% block title %}Grundlagen{% endblock %}
 
@@ -580,7 +580,7 @@ order: 2
 	</article>
 	<article>
 		<h1 id="embedded">Eingebundene Inhalte</h1>
-		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		{% render 'hippie-view/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: '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
@@ -599,7 +599,7 @@ order: 2
 			und
 			<code>&lt;picture&gt;</code>
 			in Kombination verwendet werden.</p>
-		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		{% render 'hippie-view/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
 	</article>
 	<article>
 		<h1>Tabellen</h1>
diff --git a/source/view/demo/components.liquid b/source/view/demo/components.liquid
index 52ce6c3..40aad04 100644
--- a/source/view/demo/components.liquid
+++ b/source/view/demo/components.liquid
@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 3
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/page.liquid' %}
 
 {% block title %}Komponenten{% endblock %}
 
@@ -94,7 +94,7 @@ order: 3
 		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
 		<footer>Fußbereich</footer>
 		<div style="position:relative;height:256px;background-color:#b7e0f0;">
-			{% render 'hippie/partials/footer-pinned.liquid' %}
+			{% render 'hippie-view/partials/footer-pinned.liquid' %}
 		</div>
 	</article>
 	<article>
diff --git a/source/view/demo/examples/blog.liquid b/source/view/demo/examples/blog.liquid
index 59b9752..a3fad21 100644
--- a/source/view/demo/examples/blog.liquid
+++ b/source/view/demo/examples/blog.liquid
@@ -3,7 +3,7 @@ title: Blog
 tags:
 - demoExample
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <div class="sec_main_center">
diff --git a/source/view/demo/examples/card.liquid b/source/view/demo/examples/card.liquid
index dbe560b..9ffbd07 100644
--- a/source/view/demo/examples/card.liquid
+++ b/source/view/demo/examples/card.liquid
@@ -4,12 +4,12 @@ tags:
 - demoExample
 ---
 {% assign pageClass = "html_card" %}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <div class="card_bkg">
 	<div id="dither"></div>
-	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
 	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
 </div>
 <div class="card_box">
diff --git a/source/view/demo/examples/clock.liquid b/source/view/demo/examples/clock.liquid
index c8535c6..cc44610 100644
--- a/source/view/demo/examples/clock.liquid
+++ b/source/view/demo/examples/clock.liquid
@@ -4,7 +4,7 @@ tags:
 - demoExample
 ---
 {% assign bodyClass = 'body_clock' -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
diff --git a/source/view/demo/examples/game/index.liquid b/source/view/demo/examples/game/index.liquid
index 6dc8d2f..38eb6b6 100644
--- a/source/view/demo/examples/game/index.liquid
+++ b/source/view/demo/examples/game/index.liquid
@@ -4,7 +4,7 @@ tags:
 - demoExample
 - index
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <div class="sec_main_center">
diff --git a/source/view/demo/examples/game/intro.liquid b/source/view/demo/examples/game/intro.liquid
index 93988bd..9dd0ede 100644
--- a/source/view/demo/examples/game/intro.liquid
+++ b/source/view/demo/examples/game/intro.liquid
@@ -4,7 +4,7 @@ tags:
 - game
 ---
 {% assign bodyClass = 'body_intro' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
 <div id="loader" class="step op_show">
diff --git a/source/view/demo/examples/game/menu.liquid b/source/view/demo/examples/game/menu.liquid
index c29a2ed..fb778f7 100644
--- a/source/view/demo/examples/game/menu.liquid
+++ b/source/view/demo/examples/game/menu.liquid
@@ -4,10 +4,10 @@ tags:
 - game
 ---
 {% assign bodyClass = 'body_menu' -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/game-menu.liquid', links: menu %}
+{% render 'hippie-view/partials/game-menu.liquid', links: menu %}
 <footer>
 	{% brand 'brand', 'last' %}
 	<p>Marke</p>
diff --git a/source/view/demo/examples/game/mwo.liquid b/source/view/demo/examples/game/mwo.liquid
index ccce96e..eb8f574 100644
--- a/source/view/demo/examples/game/mwo.liquid
+++ b/source/view/demo/examples/game/mwo.liquid
@@ -4,7 +4,7 @@ tags:
 - game
 ---
 {% assign bodyClass = 'body_mwo' -%}
-{% layout 'hippie/game.liquid' %}
+{% layout 'hippie-view/game.liquid' %}
 
 {% block links %}
 {{ block.super -}}
@@ -41,6 +41,21 @@ tags:
 		<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
 		<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
 	</nav>
+	<nav>
+		<span>Drag/Attraction</span>
+		<button>Toggle</button>
+		<hr class="vertical">
+		<div class="group_nav">
+			<label>Strength</label>
+			<input min="0" max="100" value="16" type="range">
+			<span>0.15</span>
+		</div>
+		<div class="group_nav">
+			<label>Distance</label>
+			<input min="48" max="512" value="256" type="range">
+			<span>256</span>
+		</div>
+	</nav>
 </header>
 {% endblock %}
 
diff --git a/source/view/demo/examples/game/tfw.liquid b/source/view/demo/examples/game/tfw.liquid
index 991a933..35d97ca 100644
--- a/source/view/demo/examples/game/tfw.liquid
+++ b/source/view/demo/examples/game/tfw.liquid
@@ -4,7 +4,7 @@ tags:
 - game
 ---
 {% assign bodyClass = 'body_tfw' -%}
-{% layout 'hippie/game.liquid' %}
+{% layout 'hippie-view/game.liquid' %}
 
 {% block body %}
 <header class="io">
diff --git a/source/view/demo/examples/hello.md b/source/view/demo/examples/hello.md
index 9bd4c71..bd3cc65 100644
--- a/source/view/demo/examples/hello.md
+++ b/source/view/demo/examples/hello.md
@@ -1,6 +1,6 @@
 ---
 title: "Hello World"
-layout: hippie/world.liquid
+layout: hippie-view/world.liquid
 tags:
 - demoExample
 ---
diff --git a/source/view/demo/examples/portal.liquid b/source/view/demo/examples/portal.liquid
index 545c0c9..fb4dff0 100644
--- a/source/view/demo/examples/portal.liquid
+++ b/source/view/demo/examples/portal.liquid
@@ -14,16 +14,16 @@ links:
   img: '/art/bullet.gif'
 ---
 {% assign bodyClass = "body_portal" %}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <div class="portal">
-	{% render 'hippie/partials/gate-list',
+	{% render 'hippie-view/partials/gate-list',
 		name: 'Tor mit Symbol und Liste',
 		url: '../demo',
 		image: image,
 		links: links
 	%}
-	{% render 'hippie/partials/gate-simple', name: 'Tor', url: '../demo' %}
+	{% render 'hippie-view/partials/gate-simple', name: 'Tor', url: '../demo' %}
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/source/view/demo/examples/songbook.liquid b/source/view/demo/examples/songbook.liquid
index 5329c0a..06b7e47 100644
--- a/source/view/demo/examples/songbook.liquid
+++ b/source/view/demo/examples/songbook.liquid
@@ -3,7 +3,7 @@ title: Songbook
 tags:
 - demoExample
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <div class="sec_main_center">
@@ -31,7 +31,7 @@ tags:
 		richten.</p>
 	<hr class="double dotted">
 	{%- for piece in collections.song -%}
-		{% render 'hippie/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
+		{% render 'hippie-view/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
 	{%- endfor -%}
 	<hr/>
 	<address>{% text hippie.placeholders.name %}</address>
diff --git a/source/view/demo/examples/start.liquid b/source/view/demo/examples/start.liquid
index 1b4a39c..b8677cc 100644
--- a/source/view/demo/examples/start.liquid
+++ b/source/view/demo/examples/start.liquid
@@ -5,10 +5,10 @@ tags:
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign bodyClass = 'body_start' -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
+{% render 'hippie-view/partials/header-status', hippie: hippie, links: start %}
 <main>
 	<header class="io">
 		<form id="wwwForm" class="group_nav" action="https://duckduckgo.com/">
diff --git a/source/view/demo/examples/ui/cli.liquid b/source/view/demo/examples/ui/cli.liquid
index a87d4b8..7ffb5e5 100644
--- a/source/view/demo/examples/ui/cli.liquid
+++ b/source/view/demo/examples/ui/cli.liquid
@@ -4,7 +4,7 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_cli' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
 <div id="cli">
diff --git a/source/view/demo/examples/ui/drag.liquid b/source/view/demo/examples/ui/drag.liquid
index 1c3770f..051e866 100755
--- a/source/view/demo/examples/ui/drag.liquid
+++ b/source/view/demo/examples/ui/drag.liquid
@@ -3,7 +3,7 @@ title: Drag
 tags:
 - ui
 ---
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
@@ -13,9 +13,9 @@ tags:
 <div>
 	<div id="test">
 		<div class="body_frame">
-			{% render 'hippie/partials/frame-header.liquid' %}
+			{% render 'hippie-view/partials/frame-header.liquid' %}
 			<main></main>
-			{% render 'hippie/partials/frame-mode.liquid' %}
+			{% render 'hippie-view/partials/frame-mode.liquid' %}
 		</div>
 	</div>
 </div>
diff --git a/source/view/demo/examples/ui/explorer.liquid b/source/view/demo/examples/ui/explorer.liquid
index bfdd28a..7bb21cf 100644
--- a/source/view/demo/examples/ui/explorer.liquid
+++ b/source/view/demo/examples/ui/explorer.liquid
@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <main class="io">
 	<aside class="io">
 		<nav>
@@ -138,8 +138,8 @@ tags:
 				</tbody>
 			</table>
 		</div>
-		{% render 'hippie/partials/frame-status.liquid' %}
+		{% render 'hippie-view/partials/frame-status.liquid' %}
 	</section>
 </main>
-{% render 'hippie/partials/frame-mode.liquid' %}
+{% render 'hippie-view/partials/frame-mode.liquid' %}
 {% endblock %}
\ No newline at end of file
diff --git a/source/view/demo/examples/ui/form.liquid b/source/view/demo/examples/ui/form.liquid
index 3a7aceb..65fe244 100644
--- a/source/view/demo/examples/ui/form.liquid
+++ b/source/view/demo/examples/ui/form.liquid
@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <header class="io">
 	<h1>Formulare</h1>
 	<button data-action="add">Hinzufügen</button>
diff --git a/source/view/demo/examples/ui/gallery.liquid b/source/view/demo/examples/ui/gallery.liquid
index b2871d2..8eadece 100755
--- a/source/view/demo/examples/ui/gallery.liquid
+++ b/source/view/demo/examples/ui/gallery.liquid
@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <main class="io">
 	<section>
 		<header class="io">
@@ -27,10 +27,10 @@ tags:
 			<div>B</div>
 			<div>C</div>
 		</div>
-		{% render 'hippie/partials/frame-status.liquid' %}
+		{% render 'hippie-view/partials/frame-status.liquid' %}
 	</section>
 </main>
-{% render 'hippie/partials/frame-mode.liquid' %}
+{% render 'hippie-view/partials/frame-mode.liquid' %}
 {% endblock %}
 
 {%- block script %}
diff --git a/source/view/demo/examples/ui/index.liquid b/source/view/demo/examples/ui/index.liquid
index 0e6dcc8..063daa5 100644
--- a/source/view/demo/examples/ui/index.liquid
+++ b/source/view/demo/examples/ui/index.liquid
@@ -4,7 +4,7 @@ tags:
 - demoExample
 - index
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/view/demo/examples/ui/table.liquid b/source/view/demo/examples/ui/table.liquid
index 54b12ff..960ce8f 100755
--- a/source/view/demo/examples/ui/table.liquid
+++ b/source/view/demo/examples/ui/table.liquid
@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <main class="io">
 	<section>
 		<header class="io">
@@ -54,7 +54,7 @@ tags:
 			</thead>
 			<tbody id="positions"></tbody>
 		</table>
-		{% render 'hippie/partials/frame-status.liquid' %}
+		{% render 'hippie-view/partials/frame-status.liquid' %}
 	</section>
 </main>
 <template id="rowDefault">
@@ -185,7 +185,7 @@ tags:
 	</tr>
 </template>
 
-{% render 'hippie/partials/frame-mode.liquid' %}
+{% render 'hippie-view/partials/frame-mode.liquid' %}
 {% endblock %}
 
 {%- block script %}
diff --git a/source/view/demo/examples/ui/tui.liquid b/source/view/demo/examples/ui/tui.liquid
index ac42d52..96d6486 100644
--- a/source/view/demo/examples/ui/tui.liquid
+++ b/source/view/demo/examples/ui/tui.liquid
@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <main class="io"></main>
-{% render 'hippie/partials/frame-mode.liquid' %}
+{% render 'hippie-view/partials/frame-mode.liquid' %}
 {% endblock %}
\ No newline at end of file
diff --git a/source/view/demo/examples/ui/windows.liquid b/source/view/demo/examples/ui/windows.liquid
index 443b276..9e346aa 100644
--- a/source/view/demo/examples/ui/windows.liquid
+++ b/source/view/demo/examples/ui/windows.liquid
@@ -4,7 +4,7 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
 <div id="task-bar">
diff --git a/source/view/demo/index.liquid b/source/view/demo/index.liquid
index 4ec424f..686ed94 100644
--- a/source/view/demo/index.liquid
+++ b/source/view/demo/index.liquid
@@ -4,7 +4,7 @@ title: Index
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
-{% layout 'hippie/full.liquid' %}
+{% layout 'hippie-view/full.liquid' %}
 
 {% block body %}
 <div class="wrap">
diff --git a/source/view/demo/introduction.liquid b/source/view/demo/introduction.liquid
index 21e2e52..5dea827 100644
--- a/source/view/demo/introduction.liquid
+++ b/source/view/demo/introduction.liquid
@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 1
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/page.liquid' %}
 
 {% block title %}Einführung{% endblock %}
 
diff --git a/source/view/demo/layouts.liquid b/source/view/demo/layouts.liquid
index 958c545..3f1e56a 100644
--- a/source/view/demo/layouts.liquid
+++ b/source/view/demo/layouts.liquid
@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 4
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/page.liquid' %}
 
 {% block title %}Gestaltungen{% endblock %}
 
@@ -20,7 +20,7 @@ order: 4
 		<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">
-				{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+				{% render 'hippie-view/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
 			</div>
 			<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
 			<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
@@ -215,7 +215,7 @@ order: 4
 	<article>
 		<h2>Eingebettet</h2>
 		<div class="demo__flag">
-			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+			{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
 		</div>
 	</article>
 	<article>
diff --git a/source/view/demo/pages/blank.liquid b/source/view/demo/pages/blank.liquid
index 5cf5e7c..36a6802 100644
--- a/source/view/demo/pages/blank.liquid
+++ b/source/view/demo/pages/blank.liquid
@@ -2,4 +2,4 @@
 title: Blank
 ---
 {% assign pageId = page.fileSlug -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
diff --git a/source/view/demo/pages/default.liquid b/source/view/demo/pages/default.liquid
index 9b84b78..b4d1c3d 100644
--- a/source/view/demo/pages/default.liquid
+++ b/source/view/demo/pages/default.liquid
@@ -4,7 +4,7 @@ title: Default
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'default' -%}
 {% assign bodyClass = 'default' -%}
-{% layout 'hippie/default.liquid' %}
+{% layout 'hippie-view/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/view/demo/pages/error/304.liquid b/source/view/demo/pages/error/304.liquid
index 75127a7..b8280b2 100644
--- a/source/view/demo/pages/error/304.liquid
+++ b/source/view/demo/pages/error/304.liquid
@@ -2,7 +2,7 @@
 title: 304
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/400.liquid b/source/view/demo/pages/error/400.liquid
index ffe7d9c..1bc9865 100644
--- a/source/view/demo/pages/error/400.liquid
+++ b/source/view/demo/pages/error/400.liquid
@@ -2,7 +2,7 @@
 title: 400
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/401.liquid b/source/view/demo/pages/error/401.liquid
index a2fbb39..78a9e98 100644
--- a/source/view/demo/pages/error/401.liquid
+++ b/source/view/demo/pages/error/401.liquid
@@ -2,7 +2,7 @@
 title: 401
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/403.liquid b/source/view/demo/pages/error/403.liquid
index cfa9eed..6061132 100644
--- a/source/view/demo/pages/error/403.liquid
+++ b/source/view/demo/pages/error/403.liquid
@@ -2,7 +2,7 @@
 title: 403
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/404.liquid b/source/view/demo/pages/error/404.liquid
index 9a00731..b52db3b 100644
--- a/source/view/demo/pages/error/404.liquid
+++ b/source/view/demo/pages/error/404.liquid
@@ -2,7 +2,7 @@
 title: 404
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/408.liquid b/source/view/demo/pages/error/408.liquid
index 1f0ef44..79f4335 100644
--- a/source/view/demo/pages/error/408.liquid
+++ b/source/view/demo/pages/error/408.liquid
@@ -2,7 +2,7 @@
 title: 408
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/500.liquid b/source/view/demo/pages/error/500.liquid
index 5e6cb69..1d59368 100644
--- a/source/view/demo/pages/error/500.liquid
+++ b/source/view/demo/pages/error/500.liquid
@@ -2,7 +2,7 @@
 title: 500
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/error/503.liquid b/source/view/demo/pages/error/503.liquid
index 2a01f87..16ee802 100644
--- a/source/view/demo/pages/error/503.liquid
+++ b/source/view/demo/pages/error/503.liquid
@@ -2,7 +2,7 @@
 title: 503
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}
diff --git a/source/view/demo/pages/maintenance.liquid b/source/view/demo/pages/maintenance.liquid
index fe36599..35261ed 100644
--- a/source/view/demo/pages/maintenance.liquid
+++ b/source/view/demo/pages/maintenance.liquid
@@ -2,7 +2,7 @@
 title: Maintenance
 ---
 {% assign pageClass = 'h_full_view' -%}
-{% layout 'hippie/status.liquid' %}
+{% layout 'hippie-view/status.liquid' %}
 
 {% block body %}
 <hgroup id="root" class="txt_center">

From c6fca63470f6f21b20c3e8caacbbcf69f71ae5b4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 23 Apr 2026 21:53:27 +0200
Subject: [PATCH 252/253] feat: Update submodule hippie-view

---
 source/view/_includes/hippie-view | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/view/_includes/hippie-view b/source/view/_includes/hippie-view
index 980b611..49fa858 160000
--- a/source/view/_includes/hippie-view
+++ b/source/view/_includes/hippie-view
@@ -1 +1 @@
-Subproject commit 980b611a319c34004be536238814ff9b093059cd
+Subproject commit 49fa85800392bc217653e6a90573feda4a1dc0ed

From 6074dc64806c7c8ceaaf2d1bdcd3173dafbe8bc5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 23 Apr 2026 21:56:44 +0200
Subject: [PATCH 253/253] fix: Spelling in README

---
 README.md                 | 2 +-
 source/style/hippie-style | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e40ece3..3f4beda 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Hippie interweaves preeminent personal interface elements
 This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.  
 It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together.
 
-Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with
+Styling is powered by the CSS extension language [Sass](https://sass-lang.com/). The HTML pages are written with
 templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used,
 but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are
 also options.
diff --git a/source/style/hippie-style b/source/style/hippie-style
index a66010a..08b2054 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit a66010a9ed535ad8ca5bbb7faed222861fc40ad4
+Subproject commit 08b2054d437e3ff45ed790f3da0742f8fa8fa30f