US 04-05: Dauerhaft sichtbare Kopfzeile für die Navigation vorbereitet

Kopfzeile aus der Produktübersicht ausgelagert und Navigationsstile in einer eigenen CSS-Datei zusammengefasst. Aktuellen Zwischenstand mit angepasstem Logo übernommen.

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;
+    }
+}

css/produktuebersicht.css

@@ -27,8 +27,8 @@
 .produktuebersicht {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    min-height: calc(100vh - var(--navigation-height));
-    min-height: 100svh;
+    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%;

index.html

@@ -11,6 +11,7 @@
         href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&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,13 +22,11 @@
 </head>
 
 <body>
-    <main id="main-content">
+    <!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
-        <!-- Shahnam: Produktübersicht -->
+    <header class="site-navigation">
-        <section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
+        <div class="brand">
-            <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">
+                <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>
@@ -36,6 +35,9 @@
         </div>
     </header>
 
+    <main id="main-content">
+        <!-- Shahnam: Produktübersicht -->
+        <section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
             <div class="produktuebersicht__main">
                 <div class="hero">
                     <img class="hero__image" src="images/hero-nutrition.png"