3024588
/
trihub-ernaehrung-advinters
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge consultation information

integration/ernaehrung-review
3015418 2026-09-28 12:29:45 +02:00
parent fa74f8bf61 6b2bcb4435
commit ead4b10185
3 changed files with 680 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

417
css/beratung.css 100644
View File

@ -0,0 +1,417 @@
/* Dennis: Seitenweite Regeln sind auf den Beratungsbereich begrenzt. */
.beratung-bereich {
/* Farben – Tokens von tri-hub.de (Hex-Fallback + oklch) */
--background: #01090e;
--background: oklch(13% .022 223);
--surface: #031217;
--surface: oklch(17% .024 221);
--foreground: #ecf3f5;
--foreground: oklch(96% .008 210);
--muted-fg: #9ba7aa;
--muted-fg: oklch(72% .015 214);
--primary: #00b3c2;
--primary: oklch(70% .12 205);
--border: rgba(255, 255, 255, 0.1);
/* Typografie */
--font-display: "Sora", sans-serif;
--font-body: "DM Sans", Arial, Helvetica, sans-serif;
/* Layout */
--container: 1120px;
--radius: 1.1rem;
}
/* ---------- Basic ---------- */
.beratung-bereich,
.beratung-bereich *,
.beratung-bereich::before,
.beratung-bereich *::before,
.beratung-bereich::after,
.beratung-bereich *::after {
box-sizing: border-box;
}
.beratung-bereich {
scroll-behavior: smooth;
}
.beratung-bereich {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-body);
line-height: 1.625;
-webkit-font-smoothing: antialiased;
position: relative;
isolation: isolate;
}
/* Licht*/
.beratung-bereich::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(900px 520px at 78% -10%, rgba(0, 179, 194, 0.13), transparent 65%),
radial-gradient(700px 480px at -10% 30%, rgba(35, 137, 148, 0.1), transparent 60%),
radial-gradient(600px 420px at 90% 95%, rgba(247, 194, 48, 0.05), transparent 60%);
pointer-events: none;
}
.beratung-bereich h1,
.beratung-bereich h2,
.beratung-bereich h3 {
margin-top: 0;
font-family: var(--font-display);
color: var(--foreground);
line-height: 1.2;
letter-spacing: -0.01em;
}
.beratung-bereich p {
margin: 0 0 1em;
}
.beratung-bereich .container {
width: min(100% - 48px, var(--container));
margin-inline: auto;
}
/* ---------- Typo-Helfer ---------- */
.beratung-bereich .kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 18px;
}
.beratung-bereich .kicker::before {
content: "";
width: 28px;
height: 2px;
border-radius: 2px;
background: var(--primary);
}
.beratung-bereich .lead {
font-size: 1.15rem;
color: var(--muted-fg);
max-width: 660px;
}
.beratung-bereich .muted {
color: var(--muted-fg);
}
/* ---------- Button ---------- */
.beratung-bereich .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.2;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease,
background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.beratung-bereich .btn-primary {
background: var(--primary);
color: #03242b;
}
.beratung-bereich .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28);
}
/* ---------- Sektionen ---------- */
.beratung-bereich .section {
padding: 96px 0;
}
.beratung-bereich .section-head {
max-width: 720px;
margin-bottom: 56px;
}
.beratung-bereich .section-head h2 {
font-size: clamp(1.9rem, 4vw, 2.7rem);
margin-bottom: 18px;
}
/* ---------- Boxen & Grid ---------- */
.beratung-bereich .grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.beratung-bereich .box {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* ---------- Checklisten ---------- */
.beratung-bereich .check-list {
list-style: none;
padding: 0;
margin: 20px 0 0;
display: grid;
gap: 12px;
}
.beratung-bereich .check-list li {
position: relative;
padding-left: 34px;
color: var(--foreground);
}
.beratung-bereich .check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-weight: bold;
font-size: 1.1rem;
}
/* ---------- Ablauf-Schritte ---------- */
.beratung-bereich .beratung-ablauf {
list-style: none;
counter-reset: schritt;
padding: 0;
margin: 24px 0 0;
display: grid;
gap: 20px;
}
.beratung-bereich .beratung-ablauf li {
counter-increment: schritt;
position: relative;
padding-left: 60px;
}
.beratung-bereich .beratung-ablauf li::before {
content: counter(schritt, decimal-leading-zero);
position: absolute;
left: 0;
top: 2px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--primary);
background: rgba(0, 179, 194, 0.1);
border: 1px solid rgba(0, 179, 194, 0.3);
}
.beratung-bereich .beratung-ablauf strong {
display: block;
font-family: var(--font-display);
font-size: 1.02rem;
color: var(--foreground);
margin-bottom: 4px;
}
.beratung-bereich .beratung-ablauf p {
margin: 0;
color: var(--muted-fg);
font-size: 0.95rem;
}
/* ---------- CTA-Band ---------- */
.beratung-bereich .cta-band {
margin-top: 96px;
padding: 64px 40px;
text-align: center;
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 8px);
background: linear-gradient(135deg, #071216, #0a1b1f 46%, #050e16);
}
.beratung-bereich .cta-band h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 16px;
}
.beratung-bereich .cta-band p {
color: var(--muted-fg);
max-width: 560px;
margin-inline: auto;
}
/* ---------- Footer ---------- */
.beratung-bereich .logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
letter-spacing: -0.02em;
color: var(--foreground);
text-decoration: none;
white-space: nowrap;
}
.beratung-bereich .logo span {
color: var(--primary);
}
.beratung-bereich .site-footer {
margin-top: 96px;
padding: 64px 0 40px;
border-top: 1px solid var(--border);
background: rgba(255, 255, 255, 0.015);
}
.beratung-bereich .footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 48px;
}
.beratung-bereich .footer-brand p {
color: var(--muted-fg);
font-size: 0.95rem;
max-width: 340px;
margin-top: 14px;
}
.beratung-bereich .footer-col h3 {
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-fg);
margin-bottom: 16px;
}
.beratung-bereich .footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.beratung-bereich .footer-col a {
display: block;
padding: 5px 0;
color: var(--muted-fg);
text-decoration: none;
font-size: 0.92rem;
transition: color 0.15s ease;
}
.beratung-bereich .footer-col a:hover {
color: var(--foreground);
}
.beratung-bereich .footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--border);
color: var(--muted-fg);
font-size: 0.85rem;
}
.beratung-bereich .footer-legal a {
color: inherit;
text-decoration: none;
}
.beratung-bereich .footer-legal a:hover {
color: var(--foreground);
}
/* ---------- Scroll-Reveal ---------- */
.beratung-bereich .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.beratung-bereich .reveal.visible {
opacity: 1;
transform: none;
}
/* ---------- Responsiv ---------- */
@media (max-width: 980px) {
.beratung-bereich .footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 760px) {
.beratung-bereich .grid-2 {
grid-template-columns: 1fr;
}
.beratung-bereich .section {
padding: 72px 0;
}
.beratung-bereich .footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.beratung-bereich .cta-band {
padding: 48px 24px;
}
}
/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
.beratung-bereich {
scroll-behavior: auto;
}
.beratung-bereich .reveal {
opacity: 1;
transform: none;
transition: none;
}
.beratung-bereich,
.beratung-bereich * {
transition-duration: 0.01ms !important;
}
}

