3015351
/
PM_Project
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

US01-05 Menüleiste + 2 Fehlerbereinigung #6

Merged
3015351 merged 1 commits from US01-05-+-Fehlerbereinigung-NavLeiste-+-Fehlerbereinigung-50+ into dev2 2026-09-29 15:37:46 +02:00
Conversation 0 Commits 1 Files Changed 2
2 changed files with 482 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
css/base.css
View File

@ -11,8 +11,15 @@
color-scheme: dark; 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 { body {
margin: 0; margin: 0;
background: var(--background); background: var(--background);
@ -22,29 +29,87 @@ body {
line-height: 1.7; line-height: 1.7;
-webkit-font-smoothing: antialiased; -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-family: var(--font-display), sans-serif;
font-weight: 700; font-weight: 700;
letter-spacing: -.04em; letter-spacing: -.04em;
text-wrap: balance; 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 { :where(button, a, select):focus-visible {
outline: 2px solid var(--accent-strong); outline: 2px solid var(--accent-strong);
outline-offset: 5px; 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 */ /* 2. Kopfbereich – Website-Logo ganz links, wie auf der Referenzseite */
.site-header { .site-header {
@ -52,13 +117,12 @@ button:disabled { cursor: default; }
top: 0; top: 0;
z-index: 20; z-index: 20;
border-bottom: 1px solid var(--line); 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); backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
} }
.header-inner { .header-inner {
width: calc(100% - 64px); width: calc(100% - 64px);
min-height: 98px; min-height: 98px;
@ -68,12 +132,14 @@ button:disabled { cursor: default; }
gap: 24px; gap: 24px;
padding-block: 16px; padding-block: 16px;
} }
.brand { .brand {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
flex-shrink: 0; flex-shrink: 0;
} }
.brand-mark { .brand-mark {
display: flex; display: flex;
align-items: center; align-items: center;
@ -87,16 +153,38 @@ button:disabled { cursor: default; }
background: #fff; background: #fff;
box-shadow: 0 14px 34px rgb(0 0 0 / 22%); 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 { .brand-name {
color: var(--quiet); color: var(--quiet);
font-size: .75rem; font-size: .75rem;
letter-spacing: .28em; letter-spacing: .28em;
text-transform: uppercase; 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 { .header-inner nav a {
padding: 9px 14px; padding: 9px 14px;
border: 1px solid transparent; border: 1px solid transparent;
@ -106,13 +194,17 @@ button:disabled { cursor: default; }
white-space: nowrap; white-space: nowrap;
transition: color .2s, background .2s, border-color .2s; 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 { .skip {
position: fixed; position: fixed;
left: 16px; left: 16px;
@ -123,7 +215,10 @@ button:disabled { cursor: default; }
background: #fff; background: #fff;
color: var(--ink-strong); color: var(--ink-strong);
} }
.skip:focus { top: 12px; }
.skip:focus {
top: 12px;
}
/* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */ /* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */
.button { .button {
@ -142,17 +237,29 @@ button:disabled { cursor: default; }
text-align: center; text-align: center;
transition: background .25s, border-color .25s, transform .25s var(--ease); 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%); border-color: rgb(255 255 255 / 16%);
background: transparent; background: transparent;
color: #fff; color: #fff;
} }
.button.outline:hover, .header-cta:hover {
.button.outline:hover {
border-color: rgb(255 255 255 / 28%); border-color: rgb(255 255 255 / 28%);
background: rgb(255 255 255 / 7%); background: rgb(255 255 255 / 7%);
} }
.text-link { .text-link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -166,14 +273,47 @@ button:disabled { cursor: default; }
line-height: 1.4; line-height: 1.4;
transition: color .2s, border-color .2s; transition: color .2s, border-color .2s;
} }
.text-link:hover { color: #fff; border-color: #fff; }
.text-link:hover {
color: #fff;
border-color: #fff;
}
/* Footer */ /* 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;
}

158
ernaehrungsberatung.html
View File

@ -1,18 +1,13 @@
<!doctype html> <!doctype html>
<html lang="de"> <html lang="de">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <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/assets.css" />
<link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/sections/hero.css" /> <link rel="stylesheet" href="css/sections/hero.css" />
@ -21,50 +16,29 @@
<link rel="stylesheet" href="css/responsive.css" /> <link rel="stylesheet" href="css/responsive.css" />
<script src="js/angebote.js" defer></script> <script src="js/angebote.js" defer></script>
<script src="js/main.js" defer></script> <script src="js/main.js" defer></script>
</head> </head>
<body>
<body>
<a class="skip" href="#inhalt">Zum Inhalt</a> <a class="skip" href="#inhalt">Zum Inhalt</a>
<header class="site-header"> <header class="site-header">
<div class="shell header-inner"> <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"> <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> </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> </button>
</div> </div>
<nav id="mobile-nav" aria-label="Mobile Navigation" hidden> <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> </nav>
</header> </header>
<main id="inhalt"> <main id="inhalt">
@ -83,8 +57,8 @@
passt. passt.
</p> </p>
<div class="hero-actions"> <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>
<div class="hero-note"> <div class="hero-note">
<span class="check" aria-hidden="true">✓</span> Persönlich. <span class="check" aria-hidden="true">✓</span> Persönlich.
@ -92,25 +66,20 @@
</div> </div>
</div> </div>
<figure class="hero-visual"> <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" alt="Zwei sportlich aktive Menschen ab 50 besprechen einen Plan neben einem Fahrrad am See"
fetchpriority="high" fetchpriority="high" />
/>
<figcaption> <figcaption>
<span>DEIN TEMPO. DEINE ZIELE.</span> <span>DEIN TEMPO. DEINE ZIELE.</span>
<p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p> <p>Mehr Freude am Sport.<br />Mehr Energie fürs Leben.</p>
</figcaption> </figcaption>
<div class="image-tag">TRIATHLON <b>50+</b></div>
</figure> </figure>
</section> </section>
<div class="values-strip"> <div class="values-strip">
<div class="shell"> <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>
</div> </div>
<section id="vorteile" class="shell section benefits"> <section id="vorteile" class="shell section benefits">
@ -170,13 +139,8 @@
<div class="package-grid"> <div class="package-grid">
<article class="package"> <article class="package">
<div class="package-image"> <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>
<div class="package-body"> <div class="package-body">
<p class="eyebrow">STARTER</p> <p class="eyebrow">STARTER</p>
@ -190,23 +154,16 @@
<li>Analyse deiner Essgewohnheiten</li> <li>Analyse deiner Essgewohnheiten</li>
<li>Konkrete Empfehlungen für den Alltag</li> <li>Konkrete Empfehlungen für den Alltag</li>
</ul> </ul>
<button <button class="button package-open" data-package="starter">
class="button outline package-open"
data-package="starter"
>
Starter entdecken Starter entdecken
</button> </button>
</div> </div>
</article> </article>
<article class="package featured"> <article class="package featured">
<div class="package-image"> <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>
<div class="package-body"> <div class="package-body">
<p class="eyebrow">STANDARD</p> <p class="eyebrow">STANDARD</p>
@ -227,13 +184,8 @@
</article> </article>
<article class="package"> <article class="package">
<div class="package-image"> <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>
<div class="package-body"> <div class="package-body">
<p class="eyebrow">PREMIUM</p> <p class="eyebrow">PREMIUM</p>
@ -247,10 +199,7 @@
<li>Verpflegungsstrategie für Wettkämpfe</li> <li>Verpflegungsstrategie für Wettkämpfe</li>
<li>Engmaschige Begleitung und Anpassung</li> <li>Engmaschige Begleitung und Anpassung</li>
</ul> </ul>
<button <button class="button package-open" data-package="premium">
class="button outline package-open"
data-package="premium"
>
Premium entdecken Premium entdecken
</button> </button>
</div> </div>
@ -322,26 +271,16 @@
</main> </main>
<footer> <footer>
<div class="shell footer-main"> <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> <p>Dein sportliches Zuhause ab 50.</p>
<a href="https://tri-hub.de/">Zur TriHub-Website</a> <a href="https://tri-hub.de/">Zur TriHub-Website</a>
</div> </div>
<div class="shell footer-note"> <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> </div>
</footer> </footer>
<dialog id="package-dialog" aria-labelledby="dialog-title"> <dialog id="package-dialog" aria-labelledby="dialog-title">
@ -361,8 +300,7 @@
<section class="discount-box"> <section class="discount-box">
<p class="eyebrow">DEIN COACHING-VORTEIL</p> <p class="eyebrow">DEIN COACHING-VORTEIL</p>
<h3>Du bist schon im Coaching 1zu1?</h3> <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="0">Noch kein Coaching 1zu1</option>
<option value="3">Starter-Coaching</option> <option value="3">Starter-Coaching</option>
<option value="5">Standard-Coaching</option> <option value="5">Standard-Coaching</option>
@ -375,15 +313,11 @@
Coaching-Laufzeit auf den aktuellen Verkaufspreis der Coaching-Laufzeit auf den aktuellen Verkaufspreis der
Ernährungsberatung. Ernährungsberatung.
</p> </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> </section>
<button class="button dialog-done">Zurück zu den Angeboten</button> <button class="button dialog-done">Zurück zu den Angeboten</button>
</div> </div>
</dialog> </dialog>
</body> </body>
</html> </html>