Merge pull request 'US01-05 Menüleiste + 2 Fehlerbereinigung' (#6) from US01-05-+-Fehlerbereinigung-NavLeiste-+-Fehlerbereinigung-50+ into dev2

Reviewed-on: https://gitty.informatik.th-mannheim.de/3015351/PM_Project/pulls/6

css/base.css

@@ -11,8 +11,15 @@
   color-scheme: dark;
 }
 
-* { box-sizing: border-box; }
+* {
-html { scroll-behavior: smooth; scroll-padding-top: 120px; }
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 120px;
+}
+
 body {
   margin: 0;
   background: var(--background);
@@ -22,29 +29,87 @@ body {
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
 }
-main { overflow: clip; }
+
-h1, h2, h3, p, figure { margin: 0; }
+main {
-h1, h2, h3 {
+  overflow: clip;
+}
+
+h1,
+h2,
+h3,
+p,
+figure {
+  margin: 0;
+}
+
+h1,
+h2,
+h3 {
   font-family: var(--font-display), sans-serif;
   font-weight: 700;
   letter-spacing: -.04em;
   text-wrap: balance;
 }
-h1, h2 { line-height: 1.12; }
+
-h3 { line-height: 1.35; }
+h1,
-a { color: inherit; text-decoration: none; }
+h2 {
-button, select { font: inherit; }
+  line-height: 1.12;
-button { cursor: pointer; border: 0; }
+}
-button, a, select { -webkit-tap-highlight-color: transparent; }
+
-a, button, select { touch-action: manipulation; }
+h3 {
+  line-height: 1.35;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: 0;
+}
+
+button,
+a,
+select {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a,
+button,
+select {
+  touch-action: manipulation;
+}
+
 :where(button, a, select):focus-visible {
   outline: 2px solid var(--accent-strong);
   outline-offset: 5px;
 }
-img { display: block; max-width: 100%; object-fit: cover; }
+
-button:disabled { cursor: default; }
+img {
-[hidden] { display: none !important; }
+  display: block;
-.shell { width: min(1280px, calc(100% - 128px)); margin-inline: auto; }
+  max-width: 100%;
+  object-fit: cover;
+}
+
+button:disabled {
+  cursor: default;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.shell {
+  width: min(1280px, calc(100% - 128px));
+  margin-inline: auto;
+}
 
 /* 2. Kopfbereich – Website-Logo ganz links, wie auf der Referenzseite */
 .site-header {
@@ -52,13 +117,12 @@ button:disabled { cursor: default; }
   top: 0;
   z-index: 20;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(
+  background: linear-gradient(color-mix(in oklab, var(--background) 95%, transparent),
-    color-mix(in oklab, var(--background) 95%, transparent),
+      color-mix(in oklab, var(--background) 80%, transparent));
-    color-mix(in oklab, var(--background) 80%, transparent)
-  );
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
 }
+
 .header-inner {
   width: calc(100% - 64px);
   min-height: 98px;
@@ -68,12 +132,14 @@ button:disabled { cursor: default; }
   gap: 24px;
   padding-block: 16px;
 }
+
 .brand {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   flex-shrink: 0;
 }
+
 .brand-mark {
   display: flex;
   align-items: center;
@@ -87,16 +153,38 @@ button:disabled { cursor: default; }
   background: #fff;
   box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
 }
-.brand-logo img { width: 48px; height: 48px; object-fit: contain; }
+
-.brand-copy { display: grid; gap: 3px; }
+.brand-logo img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.brand-copy {
+  display: grid;
+  gap: 3px;
+}
+
 .brand-name {
   color: var(--quiet);
   font-size: .75rem;
   letter-spacing: .28em;
   text-transform: uppercase;
 }
-.brand-sub { color: var(--muted); font-size: .875rem; line-height: 1.5; }
+
-.header-inner nav { display: flex; align-items: center; gap: 5px; }
+.brand-sub {
+  color: var(--muted);
+  font-size: .875rem;
+  line-height: 1.5;
+}
+
+.header-inner nav {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+}
+
 .header-inner nav a {
   padding: 9px 14px;
   border: 1px solid transparent;
@@ -106,13 +194,17 @@ button:disabled { cursor: default; }
   white-space: nowrap;
   transition: color .2s, background .2s, border-color .2s;
 }
-.header-inner nav a:hover,
+
-.header-inner nav a[aria-current] {
+.header-inner nav a:hover {
-  border-color: var(--line);
+  border-color: transparent;
-  background: rgb(255 255 255 / 5%);
+  background: rgb(255 255 255 / 20%);
-  color: #fff;
+  color: var(--accent-strong);
 }
-.menu-toggle { display: none; }
+
+.menu-toggle {
+  display: none;
+}
+
 .skip {
   position: fixed;
   left: 16px;
@@ -123,7 +215,10 @@ button:disabled { cursor: default; }
   background: #fff;
   color: var(--ink-strong);
 }
-.skip:focus { top: 12px; }
+
+.skip:focus {
+  top: 12px;
+}
 
 /* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */
 .button {
@@ -142,17 +237,29 @@ button:disabled { cursor: default; }
   text-align: center;
   transition: background .25s, border-color .25s, transform .25s var(--ease);
 }
-.button:hover { background: #e9edf0; transform: translateY(-2px); }
+
-.button.small { min-height: 42px; padding: 10px 20px; font-size: .875rem; }
+.button:hover {
-.button.outline, .header-cta {
+  background: #e9edf0;
+  transform: translateY(-2px);
+}
+
+.button.small {
+  min-height: 42px;
+  padding: 10px 20px;
+  font-size: .875rem;
+}
+
+.button.outline {
   border-color: rgb(255 255 255 / 16%);
   background: transparent;
   color: #fff;
 }
-.button.outline:hover, .header-cta:hover {
+
+.button.outline:hover {
   border-color: rgb(255 255 255 / 28%);
   background: rgb(255 255 255 / 7%);
 }
+
 .text-link {
   display: inline-flex;
   align-items: center;
@@ -166,14 +273,47 @@ button:disabled { cursor: default; }
   line-height: 1.4;
   transition: color .2s, border-color .2s;
 }
-.text-link:hover { color: #fff; border-color: #fff; }
+
+.text-link:hover {
+  color: #fff;
+  border-color: #fff;
+}
 
 
 /* Footer */
-footer { border-top: 1px solid var(--line); background: var(--sidebar); }
+footer {
-.footer-main { display: flex; align-items: center; gap: 24px; padding-block: 32px; }
+  border-top: 1px solid var(--line);
-.footer-main p { color: var(--muted); font-size: .9375rem; }
+  background: var(--sidebar);
-.footer-main > a:last-child { margin-left: auto; color: var(--muted); font-size: .875rem; }
+}
-.footer-main > a:last-child:hover { color: #fff; }
-.footer-note { display: flex; justify-content: space-between; gap: 24px; padding-block: 20px; border-top: 1px solid var(--line); color: var(--quiet); font-size: .75rem; }
 
+.footer-main {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding-block: 32px;
+}
+
+.footer-main p {
+  color: var(--muted);
+  font-size: .9375rem;
+}
+
+.footer-main>a:last-child {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: .875rem;
+}
+
+.footer-main>a:last-child:hover {
+  color: #fff;
+}
+
+.footer-note {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  padding-block: 20px;
+  border-top: 1px solid var(--line);
+  color: var(--quiet);
+  font-size: .75rem;
+}

ernaehrungsberatung.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="de">
-  <head>
+
+<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Ernährungsberatung ab 50 | TriHub</title>
+  <title>Ernährungsberatung für best Ager | TriHub</title>
-    <meta
+  <meta name="description"
-      name="description"
+    content="Ernährung, die zu deinem Triathlon und deinem Leben passt. Entdecke drei Konzepte für persönliche Ernährungsberatung bei TriHub." />
-      content="Ernährung, die zu deinem Triathlon und deinem Leben passt. Entdecke drei Konzepte für persönliche Ernährungsberatung bei TriHub."
+  <link rel="icon" type="image/jpeg" href="assets/images/icons/trihub-logo.jpg" />
-    />
-    <link
-      rel="icon"
-      type="image/jpeg"
-      href="assets/images/icons/trihub-logo.jpg"
-    />
   <link rel="stylesheet" href="css/assets.css" />
   <link rel="stylesheet" href="css/base.css" />
   <link rel="stylesheet" href="css/sections/hero.css" />
@@ -21,50 +16,29 @@
   <link rel="stylesheet" href="css/responsive.css" />
   <script src="js/angebote.js" defer></script>
   <script src="js/main.js" defer></script>
-  </head>
+</head>
-  <body>
+
+<body>
   <a class="skip" href="#inhalt">Zum Inhalt</a>
   <header class="site-header">
     <div class="shell header-inner">
-        <a
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
-          class="brand brand-logo"
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
-          href="https://tri-hub.de/"
+            alt="Trihub – fit und vital ab 50!" /></span><span class="brand-copy"><span
-          aria-label="TriHub Startseite"
+            class="brand-name">Tri-hub</span><span class="brand-sub">Triathlon Ernährungsberatung für
-          ><span class="brand-mark"
+            best Ager</span></span></a>
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-          ><span class="brand-copy"
-            ><span class="brand-name">Tri-hub</span
-            ><span class="brand-sub"
-              >Ernährungsberatung für Triathlon ab 50</span
-            ></span
-          ></a
-        >
       <nav aria-label="Hauptnavigation">
-          <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a
+        <a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a><a href="#inhalt"
-          ><a href="#inhalt" aria-current="page">Ernährungsberatung</a
+          aria-current="page">Ernährungsberatung</a><a href="#angebote">Angebote entdecken</a><a href="#ablauf">So
-          ><a href="#ablauf">So läuft’s ab</a>
+          läuft’s ab</a>
       </nav>
-        <a class="button small header-cta" href="#angebote"
+      <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-nav" aria-label="Menü öffnen">
-          >Angebote entdecken</a
-        >
-        <button
-          class="menu-toggle"
-          aria-expanded="false"
-          aria-controls="mobile-nav"
-          aria-label="Menü öffnen"
-        >
         ☰
       </button>
     </div>
     <nav id="mobile-nav" aria-label="Mobile Navigation" hidden>
-        <a href="#angebote">Angebote entdecken</a
+      <a href="#angebote">Angebote entdecken</a><a href="#vorteile">Deine Vorteile</a><a href="#ablauf">So läuft’s
-        ><a href="#vorteile">Deine Vorteile</a
+        ab</a><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
-        ><a href="#ablauf">So läuft’s ab</a
-        ><a href="https://tri-hub.de/coaching-1zu1">Coaching 1zu1</a>
     </nav>
   </header>
   <main id="inhalt">
@@ -83,8 +57,8 @@
           passt.
         </p>
         <div class="hero-actions">
-            <a class="button" href="#angebote">Deine Begleitung finden</a
+          <a class="button" href="#angebote">Deine Begleitung finden</a><a class="text-link" href="#ablauf">So
-            ><a class="text-link" href="#ablauf">So funktioniert’s</a>
+            funktioniert’s</a>
         </div>
         <div class="hero-note">
           <span class="check" aria-hidden="true">✓</span> Persönlich.
@@ -92,25 +66,20 @@
         </div>
       </div>
       <figure class="hero-visual">
-          <img
+        <img src="assets/images/hero/hero.webp" width="1200" height="800"
-            src="assets/images/hero/hero.webp"
-            width="1200"
-            height="800"
           alt="Zwei sportlich aktive Menschen ab 50 besprechen einen Plan neben einem Fahrrad am See"
-            fetchpriority="high"
+          fetchpriority="high" />
-          />
         <figcaption>
           <span>DEIN TEMPO. DEINE ZIELE.</span>
           <p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
         </figcaption>
-          <div class="image-tag">TRIATHLON <b>50+</b></div>
+
       </figure>
     </section>
     <div class="values-strip">
       <div class="shell">
-          <span>Für deinen Einstieg</span><i aria-hidden="true">✦</i
+        <span>Für deinen Einstieg</span><i aria-hidden="true">✦</i><span>Für deinen Wiedereinstieg</span><i
-          ><span>Für deinen Wiedereinstieg</span><i aria-hidden="true">✦</i
+          aria-hidden="true">✦</i><span>Für dein nächstes Ziel</span>
-          ><span>Für dein nächstes Ziel</span>
       </div>
     </div>
     <section id="vorteile" class="shell section benefits">
@@ -170,13 +139,8 @@
         <div class="package-grid">
           <article class="package">
             <div class="package-image">
-                <img
+              <img src="assets/images/angebote/starter.webp" width="700" height="420"
-                  src="assets/images/angebote/starter.webp"
+                alt="Gemeinsame Planung am See für den sportlichen Einstieg" loading="lazy" />
-                  width="700"
-                  height="420"
-                  alt="Gemeinsame Planung am See für den sportlichen Einstieg"
-                  loading="lazy"
-                />
             </div>
             <div class="package-body">
               <p class="eyebrow">STARTER</p>
@@ -190,23 +154,16 @@
                 <li>Analyse deiner Essgewohnheiten</li>
                 <li>Konkrete Empfehlungen für den Alltag</li>
               </ul>
-                <button
+              <button class="button package-open" data-package="starter">
-                  class="button outline package-open"
-                  data-package="starter"
-                >
                 Starter entdecken
               </button>
             </div>
           </article>
           <article class="package featured">
             <div class="package-image">
-                <img
+              <img src="assets/images/angebote/standard.webp" width="700" height="420"
-                  src="assets/images/angebote/standard.webp"
+                alt="Sportler und Coach besprechen gemeinsam einen Plan am Fahrrad" loading="lazy" /><span
-                  width="700"
+                class="package-badge">MIT INDIVIDUELLEM PLAN</span>
-                  height="420"
-                  alt="Sportler und Coach besprechen gemeinsam einen Plan am Fahrrad"
-                  loading="lazy"
-                /><span class="package-badge">MIT INDIVIDUELLEM PLAN</span>
             </div>
             <div class="package-body">
               <p class="eyebrow">STANDARD</p>
@@ -227,13 +184,8 @@
           </article>
           <article class="package">
             <div class="package-image">
-                <img
+              <img src="assets/images/angebote/premium.webp" width="700" height="420"
-                  src="assets/images/angebote/premium.webp"
+                alt="Persönliches Coachinggespräch auf einer Bank neben einem Triathlonrad" loading="lazy" />
-                  width="700"
-                  height="420"
-                  alt="Persönliches Coachinggespräch auf einer Bank neben einem Triathlonrad"
-                  loading="lazy"
-                />
             </div>
             <div class="package-body">
               <p class="eyebrow">PREMIUM</p>
@@ -247,10 +199,7 @@
                 <li>Verpflegungsstrategie für Wettkämpfe</li>
                 <li>Engmaschige Begleitung und Anpassung</li>
               </ul>
-                <button
+              <button class="button package-open" data-package="premium">
-                  class="button outline package-open"
-                  data-package="premium"
-                >
                 Premium entdecken
               </button>
             </div>
@@ -322,26 +271,16 @@
   </main>
   <footer>
     <div class="shell footer-main">
-        <a
+      <a class="brand brand-logo" href="https://tri-hub.de/" aria-label="TriHub Startseite"><span
-          class="brand brand-logo"
+          class="brand-mark"><img src="assets/images/icons/trihub-logo.jpg" width="1024" height="1024"
-          href="https://tri-hub.de/"
+            alt="Trihub – fit und vital ab 50!" /></span></a>
-          aria-label="TriHub Startseite"
-          ><span class="brand-mark"
-            ><img
-              src="assets/images/icons/trihub-logo.jpg"
-              width="1024"
-              height="1024"
-              alt="Trihub – fit und vital ab 50!" /></span
-        ></a>
       <p>Dein sportliches Zuhause ab 50.</p>
       <a href="https://tri-hub.de/">Zur TriHub-Website</a>
     </div>
     <div class="shell footer-note">
-        <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span
+      <span>Projektprototyp · Keine Buchung oder Datenübermittlung</span><span>Ernährungsangebote sind
-        ><span
+        Konzeptvorschläge, keine veröffentlichten
-          >Ernährungsangebote sind Konzeptvorschläge, keine veröffentlichten
+        TriHub-Tarife.</span>
-          TriHub-Tarife.</span
-        >
     </div>
   </footer>
   <dialog id="package-dialog" aria-labelledby="dialog-title">
@@ -361,8 +300,7 @@
       <section class="discount-box">
         <p class="eyebrow">DEIN COACHING-VORTEIL</p>
         <h3>Du bist schon im Coaching 1zu1?</h3>
-          <label for="coaching-select">Dein bestehendes Coaching-Paket</label
+        <label for="coaching-select">Dein bestehendes Coaching-Paket</label><select id="coaching-select">
-          ><select id="coaching-select">
           <option value="0">Noch kein Coaching 1zu1</option>
           <option value="3">Starter-Coaching</option>
           <option value="5">Standard-Coaching</option>
@@ -375,15 +313,11 @@
           Coaching-Laufzeit auf den aktuellen Verkaufspreis der
           Ernährungsberatung.
         </p>
-          <a
+        <a href="https://tri-hub.de/coaching-1zu1" target="_blank" rel="noopener">Coaching 1zu1 bei TriHub ansehen</a>
-            href="https://tri-hub.de/coaching-1zu1"
-            target="_blank"
-            rel="noopener"
-            >Coaching 1zu1 bei TriHub ansehen</a
-          >
       </section>
       <button class="button dialog-done">Zurück zu den Angeboten</button>
     </div>
   </dialog>
-  </body>
+</body>
+
 </html>