diff --git a/public/assets/css/components.css b/public/assets/css/components.css index eda162a..d5b90e8 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -249,6 +249,11 @@ border-bottom: 0; } +/* Bild/Text-Sektionen im Band: mehr Luft nach oben und unten */ +.split.section--tinted { + padding-block: clamp(4.5rem, 3.5rem + 3vw, 7.5rem); +} + .split--flip .split__text { order: 2; } @@ -1191,10 +1196,14 @@ margin-inline: auto; } +.faq__inner > h2 { + text-align: center; +} + .faq__list { display: grid; - gap: 0.6rem; - margin-top: 2rem; + gap: 0.75rem; + margin-top: 2.5rem; } .faq__item { @@ -1202,6 +1211,17 @@ border: 1px solid var(--clr-glass-border); border-radius: var(--radius-card); overflow: hidden; + transition: border-color var(--transition), background var(--transition); +} + +.faq__item:hover { + border-color: rgb(255 255 255 / 0.35); +} + +/* Offener Eintrag klar hervorgehoben. */ +.faq__item[open] { + border-color: rgb(var(--clr-accent-rgb) / 0.55); + background: rgb(var(--clr-accent-rgb) / 0.06); } .faq__q { @@ -1209,8 +1229,9 @@ align-items: center; justify-content: space-between; gap: 1rem; - padding: 1rem 1.25rem; + padding: 1.15rem 1.4rem; font-size: var(--fs-600); + line-height: 1.3; cursor: pointer; list-style: none; } @@ -1224,22 +1245,46 @@ outline-offset: -2px; } +/* Chevron als runder Akzent-Badge. */ .faq__chevron { flex: none; - font-size: 0.8em; + display: grid; + place-items: center; + width: 2rem; + height: 2rem; + font-size: 0.8rem; color: var(--clr-accent); - transition: transform var(--transition); + background: rgb(var(--clr-accent-rgb) / 0.14); + border-radius: 50%; + transition: transform var(--transition), background var(--transition), color var(--transition); } .faq__item[open] .faq__chevron { transform: rotate(180deg); + background: var(--clr-accent); + color: #fff; } .faq__a { - padding: 0 1.25rem 1.1rem; + padding: 0 1.4rem 1.3rem; color: var(--clr-text-muted); } +.faq__a p { + max-width: 62ch; + margin: 0; +} + +/* Antwort beim Öffnen sanft einblenden (reduced-motion via reset.css deaktiviert). */ +.faq__item[open] .faq__a { + animation: faq-reveal 260ms ease; +} + +@keyframes faq-reveal { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } +} + /* === age-groups (Jugend-Altersklassen) === */ .age-groups > .container { text-align: center; @@ -1342,35 +1387,43 @@ height: auto; aspect-ratio: 16 / 10; object-fit: cover; + transition: transform var(--transition); +} + +.team-card:hover .team-card__img, +.team-card:focus-visible .team-card__img { + transform: scale(1.04); } .team-card__body { - display: grid; - gap: 0.4rem; - align-content: start; - padding: 1.25rem 1.4rem 1.4rem; + display: flex; + flex-direction: column; + gap: 0.3rem; + padding: 1.4rem 1.5rem 1.5rem; } .team-card__name { /* Coolvetica/Heading (siehe CLAUDE.md) — bewusst groß und prägnant. */ - font-size: var(--fs-650); + font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.4rem); line-height: var(--lh-heading); } .team-card__meta { - font-size: var(--fs-600); + font-size: var(--fs-500); + text-transform: uppercase; + letter-spacing: 0.06em; color: var(--clr-text-muted); } .team-card__cta { display: inline-flex; align-items: center; - gap: 0.4rem; - margin-top: 0.6rem; - font-family: var(--ff-heading); + gap: 0.45rem; + /* an den unteren Rand schieben → CTA aller Karten fluchtet, egal wie lang der Name */ + margin-top: auto; + padding-top: 1rem; + /* Body-Schrift (Abel) — Coolvetica bleibt den Überschriften vorbehalten */ font-size: var(--fs-500); - text-transform: uppercase; - letter-spacing: 0.04em; color: var(--clr-accent); }