Lock hero headline lines

index.html

@@ -23,7 +23,10 @@
                 alt=""
                 aria-hidden="true"
               />
-              <h1 class="section-title section-title--hero">Von der Idee zur<br />Wirkung</h1>
+              <h1 class="section-title section-title--hero">
+                <span class="hero__line">Von der Idee zur</span>
+                <span class="hero__line">Wirkung</span>
+              </h1>
             </div>
             <button class="button button--dark" type="button" data-open-contact>
               Lass uns starten

styles.css

@@ -142,11 +142,16 @@ button {
 .section-title--hero {
   position: relative;
   z-index: 2;
-  max-width: 6ch;
+  max-width: none;
   font-size: clamp(4rem, 5.15vw, 5.2rem);
   text-align: center;
 }
 
+.hero__line {
+  display: block;
+  white-space: nowrap;
+}
+
 .hero__scribble {
   position: absolute;
   pointer-events: none;