/* SLSBSDD Info Desk – Frontend. Farben über CSS-Variablen im Theme überschreibbar. */
.vd {
	--vd-accent: #1f2a4d;              /* Vereinsblau */
	--vd-gold: #d4a53c;                /* Vereinsgold */
	--vd-surface: #ffffff;             /* Kartenhintergrund (auch Spalt zwischen Ring und Foto) */
	--vd-muted: color-mix(in srgb, currentColor 60%, transparent);
	--vd-border: color-mix(in srgb, currentColor 10%, transparent);
	--vd-soft: color-mix(in srgb, var(--vd-accent) 7%, var(--vd-surface));
	--vd-radius: 20px;
	--vd-line: 5px;                    /* Höhe der Flaggenlinie oben an der Karte */

	/* Intersex-inklusive Progress-Pride-Flagge (Valentino Vecchietti, 2021) – weich ineinander verlaufend */
	--vd-flag: linear-gradient(
		90deg,
		#e40303, #ff8c00, #ffed00, #008026, #24408e, #732982,
		#000000, #784f17, #5bcefa, #f5a9b8, #ffffff, #ffd800, #7902aa
	);
	margin: 1.5em 0;
}

.vd-group-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3em 1em;
	margin: 1.8em 0 .9em;
	padding-bottom: .4em;
	border-bottom: 1px solid var(--vd-border);
}
.vd-group-title:first-child { margin-top: 0; }
.vd-group-link { font-size: .6em; font-weight: 600; text-decoration: none; color: var(--vd-accent); }
.vd-group-link:hover, .vd-group-link:focus { text-decoration: underline; }
.vd-impressum { margin: 0; }

.vd-list { list-style: none; margin: 0; padding: 0; }
.vd-person p { margin: 0; }
.vd-icon { flex: none; width: 1em; height: 1em; }

/* ---------- Foto ---------- */
.vd-photo { position: relative; aspect-ratio: 1; border-radius: 50%; }
.vd-photo img,
.vd-initials {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	box-sizing: border-box;
	margin: 0;
	box-shadow: 0 0 0 4px var(--vd-surface), 0 0 0 5px var(--vd-border), 0 10px 24px -12px rgba(31, 42, 77, .5);
}
.vd-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vd-accent);
	color: #fff;
	font-weight: 700;
	letter-spacing: .03em;
}
.is-vacant .vd-initials {
	background: var(--vd-soft);
	color: var(--vd-muted);
	box-shadow: none;
	border: 2px dashed var(--vd-border);
}

/* ---------- Kopf ---------- */
.vd-head { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.vd-function {
	display: inline-block;
	padding: .3em .85em;
	border-radius: 999px;
	background: var(--vd-soft);
	color: var(--vd-accent);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.3;
}
.vd-name { font-size: 1.3em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.vd-name--vacant { font-weight: 600; font-style: italic; color: var(--vd-muted); }
.vd-pronouns { font-size: .82em; color: var(--vd-muted); }
.vd-vacant-note { margin-top: .8rem !important; font-size: .92em; color: var(--vd-muted); }

/* ---------- Details ---------- */
.vd-meta {
	display: grid;
	gap: .9rem;
	margin: 1.2rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--vd-border);
	text-align: left;
}
.vd-meta-row { display: grid; gap: .4rem; }
.vd-meta dt {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 0;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vd-muted);
}
.vd-meta dt .vd-icon { color: var(--vd-gold); width: 1.25em; height: 1.25em; }
.vd-meta dd { margin: 0; font-size: .93em; line-height: 1.45; }
.vd-meta dd strong { font-weight: 600; }
.vd-sep { color: var(--vd-muted); }

.vd-tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.vd-tags li {
	margin: 0;
	padding: .25em .7em;
	border: 1px solid var(--vd-border);
	border-radius: 8px;
	background: var(--vd-surface);
	font-size: .88em;
	line-height: 1.35;
}

.vd-bio { margin-top: 1rem; font-size: .93em; line-height: 1.55; text-align: left; }
.vd-bio p + p { margin-top: .6em; }

/* ---------- Kontakt ---------- */
.vd-contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.vd-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	max-width: 100%;
	padding: .6em 1em;
	border-radius: 12px;
	background: var(--vd-accent);
	color: #fff !important;
	font-size: .88em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.vd-btn span { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.vd-mail { font-size: .84em; }
.vd-btn:hover, .vd-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -6px rgba(31, 42, 77, .6);
	background: color-mix(in srgb, var(--vd-accent) 88%, #fff);
}
.vd-btn:focus-visible { outline: 2px solid var(--vd-gold); outline-offset: 2px; }
.vd-phone { background: var(--vd-soft); color: var(--vd-accent) !important; }
.vd-phone:hover, .vd-phone:focus-visible { background: color-mix(in srgb, var(--vd-accent) 14%, var(--vd-surface)); }

/* ---------- Layout: Karten ---------- */
.vd--karten .vd-list {
	display: grid;
	grid-template-columns: repeat(var(--vd-cols, 3), minmax(0, 1fr));
	gap: 1.5rem;
}
.vd--karten .vd-person {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 2rem 1.5rem 1.5rem;
	text-align: center;
	background: var(--vd-surface);
	border: 1px solid var(--vd-border);
	border-radius: var(--vd-radius);
	box-shadow: 0 1px 2px rgba(31, 42, 77, .04), 0 12px 32px -18px rgba(31, 42, 77, .28);
	transition: transform .2s ease, box-shadow .2s ease;
}
.vd--karten .vd-person::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--vd-line);
	background: var(--vd-flag);
}
/* weicher Schimmer unter der Linie */
.vd--karten .vd-person::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--vd-line) * 2.4);
	background: var(--vd-flag);
	filter: blur(8px);
	opacity: .4;
	pointer-events: none;
}
.vd--karten .is-vacant::before, .vd--karten .is-vacant::after { opacity: .25; }
.vd--karten .vd-person:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(31, 42, 77, .05), 0 20px 40px -20px rgba(31, 42, 77, .38);
}
.vd--karten .vd-photo { width: 132px; margin: 0 auto 1.2rem; }
.vd--karten .vd-initials { font-size: 2.2rem; }
.vd--karten .vd-body { display: flex; flex-direction: column; flex: 1; }
.vd--karten .vd-contact { margin-top: auto; padding-top: 1.2rem; justify-content: center; }

/* ---------- Layout: Liste ---------- */
.vd--liste .vd-person {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--vd-border);
}
.vd--liste .vd-person:last-child { border-bottom: 0; }
.vd--liste .vd-photo { flex: 0 0 76px; width: 76px; }
.vd--liste .vd-initials { font-size: 1.3rem; }
.vd--liste .vd-body { flex: 1; min-width: 0; }
.vd--liste .vd-head { align-items: flex-start; }
.vd--liste .vd-meta { border-top: 0; padding-top: 0; margin-top: .8rem; }

@media (prefers-reduced-motion: reduce) {
	.vd-person, .vd-btn { transition: none; }
	.vd--karten .vd-person:hover, .vd-btn:hover { transform: none; }
}
@media (max-width: 900px) {
	.vd--karten .vd-list { grid-template-columns: repeat(min(var(--vd-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.vd--karten .vd-list { grid-template-columns: 1fr; }
}