/* MFB Testimonials – v1.0.0
   Alle sichtbaren Werte laufen über CSS-Variablen.
   Fallbacks greifen auf die Elementor-Globals zu, damit das Widget
   ohne jede Einstellung bereits im CD der Website erscheint. */

.mfbt {
	/* Farben */
	--mfbt-accent:        var(--e-global-color-accent, #6e7f4e);
	--mfbt-name:          var(--e-global-color-primary, #23261f);
	--mfbt-text:          var(--e-global-color-text, #4c4d46);
	--mfbt-role:          rgba(35, 38, 31, .55);
	--mfbt-line:          rgba(0, 0, 0, .10);
	--mfbt-star:          var(--mfbt-accent);
	--mfbt-star-off:      rgba(0, 0, 0, .14);
	--mfbt-mark-color:    rgba(110, 127, 78, .18);
	--mfbt-more-color:    var(--mfbt-accent);

	/* Maße */
	--mfbt-per-view:      3;
	--mfbt-gap:           24px;
	--mfbt-pad:           32px;
	--mfbt-radius:        4px;
	--mfbt-media-max:     520px;
	--mfbt-align:         left;
	--mfbt-mark-size:     64px;
	--mfbt-star-size:     16px;
	--mfbt-avatar:        52px;
	--mfbt-avatar-radius: 50%;

	/* Bild */
	--mfbt-media-ratio:   4 / 3;
	--mfbt-media-pos:     center center;
	--mfbt-media-width:   42%;
	--mfbt-media-zoom:    1;

	/* Navigation */
	--mfbt-nav-align:     center;
	--mfbt-nav-gap:       32px;
	--mfbt-arrow-size:    26px;
	--mfbt-arrow-color:   var(--mfbt-name);
	--mfbt-arrow-bg:      transparent;
	--mfbt-arrow-border:  transparent;
	--mfbt-arrow-color-h: var(--mfbt-accent);
	--mfbt-arrow-bg-h:    transparent;
	--mfbt-arrow-border-h:transparent;
	--mfbt-rail:          rgba(0, 0, 0, .10);
	--mfbt-rail-fill:     var(--mfbt-accent);
	--mfbt-rail-width:    180px;
	--mfbt-dot:           rgba(0, 0, 0, .18);
	--mfbt-dot-active:    var(--mfbt-accent);

	position: relative;
	container-type: inline-size;
}

/* Wo color-mix unterstützt wird (alle aktuellen Browser), folgen
   Anführungszeichen und Sekundärtext automatisch den Hauptfarben. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.mfbt {
		--mfbt-mark-color: color-mix(in srgb, var(--mfbt-accent) 22%, transparent);
		--mfbt-role: color-mix(in srgb, var(--mfbt-name) 58%, transparent);
	}
}

/* Themes stylen global alle <button>. Ohne diesen Reset werden Pfeile und
   „Weiterlesen“ zu bunten Kästen. Bewusst mit !important, weil Theme-Regeln
   hier oft höher gewichtet sind. */
.mfbt button {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	height: auto;
	font: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: none !important;
	text-shadow: none;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
	transform: none;
}

.mfbt button:hover,
.mfbt button:focus {
	background: none !important;
	box-shadow: none !important;
	transform: none;
}

/* ------------------------------------------------------------ Viewport */

.mfbt__viewport {
	position: relative;
}

.mfbt__track {
	display: flex;
	gap: var(--mfbt-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mfbt--slider .mfbt__track {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	/* Platz für Fokusring und Schatten, ohne dass etwas abgeschnitten wird */
	padding: 6px 4px;
}

.mfbt--slider .mfbt__track::-webkit-scrollbar {
	display: none;
}

.mfbt--slider .mfbt__track:focus-visible {
	outline: 2px solid var(--mfbt-accent);
	outline-offset: 2px;
}

.mfbt__slide {
	flex: 0 0 calc((100% - (var(--mfbt-per-view) - 1) * var(--mfbt-gap)) / var(--mfbt-per-view));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

.mfbt--grid .mfbt__track {
	display: grid;
	grid-template-columns: repeat(var(--mfbt-per-view), minmax(0, 1fr));
}

.mfbt--grid .mfbt__slide {
	flex: initial;
}

/* --------------------------------------------------------------- Karte */

.mfbt__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	border-radius: var(--mfbt-radius);
	background: #fff;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.mfbt__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	position: relative;
	padding: var(--mfbt-pad);
	text-align: left;
}

/* Zentrierte Variante */
.mfbt--align-center .mfbt__body {
	text-align: center;
}

.mfbt--align-center .mfbt__rating {
	justify-content: center;
}

.mfbt--align-center .mfbt__meta {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.mfbt--align-center .mfbt__ident {
	align-items: center;
}

.mfbt--align-center .mfbt__source {
	margin-inline-start: 0;
}

.mfbt--align-center .mfbt__more {
	align-self: center;
}

/* Anführungszeichen – zurückhaltend, nicht dekorativ überladen.
   Liegt im Textfluss, damit es der Ausrichtung automatisch folgt. */
.mfbt__mark {
	display: block;
	height: calc(var(--mfbt-mark-size) * .48);
	margin-bottom: 6px;
	overflow: hidden;
	font-size: var(--mfbt-mark-size);
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--mfbt-mark-color);
	pointer-events: none;
	user-select: none;
}

/* -------------------------------------------------------------- Sterne */

.mfbt__rating {
	display: flex;
	gap: 3px;
	margin-bottom: 18px;
}

.mfbt__star {
	width: var(--mfbt-star-size);
	height: var(--mfbt-star-size);
	fill: var(--mfbt-star-off);
	flex: none;
}

.mfbt__star.is-on {
	fill: var(--mfbt-star);
}

/* --------------------------------------------------------------- Zitat */

.mfbt__quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	flex: 1 1 auto;
	min-height: 0;
}

.mfbt__quote::before,
.mfbt__quote::after {
	content: none;
}

.mfbt__text {
	margin: 0;
	color: var(--mfbt-text);
	font-size: var(--mfbt-text-size, 1.0625rem);
	line-height: 1.65;
	hyphens: auto;
}

/* Automatisch verkleinerter Text: weich einblenden, damit der Sprung
   von Ausgangs- auf Zielgröße nicht sichtbar ruckelt. */
.mfbt--fit .mfbt__text {
	transition: font-size .18s ease;
}

.mfbt--clamped .mfbt__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mfbt-clamp, 6);
	line-clamp: var(--mfbt-clamp, 6);
	overflow: hidden;
	/* Zweite Sicherung: greift auch dann, wenn line-clamp ausfällt. */
	max-height: calc(var(--mfbt-clamp, 6) * 1.65em);
}

.mfbt--clamped .mfbt__slide.is-expanded .mfbt__text {
	max-height: none;
}

.mfbt--clamped .mfbt__slide.is-expanded .mfbt__text {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.mfbt__more[hidden] {
	display: none !important;
}

/* Reiner Text im Stil der Kleintitel – keine Schaltflächenoptik. */
.mfbt .mfbt__more {
	display: inline-block;
	align-self: flex-start;
	flex: none;
	margin-top: 14px !important;
	font-family: var(--mfbt-more-font, inherit);
	font-size: var(--mfbt-more-size, 11px);
	font-weight: 500;
	letter-spacing: var(--mfbt-more-spacing, .3em) !important;
	text-transform: uppercase !important;
	color: var(--mfbt-more-color);
	border-bottom: 1px solid currentColor !important;
	border-radius: 0 !important;
	padding-bottom: 3px !important;
	text-indent: 0;
	line-height: 1.4;
	opacity: .7;
	transition: opacity .25s ease;
}

.mfbt .mfbt__more:hover,
.mfbt .mfbt__more:focus-visible {
	opacity: 1;
}

.mfbt .mfbt__more:focus-visible {
	outline: 2px solid var(--mfbt-accent);
	outline-offset: 3px;
}

.mfbt--align-center .mfbt__more {
	align-self: center;
}

/* -------------------------------------------------------------- Person */

.mfbt__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-block-start: 22px;
	border-top: 1px solid var(--mfbt-line);
	text-align: start;
}

.mfbt__avatar {
	flex: none;
	display: block;
	width: var(--mfbt-avatar);
	height: var(--mfbt-avatar);
	border-radius: var(--mfbt-avatar-radius);
	overflow: hidden;
	background: rgba(0, 0, 0, .05);
}

.mfbt__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mfbt__ident {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mfbt__name {
	color: var(--mfbt-name);
	font-weight: 600;
	line-height: 1.25;
}

.mfbt__role {
	color: var(--mfbt-role);
	font-size: .8125rem;
	line-height: 1.35;
	letter-spacing: .01em;
}

.mfbt__source {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	opacity: .75;
	transition: opacity .25s ease;
}

.mfbt__source:hover {
	opacity: 1;
}

.mfbt__source a {
	display: inline-flex;
	line-height: 0;
	box-shadow: none;
}

.mfbt__source-label {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mfbt-role);
	white-space: nowrap;
}

/* ----------------------------------------------------------- Bildkarte */

.mfbt__media {
	position: relative;
	overflow: hidden;
	background: rgba(0, 0, 0, .04);
	flex: none;
}

.mfbt__media-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mfbt-media-ratio);
	max-height: var(--mfbt-media-max);
	object-fit: cover;
	object-position: var(--mfbt-media-pos);
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.mfbt__card:hover .mfbt__media-img {
	transform: scale(var(--mfbt-media-zoom));
}

/* --------------------------------------------------------- Layout: split */

.mfbt--split .mfbt__card {
	flex-direction: row;
	align-items: stretch;
}

.mfbt--split .mfbt__media {
	width: var(--mfbt-media-width);
	align-self: stretch;
}

/* Das Bild gibt die Kartenhöhe vor (über sein Seitenverhältnis), die
   Textspalte zieht auf dieselbe Höhe mit. Dadurch kann das Bild nicht
   mehr vom Text gestreckt werden – und der Text bekommt umgekehrt den
   gesamten Platz, der neben dem Bild entsteht. */
.mfbt--split .mfbt__card {
	align-items: stretch;
}

.mfbt--split .mfbt__media {
	align-self: flex-start;
	width: var(--mfbt-media-width);
	aspect-ratio: var(--mfbt-media-ratio);
	max-height: var(--mfbt-media-max);
	min-height: 320px;
}

.mfbt--split .mfbt__media-img {
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
}

.mfbt--split .mfbt__body {
	justify-content: flex-start;
}

/* Basis 0: Die Höhe des Zitats ergibt sich allein aus dem freien Raum,
   nicht aus der Textmenge. Sonst würde ein langer Text die Karte
   wieder aufblähen. */
.mfbt--split .mfbt__quote {
	flex: 1 1 0;
	overflow: hidden;
}

.mfbt--split .mfbt__body {
	flex: 1 1 auto;
	justify-content: center;
}

.mfbt--split .mfbt__text {
	font-size: 1.25rem;
	line-height: 1.55;
}

/* Bild rechts – Standard. Der Blick landet zuerst im Zitat. */
.mfbt--split.mfbt--media-right .mfbt__card {
	flex-direction: row-reverse;
}

/* --------------------------------------------------------- Layout: quote */

.mfbt--quote .mfbt__card {
	background: none;
	border: 0 !important;
	box-shadow: none !important;
}

.mfbt--quote .mfbt__body {
	padding-inline: 0;
}

.mfbt--quote .mfbt__text {
	font-size: 1.1875rem;
}

.mfbt--quote .mfbt__meta {
	border-top: 0;
	padding-top: 0;
}

/* ---------------------------------------------------------- Navigation */

.mfbt__controls {
	display: flex;
	align-items: center;
	justify-content: var(--mfbt-nav-align);
	gap: 24px;
	margin-top: var(--mfbt-nav-gap);
}

.mfbt .mfbt__arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mfbt-arrow-size) !important;
	height: var(--mfbt-arrow-size) !important;
	color: var(--mfbt-arrow-color);
	opacity: .45;
	transition: opacity .25s ease, color .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}

