/* Vorstand-Grid (Shortcode [foev_vorstand]).
   Spaltenzahl kommt aus dem data-cols-Attribut (serverseitig ausbalanciert),
   damit keine Reihe eine Lücke hat. Schriften aus dem Theme mit Fallbacks. */
.foev-vb{
	--vbg:#228541;--vbink:#141413;--vbmut:#74756f;--vbsoft:#e3ece2;--vbpaper:#f1efe9;
	--vbf-head:"Roboto Slab",Georgia,serif;
	--vbf-body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
	display:grid;gap:clamp(18px,2.4vw,32px);grid-template-columns:repeat(5,1fr);
	font-family:var(--vbf-body)
}
.foev-vb[data-cols="1"]{grid-template-columns:1fr}
.foev-vb[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.foev-vb[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.foev-vb[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.foev-vb[data-cols="5"]{grid-template-columns:repeat(5,1fr)}

.foev-vb__item{text-align:left}
.foev-vb__photo{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--vbpaper)}
.foev-vb__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;
	filter:grayscale(1);transition:filter .5s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.foev-vb__item:hover .foev-vb__photo img{filter:none;transform:scale(1.04)}
.foev-vb__ph{display:grid;place-items:center;width:100%;height:100%;
	font:700 2rem/1 var(--vbf-head);color:var(--vbg);background:var(--vbsoft)}
.foev-vb__name{margin:16px 0 0;font:700 1.1rem/1.25 var(--vbf-head);color:var(--vbink)}
.foev-vb__role{margin:2px 0 0;font-size:.92rem;color:var(--vbmut)}

/* Hervorgehobenes erstes Mitglied (z. B. Vorsitzende/r) */
.foev-vb__item--lead .foev-vb__photo::after{content:"";position:absolute;inset:0;border-radius:inherit;
	box-shadow:inset 0 0 0 3px var(--vbg);pointer-events:none}
.foev-vb__item--lead .foev-vb__role{color:var(--vbg);font-weight:500}

.foev-vb-empty{color:var(--vbmut,#74756f);font-style:italic}

/* Reflow: bei weniger Platz sauber umbrechen, ohne Einzel-Lücken */
@media (max-width:1080px){
	.foev-vb[data-cols="4"]{grid-template-columns:repeat(2,1fr)}
	.foev-vb[data-cols="5"]{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
	.foev-vb[data-cols="2"],
	.foev-vb[data-cols="3"],
	.foev-vb[data-cols="4"],
	.foev-vb[data-cols="5"]{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
	.foev-vb__photo img{transition:filter .3s ease}
	.foev-vb__item:hover .foev-vb__photo img{transform:none}
}