diff --git a/css/beratung.css b/css/beratung.css new file mode 100644 index 0000000..f6df2bd --- /dev/null +++ b/css/beratung.css @@ -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; + } +} diff --git a/index.html b/index.html index bbcd02d..250b5c5 100644 --- a/index.html +++ b/index.html @@ -1,102 +1,237 @@ - - - - Ernährungsberatung für Triathleten | tri-hub - - - - - - - - - - + + + + Ernährungsberatung für Triathleten | tri-hub + + + + + + + + + + + + - -
- -
-
-
- tri-hub - Ernährungsberatung -
-
+ +
+ +
+
+
+ tri-hub + Ernährungsberatung +
+
-
-
- Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht +
+
+ Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht -
-
-

Der Text wärmt sich noch auf

-

- Überschrift. Weitere Zeile. - Akzentzeile. -

-

- Hier folgt eine kurze Beschreibung der Ernährungsberatung. - Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt, - sobald die Inhalte vorliegen. -

-
+
+
+

Der Text wärmt sich noch auf

+

+ Überschrift. Weitere Zeile. + Akzentzeile. +

+

+ Hier folgt eine kurze Beschreibung der Ernährungsberatung. + Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt, + sobald die Inhalte vorliegen. +

+
-
-
    -
  • - -

    Erster Vorteil Text folgt

    -
    • -
  • - -

    Zweiter Vorteil Text folgt

    -
    • -
  • - -

    Dritter Vorteil Text folgt

    -
    • -
+
+
    +
  • + +

    Erster Vorteil Text folgt

    +
    • +
  • + +

    Zweiter Vorteil Text folgt

    +
    • +
  • + +

    Dritter Vorteil Text folgt

    +
    • +
-
-

Bildunterschrift folgt

-

Slogan folgt. Weitere Zeile.

+
+

Bildunterschrift folgt

+

Slogan folgt. Weitere Zeile.

+
-
-
-
-

Abschlusstext folgt. Ergänzender Text folgt.

-

Kurzhinweis folgt.

-
-
-
+
+
+

Abschlusstext folgt. Ergänzender Text folgt.

+

Kurzhinweis folgt.

+
+
+
- -
+ +
-

-

+

+

- -
+ +
-
- + + +
+
+
+
+ Info über die Beratung +

Gut zu wissen, bevor du startest

+

Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und + was dich erwartet.

+
+ +
+
+

Was dich bei der Beratung erwartet

+ +

Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und + entwickeln daraus passende Strategien für deinen Alltag.

+ +
    +
  • Individuelle Ernährungsberatung
    • +
  • Erstellung von Ernährungsplänen
    • +
  • Unterstützung bei Gewichtsmanagement
    • +
  • Beratung bei speziellen Ernährungsbedürfnissen
    • +
  • Analyse deiner aktuellen Ernährungsgewohnheiten
    • +
  • Praktische Tipps für die Umsetzung im Alltag
    • +
+
+ +
+

So läuft die Beratung ab

+ +
    +
  1. + Erstgespräch +

    Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.

    +
    2. + +
  2. + Analyse +

    Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet. +

    +
    3. + +
  3. + Planung +

    Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.

    +
    4. + +
  4. + Begleitung +

    Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.

    +
    5. +
+
+ +
+

Für wen ist die Beratung geeignet?

+ +
    +
  • Menschen, die ihre Ernährung verbessern möchten
    • +
  • Sportler mit individuellen Ernährungszielen
    • +
  • Menschen mit speziellen Ernährungsbedürfnissen
    • +
  • Personen, die Unterstützung beim Gewichtsmanagement suchen
    • +
+
+ +
+

Weitere Informationen

+ +

+ Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen, + Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten. +

+
+
+
+ +
+
+

Bereit für deinen nächsten Schritt?

+

Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu dir + passt.

+ Jetzt + unverbindlich anfragen +
+
+ + + +
+ +
+ + diff --git a/js/beratung.js b/js/beratung.js new file mode 100644 index 0000000..bcae4ba --- /dev/null +++ b/js/beratung.js @@ -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); + }); +})();