From 439e5b5b95b3f820c9e2d7bafeb28b8088f25033 Mon Sep 17 00:00:00 2001
From: Sonja Scheungrab <sonja.scheungrab@innoq.com>
Date: Tue, 26 Mar 2024 14:19:35 +0100
Subject: [PATCH] Sansify legacy modernization page and make FAQ cleaner

---
 .../_legacy-modernization-page.scss            | 17 ++++++++++++++---
 .../legacy-modernization-page.html             | 18 +++++++++---------
 lib/styles/01-base/_fonts.scss                 |  7 +++++++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss b/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss
index 2d1455d14..e53009d2f 100644
--- a/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss
+++ b/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss
@@ -1,6 +1,10 @@
 .legacy-modernization-page {
   background: $gradient-2;
 
+  p {
+    @extend %body-font-sans;
+  }
+
   .longquote__zigzag {
     @include zigzag($gradient-header-background-color);
   }
@@ -15,20 +19,27 @@
 .faq-section {
   padding-right: $spacer-md;
   padding-left: $spacer-md;
-  border-top: 6px solid $brand-primary;
-  border-bottom: 6px solid $brand-primary;
 }
 
 .text-grid {
   display: grid;
   grid-template-columns: 1fr;
-  row-gap: $spacer-lg;
+  row-gap: $spacer-md;
+
+  &__heading {
+    @extend %heading-font-bold;
+
+    & + p {
+      margin-top: $spacer-xxs;
+    }
+  }
 }
 
 @media screen and (min-width: $grid-breakpoint-md-lg) {
   .text-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
+    row-gap: $spacer-lg;
     column-gap: $spacer-lg;
   }
 }
diff --git a/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html b/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html
index 32cc9401c..65f757d41 100644
--- a/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html
+++ b/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html
@@ -219,39 +219,39 @@ <h2>FAQ Legacy-Modernisierung</h2>
         <p>{{intro_text}}</p>
         <div class="text-grid">
             <div>
-                <h3 class="textbox-sequence__header">Lorem ipsum test bla mehr text lorem?</h3>
+                <h3 class="text-grid__heading">Lorem ipsum test bla mehr text lorem?</h3>
                 <p>{{text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Bla bla mehr text lorem?</h3>
+                <h3 class="text-grid__heading">Bla bla mehr text lorem?</h3>
                 <p>{{intro_text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Fragen über Fragen?</h3>
+                <h3 class="text-grid__heading">Fragen über Fragen?</h3>
                 <p>{{intro_text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Und noch eine?</h3>
+                <h3 class="text-grid__heading">Und noch eine?</h3>
                 <p>{{text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Hallo?</h3>
+                <h3 class="text-grid__heading">Hallo?</h3>
                 <p>{{text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Goodbye!</h3>
+                <h3 class="text-grid__heading">Goodbye!</h3>
                 <p>{{intro_text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Und noch eine?</h3>
+                <h3 class="text-grid__heading">Und noch eine?</h3>
                 <p>{{intro_text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Hallo?</h3>
+                <h3 class="text-grid__heading">Hallo?</h3>
                 <p>{{intro_text}}</p>
             </div>
             <div>
-                <h3 class="textbox-sequence__header">Goodbye!</h3>
+                <h3 class="text-grid__heading">Goodbye!</h3>
                 <p>{{text}}</p>
             </div>
         </div>
diff --git a/lib/styles/01-base/_fonts.scss b/lib/styles/01-base/_fonts.scss
index 49794b1ad..57e77e445 100644
--- a/lib/styles/01-base/_fonts.scss
+++ b/lib/styles/01-base/_fonts.scss
@@ -23,6 +23,13 @@
   font-style: normal;
 }
 
+%body-font-sans,
+.body-font-bold {
+  font-family: $font-family-sans-serif;
+  font-weight: normal;
+  font-style: normal;
+}
+
 %body-font-bold-italic,
 .body-font-bold-italic {
   font-family: $font-family-serif;