diff --git a/css/style.css b/css/produktuebersicht.css
similarity index 68%
rename from css/style.css
rename to css/produktuebersicht.css
index 733ecc8..a977545 100644
--- a/css/style.css
+++ b/css/produktuebersicht.css
@@ -1,4 +1,5 @@
-:root {
+/* Shahnam: Styles und Variablen bleiben innerhalb der Produktuebersicht. */
+.produktuebersicht {
     color-scheme: dark;
     --background: #0d0d1a;
     --text: #f8fafc;
@@ -10,13 +11,16 @@
     background: var(--background);
 }
 
-*,
-*::before,
-*::after {
+.produktuebersicht,
+.produktuebersicht *,
+.produktuebersicht::before,
+.produktuebersicht *::before,
+.produktuebersicht::after,
+.produktuebersicht *::after {
     box-sizing: border-box;
 }
 
-body {
+.produktuebersicht {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -25,39 +29,39 @@ body {
     line-height: 1.6;
 }
 
-p,
-h1 {
+.produktuebersicht p,
+.produktuebersicht h1 {
     margin: 0;
 }
 
-.container {
+.produktuebersicht .container {
     width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
     margin-inline: auto;
 }
 
-.site-header {
+.produktuebersicht .site-header {
     border-top: 3px solid var(--accent);
 }
 
-.brand {
+.produktuebersicht .brand {
     display: flex;
     align-items: center;
     gap: 24px;
     min-height: 88px;
 }
 
-.brand__name {
+.produktuebersicht .brand__name {
     font-size: 30px;
     font-weight: 750;
     line-height: 1;
     letter-spacing: -1.5px;
 }
 
-.brand__name span {
+.produktuebersicht .brand__name span {
     color: var(--accent);
 }
 
-.brand__label {
+.produktuebersicht .brand__label {
     padding-left: 24px;
     border-left: 1px solid var(--border);
     color: var(--muted);
@@ -65,12 +69,12 @@ h1 {
     letter-spacing: 0.025em;
 }
 
-main {
+.produktuebersicht .produktuebersicht__main {
     display: flex;
     flex: 1;
 }
 
-.hero {
+.produktuebersicht .hero {
     position: relative;
     isolation: isolate;
     display: flex;
@@ -79,8 +83,8 @@ main {
     border-block: 1px solid var(--border);
 }
 
-.hero__image,
-.hero::after {
+.produktuebersicht .hero__image,
+.produktuebersicht .hero::after {
     position: absolute;
     z-index: -1;
     inset: 0;
@@ -88,31 +92,31 @@ main {
     height: 100%;
 }
 
-.hero__image {
+.produktuebersicht .hero__image {
     object-fit: cover;
     object-position: center 42%;
 }
 
-.hero::after {
+.produktuebersicht .hero::after {
     background:
         linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%),
         linear-gradient(90deg, rgb(13 13 26 / 94%) 0%, rgb(13 13 26 / 79%) 35%, rgb(13 13 26 / 38%) 72%, rgb(13 13 26 / 25%) 100%);
     content: "";
 }
 
-.hero__inner {
+.produktuebersicht .hero__inner {
     display: flex;
     flex-direction: column;
     padding-block: clamp(32px, 5vh, 64px) 28px;
 }
 
-.hero__content {
+.produktuebersicht .hero__content {
     width: min(100%, 1000px);
     margin-block: auto;
     padding-block: 24px 64px;
 }
 
-.hero__eyebrow {
+.produktuebersicht .hero__eyebrow {
     display: flex;
     align-items: center;
     gap: 12px;
@@ -124,7 +128,7 @@ main {
     text-transform: uppercase;
 }
 
-.hero__eyebrow::before {
+.produktuebersicht .hero__eyebrow::before {
     width: 28px;
     height: 1px;
     flex-shrink: 0;
@@ -132,7 +136,7 @@ main {
     content: "";
 }
 
-h1 {
+.produktuebersicht h1 {
     max-width: 100%;
     font-size: clamp(42px, 4.9vw, 88px);
     font-weight: 550;
@@ -142,13 +146,13 @@ h1 {
     overflow-wrap: break-word;
 }
 
-h1 span {
+.produktuebersicht h1 span {
     display: block;
     margin-top: 8px;
     color: var(--accent);
 }
 
-.hero__description {
+.produktuebersicht .hero__description {
     max-width: 65ch;
     margin-top: 30px;
     color: #d1d7df;
@@ -156,7 +160,7 @@ h1 span {
     line-height: 1.85;
 }
 
-.hero__details {
+.produktuebersicht .hero__details {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 250px;
     align-items: center;
@@ -165,7 +169,7 @@ h1 span {
     border-top: 1px solid var(--border);
 }
 
-.benefits {
+.produktuebersicht .benefits {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 24px;
@@ -174,24 +178,24 @@ h1 span {
     list-style: none;
 }
 
-.benefits li {
+.produktuebersicht .benefits li {
     display: flex;
     align-items: baseline;
     gap: 14px;
 }
 
-.benefits__number {
+.produktuebersicht .benefits__number {
     color: #64e5b7;
     font-size: 11px;
     font-variant-numeric: tabular-nums;
 }
 
-.benefits p {
+.produktuebersicht .benefits p {
     font-size: 14px;
     font-weight: 500;
 }
 
-.benefits p span {
+.produktuebersicht .benefits p span {
     display: block;
     margin-top: 4px;
     color: var(--muted);
@@ -199,19 +203,19 @@ h1 span {
     font-weight: 400;
 }
 
-.hero__caption {
+.produktuebersicht .hero__caption {
     padding-left: 24px;
     border-left: 1px solid var(--border);
 }
 
-.hero__caption-label {
+.produktuebersicht .hero__caption-label {
     color: var(--muted);
     font-size: 10px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
 }
 
-.hero__slogan {
+.produktuebersicht .hero__slogan {
     margin-top: 8px;
     font-size: 22px;
     font-weight: 450;
@@ -219,7 +223,7 @@ h1 span {
     letter-spacing: -0.025em;
 }
 
-.site-footer__inner {
+.produktuebersicht .site-footer__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -229,19 +233,19 @@ h1 span {
     font-size: 12px;
 }
 
-.site-footer__inner p > span {
+.produktuebersicht .site-footer__inner p > span {
     margin-left: 12px;
     color: var(--muted);
 }
 
-.site-footer__note {
+.produktuebersicht .site-footer__note {
     display: flex;
     align-items: center;
     gap: 9px;
     color: var(--muted);
 }
 
-.site-footer__note > span {
+.produktuebersicht .site-footer__note > span {
     width: 5px;
     height: 5px;
     flex-shrink: 0;
@@ -250,115 +254,115 @@ h1 span {
 }
 
 @media (max-width: 1100px) {
-    .hero__image {
+    .produktuebersicht .hero__image {
         object-position: 80% center;
     }
 
-    .hero::after {
+    .produktuebersicht .hero::after {
         background:
             linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%),
             linear-gradient(90deg, rgb(13 13 26 / 92%), rgb(13 13 26 / 70%) 65%, rgb(13 13 26 / 48%));
     }
 
-    .hero__content {
+    .produktuebersicht .hero__content {
         max-width: 85%;
     }
 
-    .hero__details {
+    .produktuebersicht .hero__details {
         grid-template-columns: minmax(0, 1fr) 200px;
         gap: 28px;
     }
 
-    .benefits li {
+    .produktuebersicht .benefits li {
         flex-direction: column;
         gap: 8px;
     }
 }
 
 @media (max-width: 700px) {
-    .brand {
+    .produktuebersicht .brand {
         min-height: 76px;
         gap: 16px;
     }
 
-    .brand__label {
+    .produktuebersicht .brand__label {
         padding-left: 16px;
         font-size: 11px;
     }
 
-    .hero__image {
+    .produktuebersicht .hero__image {
         object-position: 85% center;
     }
 
-    .hero::after {
+    .produktuebersicht .hero::after {
         background: linear-gradient(90deg, rgb(13 13 26 / 87%), rgb(13 13 26 / 65%)),
             linear-gradient(0deg, var(--background), transparent 55%);
     }
 
-    .hero__content {
+    .produktuebersicht .hero__content {
         max-width: 100%;
         padding-block: 12px 40px;
     }
 
-    .hero__eyebrow {
+    .produktuebersicht .hero__eyebrow {
         gap: 8px;
         font-size: 10px;
         letter-spacing: 0.11em;
     }
 
-    .hero__eyebrow::before {
+    .produktuebersicht .hero__eyebrow::before {
         width: 20px;
     }
 
-    .hero__description {
+    .produktuebersicht .hero__description {
         margin-top: 24px;
     }
 
-    .hero__details {
+    .produktuebersicht .hero__details {
         grid-template-columns: 1fr;
         gap: 28px;
         padding-top: 24px;
     }
 
-    .benefits {
+    .produktuebersicht .benefits {
         gap: 16px;
     }
 
-    .benefits p {
+    .produktuebersicht .benefits p {
         font-size: 12px;
     }
 
-    .hero__caption {
+    .produktuebersicht .hero__caption {
         padding-left: 16px;
         border-left-color: var(--accent);
     }
 
-    .hero__slogan {
+    .produktuebersicht .hero__slogan {
         font-size: 20px;
     }
 
-    .site-footer__inner {
+    .produktuebersicht .site-footer__inner {
         align-items: flex-start;
         flex-direction: column;
         gap: 14px;
     }
 
-    .site-footer__inner p > span {
+    .produktuebersicht .site-footer__inner p > span {
         margin-left: 0;
     }
 
-    .site-footer__inner > p:first-child span {
+    .produktuebersicht .site-footer__inner > p:first-child span {
         display: block;
         margin-top: 4px;
     }
 }
 
 @media (max-width: 360px) {
-    .benefits {
+    .produktuebersicht .benefits {
         grid-template-columns: 1fr;
     }
 
-    .benefits li {
+    .produktuebersicht .benefits li {
         flex-direction: row;
         gap: 14px;
     }
diff --git a/css/site.css b/css/site.css
new file mode 100644
index 0000000..77d0f28
--- /dev/null
+++ b/css/site.css
@@ -0,0 +1,10 @@
+:root {
+    color-scheme: dark;
+    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
+    color: #f8fafc;
+    background: #0d0d1a;
+}
+
+body {
+    margin: 0;
+}
diff --git a/index.html b/index.html
index 79f200f..2bad707 100644
--- a/index.html
+++ b/index.html
@@ -5,69 +5,75 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ernährungsberatung für Triathleten | tri-hub</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/site.css">
+    <link rel="stylesheet" href="css/produktuebersicht.css">
 </head>
 
 <body>
-    <header class="site-header">
-        <div class="container brand">
-            <span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
-            <span class="brand__label">Ernährungsberatung</span>
-        </div>
-    </header>
-
-    <main>
-        <section class="hero" id="produktuebersicht" aria-labelledby="hero-title">
-            <img class="hero__image"
-                 src="images/hero-triathlon.webp"
-                 alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
-                 width="1920" height="1080" fetchpriority="high">
-
-            <div class="container hero__inner">
-                <div class="hero__content">
-                    <p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
-                    <h1 id="hero-title">
-                        Überschrift. Weitere Zeile.
-                        <span>Akzentzeile.</span>
-                    </h1>
-                    <p class="hero__description">
-                        Hier folgt eine kurze Beschreibung der Ernährungsberatung.
-                        Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
-                        sobald die Inhalte vorliegen.
-                    </p>
+    <main id="main-content">
+        <!-- Shahnam: Produktübersicht -->
+        <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>
+                    <span class="brand__label">Ernährungsberatung</span>
                 </div>
+            </header>
 
-                <div class="hero__details">
-                    <ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
-                        <li>
-                            <span class="benefits__number" aria-hidden="true">01</span>
-                            <p>Erster Vorteil <span>Text folgt</span></p>
-                        </li>
-                        <li>
-                            <span class="benefits__number" aria-hidden="true">02</span>
-                            <p>Zweiter Vorteil <span>Text folgt</span></p>
-                        </li>
-                        <li>
-                            <span class="benefits__number" aria-hidden="true">03</span>
-                            <p>Dritter Vorteil <span>Text folgt</span></p>
-                        </li>
-                    </ul>
+            <div class="produktuebersicht__main">
+                <div class="hero">
+                    <img class="hero__image"
+                         src="images/hero-triathlon.webp"
+                         alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
+                         width="1920" height="1080" fetchpriority="high">
 
-                    <div class="hero__caption">
-                        <p class="hero__caption-label">Bildunterschrift folgt</p>
-                        <p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
+                    <div class="container hero__inner">
+                        <div class="hero__content">
+                            <p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
+                            <h1 id="hero-title">
+                                Überschrift. Weitere Zeile.
+                                <span>Akzentzeile.</span>
+                            </h1>
+                            <p class="hero__description">
+                                Hier folgt eine kurze Beschreibung der Ernährungsberatung.
+                                Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
+                                sobald die Inhalte vorliegen.
+                            </p>
+                        </div>
+
+                        <div class="hero__details">
+                            <ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
+                                <li>
+                                    <span class="benefits__number" aria-hidden="true">01</span>
+                                    <p>Erster Vorteil <span>Text folgt</span></p>
+                                </li>
+                                <li>
+                                    <span class="benefits__number" aria-hidden="true">02</span>
+                                    <p>Zweiter Vorteil <span>Text folgt</span></p>
+                                </li>
+                                <li>
+                                    <span class="benefits__number" aria-hidden="true">03</span>
+                                    <p>Dritter Vorteil <span>Text folgt</span></p>
+                                </li>
+                            </ul>
+
+                            <div class="hero__caption">
+                                <p class="hero__caption-label">Bildunterschrift folgt</p>
+                                <p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
+
+            <footer>
+                <div class="container site-footer__inner">
+                    <p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
+                    <p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
+                </div>
+            </footer>
         </section>
     </main>
-
-    <footer>
-        <div class="container site-footer__inner">
-            <p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
-            <p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
-        </div>
-    </footer>
 </body>
 
 </html>