/* Funkeln Influencer Roster */

.fnk-roster {
	--fnkr-card-bg: #1a1a1a;
	--fnkr-name: #ffffff;
	--fnkr-meta: rgba(255, 255, 255, 0.62);
	--fnkr-accent: #f05a22;
	--fnkr-accent-text: #ffffff;
	--fnkr-chip-border: rgba(255, 255, 255, 0.25);
	--fnkr-chip-color: rgba(255, 255, 255, 0.8);
	--fnkr-sheet-bg: #141414;
	--fnkr-radius: 14px;
	--fnkr-overlap: 40%;
	--fnkr-cols: 4;
	max-width: 100%;
	--fnkr-blur: 20px;
	--fnkr-focus: center 18%;

	position: relative;
}

/* ---------------------------------------------------------------- Filter */
.fnk-roster__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-bottom: 28px;
}

.fnk-roster__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fnk-roster button.fnk-roster__chip {
	-webkit-appearance: none;
	appearance: none;
	padding: 8px 16px !important;
	margin: 0 !important;
	border: 1px solid var(--fnkr-chip-border) !important;
	border-radius: 40px !important;
	background: transparent !important;
	color: var(--fnkr-chip-color) !important;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fnk-roster button.fnk-roster__chip:hover {
	border-color: var(--fnkr-accent) !important;
}

.fnk-roster button.fnk-roster__chip.is-active {
	background: var(--fnkr-accent) !important;
	border-color: var(--fnkr-accent) !important;
	color: var(--fnkr-accent-text) !important;
}

/* ---------------------------------------------------------------- Raster */
.fnk-roster__list {
	display: grid;
	grid-template-columns: repeat(var(--fnkr-cols), minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fnk-roster__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.fnk-roster__item[hidden] {
	display: none;
}

.fnk-roster button.fnk-roster__card {
	-webkit-appearance: none;
	appearance: none;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--fnkr-radius) !important;
	overflow: hidden;
	background: var(--fnkr-card-bg) !important;
	color: inherit !important;
	text-align: left !important;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	box-shadow: none !important;
	transition: transform 0.2s ease;
}

.fnk-roster button.fnk-roster__card:focus-visible {
	outline: 2px solid var(--fnkr-accent);
	outline-offset: 3px;
}

.fnk-roster__photo {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: #0f0f0f;
	overflow: hidden;
}

.fnk-roster__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fnkr-focus);
	display: block;
	transition: transform 0.35s ease, filter 0.35s ease;
}

.fnk-roster__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	border-radius: 40px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.fnk-roster__hint {
	display: none;
}

/* Text unter dem Foto: das Gesicht bleibt frei */
.fnk-roster__body {
	display: block;
	padding: 14px 14px 16px;
}

