/* Teamseite: Filter, farbige Platzhalter und Mitmachen-Karte (inc/team-extras.php). */

.pteam {
	--ks-spirale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 891 667'%3E%3Cpath d='M494.4,666.8 L419.4,666.2 L330.4,658.1 L220.4,641.1 L161.4,629.1 L136.4,622.2 L113.4,612.4 L93.4,601.3 L76.7,589.8 L57.7,573.8 L40.4,555.6 L26.2,536.8 L16.0,518.8 L8.2,498.8 L2.2,470.8 L0.0,443.8 L1.1,405.8 L6.2,362.8 L12.3,329.8 L20.4,302.8 L31.2,276.8 L46.4,248.8 L69.3,213.8 L103.2,168.8 L147.1,117.8 L172.4,92.5 L205.5,64.8 L241.4,40.6 L271.4,25.4 L300.4,14.7 L344.4,4.5 L380.4,0.6 L417.4,0.0 L448.4,3.2 L476.4,10.6 L509.4,25.7 L542.0,46.8 L555.4,60.3 L570.7,84.8 L585.8,118.8 L602.8,170.8 L615.7,224.8 L623.7,279.8 L627.7,330.8 L628.4,387.8 L626.7,405.8 L622.8,421.8 L615.1,437.8 L602.4,453.6 L576.4,476.4 L548.4,495.9 L524.4,505.9 L494.4,513.8 L456.4,520.0 L426.4,523.1 L376.4,525.5 L321.4,525.4 L278.4,523.2 L258.4,520.1 L230.4,511.0 L204.6,497.8 L177.4,478.1 L158.7,459.8 L148.0,443.8 L139.3,422.8 L134.3,399.8 L132.4,370.8 L134.2,341.8 L138.2,319.8 L147.0,293.8 L159.1,268.8 L173.4,245.5 L196.2,215.8 L222.6,187.8 L248.5,164.8 L273.7,146.8 L296.4,134.5 L316.4,126.6 L341.4,120.6 L360.4,118.5 L377.4,118.7 L395.4,121.6 L411.9,126.8 L429.4,135.5 L448.4,148.8 L463.4,163.1 L476.4,178.6 L488.8,197.8 L495.5,211.8 L501.4,229.3 L504.5,244.8 L506.2,265.8 L505.7,290.8 L503.8,309.8 L498.5,326.8 L491.5,339.8 L483.4,350.7 L462.4,370.3 L434.4,387.0 L404.4,398.1 L387.4,402.1 L361.4,405.9 L317.4,409.0 L301.4,407.0 L292.4,404.1 L284.0,399.8 L274.4,392.2 L260.1,374.8 L255.9,365.8 L252.4,352.8 L251.0,325.8 L255.1,297.8 L264.4,267.9 L275.4,247.8 L291.4,230.8 L313.4,215.4 L331.5,206.8 L348.4,201.4 L358.4,200.5 L368.4,202.8 L381.4,210.3 L393.4,222.3 L403.4,237.1 L409.7,252.8 L410.7,265.8 L407.4,279.5 L392.4,304.8 L389.4,307.7 L385.4,309.0 L357.4,309.7 L347.4,308.4 L343.5,305.8 L342.6,299.8 L350.6,277.8 L352.3,267.8 L350.7,256.8 L346.4,250.8 L340.4,249.6 L333.4,252.6 L323.9,260.8 L316.5,270.8 L310.2,284.8 L307.3,297.8 L306.6,311.8 L308.2,323.8 L313.0,334.8 L319.4,342.8 L328.4,350.1 L340.4,357.0 L347.4,359.9 L354.4,360.7 L373.4,359.1 L398.4,352.1 L426.4,340.0 L442.4,330.0 L449.4,322.8 L458.8,306.8 L462.8,292.8 L464.6,276.8 L464.6,255.8 L462.8,237.8 L459.7,225.8 L454.5,214.8 L448.4,206.0 L423.4,179.1 L411.4,169.6 L397.4,161.5 L371.4,152.5 L343.4,149.7 L331.4,151.6 L315.6,156.8 L298.4,165.5 L283.4,175.6 L226.4,228.0 L212.1,243.8 L199.2,260.8 L187.9,279.8 L181.1,294.8 L174.1,315.8 L168.4,341.8 L166.6,361.8 L167.2,379.8 L171.4,400.8 L178.2,418.8 L187.9,435.8 L200.4,452.3 L216.4,468.2 L230.4,477.9 L243.4,484.1 L264.4,489.9 L311.4,496.1 L348.4,497.9 L388.4,496.1 L419.4,492.1 L442.4,487.1 L468.4,478.0 L492.4,466.3 L515.4,452.2 L533.4,438.5 L545.4,426.8 L563.4,402.9 L571.7,385.8 L577.7,361.8 L581.8,325.8 L582.5,289.8 L578.6,249.8 L570.7,213.8 L560.6,180.8 L547.5,154.8 L529.5,128.8 L509.4,105.9 L481.4,80.5 L458.4,65.7 L433.4,54.7 L405.4,47.5 L380.4,45.1 L344.4,46.7 L312.4,52.6 L279.4,64.4 L240.4,84.7 L208.4,108.8 L171.1,143.8 L137.0,181.8 L112.2,214.8 L82.9,262.8 L64.9,302.8 L56.0,332.8 L51.0,368.8 L52.2,399.8 L59.0,434.8 L70.0,466.8 L85.9,497.8 L104.2,522.8 L115.4,534.5 L128.9,545.8 L154.4,560.2 L216.4,582.1 L280.4,599.3 L337.4,610.1 L376.4,614.1 L476.4,617.1 L521.4,615.9 L556.4,612.0 L576.4,607.1 L624.4,590.1 L656.4,575.1 L686.4,556.1 L716.4,530.8 L747.9,496.8 L767.9,469.8 L797.4,422.8 L807.5,409.8 L817.4,403.5 L834.4,397.6 L841.4,397.9 L844.4,401.8 L842.6,413.8 L827.5,446.8 L813.5,473.8 L796.5,500.8 L776.9,526.8 L756.4,550.5 L732.4,573.9 L710.9,591.8 L686.4,609.3 L659.3,625.8 L635.3,637.8 L611.4,647.0 L587.4,654.1 L553.4,661.0 L494.4,666.8 Z M865.4,648.8 L851.4,649.0 L838.4,645.2 L830.0,638.8 L826.9,629.8 L829.0,615.8 L836.3,602.8 L844.4,596.4 L861.4,590.2 L874.4,592.8 L882.2,597.8 L888.4,606.8 L890.5,616.8 L889.4,628.8 L883.4,641.1 L877.4,645.9 L865.4,648.8 Z'/%3E%3C/svg%3E");
}