289
index.html
View File

@ -1,102 +1,237 @@
<!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.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ernährungsberatung für Triathleten | tri-hub</title> <title>Ernährungsberatung für Triathleten | tri-hub</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link 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 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/site.css">
<link rel="stylesheet" href="css/produktuebersicht.css"> <link rel="stylesheet" href="css/produktuebersicht.css">
<link rel="stylesheet" href="css/leistungen.css"> <link rel="stylesheet" href="css/leistungen.css">
<link rel="stylesheet" href="css/berater.css"> <link rel="stylesheet" href="css/berater.css">
<script src="js/leistungen.js" defer></script> <link rel="stylesheet" href="css/beratung.css">
<script src="js/berater.js" defer></script> <script src="js/leistungen.js" defer></script>
</head> <script src="js/berater.js" defer></script>
<script src="js/beratung.js" defer></script>
</head>
<body> <body>
<main id="main-content"> <main id="main-content">
<!-- Shahnam: Produktübersicht --> <!-- Shahnam: Produktübersicht -->
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title"> <section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
<header class="site-header"> <header class="site-header">
<div class="container brand"> <div class="container brand">
<span class="brand__name">tri-hub<span aria-hidden="true">.</span></span> <span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
<span class="brand__label">Ernährungsberatung</span> <span class="brand__label">Ernährungsberatung</span>
</div> </div>
</header> </header>
<div class="produktuebersicht__main"> <div class="produktuebersicht__main">
<div class="hero"> <div class="hero">
<img class="hero__image" <img class="hero__image"
src="images/hero-triathlon.webp" src="images/hero-triathlon.webp"
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
width="1920" height="1080" fetchpriority="high"> width="1920" height="1080" fetchpriority="high">
<div class="container hero__inner"> <div class="container hero__inner">
<div class="hero__content"> <div class="hero__content">
<p class="hero__eyebrow">Der Text wärmt sich noch auf</p> <p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
<h1 id="hero-title"> <h1 id="hero-title">
Überschrift. Weitere Zeile. Überschrift. Weitere Zeile.
<span>Akzentzeile.</span> <span>Akzentzeile.</span>
</h1> </h1>
<p class="hero__description"> <p class="hero__description">
Hier folgt eine kurze Beschreibung der Ernährungsberatung. Hier folgt eine kurze Beschreibung der Ernährungsberatung.
Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt, Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
sobald die Inhalte vorliegen. sobald die Inhalte vorliegen.
</p> </p>
</div> </div>
<div class="hero__details"> <div class="hero__details">
<ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung"> <ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
<li> <li>
<span class="benefits__number" aria-hidden="true">01</span> <span class="benefits__number" aria-hidden="true">01</span>
<p>Erster Vorteil <span>Text folgt</span></p> <p>Erster Vorteil <span>Text folgt</span></p>
</li> </li>
<li> <li>
<span class="benefits__number" aria-hidden="true">02</span> <span class="benefits__number" aria-hidden="true">02</span>
<p>Zweiter Vorteil <span>Text folgt</span></p> <p>Zweiter Vorteil <span>Text folgt</span></p>
</li> </li>
<li> <li>
<span class="benefits__number" aria-hidden="true">03</span> <span class="benefits__number" aria-hidden="true">03</span>
<p>Dritter Vorteil <span>Text folgt</span></p> <p>Dritter Vorteil <span>Text folgt</span></p>
</li> </li>
</ul> </ul>
<div class="hero__caption"> <div class="hero__caption">
<p class="hero__caption-label">Bildunterschrift folgt</p> <p class="hero__caption-label">Bildunterschrift folgt</p>
<p class="hero__slogan">Slogan folgt. Weitere Zeile.</p> <p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<footer> <footer>
<div class="container site-footer__inner"> <div class="container site-footer__inner">
<p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p> <p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
<p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p> <p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
</div> </div>
</footer> </footer>
</section> </section>
<!-- Vincent: Leistungsübersicht --> <!-- Vincent: Leistungsübersicht -->
<section id="leistungen" class="pakete"> <section id="leistungen" class="pakete">
<div class="pakete__intro"> <div class="pakete__intro">
<h2 class="pakete__titel"></h2> <h2 class="pakete__titel"></h2>
<p class="pakete__text"></p> <p class="pakete__text"></p>
</div> </div>
<div class="pakete__grid"></div> <div class="pakete__grid"></div>
</section> </section>
<!-- Ahmad: Berater und Qualifikationen --> <!-- Ahmad: Berater und Qualifikationen -->
<section class="berater-section" id="berater" aria-label="Berater und Qualifikationen"> <section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
<!-- Container wird durch berater.js befüllt --> <!-- Container wird durch berater.js befüllt -->
<div class="berater-container" id="berater-container"></div> <div class="berater-container" id="berater-container"></div>
</section> </section>
</main>
</body> <!-- Dennis: Beratungsablauf und Footer -->
<div class="beratung-bereich">
<section id="beratung" class="section">
<div class="container">
<div class="section-head reveal">
<span class="kicker">Info über die Beratung</span>
<h2>Gut zu wissen, bevor du startest</h2>
<p class="lead">Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und
was dich erwartet.</p>
</div>
<div class="grid-2">
<div class="box reveal">
<h2>Was dich bei der Beratung erwartet</h2>
<p>Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und
entwickeln daraus passende Strategien für deinen Alltag.</p>
<ul class="check-list">
<li>Individuelle Ernährungsberatung</li>
<li>Erstellung von Ernährungsplänen</li>
<li>Unterstützung bei Gewichtsmanagement</li>
<li>Beratung bei speziellen Ernährungsbedürfnissen</li>
<li>Analyse deiner aktuellen Ernährungsgewohnheiten</li>
<li>Praktische Tipps für die Umsetzung im Alltag</li>
</ul>
</div>
<div class="box reveal">
<h2>So läuft die Beratung ab</h2>
<ol class="beratung-ablauf">
<li>
<strong>Erstgespräch</strong>
<p>Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.</p>
</li>
<li>
<strong>Analyse</strong>
<p>Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet.
</p>
</li>
<li>
<strong>Planung</strong>
<p>Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.</p>
</li>
<li>
<strong>Begleitung</strong>
<p>Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.</p>
</li>
</ol>
</div>
<div class="box reveal">
<h2>Für wen ist die Beratung geeignet?</h2>
<ul class="check-list">
<li>Menschen, die ihre Ernährung verbessern möchten</li>
<li>Sportler mit individuellen Ernährungszielen</li>
<li>Menschen mit speziellen Ernährungsbedürfnissen</li>
<li>Personen, die Unterstützung beim Gewichtsmanagement suchen</li>
</ul>
</div>
<div class="box reveal">
<h2>Weitere Informationen</h2>
<p class="muted">
Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen,
Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten.
</p>
</div>
</div>
</div>
<div class="container" id="kontakt">
<div class="cta-band reveal">
<h2>Bereit für deinen nächsten Schritt?</h2>
<p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu dir
passt.</p>
<a class="btn btn-primary"
href="mailto:info@trihub.de?subject=Ernaehrungsberatung%20-%20Kennenlerngespraech">Jetzt
unverbindlich anfragen</a>
</div>
</div>
</section>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="logo" href="https://tri-hub.de/">tri<span>-hub</span></a>
<p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
Ernährungsberatung.</p>
</div>
<div class="footer-col">
<h3>Dieser Bereich</h3>
<ul>
<li><a href="#beratung">Ablauf der Beratung</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Tri-hub</h3>
<ul>
<li><a href="https://tri-hub.de/">Start</a></li>
<li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
<li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
<li><a href="https://tri-hub.de/webinare-workshops">Webinare &amp; Workshops</a></li>
<li><a href="https://tri-hub.de/wissen">Wissen</a></li>
<li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
</ul>
</div>
</div>
<div class="footer-legal">
<span>© 2026 Tri-hub GmbH</span>
<span>
<a href="https://tri-hub.de/impressum">Impressum</a> ·
<a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
<a href="https://tri-hub.de/agb">AGB</a>
</span>
</div>
</div>
</footer>
</div>
</main>
</body>
</html> </html>

51
js/beratung.js 100644
View File

@ -0,0 +1,51 @@
// ----- Mobile Navigation -----
(function () {
const toggle = document.querySelector(".nav-toggle");
const nav = document.getElementById("main-nav");
if (!toggle || !nav) return;
toggle.addEventListener("click", function () {
const open = nav.classList.toggle("open");
toggle.setAttribute("aria-expanded", String(open));
toggle.setAttribute("aria-label", open ? "Menü schließen" : "Menü öffnen");
});
// Menü nach Klick auf einen Link automatisch schließen
nav.querySelectorAll("a").forEach(function (link) {
link.addEventListener("click", function () {
nav.classList.remove("open");
toggle.setAttribute("aria-expanded", "false");
});
});
})();
// ----- Scroll-Reveal -----
(function () {
const elements = document.querySelectorAll(".beratung-bereich .reveal");
if (!elements.length) return;
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduceMotion || !("IntersectionObserver" in window)) {
elements.forEach(function (el) {
el.classList.add("visible");
});
return;
}
const observer = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
elements.forEach(function (el) {
observer.observe(el);
});
})();