Use Montserrat and fix title

index.html

@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="./styles.css" />
@@ -45,12 +45,17 @@
         </section>
 
         <section class="section section--dark process">
-          <div class="section-head">
-            <h2 class="section-title">
+          <div class="section-head section-head--process">
+            <h2 class="section-title section-title--process">
               <span class="section-title__line">Wie aus Ideen</span>
               <span class="section-title__line">Ergebnisse werden</span>
             </h2>
-            <img src="./media/strichlein_rosa_uber_wort.svg" alt="" aria-hidden="true" />
+            <img
+              class="section-head__accent section-head__accent--process"
+              src="./media/strichlein_rosa_uber_wort.svg"
+              alt=""
+              aria-hidden="true"
+            />
           </div>
 
           <div class="process__grid">

styles.css

@@ -6,7 +6,7 @@
   --text-dark: #364121;
   --shadow-card: 0 14px 30px rgba(47, 58, 24, 0.12);
   --shadow-panel: 0 24px 60px rgba(20, 22, 16, 0.22);
-  --font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
+  --font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
   --font-weight-regular: 400;
   --font-weight-bold: 700;
   --font-weight-black: 900;
@@ -245,6 +245,24 @@ button {
 
 .section-title__line {
   display: block;
+  white-space: nowrap;
+}
+
+.section-title--process {
+  max-width: none;
+}
+
+.section-head--process {
+  position: relative;
+  width: fit-content;
+}
+
+.section-head__accent--process {
+  position: absolute;
+  top: 0.15rem;
+  right: -5rem;
+  width: 78px;
+  margin-top: 0;
 }
 
 .section-head img {
@@ -647,6 +665,17 @@ button {
     margin-bottom: 2rem;
   }
 
+  .section-head--process {
+    width: fit-content;
+    justify-content: center;
+  }
+
+  .section-head__accent--process {
+    right: -0.25rem;
+    top: 0;
+    width: 64px;
+  }
+
   .section-title,
   .about__content .section-head .section-title {
     text-align: left;