From 3c51e5abd81fcf6b3b621b88dc8f5f6762dd2b9e Mon Sep 17 00:00:00 2001 From: Vincent Laux <3019006@stud.hs-mannheim.de> Date: Mon, 28 Sep 2026 23:40:11 +0200 Subject: [PATCH] =?UTF-8?q?Variablen=20Namen=20innerhalb=20der=20css=20dat?= =?UTF-8?q?eien=20standardisiert=20(steht=20als=20kommentar=20wies=20fr?= =?UTF-8?q?=C3=BCher=20ging),=20Farben=20f=C3=BCr=20text,=20hintergrund,?= =?UTF-8?q?=20panels=20und=20Accent=20standardisiert,=20logik=20f=C3=BCr?= =?UTF-8?q?=20Bild-Gradiant=20optimiert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes css/berater.css | 33 ++++++++++++----------- css/beratung.css | 54 ++++++++++++++++++-------------------- css/leistungen.css | 54 ++++++++++++++++++++------------------ css/produktuebersicht.css | 40 +++++++++++++++++----------- css/site.css | 2 +- 6 files changed, 97 insertions(+), 86 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..49132ec7dce84bd2a7dca5d28c7a3aebad5ff7c5 GIT binary patch literal 6148 zcmeHK!EV$r5FKYjNm?Q80T7o;k+`nPwh~kom#~xrSAyUGXi1u=4WxFp$+AeRm2#x& z$8h6M%D-@eH?}Kvvqjtxq8`b9_IPIEdAqSQL?lMje4D6GL;)J3zmDz-;dO2+;#o}y z6ddDur4F)6Wtek7CyoKfz`xA^zq>wd(IJ)8bl%@5SljxkMJLgt1FEU+Sbe?PDx1|O z_AL08om6Gr42R!^*Yj_z-3)?YBY2k_saevb&9ok+lQ%qjsZ^C+jMMB@S0DY*nV5~p=fe|Z!vBlOPG!S82fyPzX z5<}R^K^S+e$JV|zXxvHYCnJu1val73u!V<+v^j~`pz9q2j)7$cdS=?^`~TVR>;GjZ zH**X)2L3AsgukEckC2kRTUV0fyEa05kH*4wtwHUA&R)lQz*q4-G%Z+*cmRwowg#br PxDNqMgXk@TBW literal 0 HcmV?d00001 diff --git a/css/berater.css b/css/berater.css index 1d3b8df..25dee86 100644 --- a/css/berater.css +++ b/css/berater.css @@ -3,13 +3,14 @@ Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub ========================================================== */ .berater-section { - --bg-dark-1: #0d0d1a; - --bg-dark-2: #1a1a2e; - --accent-teal: #10B981; - /* Farbe angepasst, um mit dem Pakete-Bereich übereinzustimmen */ - - --text-white: #ffffff; - --text-lightgray: #F8FAFC; + /* Farben und variabel-namen wurden standarttisiert siehe Kommentare */ + --background: ##0714198a; /* früher "--bg-dark-1" */ + --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background, + aber ohne fixes Alpha – für Gradient-Stops + wird benutzt um Bildern einen gradient zu verpassen */ + --background-panel: #152027; /* früher "--bg-dark-2" */ + --accent: #4597A3; /* früher "accent-teal" */ + --text-primary: #ffffff; /* früher "text-white" */ --text-muted: #94A3B8; --font-display: 'Inter', system-ui, sans-serif; @@ -21,7 +22,7 @@ /* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */ padding: 5rem 1.5rem; font-family: var(--font-body); - background-color: var(--bg-dark-1); + background-color: var(--background); color: var(--text-white); display: flex; flex-direction: column; @@ -65,7 +66,7 @@ } .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 */ border: 1px solid rgba(248, 250, 252, 0.08); /* Border-Radius angepasst, passend zu den Paketen */ @@ -78,7 +79,7 @@ } .berater-section .berater-image-wrapper { - background-color: var(--bg-dark-1); + background-color: var(--background); border-radius: 10px; padding: 10px; margin-bottom: 24px; @@ -105,7 +106,7 @@ margin: 0 0 24px 0; font-family: var(--font-body); font-size: 14px; - color: var(--accent-teal); + color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; @@ -124,7 +125,7 @@ margin: 0 0 16px 0; font-size: 16px; font-weight: 600; - color: var(--text-lightgray); + color: var(--text-primary); } .berater-section .bio-text { @@ -150,7 +151,7 @@ .berater-section .berater-liste li { position: relative; margin-bottom: 0.7rem; - color: var(--text-lightgray); + color: var(--text-primary); } /* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */ @@ -162,7 +163,7 @@ width: 8px; height: 8px; border-radius: 2px; - background: var(--accent-teal); + background: var(--accent); } /* ========================================= @@ -180,8 +181,8 @@ font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; - color: var(--bg-dark-1); - background: var(--accent-teal); + color: var(--background); + background: var(--accent); border: none; border-radius: 8px; padding: 0.85rem 1rem; diff --git a/css/beratung.css b/css/beratung.css index e47de39..53d2f49 100644 --- a/css/beratung.css +++ b/css/beratung.css @@ -3,17 +3,15 @@ .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); + --background: #0714198a; + --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background, + aber ohne fixes Alpha – für Gradient-Stops + wird benutzt um Bildern einen gradient zu verpassen */ + --background-panel: #152027; /* früher "surface" */ + --text-primary: #ffffff; /* früher "foreground" */ + --text-muted: #9ba7aa; /* früher "muted-fg" */ + --accent: #4597A3; /* früher "primary" */ + --border: rgba(234, 8, 8, 0.1); /* Typografie */ --font-display: "Sora", sans-serif; @@ -92,7 +90,7 @@ font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; - color: var(--primary); + color: var(--accent); margin-bottom: 18px; } @@ -101,17 +99,17 @@ width: 28px; height: 2px; border-radius: 2px; - background: var(--primary); + background: var(--accent); } .beratung-bereich .lead { font-size: 1.15rem; - color: var(--muted-fg); + color: var(--text-muted); max-width: 660px; } .beratung-bereich .muted { - color: var(--muted-fg); + color: var(--text-muted); } /* ---------- Button ---------- */ @@ -134,12 +132,12 @@ background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } -.beratung-bereich .btn-primary { - background: var(--primary); +.beratung-bereich .btn-accent { + background: var(--accent); color: #03242b; } -.beratung-bereich .btn-primary:hover { +.beratung-bereich .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28); } @@ -173,7 +171,7 @@ min-width: 0; overflow-wrap: anywhere; hyphens: auto; - background-color: var(--surface); + background-color: var(--background-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; @@ -201,7 +199,7 @@ position: absolute; left: 0; top: 0; - color: var(--primary); + color: var(--accent); font-weight: bold; font-size: 1.1rem; } @@ -236,7 +234,7 @@ font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; - color: var(--primary); + color: var(--accent); background: rgba(0, 179, 194, 0.1); border: 1px solid rgba(0, 179, 194, 0.3); } @@ -251,7 +249,7 @@ .beratung-bereich .beratung-ablauf p { margin: 0; - color: var(--muted-fg); + color: var(--text-muted); font-size: 0.95rem; } @@ -272,7 +270,7 @@ } .beratung-bereich .cta-band p { - color: var(--muted-fg); + color: var(--text-muted); max-width: 560px; margin-inline: auto; } @@ -290,7 +288,7 @@ } .beratung-bereich .logo span { - color: var(--primary); + color: var(--accent); } .beratung-bereich .site-footer { @@ -307,7 +305,7 @@ } .beratung-bereich .footer-brand p { - color: var(--muted-fg); + color: var(--text-muted); font-size: 0.95rem; max-width: 340px; margin-top: 14px; @@ -317,7 +315,7 @@ font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; - color: var(--muted-fg); + color: var(--text-muted); margin-bottom: 16px; } @@ -330,7 +328,7 @@ .beratung-bereich .footer-col a { display: block; padding: 5px 0; - color: var(--muted-fg); + color: var(--text-muted); text-decoration: none; font-size: 0.92rem; transition: color 0.15s ease; @@ -348,7 +346,7 @@ margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); - color: var(--muted-fg); + color: var(--text-muted); font-size: 0.85rem; } diff --git a/css/leistungen.css b/css/leistungen.css index 2b45352..2fe3444 100644 --- a/css/leistungen.css +++ b/css/leistungen.css @@ -1,23 +1,26 @@ /* Vincent: Gemeinsame Klassennamen und Variablen sind auf .pakete begrenzt. */ /* ========================================================== - tri-hub.de – Design-DNA (Block 4, Projekt-Kickoff) - Hintergrund: #0d0d1a / #1a1a2e - Akzent: #10B981 (Teal / Emerald Green) - Primärtext: #ffffff / #F8FAFC / #94A3B8 - Typografie: Playfair Display (Display) + Inter (Body) - Ton: Du-Ansprache, Premium, direkt + tri-hub.de – Farben angeglichen an Produktübersicht (Shahnam) + Hintergrund: #071419 / #1b2830 + Akzent: #4597A3 (gedämpftes Cyan-Teal) + Primärtext: #ffffff / #b7bec2 / #7e858a + Typografie: Sora (Display) + Inter (Body) + Werte per Pixel-Sampling aus dem Screenshot der Produktübersicht ermittelt. ========================================================== */ .pakete { - --bg-dark: #0d0d1a; - --bg-panel: #1a1a2e; - --accent: #10B981; - --accent-soft: rgba(16, 185, 129, 0.12); + /* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */ + --background: #0714198a; /* früher "bg-dark */ + --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background, + 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-secondary: #F8FAFC; - --text-muted: #94A3B8; + --text-muted: #7e858a; - --font-display: "Inter", system-ui, sans-serif; + --font-display: "Sora", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } @@ -28,8 +31,8 @@ .pakete { margin: 0; - background: var(--bg-dark); - color: var(--text-secondary); + background: var(--background); + color: var(--text-primary); font-family: var(--font-body); } @@ -72,7 +75,7 @@ .pakete .paket-karte { display: flex; flex-direction: column; - background: var(--bg-panel); + background: var(--background-panel); border: 1px solid rgba(248, 250, 252, 0.08); border-radius: 14px; padding: 2rem 1.75rem; @@ -90,16 +93,17 @@ } .pakete .paket-karte__badge { - position: absolute; - top: -0.7rem; - left: 1.75rem; - background: var(--accent); - color: var(--bg-dark); + display: inline-block; + background: var(--accent-soft); + color: var(--accent); + border: 1px solid var(--accent); font-size: 0.75rem; font-weight: 600; - padding: 0.25rem 0.75rem; + letter-spacing: 0.06em; + text-transform: uppercase; + padding: 0.35rem 0.9rem; border-radius: 999px; - margin: 0; + margin: 0 0 1rem; } .pakete .paket-karte__name { @@ -148,7 +152,7 @@ padding-left: 1.4rem; margin-bottom: 0.7rem; line-height: 1.4; - color: var(--text-secondary); + color: var(--text-primary); } .pakete .paket-karte__leistungen li::before { @@ -166,7 +170,7 @@ font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; - color: var(--bg-dark); + color: var(--text-primary); background: var(--accent); border: none; border-radius: 8px; diff --git a/css/produktuebersicht.css b/css/produktuebersicht.css index a977545..2d435a1 100644 --- a/css/produktuebersicht.css +++ b/css/produktuebersicht.css @@ -1,13 +1,17 @@ /* Shahnam: Styles und Variablen bleiben innerhalb der Produktuebersicht. */ .produktuebersicht { color-scheme: dark; - --background: #0d0d1a; - --text: #f8fafc; - --muted: #c1c9d2; - --accent: #10b981; + --background: #0714198a; + --background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background, + aber ohne fixes Alpha – für Gradient-Stops + 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%); font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; - color: var(--text); + color: var(--text-primary); background: var(--background); } @@ -64,7 +68,7 @@ .produktuebersicht .brand__label { padding-left: 24px; border-left: 1px solid var(--border); - color: var(--muted); + color: var(--text-muted); font-size: 13px; letter-spacing: 0.025em; } @@ -98,12 +102,16 @@ } .produktuebersicht .hero::after { + /*background: var(--background); + /* ich bekomme das nicht richtig hin muss Shahmad machen */ background: - linear-gradient(0deg, rgb(13 13 26 / 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(0deg, rgb(var(--background-rgb) / 96%), transparent 42%), + 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: ""; } + + .produktuebersicht .hero__inner { display: flex; flex-direction: column; @@ -121,7 +129,7 @@ align-items: center; gap: 12px; margin-bottom: 26px; - color: #64e5b7; + color: #4597A3; font-size: 11px; font-weight: 650; letter-spacing: 0.16em; @@ -198,7 +206,7 @@ .produktuebersicht .benefits p span { display: block; margin-top: 4px; - color: var(--muted); + color: var(--text-muted); font-size: 12px; font-weight: 400; } @@ -209,7 +217,7 @@ } .produktuebersicht .hero__caption-label { - color: var(--muted); + color: var(--text-muted); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; @@ -235,14 +243,14 @@ .produktuebersicht .site-footer__inner p > span { margin-left: 12px; - color: var(--muted); + color: var(--text-muted); } .produktuebersicht .site-footer__note { display: flex; align-items: center; gap: 9px; - color: var(--muted); + color: var(--text-muted); } .produktuebersicht .site-footer__note > span { @@ -260,8 +268,8 @@ .produktuebersicht .hero::after { background: - linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%), - linear-gradient(90deg, rgb(13 13 26 / 92%), rgb(13 13 26 / 70%) 65%, rgb(13 13 26 / 48%)); + linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%), + linear-gradient(90deg, rgb(var(--background-rgb) / 92%), rgb(var(--background-rgb) / 70%) 65%, rgb(var(--background-rgb) / 48%)); } .produktuebersicht .hero__content { @@ -295,7 +303,7 @@ } .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%); } diff --git a/css/site.css b/css/site.css index 77d0f28..b6fc916 100644 --- a/css/site.css +++ b/css/site.css @@ -2,7 +2,7 @@ color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #f8fafc; - background: #0d0d1a; + background: #0714198a; } body {