/* ── Kimodo Testimonial Slider Widget ──────────────────────────────────── */
/* Breakout-Variablen werden vom Widget selbst als CSS-Custom-Properties gesetzt */

.tmw {
	--orange: #EB6419;
	--dark:   #1E2730;
	--muted:  #6B7280;
	--alt:    #E9E9EA;
	font-family: "Poppins", sans-serif;
	padding: 70px 40px 90px;
	background: transparent;
	box-sizing: border-box;
}

/* Breiterer Rahmen als früher 1100px; Kartenbreite kommt aus JS (Clip = content box unter .tmw-right-Padding). */
.tmw-inner  { max-width: 1360px; margin: 0 auto; min-width: 0; }
.tmw-row    { display: flex; align-items: flex-start; gap: 48px; }
.tmw-left   { flex: 0 0 240px; width: 240px; }
/* padding hier erzeugt sichtbaren Abstand + Raum für Schatten, ohne Clipping-Probleme */
.tmw-right  { flex: 1; min-width: 0; overflow: visible; padding: 2rem; }
.tmw-clip   {
	overflow: hidden;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
.tmw-track  {
	display: flex;
	gap: 20px;
	transition: transform .48s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
	min-width: 0;
}

/* ── Karten: min-width 0 verhindert Flex-„Mindestbreite nach Inhalt“-Overflow ── */
/* Seitlicher Abstand über .tmw-card-padding statt horizontaler margin auf der Blase:
   sonst: Blase mit max-width:100% + linkem/rechtem margin wird breiter als die Karte. */
.tmw-card  {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	transition: transform .25s;
	min-width: 0;
	padding: 1rem;
	overflow-x: hidden;
}
.tmw-card:hover { transform: translateY(-3px); }

.tmw-bubble {
	background: #fff;
	border-radius: 16px 16px 16px 0;
	padding: 24px 22px 20px;
	margin: 0 0 1rem;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.tmw-bubble::after {
	content: "";
	position: absolute;
	bottom: -16px; left: 0;
	width: 0; height: 0;
	border-top: 16px solid #fff;
	border-right: 16px solid transparent;
}

.tmw-txt    {
	font-size: .9rem;
	line-height: 1.75;
	color: #374151;
	margin: 0 0 18px;
	overflow-wrap: break-word;
}

/* Desktop: etwas mehr Innenabstand in der Blase, damit Fließtext nicht an der rechten Rundung „klebt“ oder optisch abgeschnitten wirkt */
@media (min-width: 681px) {
	.tmw-bubble {
		padding: 24px 28px 20px 26px;
	}
}

/* Textblock neben Avatar darf schrumpfen / umbrechen */
.tmw-author { display: flex; align-items: center; gap: 12px; padding: 22px 0 0 4px; min-width: 0; }
.tmw-author > div:not(.tmw-av) {
	min-width: 0;
	flex: 1;
}

/* ── Linke Spalte ──────────────────────────────────────────────────────── */
.tmw-qm {
	font-family: "Paytone One", sans-serif;
	font-size: 90px;
	line-height: .7;
	color: var(--alt);
	display: block;
	margin-bottom: 16px;
	user-select: none;
}
.tmw-h {
	font-family: "Paytone One", sans-serif;
	font-size: 1.85rem;
	color: var(--dark);
	line-height: 1.2;
	margin-bottom: 18px;
}
.tmw-rating   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tmw-score    { font-family: "Paytone One", sans-serif; font-size: 1rem; color: var(--dark); }
.tmw-plat     { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: .82rem; color: var(--dark); }
.tmw-g        {
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--orange); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: "Paytone One", sans-serif; font-size: .65rem; flex-shrink: 0;
}
.tmw-cnt { font-size: .75rem; color: var(--muted); width: 100%; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.tmw-nav  { display: flex; align-items: center; gap: 12px; }
.tmw .tmw-btn {
	all: unset;
	box-sizing: border-box !important;
	width: 44px !important; height: 44px !important;
	border-radius: 50% !important;
	border: 2px solid var(--dark) !important;
	padding: 0 !important;
	cursor: pointer;
	display: flex !important; align-items: center; justify-content: center;
	color: var(--dark) !important;
	background-color: transparent !important;
	flex-shrink: 0;
	transition: background .2s, color .2s;
	font-size: inherit;
}
.tmw .tmw-btn:hover { background-color: var(--dark) !important; color: #fff !important; }
.tmw-bar  { flex: 1; height: 3px; background: var(--alt); border-radius: 2px; overflow: hidden; min-width: 0; }
.tmw-fill { height: 100%; background: var(--orange); border-radius: 2px; transition: width .45s ease; width: 0%; }

.tmw-stars  { display: flex; gap: 3px; flex-wrap: wrap; }
.tmw-s      { font-size: 1.15rem; color: var(--orange); line-height: 1; }

.tmw-av     {
	width: 46px; height: 46px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: "Paytone One", sans-serif; font-size: .95rem;
	flex-shrink: 0; color: #fff;
	background: var(--dark);
}
.tmw-av.o { background: var(--orange); }
.tmw-av.t { background: #2E7D7A; }
.tmw-av.m { background: #3D5473; }
.tmw-av.p { background: #7B3F91; }
.tmw-av.r { background: #C0392B; }

.tmw-name { font-weight: 700; font-size: .9rem; color: var(--dark); line-height: 1.2; overflow-wrap: break-word; }
.tmw-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; overflow-wrap: break-word; }

/* ── Dots ──────────────────────────────────────────────────────────────── */
.tmw-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.tmw .tmw-dot {
	all: unset;
	display: block !important;
	box-sizing: border-box !important;
	height: 6px !important;
	width: 6px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 3px !important;
	background-color: var(--alt) !important;
	background: var(--alt) !important;
	padding: 0 !important;
	border: none !important;
	cursor: pointer;
	transition: width .3s, background .3s;
	flex-shrink: 0;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
}
.tmw .tmw-dot.on {
	background-color: var(--orange) !important;
	background: var(--orange) !important;
	width: 18px !important;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
	.tmw       { padding: 36px 0 48px; }
	.tmw-inner { padding: 0 16px; }
	.tmw-row   { flex-direction: column; gap: 0; }

	/* Linke Spalte kompakt */
	.tmw-left   { flex: none; width: 100%; min-width: 0; }
	.tmw-qm     { display: none; }
	.tmw-h      { font-size: 1.35rem; margin-bottom: 10px; }
	.tmw-rating { margin-bottom: 12px; }
	/* Nav volle Breite: äußere Kanten der Kreise = Kanten der Inhalts-Spalte (wie Slider) */
	.tmw-nav    { margin-top: 0; width: 100%; box-sizing: border-box; }

	/* Slider-Bereich */
	.tmw-right  { padding: 0; margin-top: 20px; min-width: 0; overflow-x: hidden; }

	/* Horizontales Padding symmetrisch: rechte Blasenkante steuert das JS anhand .tmw-next */
	.tmw-card   {
		padding: 0.25rem 0.25rem 0;
		box-sizing: border-box;
	}
	.tmw-bubble { margin-bottom: 0.75rem; }

	/* Dots enger */
	.tmw-dots  { margin-top: 12px; }
}