/* =========================================================================
   Faustmann Möbelmanufaktur — Manufaktur Process
   Premium 3×2 Video-Card Grid
   ------------------------------------------------------------------------
   Struktur:
     1. Design Tokens
     2. Reset / Defensive Wrapper
     3. Grid
     4. Card (Idle)
     5. Card (Hover / Focus)
     6. Card (Touch / Mobile)
     7. Lightbox
     8. Responsive
     9. Reduced Motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------------- */
.fmp {
	/* Farben */
	--fmp-accent: #e3010f;
	--fmp-ink: #5b6e74;
	--fmp-ink-strong: #44555b;
	--fmp-ink-soft: rgba(68, 85, 91, 0.92);
	--fmp-title-idle: #5b6e74;
	--fmp-title-hover: #e3010f;

	/* Flächen */
	--fmp-card-bg: transparent;

	/* Schatten */
	--fmp-shadow-card: 0 14px 38px rgba(20, 32, 37, 0.055), 0 2px 8px rgba(20, 32, 37, 0.035);
	--fmp-shadow-card-hover: 0 28px 68px rgba(20, 32, 37, 0.11), 0 4px 14px rgba(20, 32, 37, 0.05);
	--fmp-shadow-play: 0 16px 32px rgba(227, 1, 15, 0.28), 0 4px 10px rgba(0, 0, 0, 0.12);
	--fmp-shadow-modal: 0 40px 100px rgba(6, 10, 12, 0.48), 0 12px 32px rgba(6, 10, 12, 0.32);

	/* Radii */
	--fmp-radius: 20px;
	--fmp-radius-lg: 24px;

	/* Motion */
	--fmp-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--fmp-dur: 1.1s;

	/* Motion – Hover Desktop
	   in:  reagiert spürbar, landet weich
	   out: löst sich sanft (kein abruptes Zurückspringen), landet weich */
	--fmp-ease-hover-in: cubic-bezier(0.25, 0.6, 0.3, 1);
	--fmp-ease-hover-out: cubic-bezier(0.45, 0.05, 0.25, 1);
	--fmp-hover-in: 0.9s;
	--fmp-hover-out: 0.8s;
	--fmp-hover-delay: 70ms;
	--fmp-lift: -4px;

	color: var(--fmp-ink);
	font-family: inherit;
}

.fmp *,
.fmp *::before,
.fmp *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   2. Reset / Defensive Wrapper
   ------------------------------------------------------------------------- */
.fmp,
.fmp .fmp-card,
.fmp .fmp-card__button,
.fmp .fmp-card__media {
	border: 0 !important;
	outline: 0;
	background-color: transparent !important;
	background-image: none !important;
}

.fmp .fmp-card__button {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}

/* -------------------------------------------------------------------------
   3. Grid
   ------------------------------------------------------------------------- */
.fmp__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px;
	align-items: start;
}

/* -------------------------------------------------------------------------
   4. Card (Idle)
   ------------------------------------------------------------------------- */
.fmp-card {
	min-width: 0;
}

.fmp-card__button {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border-radius: var(--fmp-radius);
	overflow: visible;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.fmp-card__button:focus-visible {
	outline: none;
}

.fmp-card__button:focus-visible .fmp-card__media {
	box-shadow:
		0 0 0 3px rgba(227, 1, 15, 0.16),
		var(--fmp-shadow-card);
}

.fmp-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--fmp-radius);
	clip-path: inset(0 round var(--fmp-radius));
	aspect-ratio: 1 / 1;
	isolation: isolate;
	box-shadow: var(--fmp-shadow-card);
}

.fmp-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: inherit;
	filter: grayscale(1) saturate(0.02) contrast(0.96) brightness(1.12);
	transform: scale(1.04);
	transform-origin: center 55%;
	transition:
		filter var(--fmp-dur) var(--fmp-ease),
		transform var(--fmp-dur) var(--fmp-ease);
	backface-visibility: hidden;
}

/* Overlay-Architektur */
.fmp-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44%;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	transition: height var(--fmp-dur) var(--fmp-ease);
}

