/*
 * WAC Reviews — vollstaendige Darstellung ohne JavaScript.
 *
 * Der Streifen im Slider-Layout scrollt per CSS scroll-snap. Das ersetzt die
 * Pfeile des alten Loaders, ohne dass ein Skript noetig waere, und funktioniert
 * im statischen Export genauso wie in WordPress.
 *
 * Farben: WAC-Tokens. #43BAFF wird nur auf dunklem Grund und nie fuer
 * Fliesstext eingesetzt — auf Weiss liegt der Kontrast bei 2,16:1 und faellt
 * durch. Fuer Text auf Hell steht #0C7AB8 (4,68:1).
 */

.wac-reviews {
	--wac-cyan: #43baff;
	--wac-violet: #7141b1;
	--wac-night: #201e39;
	--wac-star: #fbbc04;
	--wac-radius: 14px;
	--wac-gap: 20px;
	--wac-card-width: 300px;

	--wac-bg: transparent;
	--wac-card-bg: #2a2745;
	--wac-fg: #ffffff;
	--wac-muted: #c9c6e0;
	--wac-line: rgba(255, 255, 255, 0.14);
	--wac-link: var(--wac-cyan);

	box-sizing: border-box;
	background: var(--wac-bg);
	color: var(--wac-fg);
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.wac-reviews *,
.wac-reviews *::before,
.wac-reviews *::after {
	box-sizing: inherit;
}

.wac-reviews--dark {
	--wac-bg: var(--wac-night);
	padding: 40px 24px;
	border-radius: var(--wac-radius);
}

.wac-reviews--light {
	--wac-card-bg: #ffffff;
	--wac-fg: #1b1d21;
	--wac-muted: #6d6d6d;
	--wac-line: #e6e6ee;
	--wac-link: #0c7ab8;
}

/* Kopf ------------------------------------------------------------------ */

.wac-reviews__header {
	text-align: center;
	margin: 0 0 28px;
}

.wac-reviews__headline {
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin: 0 0 10px;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--wac-cyan), var(--wac-violet));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Faellt der Verlauf aus (alte Engines, erzwungene Farben), bleibt der Text
   in einer Farbe mit ausreichendem Kontrast lesbar. */
@supports not (background-clip: text) {
	.wac-reviews__headline {
		background: none;
		color: var(--wac-fg);
	}
}

@media (forced-colors: active) {
	.wac-reviews__headline {
		background: none;
		color: CanvasText;
	}
}

.wac-reviews__summary {
	margin: 8px 0 4px;
	color: var(--wac-muted);
}

.wac-reviews__summary strong {
	color: var(--wac-fg);
	font-weight: 700;
}

.wac-reviews__source {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wac-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wac-reviews__source-link {
	color: var(--wac-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

.wac-reviews__stars {
	display: flex;
	gap: 2px;
	margin: 0 0 12px;
	align-items: center;
}

.wac-reviews__header .wac-reviews__stars {
	justify-content: center;
	margin-bottom: 6px;
}

.wac-reviews__star {
	fill: var(--wac-line);
	flex: none;
}

.wac-reviews__star.is-on {
	fill: var(--wac-star);
}

.wac-reviews__stars--lg .wac-reviews__star {
	width: 24px;
	height: 24px;
}

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

/* Streifen -------------------------------------------------------------- */

.wac-reviews__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wac-gap);
	/* Bezugspunkt fuer die Vorlesezeilen (.wac-reviews__sr, absolut). Ohne
	   ihn lagen sie am naechsten positionierten Vorfahren AUSSERHALB des
	   Streifens, entkamen dessen overflow und zogen die Seite im Slider auf
	   3442 px Breite (gemessen 10.09.2026 bei 1440 px, zehn Karten). */
	position: relative;
}

.wac-reviews--slider .wac-reviews__track {
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--wac-card-width), 1fr);
	/* Gleich hoch wie im Raster: die Karte hat height:100%. */
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 4px;
	padding-bottom: 14px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.wac-reviews--light.wac-reviews--slider .wac-reviews__track {
	scrollbar-color: rgba(32, 30, 57, 0.3) transparent;
}

