Trihub-Logo hinzugefügt

Logo im Kopfbereich eingebunden und responsiv angepasst. Instagram-Links der Berater aktualisiert.

css/produktuebersicht.css

@@ -50,27 +50,48 @@
 .produktuebersicht .brand {
     display: flex;
     align-items: center;
-    gap: 24px;
+    gap: 20px;
-    min-height: 88px;
+    min-height: 96px;
+    padding-block: 8px;
+}
+
+.produktuebersicht .brand__logo {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 90px;
+    height: 80px;
+    border-radius: 22px;
+    background: #fff;
+}
+
+.produktuebersicht .brand__logo img {
+    display: block;
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+}
+
+.produktuebersicht .brand__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
 }
 
 .produktuebersicht .brand__name {
-    font-size: 30px;
+    color: #8a9093;
-    font-weight: 750;
+    font-size: 14px;
-    line-height: 1;
+    font-weight: 650;
-    letter-spacing: -1.5px;
+    line-height: 1.4;
-}
+    letter-spacing: 0.25em;
-
-.produktuebersicht .brand__name span {
-    color: var(--accent);
 }
 
 .produktuebersicht .brand__label {
-    padding-left: 24px;
-    border-left: 1px solid var(--border);
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: 17px;
-    letter-spacing: 0.025em;
+    font-weight: 600;
+    line-height: 1.4;
 }
 
 .produktuebersicht .produktuebersicht__main {
@@ -289,13 +310,27 @@
 
 @media (max-width: 700px) {
     .produktuebersicht .brand {
-        min-height: 76px;
+        min-height: 78px;
-        gap: 16px;
+        gap: 12px;
+    }
+
+    .produktuebersicht .brand__logo {
+        width: 66px;
+        height: 62px;
+        border-radius: 17px;
+    }
+
+    .produktuebersicht .brand__logo img {
+        width: 46px;
+        height: 46px;
+    }
+
+    .produktuebersicht .brand__name {
+        font-size: 12px;
     }
 
     .produktuebersicht .brand__label {
-        padding-left: 16px;
+        font-size: 13px;
-        font-size: 11px;
     }
 
     .produktuebersicht .hero__image {

index.html

@@ -26,8 +26,13 @@
         <section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
             <header class="site-header">
                 <div class="container brand">
-                    <span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
+                    <div class="brand__logo">
-                    <span class="brand__label">Ernährungsberatung</span>
+                        <img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
+                    </div>
+                    <div class="brand__text">
+                        <span class="brand__name">TRI-HUB</span>
+                        <span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
+                    </div>
                 </div>
             </header>
 

json/berater.json

@@ -18,7 +18,7 @@
             "links": [
                 {
                     "text": "Instagram Profil",
-                    "url": "https://instagram.com/lili"
+                    "url": "https://instagram.com"
                 },
                 {
                     "text": "Trainingsplan buchen",
@@ -40,7 +40,7 @@
             "links": [
                 {
                     "text": "Instagram Profil",
-                    "url": "https://instagram.com/lili"
+                    "url": "https://instagram.com"
                 },
                 {
                     "text": "Trainingsplan buchen",