feat: New io module

- Add module for io
- Move common io parts to new module

_hippie.scss

@@ -26,6 +26,7 @@
 // Additional Modules and variables
 // in dependency to other basic styles
 // -----------------------------------------------------------------------------
+@import "modules/io/io_module";
 @import "modules/navigation/nav_module";
 @import "modules/editor/editor_module";
 @import "modules/explanation/explanation_module";

elements/_sections.scss

@@ -144,6 +144,18 @@ aside {
 		button {
 			@extend .button_io;
 		}
+
+		.a_button {
+			display: flex;
+		}
+
+		ul.vertical li {
+			margin-bottom: $space_half;
+
+			.a_button > *:last-child {
+				margin-left: auto;
+			}
+		}
 	}
 }
 
@@ -203,69 +215,8 @@ h6 {
 
 // Header
 // -----------------------------------------------------------------------------
-header {}
+header {
-
-.header_page {
-	overflow: auto;
-}
-
-.header_txt {
-	margin-bottom: $space_small;
-	border-bottom: $border_dotted;
-
-	h1 {
-		border-top: $border_basic;
-	}
-}
-
-header,
-aside,
-footer {
 	&.io {
-		.span_solo {
-			border: $width_border_io solid transparent;
-			padding: $padding_basic;
-		}
-	}
-}
-
-header.io,
-aside.io {
-	padding: $space_basic;
-
-	input,
-	button,
-	textarea,
-	select {
-		margin-inline: $space_half;
-	}
-
-	input {
-		@extend .input_io;
-	}
-
-	textarea {
-		@extend .io_textarea;
-	}
-
-	select {
-		@extend .io_select;
-	}
-
-	button {
-		@extend .button_io;
-	}
-}
-
-header,
-footer {
-	&.io {
-		@extend %flex-inline;
-		align-items: stretch;
-	}
-}
-
-header.io {
 		z-index: map.get($z-indexes, "content-top");
 
 		&>*:last-child *:last-child {
@@ -282,10 +233,6 @@ header.io {
 			align-items: stretch;
 		}
 
-	nav li {
-		margin: 0;
-	}
-
 		nav:last-child {
 			margin-left: auto;
 		}
@@ -293,9 +240,24 @@ header.io {
 		h1 {
 			margin: 0;
 		}
+	}
 }
 
-// Footer
+.header_page {
+	overflow: auto;
+}
+
+.header_txt {
+	margin-bottom: $space_small;
+	border-bottom: $border_dotted;
+
+	h1 {
+		border-top: $border_basic;
+	}
+}
+
+header // Footer
+
 // -----------------------------------------------------------------------------
 footer {
 	&.io {

modules/io/_io_module.scss

@@ -0,0 +1,65 @@
+header,
+aside,
+footer {
+	&.io {
+		nav li {
+			margin: 0;
+		}
+
+		nav > div:not(.spacer),
+		nav > span,
+		.a_button {
+			@extend %basic;
+			@extend %size_io_button;
+		}
+
+		.a_button {
+			color: $color_text_io;
+			background-color: $color_back_io;
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: transparentize($color_highlight_basic, 0.8);
+			}
+		}
+	}
+}
+
+header,
+aside {
+	&.io {
+		padding: $space_basic;
+
+		input,
+		button,
+		textarea,
+		select {
+			margin-inline: $space_half;
+		}
+
+		input {
+			@extend .input_io;
+		}
+
+		textarea {
+			@extend .io_textarea;
+		}
+
+		select {
+			@extend .io_select;
+		}
+
+		button {
+			@extend .button_io;
+		}
+	}
+}
+
+header,
+footer {
+	&.io {
+		@extend %flex-inline;
+		align-items: stretch;
+	}
+}