/* Wifa Testimonials Slider
   Typografie wird bewusst vom Theme geerbt, damit sich der Slider ins Avada-Layout einfügt. */

.wts {
	--wts-cols: 3;
	--wts-gap: 24px;
	--wts-accent: #c6d400;        /* Wifa-Grün: Strich links, Kästchen, aktive Punkte */
	--wts-star: #f2b705;
	--wts-star-empty: #c9ced4;   /* etwas dunkler, damit ein angebrochener Stern sichtbar wird */
	--wts-star-size: 18px;
	--wts-star-gap: 3px;
	--wts-ink: #1f2429;
	--wts-muted: #6b7480;
	--wts-line: rgba(31, 36, 41, 0.12);   /* Rahmen von Knöpfen und Karten */
	--wts-divider: #d5d9dd;               /* feine Linie in der Karte */
	--wts-divider-top: #8b9299;           /* dunklere Linie unter der Gesamtbewertung */
	--wts-card-bg: #ffffff;
	--wts-radius: 12px;
	--wts-stripe: 5px;
	--wts-pad: 24px;
	--wts-avatar: 64px;
	--wts-lines: 3;          /* reservierte Textzeilen, hält die Karten auf einer Linie */

	position: relative;
}

/* ---------- Spur ---------- */

/*
 * Das Sichtfenster schneidet ab, die Schiene darunter wird per transform
 * verschoben. Der Innenabstand gibt dem Kartenschatten Luft, das negative
 * Außenmaß gleicht ihn wieder aus, damit die Karten bündig zum Text stehen.
 */
.wts__viewport {
	overflow: hidden;
	padding: 8px 8px 20px;
	margin: -8px -8px -20px;
}

.wts__viewport:focus-visible {
	outline: 2px solid var(--wts-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.wts__track {
	display: flex;
	gap: var(--wts-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	transition: transform var(--wts-speed, 1000ms) var(--wts-ease, cubic-bezier(0.65, 0, 0.35, 1));
	touch-action: pan-y;
	cursor: grab;
}

/* Beim Ziehen und beim Neuaufbau ohne Animation, sonst hinkt es hinterher. */
.wts__track.is-instant,
.wts__track.is-dragging {
	transition: none;
}

.wts__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.wts__slide {
	flex: 0 0 calc((100% - (var(--wts-cols) - 1) * var(--wts-gap)) / var(--wts-cols));
	display: flex;
	margin: 0;
}

/*
 * Karten der sichtbaren Seite erscheinen nacheinander. Die Verzögerung setzt
 * das Skript je Karte, die auslaufenden verblassen ohne Verzögerung sofort.
 */
.wts__slide .wts-card {
	opacity: 0.2;
	transform: translate3d(0, 10px, 0) scale(0.985);
	transition:
		opacity var(--wts-card-speed, 700ms) cubic-bezier(0.33, 1, 0.68, 1),
		transform var(--wts-card-speed, 700ms) cubic-bezier(0.33, 1, 0.68, 1);
}

.wts__slide.is-active .wts-card {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	transition-delay: var(--wts-delay, 0ms);
}

/* Beim Überblenden fährt nichts, die Karten verblassen nur weicher. */
.wts--fade .wts__slide .wts-card {
	opacity: 0;
	transform: translate3d(0, 6px, 0) scale(0.995);
}

.wts--fade .wts__slide.is-active .wts-card {
	opacity: 1;
	transform: none;
}

.wts__track.is-dragging .wts__slide .wts-card {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.wts__slide .wts-card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wts__track {
		transition: none;
	}
}

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

.wts-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: var(--wts-pad) calc(var(--wts-pad) - 2px);
	text-align: center;
	background: var(--wts-card-bg);
	border: 0;
	border-left: var(--wts-stripe) solid var(--wts-accent);
	border-radius: var(--wts-radius);
	box-shadow: 0 4px 16px rgba(16, 20, 24, 0.07), 0 1px 3px rgba(16, 20, 24, 0.05);
}

.wts-card__avatar {
	width: var(--wts-avatar);
	height: var(--wts-avatar);
	margin-bottom: 12px;
	flex: none;
}

.wts-card__photo,
.wts-card__initials {
	width: var(--wts-avatar);
	height: var(--wts-avatar);
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

.wts-card__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--wts-avatar) / 2.6);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: hsl(var(--wts-hue, 210) 38% 32%);
	background: hsl(var(--wts-hue, 210) 40% 90%);
}

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

.wts-stars {
	position: relative;
	display: inline-block;
	margin-bottom: 12px;
	line-height: 0;
}

.wts-stars__base,
.wts-stars__fill {
	display: flex;
	gap: var(--wts-star-gap);
}

.wts-stars svg {
	width: var(--wts-star-size);
	height: var(--wts-star-size);
	flex: none;
	fill: currentColor;
}

.wts-stars__base {
	color: var(--wts-star-empty);
}

.wts-stars__fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--wts-star);
}

/* Hält die Zeile frei, wenn keine Bewertung hinterlegt ist. */
.wts-stars--empty {
	height: var(--wts-star-size);
	width: 1px;
}

.wts-stars-none {
	margin: 0 0 12px;
	font-size: 0.8em;
	line-height: var(--wts-star-size);
	color: var(--wts-muted);
}

/* ---------- Gesamtbewertung über dem Slider ---------- */

.wts__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	margin: 0 0 24px;
	text-align: center;
}

.wts__summary-score {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0;
	color: var(--wts-ink);
}

.wts__summary-score strong {
	font-size: 1.7em;
	font-weight: 650;
	line-height: 1;
}

