/*
 * fx6_bewertungen — Kundenstimmen.
 *
 * Schriftgroessen, Farben, Container und Abstaende kommen aus project.css. Hier
 * stehen nur Layout, Zustaende und die beiden Rechenwerte des Karussells.
 *
 * Zwei Custom Properties tragen den Zustand:
 *   --fx6-anzahl   Kartenzahl, kommt als Datenwert aus dem Template
 *   --fx6-index    aktuelle erste Karte, setzt das JS (Desktop), Default 0
 * Beides haengt am <section>, damit Karussell UND Steuerzeile es erben.
 */

section.fx6_bewertungen {
	/* Sichtbare Karten auf dem Desktop. Kartenbreite, Schrittweite und die
	   Breite des Fortschrittsbalkens leiten sich alle hiervon ab. */
	--fx6-sichtbar: 3;
}

/* ---------- Kopfzeile ---------- */

section.fx6_bewertungen .fx6_kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: var(--fx-pad-block-gross);
}

section.fx6_bewertungen .fx6_kopf_titel { min-width: 0; }

section.fx6_bewertungen .fx6_topline { margin: 0 0 18px; }
section.fx6_bewertungen .fx6_titel    { margin: 0; }

section.fx6_bewertungen .fx6_untertitel { margin: 18px 0 0; }

/* ---------- Google-Badge ---------- */

section.fx6_bewertungen .fx6_badge {
	display: flex;
	flex: none;
	align-items: center;
	gap: 22px;
	padding: 18px 24px;
	border: 1px solid var(--fx-line);
	border-radius: 0;
	text-decoration: none;
	transition: background-color .18s ease;
}

section.fx6_bewertungen .fx6_badge:hover,
section.fx6_bewertungen .fx6_badge:focus-visible {
	background: var(--fx-tint);
}

/* .fx-zahl faerbt azure — im Badge steht die Zahl laut Entwurf in Navy. */
section.fx6_bewertungen .fx6_score {
	color: var(--fx-navy);
	letter-spacing: var(--fx-ls-h2);
}

section.fx6_bewertungen .fx6_badge_mitte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

section.fx6_bewertungen .fx6_badge_sterne { font-size: var(--fx-fs-lead); }

section.fx6_bewertungen .fx6_badge_text {
	font-size: var(--fx-fs-nr);
	font-weight: 500;
	line-height: 1.3;
	color: var(--fx-text);
}

section.fx6_bewertungen .fx6_badge_pfeil {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-left: 22px;
	border-left: 1px solid var(--fx-line);
	color: var(--fx-azure);
}

/* ---------- Sterne (Badge und Karte) ---------- */

section.fx6_bewertungen .fx6_sterne {
	margin: 0;
	line-height: 1;
	letter-spacing: var(--fx-ls-meta);
	color: var(--fx-azure);
}

section.fx6_bewertungen .fx6_stern--leer { color: var(--fx-line); }

/* ---------- Karussell ---------- */

section.fx6_bewertungen .fx6_karussell {
	overflow: hidden;
	border-top: 1px solid var(--fx-navy);
	border-bottom: 1px solid var(--fx-line);
}

/*
 * Der Track bleibt so breit wie das Karussell; die Karten ragen als Flex-Items
 * darueber hinaus. Dadurch ist ein Schritt genau 100% / --fx6-sichtbar der
 * Track-Breite — die Verschiebung braucht keine Pixelrechnung im JS.
 */
section.fx6_bewertungen .fx6_track {
	display: flex;
	transform: translateX(calc(var(--fx6-index, 0) * -100% / var(--fx6-sichtbar)));
	transition: transform var(--fx-dauer-slider) var(--fx-ease-slider);
}

/*
 * Die Karte ist ein Raster, keine Flex-Spalte: mobil wandert die Leistung vom
 * Kopf der Karte unter den Namen — mit Rasterzeilen geht das ohne zweites
 * Markup. minmax(0, 1fr) in der Mittelzeile schiebt die Fusszeile nach unten
 * und laesst ein langes Zitat die Zeile nicht sprengen.
 */
section.fx6_bewertungen .fx6_karte {
	flex: 0 0 calc(100% / var(--fx6-sichtbar));
	/* min-width: 0 — sonst setzt der min-content der Karte die Flex-Basis ausser
	   Kraft, die Karte wird breiter als ein Schritt und das Karussell verrutscht. */
	min-width: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr) auto;
	/* Zusaetzlich an der Bildschirmhoehe gedeckelt — siehe --fx-buehne-* in project.css. */
	min-height: min(350px, var(--fx-buehne-mittel));
	padding: 36px 40px 34px;
	border-right: 1px solid var(--fx-line);
}

