245 lines
13 KiB
HTML
245 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kontakt | Ernährungsberatung für Triathleten | tri-hub</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<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 rel="stylesheet" href="../css/site.css">
|
||
<link rel="stylesheet" href="../css/kontakt.css">
|
||
<script src="../js/kontakt.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="kontakt-seite">
|
||
<!-- Header -->
|
||
<header class="site-header">
|
||
<div class="container">
|
||
<a class="brand" href="../index.html">
|
||
<span class="brand__logo">
|
||
<img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
|
||
</span>
|
||
<span class="brand__text">
|
||
<span class="brand__name">TRI-HUB</span>
|
||
<span class="brand__label">Kontakt & Unterstützung</span>
|
||
</span>
|
||
</a>
|
||
<nav class="header-nav" aria-label="Seitennavigation">
|
||
<a href="#nachricht">Nachricht</a>
|
||
<a href="#kontaktinfos">Kontaktinfos</a>
|
||
<a href="#standort">Standort</a>
|
||
<a class="nav-back" href="../index.html">Zurück zur Übersicht</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container hero__grid">
|
||
<div class="reveal">
|
||
<span class="kicker">Kontakt</span>
|
||
<h1>Wir sind für dich da</h1>
|
||
<p class="hero__text">
|
||
Hast du Fragen zur Ernährungsberatung oder möchtest mehr über Tri-hub erfahren?
|
||
Kontaktiere uns – wir freuen uns auf dich!
|
||
</p>
|
||
</div>
|
||
<div class="reveal">
|
||
<img class="hero__image" src="../images/hero-triathlon.webp"
|
||
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" width="1920"
|
||
height="1080">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Nachricht: drei Karten -->
|
||
<section id="nachricht" class="section">
|
||
<div class="container">
|
||
<div class="cards-3">
|
||
<div class="card reveal">
|
||
<div class="card__icon" aria-hidden="true">💬</div>
|
||
<h3>Persönlicher Austausch</h3>
|
||
<p>Wir nehmen uns Zeit für deine Fragen und Anliegen – schnell und unkompliziert.</p>
|
||
</div>
|
||
<div class="card card--warm reveal">
|
||
<div class="card__icon" aria-hidden="true">⚡</div>
|
||
<h3>Schnelle Antworten</h3>
|
||
<p>Deine Fragen beantworten wir zeitnah – per Mail, Telefon oder persönlich.</p>
|
||
</div>
|
||
<div class="card card--neutral reveal">
|
||
<div class="card__icon" aria-hidden="true">🤝</div>
|
||
<h3>Echte Beziehung</h3>
|
||
<p>Für uns zählt nicht nur die Antwort – sondern der Mensch hinter der Frage.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Kontaktinfos: Formular + Kontaktdaten -->
|
||
<section id="kontaktinfos" class="section">
|
||
<div class="container kontakt-grid">
|
||
<div class="reveal">
|
||
<span class="kicker">Nachricht</span>
|
||
<h2>Schreib uns eine Nachricht</h2>
|
||
|
||
<form id="kontakt-formular" novalidate>
|
||
<div class="field">
|
||
<label for="kf-name">Name *</label>
|
||
<input type="text" id="kf-name" name="name" placeholder="Dein Name" required>
|
||
<p class="field__error">Bitte gib deinen Namen an.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="kf-email">Email *</label>
|
||
<input type="email" id="kf-email" name="email" placeholder="deine@email.de" required>
|
||
<p class="field__error">Bitte gib eine gültige E-Mail-Adresse an.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="kf-phone">Telefon</label>
|
||
<input type="tel" id="kf-phone" name="phone" placeholder="06203/1764877">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="kf-type">Anfrage-Typ *</label>
|
||
<select id="kf-type" name="anfragetyp" required>
|
||
<option value="" selected disabled>Bitte wählen …</option>
|
||
<option value="ernaehrungsberatung">Ernährungsberatung anfragen</option>
|
||
<option value="kennenlerngespraech">Kennenlerngespräch vereinbaren</option>
|
||
<option value="allgemein">Allgemeine Fragen</option>
|
||
</select>
|
||
<p class="field__error">Bitte wähle einen Anfrage-Typ.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="kf-subject">Betreff *</label>
|
||
<input type="text" id="kf-subject" name="betreff" placeholder="Worum geht es?" required>
|
||
<p class="field__error">Bitte gib einen kurzen Betreff an.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="kf-message">Nachricht * (mind. 10 Zeichen)</label>
|
||
<textarea id="kf-message" name="nachricht" rows="5" placeholder="Deine Nachricht…" required></textarea>
|
||
<p class="field__error">Bitte beschreibe dein Anliegen in wenigen Sätzen.</p>
|
||
<p class="field__hint">✓ Nachricht ist lang genug</p>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-accent btn-block" disabled>Nachricht senden</button>
|
||
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="reveal">
|
||
<h3 style="font-size: 1.25rem; margin-bottom: 24px;">Kontaktinformationen</h3>
|
||
<div class="info-stack">
|
||
<div class="info-card">
|
||
<div class="info-card__icon" aria-hidden="true">✉</div>
|
||
<div>
|
||
<p class="info-card__label">Allgemeine Fragen & Beratung</p>
|
||
<a href="mailto:info@trihub.de">info@trihub.de</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<div class="info-card__icon" aria-hidden="true">✆</div>
|
||
<div>
|
||
<p class="info-card__label">Telefon</p>
|
||
<a href="tel:+4962031764877">06203 / 1764877</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<div class="info-card__icon" aria-hidden="true">⚲</div>
|
||
<div>
|
||
<p class="info-card__label">Adresse</p>
|
||
<p>Schloßstr. 11
|
||
<span class="info-sub">68535 Edingen-Neckarhausen</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<div>
|
||
<p class="info-card__label" style="margin-bottom: 12px;">Folge uns auf</p>
|
||
<div class="socials">
|
||
<a href="https://www.facebook.com/profile.php?id=61569002603339" target="_blank"
|
||
rel="noopener noreferrer" aria-label="Tri-hub auf Facebook">FB</a>
|
||
<a href="https://www.linkedin.com/company/tri-hub-gmbh" target="_blank"
|
||
rel="noopener noreferrer" aria-label="Tri-hub auf LinkedIn">IN</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Standort -->
|
||
<section id="standort" class="section">
|
||
<div class="container">
|
||
<div class="reveal">
|
||
<span class="kicker">Standort</span>
|
||
<h2 style="margin-bottom: 32px;">Unser Standort</h2>
|
||
<div class="map-frame">
|
||
<iframe
|
||
title="Karte: Tri-hub, Schloßstr. 11, 68535 Edingen-Neckarhausen"
|
||
src="https://www.openstreetmap.org/export/embed.html?bbox=8.5958662%2C49.4613437%2C8.6038662%2C49.4673437&layer=mapnik&marker=49.4643437%2C8.5998662"
|
||
loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<a class="logo" href="https://tri-hub.de/">TRI-HUB</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="../index.html#beratung">Ablauf der Beratung</a></li>
|
||
<li><a href="#kontaktinfos">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>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|