/* ---------- Filterleiste ---------- */
.tfilter {
	position: sticky;
	top: var(--tfilter-top, 0px);
	z-index: 5;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "zahlen suche" "chips chips" "treffer treffer";
	align-items: center;
	column-gap: 1.25rem;
	margin: -.5rem 0 1.6rem;
	padding: .9rem 0 1rem;
	background: var(--cream);
	box-shadow: 0 0 0 100vmax var(--cream);
	clip-path: inset(0 -100vmax);
	border-bottom: 1px solid var(--line);
}
.tfilter__zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.4rem;
	margin: 0;
	font: 700 var(--fs-meta)/1.2 var(--font-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.tfilter__zahlen b { margin-right: .2rem; font-size: 1.35em; letter-spacing: 0; color: var(--orange-dark); }
.tfilter > * { min-width: 0; }
.tfilter__leiste { display: contents; }
.tfilter__zahlen { grid-area: zahlen; }
.tfilter__suche { grid-area: suche; }
.tfilter__chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; margin-top: .8rem; }
.tfilter__treffer { grid-area: treffer; }
.tfilter__chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .6rem .95rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r-pill);
	background: var(--paper);
	color: var(--forest);
	font: 700 var(--fs-meta)/1 var(--font-mono);
	letter-spacing: .06em;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.tfilter__chip small {
	padding: .22rem .45rem;
	border-radius: var(--r-pill);
	background: var(--cream-2);
	color: var(--ink-2);
	font: inherit;
	font-size: .85em;
}
.tfilter__chip:hover { border-color: var(--orange); }
.tfilter__chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.tfilter__chip[aria-pressed="true"] small { background: var(--orange); color: var(--forest-deep); }
.tfilter__suche {
	display: flex;
	align-items: center;
	gap: .4rem;
	width: 12.5rem;
	max-width: 100%;
	padding: 0 .8rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r-pill);
	background: var(--paper);
	color: var(--ink-3);
}
.tfilter__suche:focus-within { border-color: var(--orange); }
.tfilter__suche svg { flex: none; width: 15px; height: 15px; }
.tfilter__feld {
	width: 100%;
	min-width: 0;
	padding: .42rem 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-small);
}
.tfilter__treffer {
	margin: .75rem 0 0;
	font: 700 var(--fs-meta)/1 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.tfilter__treffer[hidden], .tfilter__leer[hidden], .pteam .pcard[hidden], .pmit[hidden] { display: none; }
.tfilter__leer {
	margin: 0;
	padding: 2.5rem 1.5rem;
	text-align: center;
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r-md);
	color: var(--ink-2);
}

