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