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
parent
28028e76df
commit
3c51e5abd8
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue