/* =========================================================
 * BEWERTUNGEN — Google-Bewertungen auf der Startseite (Himmelblau)
 * Plugin „Rich Showcase for Google Reviews“, eingebunden über [tgt_bewertungen]
 * (inc/bewertungen.php). Das Plugin steuert fast alles über CSS-Variablen und
 * setzt sie als Inline-Stil; darum stehen sie hier mit !important.
 *
 * Ruhige Gestaltung: helle Karten mit feiner Linie statt Schatten, Initialen
 * in der CI-Scheibe, Sterne in gedämpftem Gold, schmale Pfeile ohne Rahmenwirkung.
 * ========================================================= */

.tgt-bewertungen {
	--tgt-bw-star: #E4A92E;
	max-width: 1120px;
	margin-inline: auto;
}

/* Die Sektion steht direkt vor dem Termin-Aufruf, der selbst oben Abstand hat:
   unten nur wenig Polster, sonst addieren sich beide zu einer Lücke. */
.tgt-bewertungen-sec {
	padding-bottom: clamp(8px, 2vw, 20px);
}

/* ---------- Variablen des Plugins auf die CI ---------- */

.tgt-bewertungen .wp-gr {
	--color: var(--tgt-bw-star) !important;
	--star-color: var(--tgt-bw-star) !important;
	--card-star-color: var(--tgt-bw-star) !important;
	--card-star-size: 17px !important;

	--card-bg: #fff !important;
	--card-tail: #fff !important;
	--card-br: 1px solid !important;
	--card-br-color: var(--tgt-line) !important;
	--card-radius: var(--tgt-radius-xl) !important;
	--card-shadow: none !important;
	--card-padding: clamp(20px, 3vw, 26px) !important;
	--card-gap: 18px !important;
	--card-img-size: 40px !important;

	--name-color: var(--tgt-slate) !important;
	--card-color: var(--tgt-slate) !important;
	--time-color: var(--tgt-slate-soft) !important;
	--card-text-size: 15.5px !important;
	--card-line-height: 1.65 !important;
	--card-time-size: 13px !important;
	--card-text-lines: 7 !important;

	--head-based-color: var(--tgt-slate-soft) !important;
	--powered-color: var(--tgt-slate-soft) !important;

	--slider-btn-bg: #fff !important;
	--slider-btn-bc: var(--tgt-line-strong) !important;
	--slider-btn-color: var(--tgt-steel) !important;
	--slider-btn-shadow: none !important;
	--slider-btn-size: 14px !important;
	--slider-dot-color: var(--tgt-line-strong) !important;
	--slider-act-dot-color: var(--tgt-steel) !important;

	color: var(--tgt-slate);
	font-family: var(--tgt-font);
}

/* ---------- Kopf: Note, Sterne, Quelle in einer ruhigen Zeile ---------- */

.tgt-bewertungen .wp-gr .grw-header.rpi-flx {
	justify-content: center !important;
	padding: 0 0 clamp(20px, 3vw, 28px) !important;
}