.wts__summary-score span {
	font-size: 0.88em;
	color: var(--wts-muted);
}

.wts__summary .wts-stars {
	--wts-star-size: 23px;
	--wts-star-gap: 4px;
	margin-bottom: 0;
}

.wts__summary-meta {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.86em;
	color: var(--wts-muted);
}

/* ---------- Text ---------- */

.wts-card__teaser {
	margin-bottom: 8px;
	font-size: 0.88em;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wts-ink);
	align-self: stretch;
	hyphens: auto;
	min-height: calc(var(--wts-lines) * 1.6em);
	display: -webkit-box;
	-webkit-line-clamp: var(--wts-lines);
	line-clamp: var(--wts-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Deutsche Anführungszeichen, abschaltbar über quotes="no" */
.wts:not(.wts--noquotes) .wts-card__teaser::before,
.wts-modal:not(.wts-modal--noquotes) .wts-card__full > p:first-child::before {
	content: "\201E";
}

.wts:not(.wts--noquotes) .wts-card__teaser::after,
.wts-modal:not(.wts-modal--noquotes) .wts-card__full > p:last-child::after {
	content: "\201C";
}

.wts-card__more {
	margin: 0 0 14px;
	padding: 0;
	font: inherit;
	font-size: 0.88em;
	font-weight: 400;
	color: var(--wts-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.wts-card__more:hover {
	color: var(--wts-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wts-card__more:focus-visible {
	outline: 2px solid var(--wts-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.wts-card__more--empty {
	visibility: hidden;
	pointer-events: none;
}

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

.wts-card__foot {
	margin-top: auto;
	width: 100%;
}

/* Hellgrauer Trennstrich zwischen Zitat und Angaben zur Person. */
.wts--divider .wts-card__foot {
	padding-top: 14px;
	border-top: 1px solid var(--wts-divider);
}

/* Strich unter der Gesamtbewertung – dunkler, er trennt zwei Bereiche. */
.wts--divider .wts__summary {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--wts-divider-top);
}

.wts-card__name {
	margin: 0;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wts-ink);
}

.wts-card__source {
	margin: 4px 0 0;
	font-size: 0.85em;
	line-height: 1.45;
	color: var(--wts-muted);
}

.wts-card__service {
	display: inline-block;
	margin: 10px 0 0;
	padding: 4px 11px;
	font-size: 0.78em;
	line-height: 1.45;
	color: var(--wts-ink);
	background: color-mix(in srgb, var(--wts-accent) 28%, transparent);
	border: 0;
	border-radius: 5px;
}

.wts-card__service--empty {
	visibility: hidden;
	pointer-events: none;
}

/* Kästchen über dem Bild statt im Fuß */
.wts-card__service--top {
	margin: 0 0 18px;
}

/* Linksbündiger Zitattext – Bild, Sterne, Name und Quelle bleiben mittig. */
.wts--left .wts-card__teaser {
	text-align: left;
	hyphens: auto;
}

/* ---------- Steuerung ---------- */

.wts__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 10px;
}

.wts__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--wts-ink);
	background: none;
	border: 1px solid var(--wts-line);
	border-radius: 50%;
	cursor: pointer;
}

.wts__nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wts__nav:hover {
	color: var(--wts-accent);
	border-color: var(--wts-accent);
}

.wts__nav:focus-visible {
	outline: 2px solid var(--wts-accent);
	outline-offset: 2px;
}

.wts__nav--toggle .wts__icon-play {
	display: none;
}

.wts--stopped .wts__nav--toggle .wts__icon-play {
	display: block;
}

.wts--stopped .wts__nav--toggle .wts__icon-pause {
	display: none;
}

.wts__nav--toggle .wts__icon-play {
	fill: currentColor;
	stroke: none;
}

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

.wts__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var(--wts-star-empty);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.wts__dot[aria-current="true"] {
	width: 22px;
	border-radius: 999px;
	background: var(--wts-accent);
}

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

.wts__counter {
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	color: var(--wts-muted);
}

/* ---------- Modal ---------- */

.wts-modal {
	width: min(640px, calc(100vw - 32px));
	max-height: min(80vh, 720px);
	padding: 0;
	color: var(--wts-ink, #1f2429);
	background: #fff;
	border: 0;
	border-left: 5px solid var(--wts-accent, #8cbe26);
	border-radius: 14px;
}

.wts-modal::backdrop {
	background: rgba(16, 20, 24, 0.55);
}

.wts-modal__inner {
	position: relative;
	max-height: inherit;
	padding: 34px 32px 30px;
	overflow-y: auto;
	text-align: center;
}

.wts-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--wts-muted, #6b7480);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.wts-modal__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.wts-modal__close:hover {
	background: rgba(31, 36, 41, 0.06);
}

.wts-modal__close:focus-visible {
	outline: 2px solid var(--wts-accent, #8cbe26);
	outline-offset: 2px;
}

.wts-modal .wts-card__full {
	margin: 4px 0 22px;
	font-size: 0.97em;
	line-height: 1.72;
	text-align: left;
}

.wts-modal .wts-card__full p {
	margin: 0 0 1em;
}

.wts-modal .wts-card__full p:last-child {
	margin-bottom: 0;
}

.wts-modal .wts-card__foot {
	padding-top: 18px;
	border-top: 1px solid rgba(31, 36, 41, 0.1);
}

/* ---------- Responsiv ---------- */

@media (max-width: 1024px) {
	.wts {
		--wts-cols: 2;
	}
}

@media (max-width: 640px) {
	.wts {
		--wts-cols: 1;
		--wts-gap: 16px;
	}

	.wts {
		--wts-pad: 20px;
	}
}