From 5d1272008e460b3ccf950da0b6b351961a90338e Mon Sep 17 00:00:00 2001
From: 3015418 <3015418@stud.th-mannheim.de>
Date: Tue, 29 Sep 2026 15:43:01 +0200
Subject: [PATCH] =?UTF-8?q?US=2004-05:=20Dauerhaft=20sichtbare=20Kopfzeile?=
 =?UTF-8?q?=20f=C3=BCr=20die=20Navigation=20vorbereitet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kopfzeile aus der Produktübersicht ausgelagert und Navigationsstile in einer eigenen CSS-Datei zusammengefasst. Aktuellen Zwischenstand mit angepasstem Logo übernommen.
---
 css/navigation.css        | 100 ++++++++++++++++++++++++++++++++++++++
 css/produktuebersicht.css |  79 +-----------------------------
 index.html                |  26 +++++-----
 3 files changed, 116 insertions(+), 89 deletions(-)
 create mode 100644 css/navigation.css

diff --git a/css/navigation.css b/css/navigation.css
new file mode 100644
index 0000000..125b87e
--- /dev/null
+++ b/css/navigation.css
@@ -0,0 +1,100 @@
+/* Shahnam und Vincent: Gemeinsame Kopfzeile für US 04-05. */
+:root {
+    --navigation-height: 99px;
+}
+
+.site-navigation,
+.site-navigation * {
+    box-sizing: border-box;
+}
+
+.site-navigation {
+    /* Bleibt über alle Seitenbereiche hinweg oben sichtbar und behält ihren Platz im Layout. */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-top: 3px solid #4597a3;
+    background: #071419;
+    color: #fff;
+    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
+    line-height: 1.6;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
+}
+
+.site-navigation .brand {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
+    min-height: calc(var(--navigation-height) - 3px);
+    margin-inline: auto;
+    padding-block: 8px;
+}
+
+.site-navigation .brand__logo {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    border-radius: 22px;
+    background: #fff;
+}
+
+.site-navigation .brand__logo img {
+    display: block;
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+}
+
+.site-navigation .brand__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.site-navigation .brand__name {
+    color: #8a9093;
+    font-size: 14px;
+    font-weight: 650;
+    line-height: 1.4;
+    letter-spacing: 0.25em;
+}
+
+.site-navigation .brand__label {
+    color: #b7bec2;
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+@media (max-width: 700px) {
+    :root {
+        --navigation-height: 81px;
+    }
+
+    .site-navigation .brand {
+        gap: 12px;
+    }
+
+    .site-navigation .brand__logo {
+        width: 66px;
+        height: 62px;
+        border-radius: 17px;
+    }
+
+    .site-navigation .brand__logo img {
+        width: 46px;
+        height: 46px;
+    }
+
+    .site-navigation .brand__name {
+        font-size: 12px;
+    }
+
+    .site-navigation .brand__label {
+        font-size: 13px;
+    }
+}
diff --git a/css/produktuebersicht.css b/css/produktuebersicht.css
index b8df83b..73911c3 100644
--- a/css/produktuebersicht.css
+++ b/css/produktuebersicht.css
@@ -27,8 +27,8 @@
 .produktuebersicht {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
-    min-height: 100svh;
+    min-height: calc(100vh - var(--navigation-height));
+    min-height: calc(100svh - var(--navigation-height));
     margin: 0;
     line-height: 1.6;
 }
@@ -43,57 +43,6 @@
     margin-inline: auto;
 }
 
-.produktuebersicht .site-header {
-    border-top: 3px solid var(--accent);
-}
-
-.produktuebersicht .brand {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    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 {
-    color: #8a9093;
-    font-size: 14px;
-    font-weight: 650;
-    line-height: 1.4;
-    letter-spacing: 0.25em;
-}
-
-.produktuebersicht .brand__label {
-    color: var(--text-muted);
-    font-size: 17px;
-    font-weight: 600;
-    line-height: 1.4;
-}
-
 .produktuebersicht .produktuebersicht__main {
     display: flex;
     flex: 1;
@@ -313,30 +262,6 @@
 }
 
 @media (max-width: 700px) {
-    .produktuebersicht .brand {
-        min-height: 78px;
-        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 {
-        font-size: 13px;
-    }
-
     .produktuebersicht .hero__image {
         inset: 0;
         width: 100%;
diff --git a/index.html b/index.html
index 888010d..64404c0 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
         href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Sora:wght@400;600;700&amp;display=swap"
         rel="stylesheet">
     <link rel="stylesheet" href="css/site.css">
+    <link rel="stylesheet" href="css/navigation.css">
     <link rel="stylesheet" href="css/produktuebersicht.css">
     <link rel="stylesheet" href="css/leistungen.css">
     <link rel="stylesheet" href="css/berater.css">
@@ -21,21 +22,22 @@
 </head>
 
 <body>
+    <!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
+    <header class="site-navigation">
+        <div class="brand">
+            <div class="brand__logo">
+                <img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
+            </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>
+
     <main id="main-content">
         <!-- Shahnam: Produktübersicht -->
         <section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
-            <header class="site-header">
-                <div class="container brand">
-                    <div class="brand__logo">
-                        <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>
-
             <div class="produktuebersicht__main">
                 <div class="hero">
                     <img class="hero__image" src="images/hero-nutrition.png"