.tgt-bewertungen .wp-gr .grw-header.rpi-flx > .grw-header-inner {
	flex: 0 1 auto !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.tgt-bewertungen .wp-gr .grw-header-inner > .rpi-flx {
	flex-flow: row wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px 16px !important;
	overflow: visible !important;
	min-width: 0 !important;
}

/* Name der Praxis steht schon in der Überschrift der Sektion */
.tgt-bewertungen .wp-gr .grw-header .wp-google-name {
	display: none !important;
}

.tgt-bewertungen .wp-gr .grw-header .rpi-stars {
	--star-size: 20px;
	font-family: var(--tgt-font-display) !important;
	font-weight: var(--tgt-fw-display) !important;
	font-size: 26px !important;
	color: var(--tgt-slate) !important;
	align-self: center !important;
	padding-right: calc(var(--stars-w) + 12px) !important;
}

.tgt-bewertungen .wp-gr .wp-google-based,
.tgt-bewertungen .wp-gr .wp-google-powered {
	font-size: 14px !important;
	color: var(--tgt-slate-soft) !important;
}

/* ---------- Karten ---------- */

/* Drei Karten am Desktop (das Plugin zeigt von Haus aus vier bis sechs: zu unruhig),
   mobil eine Karte mit Ansatz der nächsten, damit das Wischen erkennbar bleibt. */
.tgt-bewertungen .wp-gr .grw-row-m .grw-review,
.tgt-bewertungen .wp-gr .grw-row-l .grw-review,
.tgt-bewertungen .wp-gr .grw-row-xl .grw-review {
	--col: 3 !important;
}

.tgt-bewertungen .wp-gr .grw-row-xs .grw-review {
	--col: 1.12 !important;
}

.tgt-bewertungen .wp-gr .grw-row {
	margin-bottom: 40px;
	--rpi-slider-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.tgt-bewertungen .wp-gr .grw-row {
		--rpi-slider-behavior: auto;
	}
}

.tgt-bewertungen .wp-gr .rpi-card > .grw-review-inner {
	gap: 12px;
	transition: border-color var(--tgt-dur-base) var(--tgt-ease-out),
	            background-color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-bewertungen .wp-gr .rpi-card > .grw-review-inner:hover {
	border-color: var(--tgt-line-strong) !important;
	background: var(--tgt-paper) !important;
}

/* Name: Rubik 500 ist die schwerste geladene Stufe (700 würde künstlich fett) */
.tgt-bewertungen .wp-gr .rpi-card .wp-google-name {
	font-weight: var(--tgt-fw-medium) !important;
	font-size: 15.5px !important;
	color: var(--tgt-slate) !important;
}

.tgt-bewertungen .wp-gr .rpi-card .wp-google-time {
	font-size: 13px !important;
}

/* Initialen-Scheibe wie die Icon-Scheiben der CI */
.tgt-bewertungen .wp-gr .grw-img-char {
	background: var(--tgt-steel-soft) !important;
	color: var(--tgt-teal-deep) !important;
	box-shadow: none !important;
	font-family: var(--tgt-font-display) !important;
	font-weight: var(--tgt-fw-display) !important;
}

/* Google-Zeichen in der Kartenecke zurücknehmen; die Quelle steht im Kopf */
.tgt-bewertungen .wp-gr .rpi-card .rpi-logo::before {
	filter: grayscale(1);
	opacity: .45;
}

.tgt-bewertungen .wp-gr .rpi-card .grw-more,
.tgt-bewertungen .wp-gr .rpi-card .wp-more-toggle {
	color: var(--tgt-steel) !important;
	font-weight: var(--tgt-fw-medium);
}

/* ---------- Pfeile ---------- */

.tgt-bewertungen .wp-gr .rpi-ltgt {
	transition: border-color var(--tgt-dur-base) var(--tgt-ease-out),
	            background-color var(--tgt-dur-base) var(--tgt-ease-out) !important;
}

.tgt-bewertungen .wp-gr .rpi-ltgt:hover {
	border-color: var(--tgt-steel) !important;
	background-color: var(--tgt-steel-tint) !important;
}

.tgt-bewertungen .wp-gr .rpi-ltgt:focus-visible,
.tgt-bewertungen .wp-gr .rpi-dot:focus-visible {
	outline: 2px solid var(--tgt-steel);
	outline-offset: 2px;
}

/* ---------- Knopf „Bewertung schreiben“ (Seite „Vielen Dank“) ---------- */

.tgt-bewertungen__schreiben {
	justify-content: flex-start;
	margin: 0 0 clamp(28px, 4vw, 40px);
}

/* ---------- Verweis auf alle Bewertungen ---------- */

.tgt-bewertungen__alle {
	margin: 0;
	text-align: center;
	font-size: var(--tgt-fs-body-sm);
}

.tgt-bewertungen__alle a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tgt-steel);
	font-weight: var(--tgt-fw-medium);
	text-decoration: none;
	border-bottom: 1px solid var(--tgt-line-strong);
	padding-bottom: 2px;
	transition: border-color var(--tgt-dur-base) var(--tgt-ease-out),
	            color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-bewertungen__alle a::after {
	content: "\2192";
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-bewertungen__alle a:hover {
	color: var(--tgt-steel-deep);
	border-bottom-color: var(--tgt-steel);
}

.tgt-bewertungen__alle a:hover::after {
	transform: translateX(3px);
}

.tgt-bewertungen__alle a:focus-visible {
	outline: 2px solid var(--tgt-steel);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ---------- Handy: wischen statt Pfeile ---------- */

@media (max-width: 719px) {
	.tgt-bewertungen .wp-gr {
		--slider-offset: 0px !important;
	}

	.tgt-bewertungen .wp-gr .rpi-ltgt {
		display: none !important;
	}

	/* Das Plugin schneidet an den Pfeilen Kreise aus den Karten; ohne Pfeile entfällt das */
	.tgt-bewertungen .wp-gr .rpi-slides-bite {
		-webkit-mask: none !important;
		mask: none !important;
	}
}