From 8ead2454534b45a40c72da604ff4df372c56a443 Mon Sep 17 00:00:00 2001 From: Kevin Kopp Date: Thu, 24 Sep 2026 16:29:29 +0200 Subject: [PATCH] =?UTF-8?q?Setup:=20Grundger=C3=BCst=20mit=20leeren=20Sekt?= =?UTF-8?q?ionen=20f=C3=BCr=20US01-01=20bis=20US01-03?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projekt.html => assets/images/hero/.gitkeep | 0 assets/images/icons/.gitkeep | 0 css/base.css | 95 +++++++++++++++++++++ css/sections/ablauf.css | 9 ++ css/sections/hero.css | 9 ++ css/sections/vorteile.css | 9 ++ ernaehrungsberatung.html | 66 ++++++++++++++ js/main.js | 3 + 8 files changed, 191 insertions(+) rename projekt.html => assets/images/hero/.gitkeep (100%) create mode 100644 assets/images/icons/.gitkeep create mode 100644 css/base.css create mode 100644 css/sections/ablauf.css create mode 100644 css/sections/hero.css create mode 100644 css/sections/vorteile.css create mode 100644 ernaehrungsberatung.html create mode 100644 js/main.js diff --git a/projekt.html b/assets/images/hero/.gitkeep similarity index 100% rename from projekt.html rename to assets/images/hero/.gitkeep diff --git a/assets/images/icons/.gitkeep b/assets/images/icons/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..2d58a87 --- /dev/null +++ b/css/base.css @@ -0,0 +1,95 @@ +/* ========================================================= + base.css – gemeinsame Basis für alle Features + Änderungen hier nur über eigenen Branch (betrifft alle!) + ========================================================= */ + +/* ---------- Design-Tokens laut tri-hub Design-DNA ---------- */ +:root { + /* Hintergrund: tiefes Dunkelblau / Schwarz */ + --th-bg: #0d0d1a; + --th-bg-elevated: #1a1a2e; + + /* Akzent: Teal / Emerald Green – CTAs, Icons, Highlights */ + --th-accent: #10b981; + + /* Text: Weiß / Hellgrau */ + --th-text: #ffffff; + --th-text-soft: #f8fafc; + --th-text-muted: #94a3b8; + + /* Typografie: Serif Display + Sans-Serif Body */ + --th-font-display: "Playfair Display", Georgia, serif; + --th-font-body: "Inter", system-ui, sans-serif; + + /* Lesbarkeit Zielgruppe 50+ (Definition of Done) */ + --th-font-size-body: 1.125rem; /* 18px */ + --th-line-height: 1.65; + + /* Abstände / Radien für alle Sektionen */ + --th-section-space: 5rem; + --th-radius: 1.4rem; +} + +/* ---------- Grundlayout ---------- */ +body { + background: var(--th-bg); + color: var(--th-text-soft); + font-family: var(--th-font-body); + font-size: var(--th-font-size-body); + line-height: var(--th-line-height); +} + +h1, h2, h3 { + font-family: var(--th-font-display); + color: var(--th-text); + letter-spacing: -0.01em; +} + +main > section { + padding-block: var(--th-section-space); +} + +/* Anker nicht unter dem Header verstecken */ +section[id] { + scroll-margin-top: 5rem; +} + +/* ---------- Header ---------- */ +.site-header { + position: sticky; + top: 0; + z-index: 40; + background: rgb(13 13 26 / 0.85); + backdrop-filter: blur(12px); + border-bottom: 1px solid rgb(255 255 255 / 0.08); +} + +.site-header .container { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 1rem; +} + +.site-logo { + font-family: var(--th-font-display); + font-size: 1.5rem; + font-weight: 700; + color: var(--th-text); +} + +/* ---------- Barrierefreiheit ---------- */ +a:focus-visible, +button:focus-visible { + outline: 3px solid var(--th-accent); + outline-offset: 4px; + border-radius: 0.5rem; +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } +} diff --git a/css/sections/ablauf.css b/css/sections/ablauf.css new file mode 100644 index 0000000..1d0e360 --- /dev/null +++ b/css/sections/ablauf.css @@ -0,0 +1,9 @@ +/* ========================================================= + US01-03: Ablauf sehen (+ Kontaktangaben) + Branch: feature/US01-03-ablauf + Nur Selektoren unter #ablauf verwenden. + Farben/Schriften über var(--th-...) aus base.css. + ========================================================= */ + +#ablauf { +} diff --git a/css/sections/hero.css b/css/sections/hero.css new file mode 100644 index 0000000..67d9e00 --- /dev/null +++ b/css/sections/hero.css @@ -0,0 +1,9 @@ +/* ========================================================= + US01-01: Angebot und Zielgruppe sofort sehen (Hero) + Branch: feature/US01-01-hero + Nur Selektoren unter #hero verwenden. + Farben/Schriften über var(--th-...) aus base.css. + ========================================================= */ + +#hero { +} diff --git a/css/sections/vorteile.css b/css/sections/vorteile.css new file mode 100644 index 0000000..79b552e --- /dev/null +++ b/css/sections/vorteile.css @@ -0,0 +1,9 @@ +/* ========================================================= + US01-02: Vorteile auf einen Blick + Branch: feature/US01-02-vorteile + Nur Selektoren unter #vorteile verwenden. + Farben/Schriften über var(--th-...) aus base.css. + ========================================================= */ + +#vorteile { +} diff --git a/ernaehrungsberatung.html b/ernaehrungsberatung.html new file mode 100644 index 0000000..40c8156 --- /dev/null +++ b/ernaehrungsberatung.html @@ -0,0 +1,66 @@ + + + + + + Ernährungsberatung für Triathleten 50+ | tri-hub + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+ + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + +
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..54569ea --- /dev/null +++ b/js/main.js @@ -0,0 +1,3 @@ +// Einstiegspunkt für Skripte. +// Feature-Code in eigene Dateien auslagern (z. B. js/scroll.js für US01-01) +// und hier bzw. in index.html einbinden.