/**
 * HMF Team — Version 2.6
 *
 * Animations-Modifier (per JS-Klasse vom Plugin gesetzt):
 *   .hmf-anim-fade      — Karten faden beim Scrollen ein (benötigt JS)
 *   .hmf-anim-zoom      — Foto zoomt bei Mouseover
 *   .hmf-anim-kenburns  — Foto zoomt dauerhaft langsam (Ken-Burns)
 *   .hmf-anim-stagger   — Textzeilen gestaffelt eingeblendet
 *
 * Timings per Inline-CSS-Variablen aus Einstellungen:
 *   --hmf-fade-ms   Fade-Dauer
 *   --hmf-hover-ms  Hover-Dauer (Zoom)
 *
 * prefers-reduced-motion wird am Ende der Datei respektiert.
 */

.hmf-team-archive {
	--hmf-navy-900: #0a1447;
	--hmf-navy-800: #0d1f5e;
	--hmf-navy-600: #1e3a8a;
	--hmf-navy-500: #3a4b8c;
	--hmf-text:        #1f2937;
	--hmf-divider:  #e5e7eb;
	--hmf-focus:    #f59e0b;

	/* Fallbacks, falls Inline-CSS nicht geladen wird */
	--hmf-fade-ms: 650ms;
	--hmf-hover-ms: 800ms;
}

/* Theme-Font erzwingen */
.hmf-team-archive,
.hmf-team-archive * {
	font-family: inherit !important;
}

.hmf-team-archive {
	color: var(--hmf-text);
	line-height: 1.6;
	background: transparent;
}

.hmf-team-archive--has-bg {
	padding: 2.5rem 2rem;
	border-radius: 20px;
	margin: 1.5rem 0;
}

.hmf-team-archive a:focus-visible {
	outline: 3px solid var(--hmf-focus);
	outline-offset: 4px;
	border-radius: 4px;
}

/* =====================================================
   Liste
   ===================================================== */
.hmf-team-archive .hmf-team-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hmf-team-archive .hmf-team-card {
	list-style: none;
	margin: 0;
	padding: 2.5rem 0;
	border-top: 1px solid var(--hmf-divider);
}

.hmf-team-archive .hmf-team-card:first-child {
	border-top: none;
	padding-top: 0.5rem;
}

.hmf-team-archive .hmf-team-card:last-child {
	padding-bottom: 0.5rem;
}

.hmf-team-archive--has-bg .hmf-team-card {
	border-top-color: rgba(0, 0, 0, 0.08);
}

/* =====================================================
   Card-Layout — alternierend links/rechts
   ===================================================== */
