From 6b2bcb44352b25aa7ec28017c58cc11f87feffe5 Mon Sep 17 00:00:00 2001 From: koriboh Date: Fri, 25 Sep 2026 00:03:40 +0200 Subject: [PATCH] feat(nutrition-site): add initial homepage structure and design system Implement the main landing page for the nutrition counseling service, including sections for services, team qualifications, consultation details, and product overview. Add global CSS variables defining theme. --- index.html | 166 ++++++++++++++++++++-- script.js | 51 +++++++ style.css | 409 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 613 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index c8edbe7..ad5469c 100644 --- a/index.html +++ b/index.html @@ -5,25 +5,165 @@ Ernährungsberater + + + + + + - -
+
+ +
-
- -
+
+ +
-
- -
+
-
- -
-
+ + +
+
+
+ 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 +
+
+ + + +
+ + + + + + - \ No newline at end of file + diff --git a/script.js b/script.js index e69de29..cdaec13 100644 --- a/script.js +++ b/script.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(".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); + }); +})(); diff --git a/style.css b/style.css index e69de29..3bea284 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,409 @@ + + +:root { + /* 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 ---------- */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background-color: var(--background); + color: var(--foreground); + font-family: var(--font-body); + line-height: 1.625; + -webkit-font-smoothing: antialiased; + position: relative; +} + +/* Licht*/ +body::before { + content: ""; + position: fixed; + 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; +} + +h1, h2, h3 { + margin-top: 0; + font-family: var(--font-display); + color: var(--foreground); + line-height: 1.2; + letter-spacing: -0.01em; +} + +p { + margin: 0 0 1em; +} + +.container { + width: min(100% - 48px, var(--container)); + margin-inline: auto; +} + +/* ---------- Typo-Helfer ---------- */ + +.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; +} + +.kicker::before { + content: ""; + width: 28px; + height: 2px; + border-radius: 2px; + background: var(--primary); +} + +.lead { + font-size: 1.15rem; + color: var(--muted-fg); + max-width: 660px; +} + +.muted { + color: var(--muted-fg); +} + +/* ---------- Button ---------- */ + +.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; +} + +.btn-primary { + background: var(--primary); + color: #03242b; +} + +.btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28); +} + +/* ---------- Sektionen ---------- */ + +.section { + padding: 96px 0; +} + +.section-head { + max-width: 720px; + margin-bottom: 56px; +} + +.section-head h2 { + font-size: clamp(1.9rem, 4vw, 2.7rem); + margin-bottom: 18px; +} + +/* ---------- Boxen & Grid ---------- */ + +.grid-2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; +} + +.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 ---------- */ + +.check-list { + list-style: none; + padding: 0; + margin: 20px 0 0; + display: grid; + gap: 12px; +} + +.check-list li { + position: relative; + padding-left: 34px; + color: var(--foreground); +} + +.check-list li::before { + content: "✓"; + position: absolute; + left: 0; + top: 0; + color: var(--primary); + font-weight: bold; + font-size: 1.1rem; +} + +/* ---------- Ablauf-Schritte ---------- */ + +.beratung-ablauf { + list-style: none; + counter-reset: schritt; + padding: 0; + margin: 24px 0 0; + display: grid; + gap: 20px; +} + +.beratung-ablauf li { + counter-increment: schritt; + position: relative; + padding-left: 60px; +} + +.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-ablauf strong { + display: block; + font-family: var(--font-display); + font-size: 1.02rem; + color: var(--foreground); + margin-bottom: 4px; +} + +.beratung-ablauf p { + margin: 0; + color: var(--muted-fg); + font-size: 0.95rem; +} + +/* ---------- CTA-Band ---------- */ + +.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); +} + +.cta-band h2 { + font-size: clamp(1.8rem, 4vw, 2.5rem); + margin-bottom: 16px; +} + +.cta-band p { + color: var(--muted-fg); + max-width: 560px; + margin-inline: auto; +} + +/* ---------- Footer ---------- */ + +.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; +} + +.logo span { + color: var(--primary); +} + +.site-footer { + margin-top: 96px; + padding: 64px 0 40px; + border-top: 1px solid var(--border); + background: rgba(255, 255, 255, 0.015); +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 48px; +} + +.footer-brand p { + color: var(--muted-fg); + font-size: 0.95rem; + max-width: 340px; + margin-top: 14px; +} + +.footer-col h3 { + font-size: 0.85rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--muted-fg); + margin-bottom: 16px; +} + +.footer-col ul { + list-style: none; + margin: 0; + padding: 0; +} + +.footer-col a { + display: block; + padding: 5px 0; + color: var(--muted-fg); + text-decoration: none; + font-size: 0.92rem; + transition: color 0.15s ease; +} + +.footer-col a:hover { + color: var(--foreground); +} + +.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; +} + +.footer-legal a { + color: inherit; + text-decoration: none; +} + +.footer-legal a:hover { + color: var(--foreground); +} + +/* ---------- Scroll-Reveal ---------- */ + +.reveal { + opacity: 0; + transform: translateY(18px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.visible { + opacity: 1; + transform: none; +} + +/* ---------- Responsiv ---------- */ + +@media (max-width: 980px) { + .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 760px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .section { + padding: 72px 0; + } + + .footer-grid { + grid-template-columns: 1fr; + gap: 32px; + } + + .cta-band { + padding: 48px 24px; + } +} + +/* ---------- Reduzierte Bewegung ---------- */ + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + .reveal { + opacity: 1; + transform: none; + transition: none; + } + + * { + transition-duration: 0.01ms !important; + } +}