.mfbt .mfbt__arrow:hover:not([disabled]) {
	opacity: 1;
	color: var(--mfbt-arrow-color-h);
}

.mfbt .mfbt__arrow--prev:hover:not([disabled]) {
	transform: translateX(-3px);
}

.mfbt .mfbt__arrow--next:hover:not([disabled]) {
	transform: translateX(3px);
}

.mfbt .mfbt__arrow:focus-visible {
	outline: 1px solid var(--mfbt-accent);
	outline-offset: 6px;
	opacity: 1;
}

.mfbt .mfbt__arrow[disabled] {
	opacity: .15;
	cursor: default;
}

.mfbt__arrow svg {
	width: 100%;
	height: 100%;
	max-width: 22px;
	max-height: 22px;
}

.mfbt__arrow--next svg {
	transform: rotate(180deg);
}

.mfbt__indicator {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Signature: schmale Fortschrittsspur statt Punktereihe */
.mfbt__rail {
	position: relative;
	width: var(--mfbt-rail-width);
	max-width: 40vw;
	height: 2px;
	background: var(--mfbt-rail);
	overflow: hidden;
	border-radius: 2px;
}

.mfbt__rail-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 20%;
	background: var(--mfbt-rail-fill);
	border-radius: inherit;
	transform-origin: left center;
	transition: width .35s cubic-bezier(.2, .7, .3, 1), transform .35s cubic-bezier(.2, .7, .3, 1);
}

.mfbt__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mfbt .mfbt__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--mfbt-dot) !important;
	transition: background-color .25s ease, width .25s ease;
}

.mfbt .mfbt__dot[aria-selected="true"] {
	background: var(--mfbt-dot-active) !important;
	width: 20px !important;
	border-radius: 3px !important;
}

.mfbt__dot:focus-visible {
	outline: 2px solid var(--mfbt-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------- Status */

.mfbt__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mfbt-empty {
	padding: 18px 22px;
	border: 1px dashed rgba(0, 0, 0, .2);
	border-radius: 4px;
	color: rgba(0, 0, 0, .6);
	font-size: .9375rem;
}

/* ---------------------------------------------------------- Drag-State */

.mfbt.is-dragging .mfbt__track {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.mfbt.is-dragging .mfbt__card {
	pointer-events: none;
}

.mfbt--slider[data-drag="1"] .mfbt__track {
	cursor: grab;
}

/* ------------------------------------------------------------ Container */

@container (max-width: 900px) {
	/* Mobil immer Bild oben, Text darunter – auch bei „Bild rechts“. */
	.mfbt--split .mfbt__card,
	.mfbt--split.mfbt--media-right .mfbt__card {
		flex-direction: column;
	}

	.mfbt--split .mfbt__media {
		width: 100%;
	}

	.mfbt--split .mfbt__media-img {
		aspect-ratio: var(--mfbt-media-ratio);
		min-height: 0;
	}

	.mfbt--split .mfbt__text {
		font-size: 1.0625rem;
	}
}

@media (max-width: 767px) {
	.mfbt {
		--mfbt-pad: 24px;
	}

	.mfbt__rail {
		max-width: 35vw;
	}
}

/* ----------------------------------------------------- Reduced Motion */

@media (prefers-reduced-motion: reduce) {
	.mfbt--slider .mfbt__track {
		scroll-behavior: auto;
	}

	.mfbt__card,
	.mfbt__media-img,
	.mfbt__rail-fill,
	.mfbt__arrow {
		transition: none;
	}

	.mfbt__card:hover .mfbt__media-img {
		transform: none;
	}
}

/* --------------------------------------------------------------- Print */

@media print {
	.mfbt--slider .mfbt__track {
		display: block;
		overflow: visible;
	}

	.mfbt__slide {
		break-inside: avoid;
		margin-bottom: 12mm;
	}

	.mfbt__controls {
		display: none;
	}
}

/* --------------------------------------------------- Gesamtbewertung */

.mfbt__aggregate {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
	justify-content: flex-start;
}

.mfbt--align-center .mfbt__aggregate {
	justify-content: center;
}

.mfbt__agg-value {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mfbt-name);
	letter-spacing: -.01em;
}

.mfbt__agg-stars {
	display: inline-flex;
	gap: 3px;
}

.mfbt__agg-count {
	font-size: .875rem;
	color: var(--mfbt-role);
}

/* ------------------------------------------------------- Attribution */

.mfbt__attribution {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	font-size: .75rem;
	letter-spacing: .02em;
	color: var(--mfbt-role);
	justify-content: var(--mfbt-nav-align, center);
}

.mfbt__attribution a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.mfbt__attribution a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mfbt__name a {
	color: inherit;
	text-decoration: none;
}

.mfbt__name a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mfbt__agg-link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.mfbt__agg-link:hover .mfbt__agg-count {
	text-decoration: underline;
	text-underline-offset: 2px;
}