/* Google-Bewertungen: Kasten unter der Kontaktkarte (Überblendung) und Abschnitt „Bewertungen auf Google“. */

/* Graue Reihe, darüber die goldene, auf den Anteil der Note gekürzt (inc/bewertungen.php). */
.sterne,
.sterne__voll {
	display: inline-flex;
	gap: 2px;
}

/* max-content: auch in Flex-/Grid-Zellen nie breiter als die Sterne, sonst stimmt der goldene Anteil nicht */
.sterne {
	position: relative;
	width: max-content;
	vertical-align: middle;
}

.sterne__voll {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.stern {
	flex: none;
	width: 1em;
	height: 1em;
	fill: #d8d0c2;
}

.sterne__voll .stern {
	fill: var(--gold);
}

/* Kasten unter der Kontaktkarte */
.stimmen {
	margin-top: 22px;
	padding: 22px 26px 16px;
	border-radius: var(--rundung);
	background: var(--weiss);
	box-shadow: var(--schatten);
}

.stimmen__gesamt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0 0 12px;
	color: var(--text-leise);
	font-size: 0.9rem;
}

.stimmen__gesamt .sterne {
	font-size: 1.15rem;
}

.stimme {
	margin: 0;
}

.stimme + .stimme {
	margin-top: 18px;
}

.stimme blockquote,
.bewertung blockquote {
	margin: 0;
	quotes: "„" "“";
}

.stimme blockquote::before,
.bewertung blockquote::before {
	content: open-quote;
	color: var(--wein);
}

.stimme blockquote::after,
.bewertung blockquote::after {
	content: close-quote;
	color: var(--wein);
}

.stimme blockquote {
	margin-bottom: 8px;
	color: var(--anthrazit);
	font-size: 1.08rem;
	line-height: 1.5;
}

.stimme figcaption {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-leise);
	font-size: 0.9rem;
}

.stimmen--wechsel .stimmen__buehne {
	display: grid;
}

.stimmen--wechsel .stimme {
	grid-area: 1 / 1;
	align-self: center;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--weich), visibility 0s 0.9s;
}

.stimmen--wechsel .stimme.ist-aktiv {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s var(--weich), visibility 0s;
}

.stimmen__punkte {
	display: flex;
	gap: 2px;
	margin: 10px 0 0 -6px;
}

.stimmen__punkt {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle, #d8d0c2 0 4.5px, transparent 5px);
	cursor: pointer;
}

.stimmen__punkt[aria-current="true"] {
	background: radial-gradient(circle, var(--wein) 0 4.5px, transparent 5px);
}

.stimmen__hinweis {
	margin: 8px 0 0;
	color: var(--text-leise);
	font-size: 0.8rem;
	line-height: 1.45;
}

.stimmen__hinweis a,
.bewertungen__hinweis a {
	color: var(--wein);
	font-weight: 600;
}

/* Abschnitt „Bewertungen auf Google“: Gesamtnote und Pflichthinweis oben nebeneinander, darunter die Karten */
.bewertungen__kopf {
	display: grid;
	gap: 14px 48px;
	margin: 0 0 28px;
}

@media (min-width: 900px) {
	.bewertungen__kopf {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}
}

/* Note groß links, rechts daneben Sterne und darunter Anzahl/Stand – bleibt schmal, damit der Hinweis Platz hat */
.bewertungen__gesamt {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
	gap: 6px 16px;
	margin: 0;
}

.bewertungen__note {
	grid-row: span 2;
	color: var(--wein);
	font-family: var(--schrift-titel);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.bewertungen__skala {
	color: var(--text-leise);
	font-family: var(--schrift-text);
	font-size: 1rem;
	font-weight: 400;
}

.bewertungen__gesamt .sterne {
	font-size: 1.6rem;
}

.bewertungen__anzahl {
	color: var(--text-leise);
}

.bewertungen__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.bewertung {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 22px 24px;
	border-radius: var(--rundung);
	background: var(--weiss);
	box-shadow: var(--schatten);
}

.bewertung blockquote {
	flex: 1;
	font-size: 1.05rem;
	line-height: 1.55;
}

.bewertung figcaption {
	color: var(--text-leise);
	font-size: 0.9rem;
	font-weight: 600;
}

.bewertungen__hinweis {
	max-width: 62em;
	margin: 0;
	color: var(--text-leise);
	font-size: 0.88rem;
	line-height: 1.5;
}

.bewertung__ohne {
	flex: 1;
	margin: 0;
	color: var(--text-leise);
	font-style: italic;
}