From 21441e8d81e147810ac29eba14e4574e0165911b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sun, 22 Mar 2026 17:02:38 +0100
Subject: [PATCH] Fix hero art layout

---
 index.html | 14 +++++++-------
 styles.css | 46 ++++++++++++++++++++++++----------------------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index e2869d6..8505126 100644
--- a/index.html
+++ b/index.html
@@ -25,22 +25,22 @@
               />
               <img
                 class="hero__scribble hero__scribble--middle"
-                src="./media/illu_oben_hintergrund_striche.svg"
-                alt=""
-                aria-hidden="true"
-              />
-              <img
-                class="hero__scribble hero__scribble--bottom"
                 src="./media/strichlein_rgruen_unter_wort.svg"
                 alt=""
                 aria-hidden="true"
               />
               <img
-                class="hero__scribble hero__scribble--bottom-secondary"
+                class="hero__scribble hero__scribble--bottom"
                 src="./media/striche_blau_unter_wort.svg"
                 alt=""
                 aria-hidden="true"
               />
+              <img
+                class="hero__scribble hero__scribble--bottom-secondary"
+                src="./media/strichlein_rgruen_unter_wort.svg"
+                alt=""
+                aria-hidden="true"
+              />
               <h1 class="section-title section-title--hero">Von der Idee zur Wirkung</h1>
             </div>
             <button class="button button--dark" type="button" data-open-contact>
diff --git a/styles.css b/styles.css
index dea20e9..5d60d30 100644
--- a/styles.css
+++ b/styles.css
@@ -123,8 +123,8 @@ button {
 .hero__headline-wrap {
   position: relative;
   max-width: 32rem;
-  min-height: 29rem;
-  padding-top: 7rem;
+  min-height: 26rem;
+  padding-top: 6rem;
 }
 
 .section-title {
@@ -139,37 +139,39 @@ button {
   position: relative;
   z-index: 2;
   max-width: 6ch;
-  font-size: clamp(4rem, 5.3vw, 5.4rem);
+  font-size: clamp(4rem, 5.15vw, 5.2rem);
+  text-align: center;
 }
 
 .hero__scribble {
   position: absolute;
   pointer-events: none;
+  z-index: 1;
 }
 
 .hero__scribble--top {
   width: clamp(106px, 11vw, 142px);
-  top: 1.1rem;
-  right: 0.6rem;
+  top: 0.45rem;
+  right: -0.2rem;
 }
 
 .hero__scribble--middle {
-  width: clamp(208px, 20vw, 268px);
-  left: 3rem;
-  top: 10.2rem;
+  width: clamp(210px, 21vw, 278px);
+  left: 8.2rem;
+  top: 8.8rem;
   opacity: 1;
 }
 
 .hero__scribble--bottom {
-  width: clamp(170px, 18vw, 248px);
-  left: 10.8rem;
-  bottom: 2.2rem;
+  width: clamp(210px, 20vw, 278px);
+  left: 13.2rem;
+  bottom: 0.15rem;
 }
 
 .hero__scribble--bottom-secondary {
-  width: clamp(184px, 18vw, 250px);
-  left: 9rem;
-  bottom: 2.45rem;
+  width: clamp(190px, 18vw, 248px);
+  left: 15rem;
+  bottom: -0.05rem;
 }
 
 .hero__media {
@@ -641,21 +643,21 @@ button {
   }
 
   .hero__scribble--middle {
-    width: 154px;
-    top: 6.25rem;
-    left: 2.45rem;
+    width: 148px;
+    top: 5.55rem;
+    left: 5.35rem;
   }
 
   .hero__scribble--bottom {
-    width: 128px;
-    left: 5.7rem;
-    bottom: 0.8rem;
+    width: 154px;
+    left: 8.2rem;
+    bottom: 0.25rem;
   }
 
   .hero__scribble--bottom-secondary {
     width: 132px;
-    left: 4.8rem;
-    bottom: 1.1rem;
+    left: 9.5rem;
+    bottom: 0.05rem;
   }
 
   .hero__media {