Add ::: team block rendering board members as person cards with initials avatars

Elternbeirat.Web/wwwroot/app.css

@@ -74,6 +74,21 @@
     --color-button-light-hover: #eaf3f9;
     --color-on-button-light: #1f5477;
 
+    /* Initials avatars on the person cards (::: team, see TeamMember.cs). Five
+       soft tints, each with a deep text shade of the same hue, so a board of ten
+       people looks lively but calm. The colour is picked from the name, so it means
+       nothing -- it only helps tell the cards apart. Every pair >= 5.3:1. */
+    --color-avatar-1: #dbeaf5;     /* blue */
+    --color-on-avatar-1: #1f5477;
+    --color-avatar-2: #dcefd8;     /* green */
+    --color-on-avatar-2: #2f6b33;
+    --color-avatar-3: #fbeec5;     /* warm yellow */
+    --color-on-avatar-3: #7a5a00;
+    --color-avatar-4: #f8dfe0;     /* rose */
+    --color-on-avatar-4: #8e2f3a;
+    --color-avatar-5: #e7e0f3;     /* violet */
+    --color-on-avatar-5: #553a8a;
+
     /* Keyboard focus ring (:focus-visible). Its own token so it can stay strong on
        the light page (dark blue, 8:1 on white) and flip to a light blue on the dark
        one; on the gradient the hero switches it to white. */
@@ -181,6 +196,19 @@
         --color-button-light-hover: #d3dee6;
         --color-on-button-light: #1a3d57; /* 9:1 on the eased white */
 
+        /* Avatars: the tints turn into deep shades, the text into light ones; each
+           pair >= 7:1, so the circles do not glare on the dark cards. */
+        --color-avatar-1: #1f3a4f;
+        --color-on-avatar-1: #a3d5f4;
+        --color-avatar-2: #24402a;
+        --color-on-avatar-2: #a6dc9e;
+        --color-avatar-3: #4a3d14;
+        --color-on-avatar-3: #f3d98a;
+        --color-avatar-4: #4d2a2f;
+        --color-on-avatar-4: #f4b8bf;
+        --color-avatar-5: #3a3150;
+        --color-on-avatar-5: #cdbdf0;
+
         --color-focus: #a3d5f4;        /* light blue: a dark ring would vanish here */
 
         --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
@@ -853,6 +881,141 @@ h1:focus {
     line-height: 1.15;
 }
 
+/* ::: team -- one person card per list item (Markdown.cs/TeamMember.cs build the
+   avatar, name, role chip, duty tags and note). A grid like the kacheln, a little
+   wider so a long double name still fits its line. Each "## Vorsitz" etc. above
+   stays a normal heading; every group is a block of its own. */
+.markdown-body .team > ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: var(--space-3);
+    max-width: none;
+    margin: 0 0 var(--space-4);
+    padding: 0;
+    list-style: none;
+}
+
+.markdown-body .team li + li {
+    margin-top: 0;
+}
+
+/* The card: avatar in a column of its own, everything else stacked beside it.
+   align-content keeps a short card's text at the top when a long neighbour in the
+   same row stretches it. Hover only deepens the shadow -- nothing moves. */
+.markdown-body .team-card {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--space-3);
+    align-content: start;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    box-shadow: var(--shadow);
+    transition: box-shadow var(--transition);
+}
+
+.markdown-body .team-card:hover {
+    box-shadow: var(--shadow-hover);
+}
+
+/* In a loose list (blank lines between items) Markdig wraps the card's text in a
+   <p>; display: contents lets its parts join the card's grid all the same. */
+.markdown-body .team-card > p:first-child {
+    display: contents;
+}
+
+/* Everything but the avatar goes into the text column -- including whatever else
+   an editor puts into the item (a second paragraph, a sub-list). */
+.markdown-body .team-card > :not(.team-avatar),
+.markdown-body .team-card > p:first-child > :not(.team-avatar) {
+    grid-column: 2;
+}
+
+/* A card without the convention (no bold name) is just its text. */
+.markdown-body .team-card-plain {
+    display: block;
+}
+
+.markdown-body .team-avatar {
+    grid-row: 1 / span 4;
+    display: grid;
+    place-items: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    font-weight: var(--font-weight-heading);
+    letter-spacing: 0.02em;
+}
+
+.markdown-body .team-avatar-1 { background: var(--color-avatar-1); color: var(--color-on-avatar-1); }
+.markdown-body .team-avatar-2 { background: var(--color-avatar-2); color: var(--color-on-avatar-2); }
+.markdown-body .team-avatar-3 { background: var(--color-avatar-3); color: var(--color-on-avatar-3); }
+.markdown-body .team-avatar-4 { background: var(--color-avatar-4); color: var(--color-on-avatar-4); }
+.markdown-body .team-avatar-5 { background: var(--color-avatar-5); color: var(--color-on-avatar-5); }
+
+.markdown-body .team-name {
+    color: var(--color-heading);
+    font-size: 1.15rem;
+    line-height: 1.3;
+}
+
+/* The role as a chip under the name; justify-self keeps it as wide as its text,
+   not the column. */
+.markdown-body .team-role {
+    justify-self: start;
+    margin-top: var(--space-1);
+    padding: 0.1rem var(--space-2);
+    border-radius: 999px;
+    background: var(--color-brand-tint);
+    color: var(--color-brand-dark);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+/* Duties as small outlined tags: quieter than the role chip, because the role
+   says who someone is and the duties only what they look after. */
+.markdown-body .team-duties {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+    margin-top: var(--space-2);
+}
+
+.markdown-body .team-duty {
+    padding: 0.05rem var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-soft);
+    font-size: 0.8rem;
+}
+
+.markdown-body .team-note {
+    margin-top: var(--space-2);
+    color: var(--color-text-soft);
+    font-size: 0.95rem;
+}
+
+/* ::: team gross -- the chair: wider cards, a bigger avatar and name, and a green
+   edge so the first group reads as the lead of the page. */
+.markdown-body .team.gross > ul {
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
+
+.markdown-body .team.gross .team-card {
+    padding: var(--space-4);
+    border-top: 4px solid var(--color-accent);
+}
+
+.markdown-body .team.gross .team-avatar {
+    width: 4rem;
+    height: 4rem;
+    font-size: 1.3rem;
+}
+
+.markdown-body .team.gross .team-name {
+    font-size: 1.35rem;
+}
+
 /* Tables (pipe tables): not in the content yet, styled ahead of time. As a block
    with overflow they scroll sideways on a phone instead of stretching the page. */
 .markdown-body table {