diff --git a/public/assets/css/components.css b/public/assets/css/components.css index a6e5775..eda162a 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -579,15 +579,22 @@ color: var(--clr-text-muted); } +/* Max. 3 pro Reihe; unvollständige Reihen (z. B. 3+2) zentrieren sich automatisch */ .persons__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); + display: flex; + flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; text-align: left; } +.persons__grid > li { + flex: 0 1 calc((100% - 3rem) / 3); + min-width: 220px; + max-width: 340px; +} + .person-card { display: grid; height: 100%; @@ -1339,27 +1346,32 @@ .team-card__body { display: grid; - gap: 0.35rem; + gap: 0.4rem; align-content: start; - padding: 1.1rem 1.25rem 1.25rem; + padding: 1.25rem 1.4rem 1.4rem; } .team-card__name { - font-size: var(--fs-600); + /* Coolvetica/Heading (siehe CLAUDE.md) — bewusst groß und prägnant. */ + font-size: var(--fs-650); + line-height: var(--lh-heading); } .team-card__meta { + font-size: var(--fs-600); color: var(--clr-text-muted); - font-size: var(--fs-500); } .team-card__cta { display: inline-flex; align-items: center; gap: 0.4rem; - margin-top: 0.4rem; - color: var(--clr-accent); + margin-top: 0.6rem; + font-family: var(--ff-heading); font-size: var(--fs-500); + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--clr-accent); } .team-card__arrow {