Titel und Text für Berater eingefügt
luay
parent
4b3b09b70b
commit
28028e76df
117
css/berater.css
117
css/berater.css
|
|
@ -1,9 +1,12 @@
|
||||||
/* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */
|
/* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */
|
||||||
/* Globale Design-Variablen */
|
/* ==========================================================
|
||||||
|
Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub
|
||||||
|
========================================================== */
|
||||||
.berater-section {
|
.berater-section {
|
||||||
--bg-dark-1: #0d0d1a;
|
--bg-dark-1: #0d0d1a;
|
||||||
--bg-dark-2: #1a1a2e;
|
--bg-dark-2: #1a1a2e;
|
||||||
--accent-teal: #00B3C2;
|
--accent-teal: #10B981;
|
||||||
|
/* Farbe angepasst, um mit dem Pakete-Bereich übereinzustimmen */
|
||||||
|
|
||||||
--text-white: #ffffff;
|
--text-white: #ffffff;
|
||||||
--text-lightgray: #F8FAFC;
|
--text-lightgray: #F8FAFC;
|
||||||
|
|
@ -15,18 +18,43 @@
|
||||||
|
|
||||||
.berater-section {
|
.berater-section {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
/* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */
|
||||||
|
padding: 5rem 1.5rem;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
background-color: var(--bg-dark-1);
|
background-color: var(--bg-dark-1);
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
}
|
|
||||||
|
|
||||||
.berater-section {
|
|
||||||
padding: 80px 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
/* Gesamten Inhalt vertikal zentrieren */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
Styling für Header (Titel und Untertitel) passend zu den Paketen
|
||||||
|
========================================= */
|
||||||
|
.berater-section .section-header {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 42rem;
|
||||||
|
margin: 0 auto 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-section .section-title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
||||||
|
color: var(--text-white);
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-section .section-subtitle {
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
Styling für den Container und die Berater-Karten
|
||||||
|
========================================= */
|
||||||
.berater-section .berater-container {
|
.berater-section .berater-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
@ -38,7 +66,10 @@
|
||||||
|
|
||||||
.berater-section .berater-card {
|
.berater-section .berater-card {
|
||||||
background-color: var(--bg-dark-2);
|
background-color: var(--bg-dark-2);
|
||||||
border-radius: 24px;
|
/* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */
|
||||||
|
border: 1px solid rgba(248, 250, 252, 0.08);
|
||||||
|
/* Border-Radius angepasst, passend zu den Paketen */
|
||||||
|
border-radius: 14px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
width: min(380px, 100%);
|
width: min(380px, 100%);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -48,7 +79,7 @@
|
||||||
|
|
||||||
.berater-section .berater-image-wrapper {
|
.berater-section .berater-image-wrapper {
|
||||||
background-color: var(--bg-dark-1);
|
background-color: var(--bg-dark-1);
|
||||||
border-radius: 20px;
|
border-radius: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
@ -57,15 +88,16 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 16px;
|
border-radius: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-name {
|
.berater-section .berater-name {
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px 0;
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: 32px;
|
font-size: 1.4rem;
|
||||||
font-weight: 700;
|
/* Schriftgröße des Namens harmonisiert */
|
||||||
|
font-weight: 600;
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,9 +112,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-bio-box {
|
.berater-section .berater-bio-box {
|
||||||
background-color: var(--bg-dark-1);
|
/* Hintergrund entfernt, um sich nahtlos in die Karte einzufügen */
|
||||||
|
background-color: transparent;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 24px;
|
/* Überschüssiges Padding entfernt */
|
||||||
|
padding: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,20 +134,40 @@
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling für dynamische Listen (Zertifikate) */
|
/* =========================================
|
||||||
|
Styling für dynamische Listen (z. B. Zertifikate)
|
||||||
|
========================================= */
|
||||||
.berater-section .berater-liste {
|
.berater-section .berater-liste {
|
||||||
margin: 8px 0 0 0;
|
margin: 8px 0 0 0;
|
||||||
padding-left: 20px;
|
padding-left: 1.4rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
list-style: none;
|
||||||
|
/* Standard-Listenpunkte entfernt für benutzerdefiniertes Styling */
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-liste li {
|
.berater-section .berater-liste li {
|
||||||
margin-bottom: 4px;
|
position: relative;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
color: var(--text-lightgray);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling für dynamische Links (Buttons) */
|
/* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */
|
||||||
|
.berater-section .berater-liste li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -1.4rem;
|
||||||
|
top: 0.4em;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--accent-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
Styling für dynamische Links (Buttons)
|
||||||
|
========================================= */
|
||||||
.berater-section .berater-links {
|
.berater-section .berater-links {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -123,17 +177,20 @@
|
||||||
|
|
||||||
.berater-section .berater-link-btn {
|
.berater-section .berater-link-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--accent-teal);
|
font-family: var(--font-body);
|
||||||
color: var(--bg-dark-1);
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
transition: background-color 0.3s ease;
|
font-size: 0.95rem;
|
||||||
|
color: var(--bg-dark-1);
|
||||||
|
background: var(--accent-teal);
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: filter 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-link-btn:hover {
|
.berater-section .berater-link-btn:hover,
|
||||||
background-color: #0d9668;
|
.berater-section .berater-link-btn:focus-visible {
|
||||||
color: #ffffff;
|
filter: brightness(1.1);
|
||||||
}
|
}
|
||||||
452
index.html
452
index.html
|
|
@ -1,237 +1,243 @@
|
||||||
<!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&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
|
<link
|
||||||
<link rel="stylesheet" href="css/site.css">
|
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"
|
||||||
<link rel="stylesheet" href="css/produktuebersicht.css">
|
rel="stylesheet">
|
||||||
<link rel="stylesheet" href="css/leistungen.css">
|
<link rel="stylesheet" href="css/site.css">
|
||||||
<link rel="stylesheet" href="css/berater.css">
|
<link rel="stylesheet" href="css/produktuebersicht.css">
|
||||||
<link rel="stylesheet" href="css/beratung.css">
|
<link rel="stylesheet" href="css/leistungen.css">
|
||||||
<script src="js/leistungen.js" defer></script>
|
<link rel="stylesheet" href="css/berater.css">
|
||||||
<script src="js/berater.js" defer></script>
|
<link rel="stylesheet" href="css/beratung.css">
|
||||||
<script src="js/beratung.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" width="1920"
|
||||||
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
|
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>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Vincent: Leistungsübersicht -->
|
|
||||||
<section id="leistungen" class="pakete">
|
|
||||||
<div class="pakete__intro">
|
|
||||||
<h2 class="pakete__titel"></h2>
|
|
||||||
<p class="pakete__text"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pakete__grid"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Ahmad: Berater und Qualifikationen -->
|
|
||||||
<section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
|
|
||||||
<!-- Container wird durch berater.js befüllt -->
|
|
||||||
<div class="berater-container" id="berater-container"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 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 & 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>
|
</div>
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
<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>
|
||||||
|
|
||||||
|
<!-- Vincent: Leistungsübersicht -->
|
||||||
|
<section id="leistungen" class="pakete">
|
||||||
|
<div class="pakete__intro">
|
||||||
|
<h2 class="pakete__titel"></h2>
|
||||||
|
<p class="pakete__text"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pakete__grid"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Ahmad: Berater und Qualifikationen -->
|
||||||
|
<section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title"></h2>
|
||||||
|
<p class="section-subtitle"></p>
|
||||||
|
</div>
|
||||||
|
<!-- Container wird durch berater.js befüllt -->
|
||||||
|
<div class="berater-container" id="berater-container"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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 & 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>
|
||||||
177
js/berater.js
177
js/berater.js
|
|
@ -1,82 +1,103 @@
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
// Container für die Berater-Karten auswählen
|
||||||
const container = document.getElementById('berater-container');
|
const container = document.getElementById('berater-container');
|
||||||
|
|
||||||
fetch('json/berater.json')
|
// Titel- und Untertitel-Elemente aus dem HTML abrufen
|
||||||
.then(response => {
|
const titleEl = document.querySelector('.section-title');
|
||||||
if (!response.ok) throw new Error('Fehler beim Laden der JSON');
|
const subtitleEl = document.querySelector('.section-subtitle');
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
.then(beraterDaten => {
|
|
||||||
beraterDaten.forEach(berater => {
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = 'berater-card';
|
|
||||||
|
|
||||||
// 1. Bekannte Listen und Zusätze verarbeiten
|
let daten;
|
||||||
let zertifikateHtml = '';
|
try {
|
||||||
if (berater.zertifikate && berater.zertifikate.length > 0) {
|
// Daten aus der JSON-Datei asynchron laden
|
||||||
zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
|
const response = await fetch('json/berater.json');
|
||||||
berater.zertifikate.forEach(zert => {
|
if (!response.ok) throw new Error(`HTTP Fehler: ${response.status}`);
|
||||||
zertifikateHtml += `<li>${zert}</li>`;
|
daten = await response.json();
|
||||||
});
|
} catch (error) {
|
||||||
zertifikateHtml += `</ul>`;
|
console.error('Fehler beim Laden der JSON-Datei:', error);
|
||||||
}
|
// Fehlermeldung auf der Webseite anzeigen, falls das Laden fehlschlägt
|
||||||
|
if (container) {
|
||||||
let linksHtml = '';
|
|
||||||
if (berater.links && berater.links.length > 0) {
|
|
||||||
linksHtml = `<div class="berater-links">`;
|
|
||||||
berater.links.forEach(link => {
|
|
||||||
linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
|
|
||||||
});
|
|
||||||
linksHtml += `</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
let zusatzHtml = '';
|
|
||||||
if (berater.zusatzInfo) {
|
|
||||||
zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. NEU: Alle eigenen/unbekannten Felder automatisch generieren
|
|
||||||
// Wir definieren zuerst, welche Felder Standard sind und ignoriert werden sollen
|
|
||||||
const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
|
|
||||||
let eigeneFelderHtml = '';
|
|
||||||
|
|
||||||
// Wir durchlaufen jeden Eintrag in der JSON für diesen Berater
|
|
||||||
for (const [schluessel, wert] of Object.entries(berater)) {
|
|
||||||
// Wenn das Feld kein Standardfeld ist, bauen wir daraus Überschrift + Text
|
|
||||||
if (!standardFelder.includes(schluessel)) {
|
|
||||||
eigeneFelderHtml += `
|
|
||||||
<h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
|
|
||||||
<p class="bio-text">${wert}</p>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Die Karte zusammenbauen
|
|
||||||
card.innerHTML = `
|
|
||||||
<div class="berater-image-wrapper">
|
|
||||||
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
|
||||||
</div>
|
|
||||||
<h2 class="berater-name">${berater.name}</h2>
|
|
||||||
<h3 class="berater-rolle">${berater.role}</h3>
|
|
||||||
|
|
||||||
<div class="berater-bio-box">
|
|
||||||
<h4 class="bio-title">${berater.bioTitle}</h4>
|
|
||||||
<p class="bio-text">${berater.bioText}</p>
|
|
||||||
|
|
||||||
<!-- Hier werden deine eigenen JSON-Einträge wie "bla bla bla" platziert -->
|
|
||||||
${eigeneFelderHtml}
|
|
||||||
|
|
||||||
${zusatzHtml}
|
|
||||||
${zertifikateHtml}
|
|
||||||
${linksHtml}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
container.appendChild(card);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Fehler:', error);
|
|
||||||
container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
|
container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
|
||||||
});
|
}
|
||||||
});
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Titel und Einleitungstext (Intro) aus der JSON-Datei einfügen
|
||||||
|
if (titleEl && daten.intro) {
|
||||||
|
titleEl.textContent = daten.intro.titel;
|
||||||
|
}
|
||||||
|
if (subtitleEl && daten.intro) {
|
||||||
|
subtitleEl.textContent = daten.intro.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Berater-Karten verarbeiten und erstellen
|
||||||
|
// Wir iterieren über das Array "berater" innerhalb der JSON-Daten
|
||||||
|
daten.berater.forEach(berater => {
|
||||||
|
// Ein neues div-Element für die Karte erstellen
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'berater-card';
|
||||||
|
|
||||||
|
// Zertifikate verarbeiten (falls vorhanden)
|
||||||
|
let zertifikateHtml = '';
|
||||||
|
if (berater.zertifikate && berater.zertifikate.length > 0) {
|
||||||
|
zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
|
||||||
|
berater.zertifikate.forEach(zert => {
|
||||||
|
zertifikateHtml += `<li>${zert}</li>`;
|
||||||
|
});
|
||||||
|
zertifikateHtml += `</ul>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Links verarbeiten (falls vorhanden)
|
||||||
|
let linksHtml = '';
|
||||||
|
if (berater.links && berater.links.length > 0) {
|
||||||
|
linksHtml = `<div class="berater-links">`;
|
||||||
|
berater.links.forEach(link => {
|
||||||
|
linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
|
||||||
|
});
|
||||||
|
linksHtml += `</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Zusatzinformationen verarbeiten (falls vorhanden)
|
||||||
|
let zusatzHtml = '';
|
||||||
|
if (berater.zusatzInfo) {
|
||||||
|
zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Eigene/unbekannte dynamische Felder verarbeiten
|
||||||
|
// Zuerst definieren wir, welche Felder Standard sind und ignoriert werden sollen
|
||||||
|
const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
|
||||||
|
let eigeneFelderHtml = '';
|
||||||
|
|
||||||
|
// Wir durchlaufen jeden Eintrag in der JSON für diesen spezifischen Berater
|
||||||
|
for (const [schluessel, wert] of Object.entries(berater)) {
|
||||||
|
// Wenn das Feld kein Standardfeld ist, generieren wir daraus eine Überschrift und den zugehörigen Text
|
||||||
|
if (!standardFelder.includes(schluessel)) {
|
||||||
|
eigeneFelderHtml += `
|
||||||
|
<h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
|
||||||
|
<p class="bio-text">${wert}</p>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Die Karte mit allen gesammelten HTML-Bausteinen zusammenbauen
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="berater-image-wrapper">
|
||||||
|
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
||||||
|
</div>
|
||||||
|
<h2 class="berater-name">${berater.name}</h2>
|
||||||
|
<h3 class="berater-rolle">${berater.role}</h3>
|
||||||
|
|
||||||
|
<div class="berater-bio-box">
|
||||||
|
<h4 class="bio-title">${berater.bioTitle}</h4>
|
||||||
|
<p class="bio-text">${berater.bioText}</p>
|
||||||
|
|
||||||
|
${eigeneFelderHtml}
|
||||||
|
${zusatzHtml}
|
||||||
|
${zertifikateHtml}
|
||||||
|
${linksHtml}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Die fertige Karte zum Container auf der Seite hinzufügen
|
||||||
|
container.appendChild(card);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,46 +1,52 @@
|
||||||
[
|
{
|
||||||
{
|
"intro": {
|
||||||
"id": 1,
|
"titel": "Deine Ernährungsberater und Coaches",
|
||||||
"name": "Relindis Agethen ",
|
"text": "Erfahrene Triathleten und zertifizierte Coaches, die dich auf dem Weg zu deinen Zielen begleiten und dir helfen, deine Leistung zu optimieren."
|
||||||
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
|
||||||
"image": "images/relindis_agethen.png",
|
|
||||||
"bioTitle": "Kurzbiografie",
|
|
||||||
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
|
||||||
"zertifikate": [
|
|
||||||
"Zertifizierter Triathlon-Trainer",
|
|
||||||
"Ernährungscoach B-Lizenz"
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"text": "Instagram Profil",
|
|
||||||
"url": "https://instagram.com/lili"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"text": "Trainingsplan buchen",
|
|
||||||
"url": "https://tri-hub.de/booking"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
"berater": [
|
||||||
"id": 2,
|
{
|
||||||
"name": "Relindis Agethen ",
|
"id": 1,
|
||||||
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
"name": "Relindis Agethen ",
|
||||||
"image": "images/relindis_agethen_1.jpg",
|
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
||||||
"bioTitle": "Kurzbiografie",
|
"image": "images/relindis_agethen.png",
|
||||||
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
"bioTitle": "Kurzbiografie",
|
||||||
"zertifikate": [
|
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
||||||
"Zertifizierter Triathlon-Trainer",
|
"zertifikate": [
|
||||||
"Ernährungscoach B-Lizenz"
|
"Zertifizierter Triathlon-Trainer",
|
||||||
],
|
"Ernährungscoach B-Lizenz"
|
||||||
"links": [
|
],
|
||||||
{
|
"links": [
|
||||||
"text": "Instagram Profil",
|
{
|
||||||
"url": "https://instagram.com/lili"
|
"text": "Instagram Profil",
|
||||||
},
|
"url": "https://instagram.com/lili"
|
||||||
{
|
},
|
||||||
"text": "Trainingsplan buchen",
|
{
|
||||||
"url": "https://tri-hub.de/booking"
|
"text": "Trainingsplan buchen",
|
||||||
}
|
"url": "https://tri-hub.de/booking"
|
||||||
]
|
}
|
||||||
}
|
]
|
||||||
]
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "Relindis Agethen ",
|
||||||
|
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
||||||
|
"image": "images/relindis_agethen_1.jpg",
|
||||||
|
"bioTitle": "Kurzbiografie",
|
||||||
|
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
||||||
|
"zertifikate": [
|
||||||
|
"Zertifizierter Triathlon-Trainer",
|
||||||
|
"Ernährungscoach B-Lizenz"
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"text": "Instagram Profil",
|
||||||
|
"url": "https://instagram.com/lili"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Trainingsplan buchen",
|
||||||
|
"url": "https://tri-hub.de/booking"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue