3024588
/
trihub-ernaehrung-advinters
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Variablen Namen innerhalb der css dateien standardisiert (steht als kommentar wies früher ging), Farben für text, hintergrund, panels und Accent standardisiert, logik für Bild-Gradiant optimiert

integration/ernaehrung-review
Vincent Laux 2026-09-28 23:40:11 +02:00
parent 28028e76df
commit 3c51e5abd8
6 changed files with 97 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored 100644
View File

Binary file not shown.

33
css/berater.css
View File

@ -3,13 +3,14 @@
Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub
========================================================== */ ========================================================== */
.berater-section { .berater-section {
--bg-dark-1: #0d0d1a; /* Farben und variabel-namen wurden standarttisiert siehe Kommentare */
--bg-dark-2: #1a1a2e; --background: ##0714198a; /* früher "--bg-dark-1" */
--accent-teal: #10B981; --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background,
/* Farbe angepasst, um mit dem Pakete-Bereich übereinzustimmen */ aber ohne fixes Alpha – für Gradient-Stops
wird benutzt um Bildern einen gradient zu verpassen */
--text-white: #ffffff; --background-panel: #152027; /* früher "--bg-dark-2" */
--text-lightgray: #F8FAFC; --accent: #4597A3; /* früher "accent-teal" */
--text-primary: #ffffff; /* früher "text-white" */
--text-muted: #94A3B8; --text-muted: #94A3B8;
--font-display: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif;
@ -21,7 +22,7 @@
/* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */ /* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */
padding: 5rem 1.5rem; padding: 5rem 1.5rem;
font-family: var(--font-body); font-family: var(--font-body);
background-color: var(--bg-dark-1); background-color: var(--background);
color: var(--text-white); color: var(--text-white);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -65,7 +66,7 @@
} }
.berater-section .berater-card { .berater-section .berater-card {
background-color: var(--bg-dark-2); background-color: var(--background-panel);
/* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */ /* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */
border: 1px solid rgba(248, 250, 252, 0.08); border: 1px solid rgba(248, 250, 252, 0.08);
/* Border-Radius angepasst, passend zu den Paketen */ /* Border-Radius angepasst, passend zu den Paketen */
@ -78,7 +79,7 @@
} }
.berater-section .berater-image-wrapper { .berater-section .berater-image-wrapper {
background-color: var(--bg-dark-1); background-color: var(--background);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
margin-bottom: 24px; margin-bottom: 24px;
@ -105,7 +106,7 @@
margin: 0 0 24px 0; margin: 0 0 24px 0;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 14px; font-size: 14px;
color: var(--accent-teal); color: var(--accent);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5px; letter-spacing: 1.5px;
font-weight: 600; font-weight: 600;
@ -124,7 +125,7 @@
margin: 0 0 16px 0; margin: 0 0 16px 0;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--text-lightgray); color: var(--text-primary);
} }
.berater-section .bio-text { .berater-section .bio-text {
@ -150,7 +151,7 @@
.berater-section .berater-liste li { .berater-section .berater-liste li {
position: relative; position: relative;
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
color: var(--text-lightgray); color: var(--text-primary);
} }
/* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */ /* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */
@ -162,7 +163,7 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 2px; border-radius: 2px;
background: var(--accent-teal); background: var(--accent);
} }
/* ========================================= /* =========================================
@ -180,8 +181,8 @@
font-family: var(--font-body); font-family: var(--font-body);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
color: var(--bg-dark-1); color: var(--background);
background: var(--accent-teal); background: var(--accent);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;

54
css/beratung.css
View File

@ -3,17 +3,15 @@
.beratung-bereich { .beratung-bereich {
/* Farben – Tokens von tri-hub.de (Hex-Fallback + oklch) */ /* Farben – Tokens von tri-hub.de (Hex-Fallback + oklch) */
--background: #01090e; --background: #0714198a;
--background: oklch(13% .022 223); --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background,
--surface: #031217; aber ohne fixes Alpha – für Gradient-Stops
--surface: oklch(17% .024 221); wird benutzt um Bildern einen gradient zu verpassen */
--foreground: #ecf3f5; --background-panel: #152027; /* früher "surface" */
--foreground: oklch(96% .008 210); --text-primary: #ffffff; /* früher "foreground" */
--muted-fg: #9ba7aa; --text-muted: #9ba7aa; /* früher "muted-fg" */
--muted-fg: oklch(72% .015 214); --accent: #4597A3; /* früher "primary" */
--primary: #00b3c2; --border: rgba(234, 8, 8, 0.1);
--primary: oklch(70% .12 205);
--border: rgba(255, 255, 255, 0.1);
/* Typografie */ /* Typografie */
--font-display: "Sora", sans-serif; --font-display: "Sora", sans-serif;
@ -92,7 +90,7 @@
font-weight: 600; font-weight: 600;
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
color: var(--primary); color: var(--accent);
margin-bottom: 18px; margin-bottom: 18px;
} }
@ -101,17 +99,17 @@
width: 28px; width: 28px;
height: 2px; height: 2px;
border-radius: 2px; border-radius: 2px;
background: var(--primary); background: var(--accent);
} }
.beratung-bereich .lead { .beratung-bereich .lead {
font-size: 1.15rem; font-size: 1.15rem;
color: var(--muted-fg); color: var(--text-muted);
max-width: 660px; max-width: 660px;
} }
.beratung-bereich .muted { .beratung-bereich .muted {
color: var(--muted-fg); color: var(--text-muted);
} }
/* ---------- Button ---------- */ /* ---------- Button ---------- */
@ -134,12 +132,12 @@
background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
} }
.beratung-bereich .btn-primary { .beratung-bereich .btn-accent {
background: var(--primary); background: var(--accent);
color: #03242b; color: #03242b;
} }
.beratung-bereich .btn-primary:hover { .beratung-bereich .btn-accent:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28); box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28);
} }
@ -173,7 +171,7 @@
min-width: 0; min-width: 0;
overflow-wrap: anywhere; overflow-wrap: anywhere;
hyphens: auto; hyphens: auto;
background-color: var(--surface); background-color: var(--background-panel);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 32px; padding: 32px;
@ -201,7 +199,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
color: var(--primary); color: var(--accent);
font-weight: bold; font-weight: bold;
font-size: 1.1rem; font-size: 1.1rem;
} }
@ -236,7 +234,7 @@
font-family: var(--font-display); font-family: var(--font-display);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
color: var(--primary); color: var(--accent);
background: rgba(0, 179, 194, 0.1); background: rgba(0, 179, 194, 0.1);
border: 1px solid rgba(0, 179, 194, 0.3); border: 1px solid rgba(0, 179, 194, 0.3);
} }
@ -251,7 +249,7 @@
.beratung-bereich .beratung-ablauf p { .beratung-bereich .beratung-ablauf p {
margin: 0; margin: 0;
color: var(--muted-fg); color: var(--text-muted);
font-size: 0.95rem; font-size: 0.95rem;
} }
@ -272,7 +270,7 @@
} }
.beratung-bereich .cta-band p { .beratung-bereich .cta-band p {
color: var(--muted-fg); color: var(--text-muted);
max-width: 560px; max-width: 560px;
margin-inline: auto; margin-inline: auto;
} }
@ -290,7 +288,7 @@
} }
.beratung-bereich .logo span { .beratung-bereich .logo span {
color: var(--primary); color: var(--accent);
} }
.beratung-bereich .site-footer { .beratung-bereich .site-footer {
@ -307,7 +305,7 @@
} }
.beratung-bereich .footer-brand p { .beratung-bereich .footer-brand p {
color: var(--muted-fg); color: var(--text-muted);
font-size: 0.95rem; font-size: 0.95rem;
max-width: 340px; max-width: 340px;
margin-top: 14px; margin-top: 14px;
@ -317,7 +315,7 @@
font-size: 0.85rem; font-size: 0.85rem;
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
color: var(--muted-fg); color: var(--text-muted);
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -330,7 +328,7 @@
.beratung-bereich .footer-col a { .beratung-bereich .footer-col a {
display: block; display: block;
padding: 5px 0; padding: 5px 0;
color: var(--muted-fg); color: var(--text-muted);
text-decoration: none; text-decoration: none;
font-size: 0.92rem; font-size: 0.92rem;
transition: color 0.15s ease; transition: color 0.15s ease;
@ -348,7 +346,7 @@
margin-top: 48px; margin-top: 48px;
padding-top: 24px; padding-top: 24px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
color: var(--muted-fg); color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }

54
css/leistungen.css
View File

@ -1,23 +1,26 @@
/* Vincent: Gemeinsame Klassennamen und Variablen sind auf .pakete begrenzt. */ /* Vincent: Gemeinsame Klassennamen und Variablen sind auf .pakete begrenzt. */
/* ========================================================== /* ==========================================================
tri-hub.de – Design-DNA (Block 4, Projekt-Kickoff) tri-hub.de – Farben angeglichen an Produktübersicht (Shahnam)
Hintergrund: #0d0d1a / #1a1a2e Hintergrund: #071419 / #1b2830
Akzent: #10B981 (Teal / Emerald Green) Akzent: #4597A3 (gedämpftes Cyan-Teal)
Primärtext: #ffffff / #F8FAFC / #94A3B8 Primärtext: #ffffff / #b7bec2 / #7e858a
Typografie: Playfair Display (Display) + Inter (Body) Typografie: Sora (Display) + Inter (Body)
Ton: Du-Ansprache, Premium, direkt Werte per Pixel-Sampling aus dem Screenshot der Produktübersicht ermittelt.
========================================================== */ ========================================================== */
.pakete { .pakete {
--bg-dark: #0d0d1a; /* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */
--bg-panel: #1a1a2e; --background: #0714198a; /* früher "bg-dark */
--accent: #10B981; --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background,
--accent-soft: rgba(16, 185, 129, 0.12); aber ohne fixes Alpha – für Gradient-Stops
wird benutzt um Bildern einen gradient zu verpassen */
--background-panel: #152027; /* früher "primary */
--accent: #4597A3;
--accent-soft: rgba(69, 151, 163, 0.14);
--text-primary: #ffffff; --text-primary: #ffffff;
--text-secondary: #F8FAFC; --text-muted: #7e858a;
--text-muted: #94A3B8;
--font-display: "Inter", system-ui, sans-serif; --font-display: "Sora", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
} }
@ -28,8 +31,8 @@
.pakete { .pakete {
margin: 0; margin: 0;
background: var(--bg-dark); background: var(--background);
color: var(--text-secondary); color: var(--text-primary);
font-family: var(--font-body); font-family: var(--font-body);
} }
@ -72,7 +75,7 @@
.pakete .paket-karte { .pakete .paket-karte {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-panel); background: var(--background-panel);
border: 1px solid rgba(248, 250, 252, 0.08); border: 1px solid rgba(248, 250, 252, 0.08);
border-radius: 14px; border-radius: 14px;
padding: 2rem 1.75rem; padding: 2rem 1.75rem;
@ -90,16 +93,17 @@
} }
.pakete .paket-karte__badge { .pakete .paket-karte__badge {
position: absolute; display: inline-block;
top: -0.7rem; background: var(--accent-soft);
left: 1.75rem; color: var(--accent);
background: var(--accent); border: 1px solid var(--accent);
color: var(--bg-dark);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
padding: 0.25rem 0.75rem; letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.35rem 0.9rem;
border-radius: 999px; border-radius: 999px;
margin: 0; margin: 0 0 1rem;
} }
.pakete .paket-karte__name { .pakete .paket-karte__name {
@ -148,7 +152,7 @@
padding-left: 1.4rem; padding-left: 1.4rem;
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
line-height: 1.4; line-height: 1.4;
color: var(--text-secondary); color: var(--text-primary);
} }
.pakete .paket-karte__leistungen li::before { .pakete .paket-karte__leistungen li::before {
@ -166,7 +170,7 @@
font-family: var(--font-body); font-family: var(--font-body);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
color: var(--bg-dark); color: var(--text-primary);
background: var(--accent); background: var(--accent);
border: none; border: none;
border-radius: 8px; border-radius: 8px;

40
css/produktuebersicht.css
View File

@ -1,13 +1,17 @@
/* Shahnam: Styles und Variablen bleiben innerhalb der Produktuebersicht. */ /* Shahnam: Styles und Variablen bleiben innerhalb der Produktuebersicht. */
.produktuebersicht { .produktuebersicht {
color-scheme: dark; color-scheme: dark;
--background: #0d0d1a; --background: #0714198a;
--text: #f8fafc; --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background,
--muted: #c1c9d2; aber ohne fixes Alpha – für Gradient-Stops
--accent: #10b981; wird benutzt um Bildern einen gradient zu verpassen */
/* es fehlt eine andere backgroundfarbe für das Panel */
--accent: #4597A3;
--text-primary: #ffffff; /*früher "text"*/
--text-muted: #b7bec2; /*früher "muted"*/
--border: rgb(255 255 255 / 16%); --border: rgb(255 255 255 / 16%);
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
color: var(--text); color: var(--text-primary);
background: var(--background); background: var(--background);
} }
@ -64,7 +68,7 @@
.produktuebersicht .brand__label { .produktuebersicht .brand__label {
padding-left: 24px; padding-left: 24px;
border-left: 1px solid var(--border); border-left: 1px solid var(--border);
color: var(--muted); color: var(--text-muted);
font-size: 13px; font-size: 13px;
letter-spacing: 0.025em; letter-spacing: 0.025em;
} }
@ -98,12 +102,16 @@
} }
.produktuebersicht .hero::after { .produktuebersicht .hero::after {
/*background: var(--background);
/* ich bekomme das nicht richtig hin muss Shahmad machen */
background: background:
linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%), linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
linear-gradient(90deg, rgb(13 13 26 / 94%) 0%, rgb(13 13 26 / 79%) 35%, rgb(13 13 26 / 38%) 72%, rgb(13 13 26 / 25%) 100%); linear-gradient(90deg, rgb(var(--background-rgb) / 94%) 0%, rgb(var(--background-rgb) / 79%) 35%, rgb(var(--background-rgb) / 38%) 72%, rgb(var(--background-rgb) / 25%) 100%);
content: ""; content: "";
} }
.produktuebersicht .hero__inner { .produktuebersicht .hero__inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -121,7 +129,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
margin-bottom: 26px; margin-bottom: 26px;
color: #64e5b7; color: #4597A3;
font-size: 11px; font-size: 11px;
font-weight: 650; font-weight: 650;
letter-spacing: 0.16em; letter-spacing: 0.16em;
@ -198,7 +206,7 @@
.produktuebersicht .benefits p span { .produktuebersicht .benefits p span {
display: block; display: block;
margin-top: 4px; margin-top: 4px;
color: var(--muted); color: var(--text-muted);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
} }
@ -209,7 +217,7 @@
} }
.produktuebersicht .hero__caption-label { .produktuebersicht .hero__caption-label {
color: var(--muted); color: var(--text-muted);
font-size: 10px; font-size: 10px;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
@ -235,14 +243,14 @@
.produktuebersicht .site-footer__inner p > span { .produktuebersicht .site-footer__inner p > span {
margin-left: 12px; margin-left: 12px;
color: var(--muted); color: var(--text-muted);
} }
.produktuebersicht .site-footer__note { .produktuebersicht .site-footer__note {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
color: var(--muted); color: var(--text-muted);
} }
.produktuebersicht .site-footer__note > span { .produktuebersicht .site-footer__note > span {
@ -260,8 +268,8 @@
.produktuebersicht .hero::after { .produktuebersicht .hero::after {
background: background:
linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%), linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
linear-gradient(90deg, rgb(13 13 26 / 92%), rgb(13 13 26 / 70%) 65%, rgb(13 13 26 / 48%)); linear-gradient(90deg, rgb(var(--background-rgb) / 92%), rgb(var(--background-rgb) / 70%) 65%, rgb(var(--background-rgb) / 48%));
} }
.produktuebersicht .hero__content { .produktuebersicht .hero__content {
@ -295,7 +303,7 @@
} }
.produktuebersicht .hero::after { .produktuebersicht .hero::after {
background: linear-gradient(90deg, rgb(13 13 26 / 87%), rgb(13 13 26 / 65%)), background: linear-gradient(90deg, rgb(var(--background-rgb) / 87%), rgb(var(--background-rgb) / 65%)),
linear-gradient(0deg, var(--background), transparent 55%); linear-gradient(0deg, var(--background), transparent 55%);
} }

2
css/site.css
View File

@ -2,7 +2,7 @@
color-scheme: dark; color-scheme: dark;
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
color: #f8fafc; color: #f8fafc;
background: #0d0d1a; background: #0714198a;
} }
body { body {