From 0605e42eabfc914c7ba3f2023a3ae16183b17bcb 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:06:12 +0100
Subject: [PATCH] Use hero composite art

---
 index.html | 22 ++--------------------
 styles.css | 51 +++++++--------------------------------------------
 2 files changed, 9 insertions(+), 64 deletions(-)

diff --git a/index.html b/index.html
index 8505126..3097d74 100644
--- a/index.html
+++ b/index.html
@@ -18,26 +18,8 @@
             <img class="brand brand--top" src="./media/logo_oben.svg" alt="Fabienne Foehn" />
             <div class="hero__headline-wrap">
               <img
-                class="hero__scribble hero__scribble--top"
-                src="./media/strichlein_rosa_uber_wort.svg"
-                alt=""
-                aria-hidden="true"
-              />
-              <img
-                class="hero__scribble hero__scribble--middle"
-                src="./media/strichlein_rgruen_unter_wort.svg"
-                alt=""
-                aria-hidden="true"
-              />
-              <img
-                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"
+                class="hero__scribble hero__scribble--composite"
+                src="./media/illu_oben_hintergrund_striche.svg"
                 alt=""
                 aria-hidden="true"
               />
diff --git a/styles.css b/styles.css
index 5d60d30..f865a71 100644
--- a/styles.css
+++ b/styles.css
@@ -149,29 +149,10 @@ button {
   z-index: 1;
 }
 
-.hero__scribble--top {
-  width: clamp(106px, 11vw, 142px);
-  top: 0.45rem;
-  right: -0.2rem;
-}
-
-.hero__scribble--middle {
-  width: clamp(210px, 21vw, 278px);
-  left: 8.2rem;
-  top: 8.8rem;
-  opacity: 1;
-}
-
-.hero__scribble--bottom {
-  width: clamp(210px, 20vw, 278px);
-  left: 13.2rem;
-  bottom: 0.15rem;
-}
-
-.hero__scribble--bottom-secondary {
-  width: clamp(190px, 18vw, 248px);
-  left: 15rem;
-  bottom: -0.05rem;
+.hero__scribble--composite {
+  width: clamp(420px, 35vw, 560px);
+  top: 0;
+  left: 7rem;
 }
 
 .hero__media {
@@ -636,28 +617,10 @@ button {
     font-size: clamp(3rem, 14vw, 4.8rem);
   }
 
-  .hero__scribble--top {
-    width: 88px;
+  .hero__scribble--composite {
+    width: 320px;
     top: 0.1rem;
-    right: 0.3rem;
-  }
-
-  .hero__scribble--middle {
-    width: 148px;
-    top: 5.55rem;
-    left: 5.35rem;
-  }
-
-  .hero__scribble--bottom {
-    width: 154px;
-    left: 8.2rem;
-    bottom: 0.25rem;
-  }
-
-  .hero__scribble--bottom-secondary {
-    width: 132px;
-    left: 9.5rem;
-    bottom: 0.05rem;
+    left: 2.9rem;
   }
 
   .hero__media {