.wac-reviews--slider .wac-reviews__track::-webkit-scrollbar {
	height: 8px;
}

.wac-reviews--slider .wac-reviews__track::-webkit-scrollbar-thumb {
	background: var(--wac-line);
	border-radius: 4px;
}

.wac-reviews--slider .wac-reviews__item {
	scroll-snap-align: start;
}

/* Fokusring, weil der Streifen per Tastatur gescrollt wird. */
.wac-reviews__track:focus-visible {
	outline: 2px solid var(--wac-cyan);
	outline-offset: 4px;
	border-radius: 6px;
}

/* Im Raster gleich hohe Karten: die Zeile gibt ihre Hoehe jeder Zelle, die
   Karte fuellt sie (height:100%). Mit `start` wuchs jede Karte nur mit
   ihrem Text - drei Karten standen 338, 250 und 304 px hoch nebeneinander. */
.wac-reviews--grid .wac-reviews__track {
	grid-template-columns: repeat(auto-fit, minmax(var(--wac-card-width), 1fr));
	align-items: stretch;
}

.wac-reviews--grid.wac-reviews--cols-1 .wac-reviews__track { grid-template-columns: 1fr; }
.wac-reviews--grid.wac-reviews--cols-2 .wac-reviews__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wac-reviews--grid.wac-reviews--cols-3 .wac-reviews__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wac-reviews--grid.wac-reviews--cols-4 .wac-reviews__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wac-reviews--grid.wac-reviews--cols-5 .wac-reviews__track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wac-reviews--grid.wac-reviews--cols-6 .wac-reviews__track { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.wac-reviews--list .wac-reviews__track {
	grid-template-columns: 1fr;
	max-width: 760px;
	margin-inline: auto;
}

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

.wac-reviews__card {
	background: var(--wac-card-bg);
	border: 1px solid var(--wac-line);
	border-radius: var(--wac-radius);
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wac-reviews__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.wac-reviews__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--wac-line);
}

.wac-reviews__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: linear-gradient(135deg, var(--wac-violet), #4a2f7a);
}

.wac-reviews__meta {
	min-width: 0;
	flex: 1 1 auto;
}

.wac-reviews__name {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
	margin: 0;
	color: var(--wac-fg);
	/* Kein Abschneiden des Textes — nur der Name darf umbrechen. */
	overflow-wrap: anywhere;
}

.wac-reviews__date {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--wac-muted);
}

.wac-reviews__source-mark {
	flex: none;
	line-height: 0;
	opacity: 0.9;
}

/* Volltext. Ausdruecklich ohne Zeilenbegrenzung: Bewertungen werden nie
   gekuerzt, auch nicht optisch. */
.wac-reviews__text {
	color: var(--wac-fg);
	font-size: 0.9375rem;
	line-height: 1.7;
	overflow-wrap: break-word;
	hyphens: auto;
}

.wac-reviews--dark .wac-reviews__text {
	color: #eceaf7;
}

.wac-reviews__reply {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--wac-line);
}

.wac-reviews__reply-label {
	margin: 0 0 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wac-muted);
}

.wac-reviews__reply-text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wac-muted);
}

/* Schmale Anzeigen ------------------------------------------------------ */

@media (max-width: 768px) {
	.wac-reviews {
		--wac-card-width: 82vw;
		--wac-gap: 14px;
	}

	.wac-reviews--dark {
		padding: 28px 16px;
	}

	.wac-reviews--grid .wac-reviews__track {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wac-reviews--slider .wac-reviews__track {
		scroll-behavior: smooth;
	}
}

@media print {
	.wac-reviews--slider .wac-reviews__track {
		grid-auto-flow: row;
		overflow: visible;
	}

	.wac-reviews {
		color: #000;
	}
}