/**
 * Google-Bewertungen (Loop Carousel, Startseite) – Figma 608:28495 "Kundenstimme".
 *
 * Nummerierte Pagination "1 2 3 4 5 6" statt Swipers runder Punkte.
 * Die Zahlen schreibt assets/js/bewertungen-pagination.js (1:1 von der
 * Immobilien-Seite), hier nur die Optik:
 *   Mada Medium 18 / 1.6, Laufweite 5.4 px, König-Sylt-Blau,
 *   inaktiv 40 % Deckkraft, 36 px unter dem Zitat.
 * Loop-Item: Vorlagen → Loop-Elemente → "Google-Bewertung (Loop)".
 */

.elementor-widget-loop-carousel .swiper-pagination {
	margin-top: 36px;
}

.elementor-widget-loop-carousel .swiper-pagination-bullet {
	/* !important: Elementor Pro bringt eigenes, recht spezifisches
	   Bullet-CSS mit (Größe, runder Hintergrund, Deckkraft). */
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 1 !important;
	font-family: var(--font-body, 'Mada', sans-serif) !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
	letter-spacing: 5.4px !important;
	color: rgba(35, 44, 60, 0.4) !important; /* König-Sylt-Blau, 40 % – inaktiv */
	margin: 0 0.1em !important;
	transition: color 0.2s ease;
}

.elementor-widget-loop-carousel .swiper-pagination-bullet:hover,
.elementor-widget-loop-carousel .swiper-pagination-bullet:focus-visible {
	color: var(--color-blue, #232c3c) !important;
}

.elementor-widget-loop-carousel .swiper-pagination-bullet.koenig-bewertung-bullet-active {
	color: var(--color-blue, #232c3c) !important; /* aktive Bewertung */
}