diff --git a/css/kontakt.css b/css/kontakt.css
index 5adb242..6cb1ef3 100644
--- a/css/kontakt.css
+++ b/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 {
diff --git a/html/kontakt.html b/html/kontakt.html
index 2e7d66a..f7e4d34 100644
--- a/html/kontakt.html
+++ b/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?
-                            Kontaktiere uns – wir freuen uns auf dich!
+                            Du möchtest mehr über unsere Ernährungsberatung erfahren oder hast konkrete Fragen?
+                            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>
diff --git a/images/contact-support-trihub.png b/images/contact-support-trihub.png
new file mode 100644
index 0000000..3efa1da
Binary files /dev/null and b/images/contact-support-trihub.png differ
diff --git a/images/trihub-ribbon-abstract.webp b/images/trihub-ribbon-abstract.webp
new file mode 100644
index 0000000..bd072d0
Binary files /dev/null and b/images/trihub-ribbon-abstract.webp differ
diff --git a/index.html b/index.html
index d6a1b05..7c4a1fb 100644
--- a/index.html
+++ b/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>