From e7b3e01124b75d1f32181dd5590a9be6144042a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 18 Jun 2026 10:43:40 +0200
Subject: [PATCH] Add top spacing to page layout heading

---
 patterns/page-layout-basic.html         | 2 +-
 styleguide.css                          | 1 +
 styles/36-layouts-page-layout-basic.css | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 styles/36-layouts-page-layout-basic.css

diff --git a/patterns/page-layout-basic.html b/patterns/page-layout-basic.html
index 828c89e..6250057 100644
--- a/patterns/page-layout-basic.html
+++ b/patterns/page-layout-basic.html
@@ -128,7 +128,7 @@
       </div>
     </div>
 
-    <div class="sg-transparent-card" aria-label="H1 Bereich" data-component="transparent-card">
+    <div class="sg-transparent-card sg-page-layout-basic__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
       <h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
     </div>
 
diff --git a/styleguide.css b/styleguide.css
index 38f04e1..37751b8 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -13,6 +13,7 @@
 @import "./styles/28-patterns-notifications.css";
 @import "./styles/29-patterns-left-navigation.css";
 @import "./styles/30-layouts-card-list-page.css";
+@import "./styles/36-layouts-page-layout-basic.css";
 @import "./styles/33-layouts-vsf-list-detailseite.css";
 @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
 @import "./styles/35-layouts-vsf-register-step-1.css";
diff --git a/styles/36-layouts-page-layout-basic.css b/styles/36-layouts-page-layout-basic.css
new file mode 100644
index 0000000..0a0d0bd
--- /dev/null
+++ b/styles/36-layouts-page-layout-basic.css
@@ -0,0 +1,7 @@
+/* ========================================================= */
+/* Layouts: Page Layout Basic                                */
+/* ========================================================= */
+
+.sg-page-layout-basic__heading-block {
+  margin-top: var(--spacing-large);
+}