From e4e361b9bdbb96aa8b45272ab5c2567958a5fc15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 14:40:54 +0200
Subject: [PATCH] Align VSF detail intro structure with transparent-card setup

---
 patterns/vsf-list-detailseite.html         | 4 +---
 styles/33-layouts-vsf-list-detailseite.css | 9 +++------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index 4afb8aa..8cbc2d8 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -101,9 +101,7 @@
     </div>
 
     <div class="sg-transparent-card sg-vsf-list-detail-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
-      <div class="sg-vsf-list-detail-page__title-row">
-        <h1 class="sg-heading-h1 sg-text-on-dark sg-vsf-list-detail-page__title">TITEL DER LISTE</h1>
-      </div>
+      <h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">TITEL DER LISTE</h1>
       <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
     </div>
 
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index 64f0ed4..1b15c85 100644
--- a/styles/33-layouts-vsf-list-detailseite.css
+++ b/styles/33-layouts-vsf-list-detailseite.css
@@ -25,12 +25,9 @@
   gap: var(--spacing-large);
 }
 
-.sg-vsf-list-detail-page__title-row {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-small);
-  width: fit-content;
-  max-width: 100%;
+.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
+.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+  color: var(--color-font-light);
 }
 
 .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {