.article { max-width:720px; margin:0 auto; }
.article p { color:#c8e0c8; font-size:1.02rem; line-height:1.85; margin-bottom:1.3rem; }
.article p:last-child { margin-bottom:0; }
.article h3 { color:#e8f5e0; font-size:1.15rem; margin:1.6rem 0 0.9rem; }
.article ul { margin:0 0 1.3rem; padding-left:1.3rem; }
.article ul:last-child { margin-bottom:0; }
.article li { color:#c8e0c8; font-size:1.02rem; line-height:1.75; margin-bottom:0.7rem; }
.article li:last-child { margin-bottom:0; }
.article strong { color:#e8f5e0; }
.article a { color:#6ee87e; text-decoration:underline; }
.article a:hover { opacity:0.8; }
.wwa-closing { font-style:italic; color:#a0c8a0 !important; border-left:3px solid #3a9e5a; padding-left:1rem; }
.wwa-banner { position:relative; overflow:hidden; height:280px; }
.wwa-banner img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; filter:brightness(0.50) saturate(0.9); }
/* <picture> transparent machen, damit die bestehenden ".wwa-banner img" /
   ".wwa-role-card img"-Regeln unveraendert greifen. */
.wwa-banner picture, .wwa-role-card picture { display:contents; }
.wwa-banner .wwa-banner-text { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding-left:clamp(1.5rem,5vw,5rem); padding-right:clamp(1.5rem,5vw,5rem); }
.wwa-banner .wwa-banner-text h2 { margin-bottom:0; }
.wwa-role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin:1.4rem 0 1.8rem; }
.wwa-role-card { text-align:center; }
.wwa-role-card img { width:150px; height:150px; object-fit:contain; margin:0 auto 0.9rem; display:block; }
.wwa-role-card h4 { color:#e8f5e0; font-size:1.02rem; margin-bottom:0.5rem; }
.wwa-role-card p { color:#c8e0c8; font-size:0.92rem; line-height:1.65; margin-bottom:0; }
@media(max-width:760px){
  .wwa-role-grid { grid-template-columns:1fr; }
}