Refactor code structure for improved readability and maintainability

css/kontakt.css

@@ -223,6 +223,33 @@
     box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
 }
 
+.hero--ribbon {
+    position: relative;
+    background-image: url("../images/trihub-ribbon-abstract.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: var(--background); /* Fallback / Grundton */
+    isolation: isolate;        /* hält z-index sauber */
+}
+
+.hero--ribbon::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+                linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
+        linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%);
+    content: ""; /* dunkler Schleier */
+    z-index: 0;
+    pointer-events: none;
+}
+
+.hero--ribbon .hero__grid {
+    position: relative;
+    z-index: 1;
+}
+
 /* ---------- Sektionen ---------- */
 
 .kontakt-seite .section {

html/kontakt.html

@@ -40,18 +40,18 @@
 
         <main id="main-content">
             <!-- Hero -->
-            <section class="hero">
+            <section class="hero hero--ribbon">
                 <div class="container hero__grid">
                     <div class="reveal">
                         <span class="kicker">Kontakt</span>
-                        <h1>Wir sind für dich da</h1>
+                        <h1>Von der Frage zur richtigen Strategie</h1>
                         <p class="hero__text">
-                            Hast du Fragen zur Ernährungsberatung oder möchtest mehr über Tri-hub erfahren?
+                            Du möchtest mehr über unsere Ernährungsberatung erfahren oder hast konkrete Fragen?
-                            Kontaktiere uns – wir freuen uns auf dich!
+                            Nimm Kontakt mit uns auf - gemeinsam finden wir heraus, was für dich und deine Ziele am besten passt. Wir freuen uns auf deine Nachricht!
                         </p>
                     </div>
                     <div class="reveal">
-                        <img class="hero__image" src="../images/hero-triathlon.webp"
+                        <img class="hero__image" src="../images/contact-support-trihub.png"
                             alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
                             height="1080">
                     </div>

index.html

@@ -195,7 +195,7 @@
                         <p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
                             dir
                             passt.</p>
-                        <a class="btn btn-primary" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
+                        <a class="btn btn-primary" href="../trihub-ernaehrung-advinters/html/kontakt.html">Jetzt unverbindlich anfragen</a>
                     </div>
                 </div>