/*
 * Sterne und Leistung teilen sich eine Flex-Zeile statt zweier Rasterspalten.
 * Vorher stand die Leistung in einer auto-Spalte mit nowrap und nahm sich ihre
 * volle Breite; die Sterne-Spalte (minmax(0, 1fr)) schrumpfte dafuer bis auf 0,
 * die Sterne liefen aus ihrem <p> heraus und lagen unter dem Badge (992–1365px).
 * Mit flex-wrap rutscht die Leistung unter die Sterne, sobald beide nicht mehr
 * nebeneinander passen. Kein column-gap: wo beide passen, stehen sie exakt wie
 * zuvor (links Sterne, rechts Badge) — das Layout ab 1366px bleibt unveraendert.
 */
section.fx6_bewertungen .fx6_karte_kopf {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	row-gap: 12px;
	min-width: 0;
}

section.fx6_bewertungen .fx6_karte .fx6_sterne {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	flex: none;
	white-space: nowrap;
	font-size: var(--fx-fs-tel-klein);
}

section.fx6_bewertungen .fx6_leistung {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: center;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--fx-line-form);
	letter-spacing: var(--fx-ls-versal);
	color: var(--fx-azure);
	/* Nur als letzte Stufe: ist eine Karte schmaler als das Badge selbst, bricht
	   der Text im Badge um, statt die Karte zu verbreitern. */
	white-space: normal;
}

section.fx6_bewertungen .fx6_zitat {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 26px 0 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fx-navy);
	text-wrap: pretty;
}

/* Ohne Sterne und ohne Leistung ist das Zitat das erste Element — dann traegt
   der Innenabstand der Karte den Abstand nach oben, nicht der Rand des Zitats. */
section.fx6_bewertungen .fx6_karte > .fx6_zitat:first-child { margin-top: 0; }

section.fx6_bewertungen .fx6_fuss {
	grid-column: 1 / -1;
	grid-row: 3;
	align-self: end;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 28px;
}

section.fx6_bewertungen .fx6_linie {
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--fx-navy);
}

section.fx6_bewertungen .fx6_name {
	font-size: var(--fx-fs-body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--fx-navy);
}

/* --fx-fs-nav ist der einzige 16px-Token in project.css — siehe Bericht. */
section.fx6_bewertungen .fx6_ort {
	font-size: var(--fx-fs-nav);
	font-weight: 500;
	line-height: 1.3;
	color: var(--fx-text);
}

/* Der Mittelpunkt trennt Name und Ort nur mobil, wo beide in einer Zeile stehen. */
section.fx6_bewertungen .fx6_trenner { display: none; }

/* ---------- Steuerzeile ---------- */

section.fx6_bewertungen .fx6_steuerung {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 24px;
}

section.fx6_bewertungen .fx6_fortschritt {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 4px;
	background: var(--fx-line);
}

section.fx6_bewertungen .fx6_fortschritt_segment {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--fx6-index, 0) / var(--fx6-anzahl, 1) * 100%);
	width: calc(var(--fx6-sichtbar) / var(--fx6-anzahl, 1) * 100%);
	background: var(--fx-navy);
	transition: left var(--fx-dauer-slider) var(--fx-ease-slider);
}

section.fx6_bewertungen .fx6_zaehler {
	font-size: var(--fx-fs-nr);
	font-weight: 600;
	line-height: 1;
	color: var(--fx-text);
	white-space: nowrap;
}

section.fx6_bewertungen .fx6_pfeile {
	display: flex;
	flex: none;
	gap: 1px;
}

section.fx6_bewertungen .fx6_pfeil {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--fx-navy);
	color: var(--fx-white);
	cursor: pointer;
	transition: background-color .18s ease;
}

section.fx6_bewertungen .fx6_pfeil:hover,
section.fx6_bewertungen .fx6_pfeil:focus-visible {
	background: var(--fx-azure);
}

/* Der Wischhinweis gehoert allein der Smartphone-Ansicht. */
section.fx6_bewertungen .fx6_hinweis { display: none; }

/* ---------- Mobil: native Scroll-Karten, kein JS ---------- */

