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 1/7] 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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 6/7] 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 7/7] 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