/*
 * Google Reviews Widget – Slider-Stil „Light“
 * Alle Regeln mit .grw-wrap-Präfix, damit Theme-Styles (z. B. Salient) nichts überschreiben.
 * Anpassbar über die Variablen unten (Design → Customizer → Zusätzliches CSS).
 */
.grw-wrap {
	--grw-star: #f6bb06;
	--grw-star-empty: #dedede;
	--grw-verified: #4a8cf7;
	--grw-card-bg: #f4f4f4;
	--grw-card-hover: #fff;
	--grw-text: #1f1f1f;
	--grw-muted: #777;
	--grw-btn: #1a6cf5;
	--grw-radius: 16px;
	--grw-gap: 20px;
	--grw-per-view: 4;
	--grw-font: 15px;
	--grw-avatar: 46px;
	--grw-logo: 60px;
	--grw-star-size: 19px;
	--grw-lines: 4;
	--grw-ease: cubic-bezier(.22, .8, .3, 1);
	color: var(--grw-text);
	font-size: var(--grw-font);
	line-height: 1.5;
	width: 100%;
}
.grw-wrap *, .grw-wrap *::before, .grw-wrap *::after { box-sizing: border-box; }

.grw-wrap .grw-location {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin: 0 0 36px;
}
.grw-wrap .grw-location.grw-no-header,
.grw-wrap .grw-location.grw-layout-top,
.grw-wrap .grw-location.grw-stacked { grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Kopf oben: Logo/Text links, Button rechts daneben, wenn Platz ist */
.grw-wrap .grw-layout-top .grw-head,
.grw-wrap .grw-stacked .grw-head { align-items: center; }

/* ---------- Kopfbereich ---------- */
.grw-wrap .grw-head { display: flex; gap: 12px; align-items: flex-start; }
.grw-wrap .grw-head-logo {
	flex: 0 0 var(--grw-logo) !important;
	width: var(--grw-logo) !important; height: var(--grw-logo) !important;
	max-width: none !important; margin: 0 !important;
	border-radius: 50%; object-fit: cover; background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	transition: transform .4s var(--grw-ease);
}
.grw-wrap .grw-head:hover .grw-head-logo { transform: rotate(-8deg) scale(1.05); }
.grw-wrap .grw-head-body { min-width: 0; }
.grw-wrap .grw-head-name { font-weight: 700; font-size: 1.05em; line-height: 1.35; margin: 0 0 6px; color: var(--grw-text); }
.grw-wrap .grw-head-rating { display: flex; align-items: center; gap: 6px; line-height: 1; }
.grw-wrap .grw-head-score { font-weight: 700; font-size: 1.1em; }
.grw-wrap .grw-powered { color: var(--grw-muted); margin: 6px 0 12px; font-size: .9em; line-height: 1.4; }
.grw-wrap .grw-cta {
	display: inline-block; background: var(--grw-btn); color: #fff !important;
	padding: 9px 18px; border-radius: 999px; text-decoration: none !important;
	font-size: .92em; font-weight: 600; line-height: 1.2; white-space: nowrap !important;
	box-shadow: 0 2px 6px rgba(26,108,245,.25);
	transition: transform .25s var(--grw-ease), box-shadow .25s var(--grw-ease);
}
.grw-wrap .grw-cta:hover, .grw-wrap .grw-cta:focus-visible {
	transform: translateY(-2px); box-shadow: 0 8px 18px rgba(26,108,245,.35);
}

/* ---------- Sterne ---------- */
.grw-wrap .grw-stars { display: inline-flex; gap: 1px; line-height: 1; }
.grw-wrap .grw-star {
	--fill: 100%;
	width: var(--grw-star-size); height: var(--grw-star-size); display: inline-block; flex: 0 0 auto;
	background: linear-gradient(90deg, var(--grw-star) var(--fill), var(--grw-star-empty) var(--fill));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17.3 5.7 21.2l1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17.3 5.7 21.2l1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .35s var(--grw-ease);
}

/* ---------- Karussell ---------- */
.grw-wrap .grw-carousel { position: relative; min-width: 0; padding: 0 24px; }
.grw-wrap .grw-track {
	display: flex !important; flex-wrap: nowrap !important; align-items: stretch;
	gap: var(--grw-gap);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; outline: none;
	/* Platz, damit Hover-Schatten und Anheben nicht abgeschnitten werden */
	/* Raum für Anheben + Schatten; seitlich kleiner als der Kartenabstand,
	   damit keine Nachbarkarte hervorschaut */
	margin: -14px -14px -32px; padding: 14px 14px 32px;
	scroll-padding: 0 14px;
}
.grw-wrap .grw-track::-webkit-scrollbar { display: none; }
.grw-wrap .grw-carousel:not(.grw-static) .grw-track { cursor: grab; }
.grw-wrap .grw-dragging .grw-track { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.grw-wrap .grw-dragging .grw-card { transition: none; }

/* ---------- Karte ---------- */
.grw-wrap .grw-card {
	flex: 0 0 calc((100% - (var(--grw-per-view) - 1) * var(--grw-gap)) / var(--grw-per-view)) !important;
	width: calc((100% - (var(--grw-per-view) - 1) * var(--grw-gap)) / var(--grw-per-view)) !important;
	max-width: none !important; min-width: 0 !important; margin: 0 !important;
	scroll-snap-align: start;
	position: relative;
	background: var(--grw-card-bg);
	border-radius: var(--grw-radius);
	padding: 22px 22px 20px;
	display: flex; flex-direction: column; gap: 12px;
	box-shadow: 0 0 0 1px transparent;
	transition:
		transform .4s var(--grw-ease),
		box-shadow .4s var(--grw-ease),
		background-color .3s ease;
	will-change: transform;
}
.grw-wrap .grw-card:hover,
.grw-wrap .grw-card:focus-within {
	transform: translateY(-4px);
	background: var(--grw-card-hover);
	box-shadow:
		0 12px 24px -12px rgba(0,0,0,.22),
		0 3px 8px rgba(0,0,0,.06),
		0 0 0 1px rgba(0,0,0,.04);
}

.grw-wrap .grw-card-head { display: flex; gap: 12px; align-items: center; position: relative; margin: 0; padding: 0; }
.grw-wrap .grw-avatar {
	flex: 0 0 var(--grw-avatar) !important;
	width: var(--grw-avatar) !important; height: var(--grw-avatar) !important;
	max-width: none !important; margin: 0 !important;
	border-radius: 50%; object-fit: cover;
	transition: transform .4s var(--grw-ease), box-shadow .4s var(--grw-ease);
}
.grw-wrap .grw-card:hover .grw-avatar {
	transform: scale(1.08);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(74,140,247,.35);
}
.grw-wrap .grw-initial {
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-size: calc(var(--grw-avatar) * .44) !important; line-height: 1 !important;
	font-weight: 500; text-transform: uppercase;
}
.grw-wrap .grw-card-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.grw-wrap .grw-author {
	color: var(--grw-text) !important; font-weight: 700; font-size: 1.05em; text-decoration: none !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .35s var(--grw-ease);
}
.grw-wrap a.grw-author:hover { background-size: 100% 1px; }
.grw-wrap .grw-date { color: var(--grw-muted); font-size: .9em; margin-top: 2px; }


.grw-wrap .grw-rating-row { display: flex; align-items: center; gap: 6px; }
.grw-wrap .grw-card:hover .grw-star { transform: scale(1.12); }
.grw-wrap .grw-card:hover .grw-star:nth-child(2) { transition-delay: .04s; }
.grw-wrap .grw-card:hover .grw-star:nth-child(3) { transition-delay: .08s; }
.grw-wrap .grw-card:hover .grw-star:nth-child(4) { transition-delay: .12s; }
.grw-wrap .grw-card:hover .grw-star:nth-child(5) { transition-delay: .16s; }
.grw-wrap .grw-verified { display: inline-flex; width: 18px; height: 18px; color: var(--grw-verified); }
.grw-wrap .grw-verified svg { width: 100%; height: 100%; display: block; }

/* Text: auf 4 Zeilen gekürzt, „Weiterlesen“ klappt aus */
.grw-wrap .grw-text {
	margin: 0; font-size: 1em; line-height: 1.55; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: var(--grw-lines); line-clamp: var(--grw-lines);
	overflow: hidden;
}
.grw-wrap .grw-card.grw-expanded .grw-text {
	display: block !important; -webkit-line-clamp: unset !important; line-clamp: none !important;
	overflow: visible !important; max-height: none !important;
}
.grw-wrap .grw-more {
	display: inline-block; cursor: pointer; align-self: flex-start; user-select: none;
	background: none; border: 0; padding: 0; text-decoration: none;
	color: var(--grw-muted); font-size: .92em; line-height: 1.4; margin-top: auto;
	transition: color .2s;
}
.grw-wrap .grw-more[hidden] { display: none; }
.grw-wrap .grw-more:hover, .grw-wrap .grw-more:focus-visible { color: var(--grw-text); text-decoration: underline; }

/* ---------- Pfeile ---------- */
.grw-wrap .grw-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 40px !important; height: 40px !important; min-width: 0; padding: 0 !important; margin: 0;
	border-radius: 50% !important; border: 1px solid #e4e4e4 !important;
	background: #fff !important; color: #333 !important;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	transition: transform .25s var(--grw-ease), box-shadow .25s, opacity .2s, color .2s;
}
.grw-wrap .grw-nav svg { display: block; transition: transform .25s var(--grw-ease); }
.grw-wrap .grw-nav:hover:not([disabled]), .grw-wrap .grw-nav:focus-visible {
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.grw-wrap .grw-prev:hover:not([disabled]) svg { transform: translateX(-2px); }
.grw-wrap .grw-next:hover:not([disabled]) svg { transform: translateX(2px); }
.grw-wrap .grw-nav[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.grw-wrap .grw-prev { left: 0; }
.grw-wrap .grw-next { right: 0; }
.grw-wrap .grw-carousel.grw-static .grw-nav { display: none; }
.grw-wrap .grw-carousel.grw-static { padding: 0; }

/* ---------- Einblenden beim Scrollen ---------- */
.grw-wrap.grw-js .grw-card { opacity: 0; transform: translateY(18px); }
.grw-wrap.grw-js .grw-inview .grw-card {
	opacity: 1; transform: none;
	transition:
		opacity .6s ease calc(var(--grw-i, 0) * 80ms),
		transform .6s var(--grw-ease) calc(var(--grw-i, 0) * 80ms),
		box-shadow .4s var(--grw-ease), background-color .3s ease;
}
.grw-wrap.grw-js .grw-inview .grw-card:hover,
.grw-wrap.grw-js .grw-inview .grw-card:focus-within {
	transform: translateY(-4px); transition-delay: 0s;
}

/* ---------- Responsive ---------- */
/* Fallback ohne JavaScript – mit JS wird nach Breite des Containers (Spalte) berechnet */
@media (max-width: 1400px) { .grw-wrap { --grw-per-view: 3; } }
@media (max-width: 1100px) { .grw-wrap { --grw-per-view: 2; } }
@media (max-width: 860px) {
	.grw-wrap .grw-location { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* Schmale Container: Pfeile näher an den Rand */
.grw-wrap .grw-narrow .grw-carousel { padding: 0 16px; }
.grw-wrap .grw-narrow .grw-nav { width: 34px !important; height: 34px !important; }
@media (max-width: 600px) {
	.grw-wrap { --grw-per-view: 1; --grw-font: 14px; }
	.grw-wrap .grw-carousel { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.grw-wrap *, .grw-wrap *::before, .grw-wrap *::after { transition: none !important; animation: none !important; }
	.grw-wrap.grw-js .grw-card { opacity: 1; transform: none; }
}