Bild/Text-Sektionen im tinted-Band: padding-block auf clamp(4.5–7.5rem) erhöht

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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);
 }