@media (max-width: 991px) {
	section.fx6_bewertungen .fx6_kopf {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		margin-bottom: 0;
	}

	section.fx6_bewertungen .fx6_topline    { margin: 0 0 14px; }
	section.fx6_bewertungen .fx6_untertitel { margin: 14px 0 0; }

	section.fx6_bewertungen .fx6_badge {
		gap: 14px;
		padding: 14px 16px;
		min-height: 48px;
	}

	section.fx6_bewertungen .fx6_score { letter-spacing: normal; }

	section.fx6_bewertungen .fx6_badge_mitte  { gap: 6px; }
	section.fx6_bewertungen .fx6_badge_sterne { font-size: var(--fx-fs-nav); }

	/* Der Pfeil rueckt an den rechten Rand und verliert seine Trennlinie. */
	section.fx6_bewertungen .fx6_badge_pfeil {
		margin-left: auto;
		align-self: center;
		padding-left: 0;
		border-left: 0;
	}

	/*
	 * Das Karussell wird zum Scrollbereich und laeuft randlos bis an den
	 * Bildschirmrand: negative Aussenabstaende in Hoehe des Band-Innenabstands,
	 * derselbe Wert wieder als Innenabstand. Die Breite bleibt damit exakt die
	 * des Bildschirms — kein horizontaler Ueberlauf der Seite.
	 */
	section.fx6_bewertungen .fx6_karussell {
		overflow-x: auto;
		overflow-y: hidden;
		border: 0;
		margin-inline: calc(var(--fx-gutter) * -1);
		padding: 22px var(--fx-gutter) 4px;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--fx-gutter);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	section.fx6_bewertungen .fx6_karussell::-webkit-scrollbar { display: none; }

	/*
	 * transform:none ist Pflicht: sonst haengt die Startposition am zuletzt
	 * gesetzten Desktop-Index und die erste Karte steht ausserhalb des Bildes.
	 * width:max-content sorgt dafuer, dass der rechte Innenabstand des
	 * Scrollbereichs auch am Ende der Liste erhalten bleibt.
	 */
	section.fx6_bewertungen .fx6_track {
		width: max-content;
		gap: 12px;
		transform: none;
		transition: none;
	}

	section.fx6_bewertungen .fx6_karte {
		flex: 0 0 296px;
		scroll-snap-align: start;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		min-height: min(300px, var(--fx-buehne-mittel));
		padding: 24px 22px;
		border: 1px solid var(--fx-line);
		border-top: 3px solid var(--fx-navy);
	}

	/* Mobil loest sich die Kopfzeile auf: Sterne und Leistung werden wieder
	   direkte Rasterkinder, die Leistung wandert in Zeile 4 unter den Namen. */
	section.fx6_bewertungen .fx6_karte_kopf { display: contents; }

	section.fx6_bewertungen .fx6_karte .fx6_sterne {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		font-size: var(--fx-fs-body);
	}

	section.fx6_bewertungen .fx6_zitat {
		grid-row: 2;
		margin-top: 18px;
	}

	section.fx6_bewertungen .fx6_fuss {
		grid-row: 3;
		gap: 6px;
		padding-top: 20px;
	}

	/* Mobil steht die Leistung als reine Versalzeile unter dem Namen. */
	section.fx6_bewertungen .fx6_leistung {
		grid-column: 1;
		grid-row: 4;
		justify-self: start;
		align-self: start;
		margin-top: 6px;
		padding: 0;
		border: 0;
		white-space: normal;
	}

	section.fx6_bewertungen .fx6_linie   { display: none; }
	section.fx6_bewertungen .fx6_trenner { display: inline; color: var(--fx-text); }

	section.fx6_bewertungen .fx6_name { font-size: var(--fx-fs-nav); }

	/* Blaettern uebernimmt mobil der Finger — die Steuerzeile entfaellt. */
	section.fx6_bewertungen .fx6_steuerung { display: none; }

	section.fx6_bewertungen .fx6_hinweis {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 14px 0 0;
		letter-spacing: var(--fx-ls-versal);
		color: var(--fx-text);
	}
}

/* Unter 360px ist eine 296px-Karte breiter als der Bildschirm. Sie darf ruhig
   ueber den Rand hinausragen, aber nicht so weit, dass ihr Ende unerreichbar
   wirkt — deshalb faellt sie hier auf die Bildschirmbreite zurueck. */
@media (max-width: 359px) {
	section.fx6_bewertungen .fx6_karte {
		flex-basis: calc(100vw - 2 * var(--fx-gutter));
		padding: 20px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	section.fx6_bewertungen .fx6_track,
	section.fx6_bewertungen .fx6_fortschritt_segment,
	section.fx6_bewertungen .fx6_badge,
	section.fx6_bewertungen .fx6_pfeil {
		transition: none;
	}
}