.hmf-team-archive .hmf-team-card article {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	grid-template-areas: "image body";
	gap: 2.5rem;
	align-items: start;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.hmf-team-archive .hmf-team-card:nth-child(even) article {
	grid-template-columns: 1fr minmax(220px, 300px);
	grid-template-areas: "body image";
}

.hmf-team-archive .hmf-team-card-image {
	grid-area: image;
	overflow: hidden;
	background: #e5e7eb;
	border-radius: 16px;
	aspect-ratio: 3 / 4;
	margin: 0;
}

.hmf-team-archive .hmf-team-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.hmf-team-archive .hmf-team-card-body {
	grid-area: body;
	padding: 0.5rem 0;
	background: transparent;
	min-width: 0;
}

/* =====================================================
   Typografie in der Karte
   ===================================================== */
.hmf-team-archive .hmf-team-card-name {
	margin: 0;
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	line-height: 1.2;
	color: var(--hmf-navy-800);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.hmf-team-archive .hmf-team-card-name .hmf-akad-titel {
	display: inline;
	font-weight: 700;
	font-size: 1em;
	color: var(--hmf-navy-800);
	margin: 0;
}

.hmf-team-archive .hmf-team-card-role {
	margin: 2px 0 1.25rem;
	font-size: 1rem;
	color: var(--hmf-navy-500);
	font-weight: 600;
	line-height: 1.4;
}

.hmf-team-archive .hmf-team-card-meta {
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
	color: var(--hmf-text);
	line-height: 1.6;
}

.hmf-team-archive .hmf-team-card-meta strong {
	color: var(--hmf-navy-800);
	font-weight: 600;
	margin-right: 2px;
}

.hmf-team-archive .hmf-team-card-content {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	color: var(--hmf-text);
	line-height: 1.75;
	max-width: none;
}

.hmf-team-archive .hmf-team-card-content > * {
	color: var(--hmf-text);
}

.hmf-team-archive .hmf-team-card-content > * + * {
	margin-top: 1rem;
}

.hmf-team-archive .hmf-team-card-content p {
	color: var(--hmf-text);
	margin: 0;
}

.hmf-team-archive .hmf-team-card-content p + p {
	margin-top: 1rem;
}

.hmf-team-archive .hmf-team-card-content a {
	color: var(--hmf-navy-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hmf-team-archive .hmf-team-card-content a:hover {
	color: var(--hmf-navy-800);
}

.hmf-team-archive .hmf-team-card-content strong {
	color: var(--hmf-navy-800);
	font-weight: 600;
}

/* =====================================================
   Animation: Hover-Zoom
   ===================================================== */
.hmf-team-archive.hmf-anim-zoom .hmf-team-card-image img {
	transition: transform var(--hmf-hover-ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.hmf-team-archive.hmf-anim-zoom .hmf-team-card-image:hover img,
.hmf-team-archive.hmf-anim-zoom .hmf-team-card-image:focus-within img {
	transform: scale(1.05);
}

/* =====================================================
   Animation: Ken-Burns (langsames Dauer-Zoom im Ruhezustand)
   ===================================================== */
.hmf-team-archive.hmf-anim-kenburns .hmf-team-card-image img {
	animation: hmf-kenburns 20s ease-in-out infinite alternate;
	transform-origin: center center;
}

@keyframes hmf-kenburns {
	0%   { transform: scale(1.00) translate(0, 0); }
	100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* Ken-Burns deaktivieren, wenn gleichzeitig Zoom aktiv UND gehovert wird */
.hmf-team-archive.hmf-anim-kenburns.hmf-anim-zoom .hmf-team-card-image:hover img,
.hmf-team-archive.hmf-anim-kenburns.hmf-anim-zoom .hmf-team-card-image:focus-within img {
	animation-play-state: paused;
	transform: scale(1.05);
	transition: transform var(--hmf-hover-ms) cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================
   Animation: Fade-in beim Scrollen
   ===================================================== */
.hmf-team-archive.hmf-anim-fade .hmf-team-card {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity   var(--hmf-fade-ms) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--hmf-fade-ms) cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.hmf-team-archive.hmf-anim-fade .hmf-team-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Gerade Karten kommen leicht versetzt von rechts, ungerade von links */
.hmf-team-archive.hmf-anim-fade .hmf-team-card:nth-child(even) {
	transform: translateY(24px) translateX(20px);
}

.hmf-team-archive.hmf-anim-fade .hmf-team-card:nth-child(odd) {
	transform: translateY(24px) translateX(-20px);
}

.hmf-team-archive.hmf-anim-fade .hmf-team-card.is-visible {
	transform: translateY(0) translateX(0);
}

/* =====================================================
   Animation: Textzeilen gestaffelt (innerhalb einer Karte)
   ===================================================== */
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-image,
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-name,
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-role,
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-meta,
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-content {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity   var(--hmf-fade-ms) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--hmf-fade-ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card.is-visible .hmf-team-card-image     { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card.is-visible .hmf-team-card-name      { transition-delay: 120ms; opacity: 1; transform: translateY(0); }
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card.is-visible .hmf-team-card-role      { transition-delay: 180ms; opacity: 1; transform: translateY(0); }
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card.is-visible .hmf-team-card-meta      { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card.is-visible .hmf-team-card-meta + .hmf-team-card-meta { transition-delay: 280ms; }
.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card.is-visible .hmf-team-card-content   { transition-delay: 340ms; opacity: 1; transform: translateY(0); }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 820px) {
	.hmf-team-archive .hmf-team-card article,
	.hmf-team-archive .hmf-team-card:nth-child(even) article {
		grid-template-columns: 1fr;
		grid-template-areas:
			"image"
			"body";
		gap: 1.25rem;
	}

	.hmf-team-archive .hmf-team-card-image {
		max-width: 100%;
		width: 100%;
		aspect-ratio: 3 / 4;
		border-radius: 12px;
	}

	.hmf-team-archive .hmf-team-card {
		padding: 2rem 0;
	}

	.hmf-team-archive--has-bg {
		padding: 1.5rem 1.25rem;
		border-radius: 14px;
	}

	/* Seitlichen Versatz auf Mobile reduzieren */
	.hmf-team-archive.hmf-anim-fade .hmf-team-card:nth-child(even),
	.hmf-team-archive.hmf-anim-fade .hmf-team-card:nth-child(odd) {
		transform: translateY(18px);
	}
}

/* =====================================================
   Barrierefreiheit: Bewegung reduzieren
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
	.hmf-team-archive.hmf-anim-zoom .hmf-team-card-image img,
	.hmf-team-archive.hmf-anim-kenburns .hmf-team-card-image img,
	.hmf-team-archive.hmf-anim-fade .hmf-team-card,
	.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-image,
	.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-name,
	.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-role,
	.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-meta,
	.hmf-team-archive.hmf-anim-stagger.hmf-anim-fade .hmf-team-card .hmf-team-card-content {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.hmf-team-archive.hmf-anim-zoom .hmf-team-card-image:hover img,
	.hmf-team-archive.hmf-anim-zoom .hmf-team-card-image:focus-within img,
	.hmf-team-archive.hmf-anim-kenburns.hmf-anim-zoom .hmf-team-card-image:hover img {
		transform: none !important;
	}
}