.fmp-card__overlay-blur {
	position: absolute;
	inset: 0;
	opacity: 1;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.04) 15%,
			rgba(255, 255, 255, 0.14) 30%,
			rgba(255, 255, 255, 0.32) 45%,
			rgba(255, 255, 255, 0.58) 60%,
			rgba(255, 255, 255, 0.82) 75%,
			rgba(255, 255, 255, 0.94) 88%,
			rgba(255, 255, 255, 0.97) 100%
		);
	transition: background var(--fmp-dur) var(--fmp-ease);
}

.fmp-card__overlay-content {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 22px;
	z-index: 3;
	pointer-events: none;
	text-align: center;
}

.fmp-card__title {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: clamp(21px, calc(1.3vw + 3px), 25px);
	line-height: 1.16;
	letter-spacing: 0.095em;
	text-transform: uppercase;
	color: var(--fmp-title-idle);
	font-weight: 400;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	transform: translateY(0);
	transition:
		transform var(--fmp-dur) var(--fmp-ease),
		color var(--fmp-dur) var(--fmp-ease);
}

.fmp-card__description {
	display: block;
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.58;
	letter-spacing: 0.005em;
	color: var(--fmp-ink-strong);
	text-transform: none !important;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}

.fmp-card__description--overlay {
	width: 100%;
	max-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition:
		max-height var(--fmp-dur) var(--fmp-ease),
		opacity var(--fmp-dur) var(--fmp-ease),
		transform var(--fmp-dur) var(--fmp-ease);
}

.fmp-card__play {
	position: absolute;
	left: 50%;
	top: 42%;
	z-index: 3;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%) scale(0.88);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--fmp-dur) var(--fmp-ease),
		transform var(--fmp-dur) var(--fmp-ease);
	filter: drop-shadow(var(--fmp-shadow-play));
}

.fmp-card__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fmp-card__play circle {
	fill: var(--fmp-accent);
}

.fmp-card__play polygon {
	fill: #ffffff;
}

.fmp-card__meta {
	display: none;
}

/* -------------------------------------------------------------------------
   5. Card (Hover / Focus)
   ------------------------------------------------------------------------
   Nur für Geräte mit echter Maus ab Tablet-Breite. Touch-Geräte bekommen
   keinen Hover-Zustand (verhindert "hängenden" Hover nach dem Antippen).

   Performance: animiert werden nur transform + opacity (GPU) und der
   Bild-Filter. Keine Höhen-, max-height- oder Verlaufs-Animation.
   – Hover-Verlauf = zweite Ebene (.fmp-card__media::after), die per
     Opacity eingeblendet wird. Zusammen mit dem Idle-Verlauf ergibt sie
     exakt den bisherigen Hover-Verlauf.
   – Titel + Beschreibung gleiten gemeinsam per translateY hoch. Die
     Beschreibungshöhe (--fmp-desc-h) misst manufaktur-process.js.

   Choreografie
   – Hover-in:  Bild & Verlauf → Play → Titel → Beschreibung
   – Hover-out: exakt umgekehrt → Beschreibung → Titel → Play → Bild
   ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {

	/* =====================================================================
	   Ausgangszustand – enthält das Timing für HOVER-OUT
	   ===================================================================== */

	.fmp-card.has-video .fmp-card__button {
		position: relative;
	}

	/* Hover-Schatten auf eigener Ebene (die Media-Fläche selbst ist per
	   clip-path beschnitten und kann keinen Schatten zeigen) */
	.fmp-card.has-video .fmp-card__button::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--fmp-radius);
		box-shadow: var(--fmp-shadow-card-hover);
		opacity: 0;
		pointer-events: none;
		transition:
			opacity var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.1s,
			transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.1s;
	}

	.fmp-card.has-video .fmp-card__media {
		transition: transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.1s;
	}

	.fmp-card.has-video .fmp-card__image {
		will-change: transform, filter;
		transition:
			filter 0.9s var(--fmp-ease-hover-out) 0.12s,
			transform 1.2s var(--fmp-ease-hover-out) 0.05s;
	}

	.fmp-card.has-video .fmp-card__media::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 64%;
		z-index: 1;
		pointer-events: none;
		opacity: 0;
		will-change: opacity;
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.06) 14%,
				rgba(255, 255, 255, 0.2) 28%,
				rgba(255, 255, 255, 0.256) 31.25%,
				rgba(255, 255, 255, 0.409) 41.56%,
				rgba(255, 255, 255, 0.414) 42%,
				rgba(255, 255, 255, 0.579) 51.88%,
				rgba(255, 255, 255, 0.645) 56%,
				rgba(255, 255, 255, 0.702) 62.19%,
				rgba(255, 255, 255, 0.815) 72%,
				rgba(255, 255, 255, 0.815) 72.5%,
				rgba(255, 255, 255, 0.856) 82.81%,
				rgba(255, 255, 255, 0.927) 86%,
				rgba(255, 255, 255, 0.902) 91.75%,
				rgba(255, 255, 255, 1) 100%
			);
		transition: opacity 0.9s var(--fmp-ease-hover-out) 0.12s;
	}

	.fmp-card.has-video .fmp-card__play {
		transition:
			opacity 0.55s var(--fmp-ease-hover-out) 0.06s,
			transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.06s;
	}

	.fmp-card.has-video .fmp-card__title {
		transition:
			transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.04s,
			color 0.6s var(--fmp-ease-hover-out) 0.04s;
	}

	/* Titel + Beschreibung als Einheit (aktiv, sobald das JS gemessen hat) */
	.fmp--measured .fmp-card.has-video .fmp-card__overlay-content {
		transform: translateY(var(--fmp-desc-h, 0px));
		transition: transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.04s;
	}

	.fmp--measured .fmp-card.has-video .fmp-card__description--overlay {
		max-height: none;
		transition:
			opacity 0.4s var(--fmp-ease-hover-out),
			transform var(--fmp-hover-out) var(--fmp-ease-hover-out);
	}

	.fmp--measuring .fmp-card.has-video .fmp-card__overlay-content {
		transition: none !important;
	}

	/* =====================================================================
	   Hover / Tastatur-Fokus – enthält das Timing für HOVER-IN
	   ===================================================================== */

	.fmp-card.has-video .fmp-card__button:hover::before,
	.fmp-card.has-video .fmp-card__button:focus-visible::before {
		opacity: 1;
		transform: translateY(var(--fmp-lift));
		transition:
			opacity var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay),
			transform var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay);
	}

	.fmp-card.has-video .fmp-card__button:hover .fmp-card__media,
	.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__media {
		transform: translateY(var(--fmp-lift));
		transition: transform var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay);
	}

	.fmp-card.has-video .fmp-card__button:hover .fmp-card__image,
	.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__image {
		filter: grayscale(0) saturate(1) contrast(1) brightness(1.02);
		transform: scale(1.07);
		transition:
			filter 1s var(--fmp-ease-hover-in) var(--fmp-hover-delay),
			transform 1.6s var(--fmp-ease-hover-in) var(--fmp-hover-delay);
	}

	.fmp-card.has-video .fmp-card__button:hover .fmp-card__media::after,
	.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__media::after {
		opacity: 1;
		transition: opacity var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay);
	}

	.fmp-card.has-video .fmp-card__button:hover .fmp-card__play,
	.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__play {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		transition:
			opacity 0.7s var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.1s),
			transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.1s);
	}

	.fmp-card.has-video .fmp-card__button:hover .fmp-card__title,
	.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__title {
		transform: translateY(-4px);
		color: var(--fmp-title-hover);
		transition:
			transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.08s),
			color 0.7s var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.14s);
	}

	.fmp--measured .fmp-card.has-video .fmp-card__button:hover .fmp-card__overlay-content,
	.fmp--measured .fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__overlay-content {
		transform: translateY(0);
		transition: transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.08s);
	}

	.fmp-card.has-video .fmp-card__button:hover .fmp-card__description--overlay,
	.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__description--overlay {
		max-height: 160px; /* Fallback ohne JS */
		opacity: 1;
		transform: translateY(0);
	}

	.fmp--measured .fmp-card.has-video .fmp-card__button:hover .fmp-card__description--overlay,
	.fmp--measured .fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__description--overlay {
		max-height: none;
		transition:
			opacity 0.7s var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.22s),
			transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.22s);
	}
}

.fmp-card.is-disabled .fmp-card__button {
	cursor: default;
}

.fmp-card.is-disabled .fmp-card__image {
	filter: grayscale(1) saturate(0.02) contrast(0.96) brightness(1.12);
}

