demo-index.html

@@ -406,13 +406,10 @@
 		<h1>Druck</h1>
 
 		<section>
-			<header>
+			<header class="header__txt">
 				<h1>Ende der Einführung</h1>
-			</header>
-			<article>
 				<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
-				<hr class="hr__dotted"/>
-			</article>
+			</header>
 		</section>
 	</div>
 
@@ -427,7 +424,7 @@
 	</section>
 
 	<section class="sec__main_center">
-		<header>
+		<header class="header__txt">
 			<h1>Medienformat Abfragen</h1>
 		</header>
 		<article>
@@ -446,7 +443,7 @@
 		</article>
 	</section>
 	<section class="sec__main_center">
-		<header>
+		<header class="header__txt">
 			<h1>Sammlung formatierter Elemente</h1>
 			<p>Die Elemente werden fortlaufend komplexer</p>
 		</header>
@@ -628,7 +625,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
 		</article>
 	</section>
 	<section>
-		<header class="sec__main_center">
+		<header class="sec__main_center header__txt">
 			<h1>Autarke Seiten</h1>
 			<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
 		</header>

source/style/elements/_sections.scss

@@ -65,11 +65,6 @@ section {
 	border-top-style: solid;
 	border-color: $basic_border_color;
 	padding-top: $space_3;
-
-	h1:first-of-type {
-		margin-top: 0;
-		font-weight: bold;
-	}
 }
 
 aside {
@@ -112,6 +107,15 @@ header {
 	overflow: auto;
 }
 
+.header__txt {
+	margin-bottom: $space_3;
+	border-bottom: $dotted_border;
+
+	h1 {
+		border-top: $basic_border;
+	}
+}
+
 footer {
 
 }

source/style/modules/demo/_demo_module.scss

@@ -6,6 +6,11 @@
 	@extend .sec__main_status;
 	min-height: 50vh;
 	border-color: $foxtrot_color;
+
+	h1:first-of-type {
+		margin-top: 0;
+		font-weight: bold;
+	}
 }
 
 .demo__header {