.fnk-roster__name {
	display: block;
	color: var(--fnkr-name);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.fnk-roster__branche,
.fnk-roster__reach {
	display: block;
	color: var(--fnkr-meta);
	font-size: 13px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.fnk-roster__branche {
	margin-top: 3px;
}

.fnk-roster__reach {
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}

.fnk-roster__none {
	margin: 28px 0 0;
	color: var(--fnkr-meta);
	text-align: center;
	font-size: 14px;
}

.fnk-roster__empty {
	padding: 20px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	text-align: center;
	font-size: 13px;
	opacity: 0.7;
}

/* --------------------------------------------------- Kartendeck (Desktop) */
@media (min-width: 1025px) {

	.fnk-roster[data-layout="deck"] .fnk-roster__stage {
		perspective: 1400px;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__list {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 0;
		padding: 40px 0 20px;
		max-width: 100%;
	}

	/* Bei sehr schmalen Karten wird der Text unlesbar — dann nur Name */
	.fnk-roster[data-layout="deck"] .fnk-roster__branche {
		display: none;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__item {
		flex: 0 0 clamp(130px, 16vw, 260px);
		margin-left: calc(-1 * var(--fnkr-overlap));
		transform: rotate(var(--rot)) translateY(var(--lift));
		transform-origin: bottom center;
		transition: transform 0.3s ease, z-index 0s;
		z-index: 1;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__item:first-child {
		margin-left: 0;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__item:hover,
	.fnk-roster[data-layout="deck"] .fnk-roster__item:focus-within {
		transform: rotate(0deg) translateY(calc(var(--lift) - 26px)) scale(1.04);
		z-index: 10;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__card {
		box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55) !important;
	}

	/* Im Deck steht der Text im Bild — darum Verlauf und untere Ausrichtung */
	.fnk-roster[data-layout="deck"] .fnk-roster__photo {
		aspect-ratio: 3 / 4.4;
	}

	.fnk-roster[data-layout="deck"][data-grayscale="1"] .fnk-roster__photo img {
		filter: grayscale(1);
	}

	.fnk-roster[data-layout="deck"][data-grayscale="1"] .fnk-roster__item:hover .fnk-roster__photo img,
	.fnk-roster[data-layout="deck"][data-grayscale="1"] .fnk-roster__item:focus-within .fnk-roster__photo img {
		filter: grayscale(0);
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__hint {
		position: absolute;
		right: 12px;
		bottom: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 62px;
		height: 62px;
		border-radius: 50%;
		background: #fff;
		color: #111;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		opacity: 0;
		transform: scale(0.85);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__item:hover .fnk-roster__hint,
	.fnk-roster[data-layout="deck"] .fnk-roster__item:focus-within .fnk-roster__hint {
		opacity: 1;
		transform: scale(1);
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__body {
		padding: 12px 12px 14px;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__reach {
		display: none;
	}
}

/* ------------------------------------------------------------ Detailfenster */
.fnk-roster__sheet[hidden] {
	display: none;
}

.fnk-roster__sheet {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.fnk-roster__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(var(--fnkr-blur));
	backdrop-filter: blur(var(--fnkr-blur));
}

.fnk-roster__panel {
	position: relative;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--fnkr-sheet-bg);
	border-radius: 20px 20px 0 0;

	/* Kein Keyframe: der wuerde beim Entfernen von .is-morphing erneut
	   starten und das Panel am Ende der Bewegung springen lassen. */
	opacity: 0;
	transform: translateY(22px);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.fnk-roster__sheet.is-open .fnk-roster__panel {
	opacity: 1;
	transform: translateY(0);
}

.fnk-roster button.fnk-roster__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.fnk-roster__panel-inner {
	display: block;
}

.fnk-roster__detail-photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 52vh;
	object-fit: cover;
	object-position: var(--fnkr-focus);
	display: block;
}

.fnk-roster__detail-body {
	padding: 20px 20px 28px;
}

.fnk-roster__detail-name {
	margin: 0;
	color: var(--fnkr-name);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.fnk-roster__detail-branche {
	margin: 6px 0 0;
	color: var(--fnkr-meta);
	font-size: 14px;
}

.fnk-roster__detail-bio {
	margin: 14px 0 0;
	color: var(--fnkr-meta);
	font-size: 14px;
	line-height: 1.6;
}

.fnk-roster__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.fnk-roster__stats li {
	position: relative;
	margin: 0;
	padding: 11px 15px;
	border: 1px solid var(--fnkr-chip-border);
	border-radius: 12px;
	color: var(--fnkr-name);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease;
}

.fnk-roster__stat-label {
	display: block;
	color: var(--fnkr-meta);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.4;
}

.fnk-roster__stat-handle {
	display: block;
	color: var(--fnkr-name);
	font-size: 14px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.fnk-roster__stat-value {
	display: block;
	margin-top: 2px;
	color: var(--fnkr-meta);
	font-size: 13px;
	line-height: 1.3;
}

.fnk-roster__stat-arrow {
	position: absolute;
	top: 10px;
	right: 10px;
	opacity: 0.45;
}

.fnk-roster a.fnk-roster__kit {
	display: inline-block;
	margin-top: 20px;
	padding: 13px 26px;
	border-radius: 40px;
	background: var(--fnkr-accent) !important;
	color: var(--fnkr-accent-text) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	border: 0 !important;
}

@media (min-width: 768px) {
	.fnk-roster__sheet {
		align-items: center;
		padding: 24px;
	}

	.fnk-roster__panel {
		max-width: 720px;
		border-radius: var(--fnkr-radius);
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.fnk-roster__panel-inner {
		display: contents;
	}

	.fnk-roster__detail-photo {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 20px 0 0 20px;
	}

	.fnk-roster__detail-body {
		padding: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fnk-roster__panel {
		animation: none;
		transition: none;
		transform: none;
		opacity: 1;
	}
	.fnk-roster__item,
	.fnk-roster__photo img,
	.fnk-roster__hint {
		transition: none !important;
	}
}


/* ------------------------------------------------- Label am Mauszeiger */
.fnk-roster__cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.fnk-roster__cursor span {
	max-width: 64px;
}

.fnk-roster__cursor.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Beim Hover verlieren die anderen Karten die Farbe */
@media (min-width: 1025px) and (hover: hover) {
	.fnk-roster__item .fnk-roster__photo img {
		transition: filter 0.3s ease, transform 0.35s ease;
	}

	.fnk-roster.is-hovering .fnk-roster__item.is-dimmed .fnk-roster__photo img {
		filter: grayscale(1) brightness(0.75);
	}

	.fnk-roster.is-hovering .fnk-roster__item.is-dimmed .fnk-roster__body {
		opacity: 0.55;
		transition: opacity 0.3s ease;
	}

	.fnk-roster[data-layout="deck"] .fnk-roster__hint {
		display: none;
	}
}

@media (pointer: coarse) {
	.fnk-roster__cursor {
		display: none;
	}
}

/* Profil-Links im Detailfenster */
.fnk-roster__stats li.has-link {
	padding: 0;
}

.fnk-roster__stats li.has-link a {
	display: block;
	padding: 11px 32px 11px 15px;
	color: var(--fnkr-name) !important;
	text-decoration: none !important;
	border-radius: 12px;
}

.fnk-roster__stats li.has-link:hover {
	border-color: var(--fnkr-accent);
}

.fnk-roster__stats li.has-link:hover .fnk-roster__stat-arrow {
	opacity: 1;
}

/* ------------------------------------------- Karte waechst zur Mitte */
.fnk-roster__panel {
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* Waehrend der Bewegung steuert ausschliesslich das Skript */
.fnk-roster__panel.is-morphing {
	animation: none !important;
	transition: none;
}

/* Waehrend des Messens ist alles im Layout, aber nichts zu sehen */
.fnk-roster__sheet.is-measuring {
	opacity: 0;
	pointer-events: none;
}

/* Abdunklung und Unschaerfe blenden in beide Richtungen weich */
.fnk-roster__backdrop {
	opacity: 0;
	transition: opacity 0.32s ease;
}

.fnk-roster__sheet.is-open .fnk-roster__backdrop {
	opacity: 1;
}

/* Text und Zahlen kommen hinter dem Foto hervor nach rechts */
.fnk-roster__detail-body {
	position: relative;
	z-index: 1;
}

.fnk-roster__detail-photo {
	position: relative;
	z-index: 2;
}

.fnk-roster__panel .fnk-roster__detail-body > * {
	opacity: 0;
	transform: translateX(-28px);
	transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.fnk-roster__panel.is-revealed .fnk-roster__detail-body > * {
	opacity: 1;
	transform: translateX(0);
}

/* Gestaffelt, damit es sich entfaltet statt zu springen */
.fnk-roster__panel.is-revealed .fnk-roster__detail-name       { transition-delay: 0.02s; }
.fnk-roster__panel.is-revealed .fnk-roster__detail-branche    { transition-delay: 0.07s; }
.fnk-roster__panel.is-revealed .fnk-roster__detail-bio        { transition-delay: 0.12s; }
.fnk-roster__panel.is-revealed .fnk-roster__stats             { transition-delay: 0.17s; }
.fnk-roster__panel.is-revealed .fnk-roster__kit               { transition-delay: 0.23s; }

.fnk-roster__close {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.fnk-roster__panel.is-revealed .fnk-roster__close {
	opacity: 1;
}


@media (max-width: 767px) {
	.fnk-roster__panel .fnk-roster__detail-body > * {
		transform: translateY(18px);
	}
	.fnk-roster__panel.is-revealed .fnk-roster__detail-body > * {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fnk-roster__panel .fnk-roster__detail-body > *,
	.fnk-roster__close {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* ------------------------------------------------------- Handy und Tablet */
@media (max-width: 767px) {
	/* Immer zwei Spalten, niemals breiter als der Bildschirm */
	.fnk-roster__list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
	}

	.fnk-roster__item {
		max-width: 100%;
	}

	.fnk-roster__card {
		width: 100% !important;
		max-width: 100% !important;
	}

	.fnk-roster__body {
		padding: 10px 10px 12px;
	}

	.fnk-roster__name {
		font-size: 15px;
		hyphens: auto;
	}

	.fnk-roster__branche,
	.fnk-roster__reach {
		font-size: 12px;
	}

	/* Der Faecher hinterlaesst keine Inline-Werte auf dem Handy */
	.fnk-roster[data-layout="deck"] .fnk-roster__item {
		transform: none !important;
		margin-left: 0 !important;
		flex-basis: auto !important;
	}

	.fnk-roster__filters {
		gap: 8px 12px;
		margin-bottom: 20px;
	}

	.fnk-roster button.fnk-roster__chip {
		padding: 7px 13px !important;
		font-size: 13px;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.fnk-roster__list {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}


/* --------------------------------------------- Einblendung des Decks */
@media (min-width: 1025px) {

	.fnk-roster[data-layout="deck"].is-intro-out .fnk-roster__item {
		transition:
			transform var(--fnkr-intro-ms, 1100ms) cubic-bezier(0.22, 1, 0.36, 1) var(--introDelay, 0ms),
			filter calc(var(--fnkr-intro-ms, 1100ms) * 0.8) ease var(--introDelay, 0ms),
			opacity calc(var(--fnkr-intro-ms, 1100ms) * 0.55) ease var(--introDelay, 0ms);
	}

	/* Startbild: alle Karten unscharf uebereinander in der Mitte */
	.fnk-roster[data-layout="deck"].is-intro .fnk-roster__item {
		transform: translateX(var(--introX, 0px)) rotate(0deg) translateY(0);
		filter: blur(18px) saturate(0%);
		opacity: 0;
		pointer-events: none;
	}

	.fnk-roster[data-layout="deck"].is-intro .fnk-roster__card {
		box-shadow: none !important;
	}

	.fnk-roster[data-layout="deck"].is-intro .fnk-roster__cursor,
	.fnk-roster[data-layout="deck"].is-intro-out .fnk-roster__cursor {
		opacity: 0 !important;
	}
}

/* Im Editor darf nichts unsichtbar bleiben */
body.elementor-editor-active .fnk-roster__item,
body.elementor-editor-preview .fnk-roster__item {
	opacity: 1 !important;
	filter: none !important;
}