.fmp-card.is-disabled .fmp-card__overlay {
	height: 44%;
}

/* =========================================================================
   7. Lightbox — Premium Finish
   ==========================================================================
   Finale Anpassungen:
   - Dialog-Fokus-Ring komplett entfernt (auch :focus-visible)
     → kein roter Rand beim Öffnen, A11y-Fokus liegt auf echten Controls
   - Alle Buttons (Close, Play, Mute, Fullscreen) kreisrund (999px)
     → geometrisch konsistent mit zentralem Play-Button
   - Hintergrund minimal wärmer (subtiler Warmton, nicht kalt-blau)
   ========================================================================= */

.fmp-modal {
	position: fixed;
	inset: 0;
	z-index: 10030;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.fmp-modal[hidden] {
	display: none !important;
}

.fmp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 14, 0.84);
	backdrop-filter: blur(14px) saturate(0.9);
	-webkit-backdrop-filter: blur(14px) saturate(0.9);
	opacity: 0;
	transition: opacity 0.42s var(--fmp-ease);
}

.fmp-modal__dialog {
	position: relative;
	width: min(1240px, 100%);
	max-height: calc(100vh - 48px);
	margin: 0;
	padding: 22px 22px 26px;
	border-radius: var(--fmp-radius-lg);
	background:
		linear-gradient(180deg, rgba(24, 28, 30, 0.985) 0%, rgba(16, 19, 21, 0.985) 100%);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: var(--fmp-shadow-modal);
	opacity: 0;
	transform: translateY(12px) scale(0.985);
	transition:
		opacity 0.42s var(--fmp-ease),
		transform 0.52s var(--fmp-ease);
	overflow: hidden;

	/* Kein Fokus-Ring auf dem Dialog-Wrapper — weder bei Maus noch Tastatur.
	   Dialog ist nur Container; Fokus gehört auf Close/Controls innen. */
	outline: none !important;
}

.fmp-modal__dialog:focus,
.fmp-modal__dialog:focus-visible {
	outline: none !important;
	box-shadow: var(--fmp-shadow-modal) !important;
}

.fmp-modal.is-open .fmp-modal__backdrop { opacity: 1; }
.fmp-modal.is-open .fmp-modal__dialog { opacity: 1; transform: translateY(0) scale(1); }

/* ---- Close-Button: kreisrund ---- */
.fmp-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 8;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 999px !important;
	padding: 0;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.88);
	cursor: pointer;
	transition:
		background 0.3s var(--fmp-ease),
		border-color 0.3s var(--fmp-ease),
		color 0.3s var(--fmp-ease),
		transform 0.3s var(--fmp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.fmp-modal__close:hover,
.fmp-modal__close:focus-visible {
	background: rgba(227, 1, 15, 0.92);
	border-color: rgba(227, 1, 15, 1);
	color: #ffffff;
	transform: translateY(-1px);
	outline: none;
}

.fmp-modal__close svg { width: 18px; height: 18px; display: block; }
.fmp-modal__close path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---- Video-Container ---- */
.fmp-modal__media {
	position: relative;
	background: #080b0c;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.fmp-modal__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #050607;
}

/* ---- Center-Play: nur runder roter Kreis ---- */
.fmp-modal__center-toggle {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	width: 92px;
	height: 92px;
	padding: 0;
	margin: 0;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	transform: translate(-50%, -50%);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s var(--fmp-ease), transform 0.32s var(--fmp-ease);

	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: none;
	outline: none;
}

.fmp-modal__center-toggle:focus,
.fmp-modal__center-toggle:focus-visible {
	outline: none;
	background: transparent !important;
}

.fmp-modal__center-toggle svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.38));
	transition: transform 0.32s var(--fmp-ease);
}

.fmp-modal__center-toggle:hover svg {
	transform: scale(1.04);
}