/* Gefiltert: alle passenden Karten in einem Raster, ohne Zwischenüberschriften. */
.pteam__liste.is-gefiltert {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.pteam__liste.is-gefiltert .pcards { display: contents; }
.pteam__liste.is-gefiltert .pgroup { display: none; }

/* Sprung zu einer Karte: unter Kopf und Filterleiste anhalten. */
.tfilter ~ .pteam__liste .pcard { scroll-margin-top: calc(var(--tfilter-top, 0px) + var(--tfilter-h, 0px) + 1rem); }

/* ---------- Farbige Platzhalter ohne Foto ---------- */
.pcard__initials.pcard__initials--farbig {
	overflow: hidden;
	background: var(--bfarbe);
	color: #fff;
}
.pcard__initials--farbig::before {
	content: "";
	position: absolute;
	right: -22%;
	bottom: -14%;
	width: 95%;
	aspect-ratio: 891 / 667;
	background: currentColor;
	opacity: .16;
	-webkit-mask: var(--ks-spirale) center / contain no-repeat;
	mask: var(--ks-spirale) center / contain no-repeat;
}
.pcard__initials--farbig.ist-hell { color: var(--forest-deep); }
.pcard__initials--farbig.ist-hell::before { opacity: .12; }
.pcard__initials--farbig b { position: relative; font-weight: 800; letter-spacing: .02em; }
.pcard__initials--farbig small {
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .8rem;
	font: 700 .68rem/1.2 var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
}

/* ---------- Mitmachen-Karte ---------- */
.pmit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	min-height: 20rem;
	padding: 2rem 1.5rem;
	border: 2.5px dashed var(--orange);
	border-radius: var(--r-lg, 22px);
	background: #FDEEE1;
	text-align: center;
}
.pmit__spirale {
	width: 4.6rem;
	aspect-ratio: 891 / 667;
	background: var(--orange);
	-webkit-mask: var(--ks-spirale) center / contain no-repeat;
	mask: var(--ks-spirale) center / contain no-repeat;
}
.pmit__titel { margin: 0; font-size: 1.35rem; line-height: 1.2; color: var(--forest); text-wrap: balance; }
.pmit__text { margin: 0; max-width: 24ch; font-size: var(--fs-small); color: var(--ink-2); }
.pmit__knopf { max-width: 100%; margin-top: .4rem; padding-inline: 1.2rem; white-space: normal; text-align: center; }
.pcards--mit { margin-top: 2.6rem; }

@media (max-width: 700px) {
	.tfilter { grid-template-columns: minmax(0, 1fr); grid-template-areas: "zahlen" "suche" "chips" "treffer"; padding: .7rem 0 .8rem; }
	.tfilter__suche { width: auto; margin-top: .6rem; }
	.tfilter__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: .6rem -1rem 0; padding-inline: 1rem; }
	.tfilter__chips::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tfilter__chip { transition: none; }
}

/* ---------- Band „Vorstand & Leitung“ ---------- */
.tband {
	position: relative;
	overflow: hidden;
	margin-bottom: .5rem;
	padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
	border-radius: var(--r-lg, 24px);
	background: var(--forest);
	color: var(--cream);
}
.tband::before {
	content: "";
	position: absolute;
	right: -4rem;
	top: -2.5rem;
	width: 20rem;
	aspect-ratio: 891 / 667;
	background: var(--cream);
	opacity: .06;
	-webkit-mask: var(--ks-spirale) center / contain no-repeat;
	mask: var(--ks-spirale) center / contain no-repeat;
	pointer-events: none;
}
.tband__kopf { position: relative; margin-bottom: 1.4rem; }
.tband__kicker {
	margin: 0;
	font: 700 var(--fs-meta)/1 var(--font-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--olive, #F07AA1);
}
.tband__titel { margin: .45rem 0 .3rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.1; color: var(--cream); }
.tband__text { margin: 0; max-width: 60ch; color: rgba(255, 255, 255, .78); }
.tband__liste {
	position: relative;
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.tbk {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--r-md, 14px);
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .6);
}
.tbk:target { outline: 3px solid var(--orange); outline-offset: 3px; }
.tfilter ~ .tband .tbk { scroll-margin-top: calc(var(--tfilter-top, 0px) + var(--tfilter-h, 0px) + 1rem); }
.tbk__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.tbk__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbk__body { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: 1.1rem 1.25rem 1.3rem; }
.tbk__rolle {
	font: 700 .7rem/1.35 var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--himbeer, #D6336C);
}
.tbk__name { margin: 0; font-size: 1.35rem; line-height: 1.15; color: var(--forest); }
.tbk__zitat {
	margin: .4rem 0 0;
	padding-left: .85rem;
	border-left: 3px solid var(--orange);
	font-size: var(--fs-small);
	font-style: italic;
	line-height: 1.5;
	color: var(--ink-2);
}
.tbk__kontakt { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: auto; padding-top: 1rem; }
/* Kontakt im Band: Textlink statt Knopf, etwas kraeftiger als die Telefonzeile. */
.tbk__zeile.tbk__mail {
	max-width: 100%;
	color: var(--forest);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 2px;
	text-underline-offset: .28em;
}
.tbk__zeile.tbk__mail:hover { color: var(--orange-dark); }
.tbk__zeile { font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.tbk__zeile:hover { color: var(--orange-dark); text-decoration: underline; }

/* Ohne Filter steht die Person im Band, ihre normale Karte ist ausgeblendet. */
.pteam:not(.ist-gefiltert) [data-imband] { display: none; }
.pteam.ist-gefiltert .tband { display: none; }