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 01/10] 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 02/10] 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 03/10] 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 04/10] 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 05/10] 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 06/10] 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 07/10] 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 08/10] 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 09/10] 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 10/10] 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