.fmp-modal__center-toggle circle { fill: #e3010f; }
.fmp-modal__center-toggle polygon,
.fmp-modal__center-toggle rect { fill: #ffffff; }

.fmp-modal.is-paused .fmp-modal__center-toggle { opacity: 1; pointer-events: auto; }

/* ---- Controls-Leiste ---- */
.fmp-modal__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	padding: 22px 18px 16px;
	background: linear-gradient(
		180deg,
		rgba(7, 10, 11, 0) 0%,
		rgba(7, 10, 11, 0.22) 22%,
		rgba(7, 10, 11, 0.82) 100%
	);
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.32s var(--fmp-ease),
		transform 0.32s var(--fmp-ease);
}

.fmp-modal.is-ui-hidden .fmp-modal__controls {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.fmp-modal__controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.fmp-modal__controls-group {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* ---- Controls: kreisrund ---- */
.fmp-control {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.92);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition:
		background 0.3s var(--fmp-ease),
		border-color 0.3s var(--fmp-ease),
		color 0.3s var(--fmp-ease),
		transform 0.3s var(--fmp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.fmp-control:hover,
.fmp-control:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	transform: translateY(-1px);
	outline: none;
}

.fmp-control svg { width: 18px; height: 18px; display: block; }
.fmp-control svg * {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fmp-modal .is-pause,
.fmp-modal .is-muted { display: none; }

.fmp-modal.is-playing [data-fmp-toggle-play] .is-play { display: none; }
.fmp-modal.is-playing [data-fmp-toggle-play] .is-pause { display: block; }
.fmp-modal.is-muted [data-fmp-toggle-mute] .is-unmuted { display: none; }
.fmp-modal.is-muted [data-fmp-toggle-mute] .is-muted { display: block; }

/* ---- Zeitanzeige ---- */
.fmp-modal__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding-left: 4px;
}

.fmp-modal__time-sep { opacity: 0.4; }

/* ---- Progress-Slider ---- */
.fmp-modal__progress-wrap { margin-top: 14px; }

.fmp-modal__progress {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #E3010F 0%, #E3010F 0%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.24) 100%);
	outline: none;
	cursor: pointer;
}

.fmp-modal__progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #ffffff;
	border: 0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	transition: transform 0.2s var(--fmp-ease);
}

.fmp-modal__progress:hover::-webkit-slider-thumb {
	transform: scale(1.12);
}

.fmp-modal__progress::-moz-range-thumb {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #ffffff;
	border: 0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.fmp-modal__progress::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: transparent;
}

/* ---- Titel + Beschreibung: zentriert ---- */
.fmp-modal__copy {
	padding: 26px 12px 4px;
	color: #ffffff;
	text-align: center;
}

.fmp-modal__title {
	margin: 0 auto 12px;
	color: #ffffff;
	font-size: clamp(22px, 2.1vw, 28px);
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	max-width: 880px;
}

.fmp-modal__description {
	margin: 0 auto;
	max-width: 720px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
	line-height: 1.72;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

body.fmp-modal-open {
	overflow: hidden;
	touch-action: none;
}

/* -------------------------------------------------------------------------
   8. Responsive — Tablet / Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.fmp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px;
	}
}

/* Tablet quer / schmale Desktop-Fenster: Hover-Verlauf etwas niedriger (58 %) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (max-width: 1180px) {
	.fmp-card.has-video .fmp-card__media::after {
		height: 58%;
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.06) 14%,
				rgba(255, 255, 255, 0.161) 24.14%,
				rgba(255, 255, 255, 0.189) 28%,
				rgba(255, 255, 255, 0.301) 35.52%,
				rgba(255, 255, 255, 0.38) 42%,
				rgba(255, 255, 255, 0.463) 46.9%,
				rgba(255, 255, 255, 0.609) 56%,
				rgba(255, 255, 255, 0.63) 58.28%,
				rgba(255, 255, 255, 0.74) 69.66%,
				rgba(255, 255, 255, 0.784) 72%,
				rgba(255, 255, 255, 0.806) 81.03%,
				rgba(255, 255, 255, 0.916) 86%,
				rgba(255, 255, 255, 0.892) 90.9%,
				rgba(255, 255, 255, 1) 100%
			);
	}
}

@media (max-width: 767px) {
	.fmp {
		padding-left: 15px;
		padding-right: 15px;
	}

	.fmp__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.fmp-card__media {
		aspect-ratio: 16 / 10;
	}

	.fmp-card__image {
		filter: grayscale(0) saturate(1) contrast(1) brightness(1.02);
		transform: scale(1.02);
	}

	.fmp-card__overlay {
		height: 40%;
	}

	.fmp-card__overlay-content {
		left: 18px;
		right: 18px;
		bottom: 16px;
	}

	.fmp-card__title {
		font-size: 23px;
		letter-spacing: 0.085em;
	}

	.fmp-card__description--overlay {
		display: none;
	}

	.fmp-card__play {
		width: 60px;
		height: 60px;
		top: 50%;
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		animation: none;
	}

	.fmp-card__meta {
		display: block;
		margin-top: 12px;
		padding: 0 4px;
	}

	.fmp-card__description--mobile {
		display: block;
		width: calc(100% - 16px);
		margin: 0 auto;
		padding: 0 4px;
		font-size: 16px;
		line-height: 1.65;
		color: var(--fmp-ink-soft);
		text-align: center;
	}

	/* Lightbox Mobile */
	.fmp-modal {
		padding: 10px;
	}

	.fmp-modal__dialog {
		width: 100%;
		max-height: calc(100vh - 20px);
		padding: 14px 14px 18px;
		border-radius: 18px;
	}

	.fmp-modal__media { border-radius: 12px; }
	.fmp-modal__close { top: 12px; right: 12px; width: 40px; height: 40px; }
	.fmp-modal__controls { padding: 14px 12px 12px; }
	.fmp-modal__controls-row { gap: 10px; }
	.fmp-modal__controls-group { gap: 8px; }
	.fmp-modal__time { font-size: 12px; }
	.fmp-control { width: 36px; height: 36px; }
	.fmp-modal__center-toggle { width: 76px; height: 76px; }
	.fmp-modal__copy { padding: 20px 6px 2px; }
	.fmp-modal__title { font-size: 19px; letter-spacing: 0.11em; margin-bottom: 10px; }
	.fmp-modal__description { font-size: 15px; line-height: 1.68; }
}

/* Touch-Geräte */
@media (hover: none), (pointer: coarse) {
	.fmp-card__image {
		filter: grayscale(0) saturate(1) contrast(1) brightness(1.02);
		transform: scale(1.02);
	}

	.fmp-card__overlay { height: 40%; }
	.fmp-card__description--overlay { display: none; }

	.fmp-card__play {
		opacity: 1;
		top: 50%;
		transform: translate(-50%, -50%) scale(1);
		animation: none;
	}
}

/* Lesbarkeit der Titel ohne Hover-Zustand (Mobile & Touch-Geräte):
   höherer, dichterer Weiß-Verlauf, etwas kräftigerer Titel mit weichem
   Licht-Halo – damit der Titel auch auf unruhigen Farbbildern klar lesbar ist. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
	.fmp-card__overlay {
		height: 60%;
	}

	.fmp-card__overlay-blur {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.06) 18%,
				rgba(255, 255, 255, 0.22) 34%,
				rgba(255, 255, 255, 0.5) 48%,
				rgba(255, 255, 255, 0.74) 60%,
				rgba(255, 255, 255, 0.88) 70%,
				rgba(255, 255, 255, 0.95) 84%,
				rgba(255, 255, 255, 0.97) 100%
			);
	}

	.fmp-card__title {
		color: var(--fmp-ink-strong);
		text-shadow: 0 1px 14px rgba(255, 255, 255, 0.7);
	}
}

/* Touch-Tablets (quadratische Karten): Verlauf etwas niedriger */
@media (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse) {
	.fmp-card__overlay {
		height: 50%;
	}
}

/* -------------------------------------------------------------------------
   9. Reduced Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fmp-card__button::before,
	.fmp-card__image,
	.fmp-card__media,
	.fmp-card__media::after,
	.fmp-card__overlay-content,
	.fmp-card__overlay,
	.fmp-card__overlay-blur,
	.fmp-card__title,
	.fmp-card__description--overlay,
	.fmp-card__play,
	.fmp-modal__backdrop,
	.fmp-modal__dialog,
	.fmp-modal__controls,
	.fmp-modal__center-toggle,
	.fmp-modal__center-toggle svg,
	.fmp-control,
	.fmp-modal__close,
	.fmp-modal__progress::-webkit-slider-thumb {
		transition: none !important;
		animation: none !important;
	}
}