/* ProvenExpert Reviews – Slider im Google-Reviews-Stil (ohne Profilbild).
   Linksbuendige Karten: Kopf (Name + Datum) -> Sterne -> Text -> Weiterlesen.
   Farben als CSS-Variablen zum einfachen Anpassen. */
/* Variablen am aeusseren Wrapper, damit sie SOWOHL der Slider ALS AUCH die
   ausserhalb liegenden Pfeile/Pagination erben. */
.per-slider-outer {
	--per-star: #f5b301;        /* Sterne (Gold/Gelb) */
	--per-name: #363b40;        /* Name (Text/Sekundaer, kraeftig) */
	--per-link: #a51916;        /* Weiterlesen-Link (Markenrot) */
	--per-card-bg: #f7f7f7;     /* Kartenhintergrund (hell, leicht grau) –
	                               bei Aenderung auch den rgba-Wert im
	                               Fade-Verlauf (.is-clamped ...::after) anpassen */
	--per-text: #363b40;        /* Bewertungstext */
	--per-muted: #8a8a8a;       /* Datum / dezente Texte */
	--per-arrow: #363b40;       /* Pfeile */
	--per-dot: #dadada;         /* Pagination inaktiv */
	--per-dot-active: #a51916;  /* Pagination aktiv (Markenrot) */
	--per-radius: 12px;
	--per-clamp-lines: 4;       /* max. Zeilen vor "Weiterlesen" */

	/* Swiper-eigene Navigationsgroesse (steuert Pfeil-Icon-Groesse). */
	--swiper-navigation-size: 24px;

	position: relative;
	padding: 8px 48px 0;        /* seitlich Platz fuer Pfeile */
	box-sizing: border-box;
}

.per-slider-outer,
.per-slider-outer * {
	box-sizing: border-box;
}

.per-slider {
	position: relative;
	box-sizing: border-box;
}

/* Alle Karten gleich hoch: Das Swiper-Bundle setzt .swiper-slide auf
   height:100% – dadurch greift align-items:stretch nicht. Wir setzen die
   Slide-Hoehe auf auto, dann streckt der Flex-Wrapper alle Slides auf die
   Hoehe der hoechsten. Die Karte (__inner) fuellt die Slide via height:100%. */
.per-slider .swiper-wrapper {
	align-items: stretch;
	padding-bottom: 30px;
}

.per-slider .swiper-slide {
	height: auto;
}

.per-review {
	height: auto;
	display: flex;
}

.per-review__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	padding: 22px 24px;
	text-align: left;
	background: var(--per-card-bg);
	border-radius: var(--per-radius);
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
}

/* Text und Kopf behalten ihre natuerliche Hoehe (nicht strecken),
   damit die Zeilenmessung fuer "Weiterlesen" korrekt bleibt. */
.per-review__head,
.per-review__stars,
.per-review__quote {
	flex: 0 0 auto;
}

/* --- Kopf: Name/Datum links, ProvenExpert-Logo rechts --- */
.per-review__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.per-review__meta {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.per-review__logo {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	display: block;
}

.per-review__author {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: var(--per-name);
}

.per-review__date {
	font-size: 13px;
	line-height: 2.2;
	color: var(--per-muted);
}

/* --- Sterne --- */
.per-review__stars {
	display: flex;
	gap: 2px;
	line-height: 1;
	margin-bottom: 5px;   /* Abstand Kopf -> Sterne */
}

.per-star {
	font-size: 18px;
	color: #d6d6d6;
}

.per-star.is-full {
	color: var(--per-star);
}

/* Halber Stern via Verlauf. */
.per-star.is-half {
	background: linear-gradient( 90deg, var(--per-star) 50%, #d6d6d6 50% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- Text --- */
.per-review__quote {
	position: relative;
	width: 100%;
	margin-top: 8px;   /* Sterne -> Bewertung: ca. 1/3 weniger als zuvor */
}

.per-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: 15px;
	line-height: 1.55;
	color: var(--per-text);
}

.per-review__text::before,
.per-review__text::after {
	content: none;
}

/* Gekuerzter Zustand: auf feste Zeilenzahl begrenzen. */
.per-review__quote.is-clamped .per-review__text {
	display: -webkit-box;
	-webkit-line-clamp: var(--per-clamp-lines);
	line-clamp: var(--per-clamp-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
}

/* Sanfter Verlauf am unteren Textrand – nur im gekuerzten Zustand.
   Faded in die Kartenfarbe, damit man erkennt: da kommt noch Text. */
.per-review__quote.is-clamped .per-review__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.2em;
	background: linear-gradient( to bottom, rgba( 247, 247, 247, 0 ), var(--per-card-bg) );
	pointer-events: none;
}

/* "Weiterlesen" / "Weniger" – schlichter Textlink in Markenrot. */
.per-review__more {
	display: inline-block;
	margin-top: 8px;
	font-size: 15px !important;
	color: var(--per-link);
	text-decoration: none;
	cursor: pointer;
}

.per-review__more:hover,
.per-review__more:focus {
	text-decoration: underline;
}

/* --- Navigation: Pfeile AUSSERHALB des Sliders, am aeusseren Wrapper --- */
/* Absolut relativ zum .per-slider-outer positioniert, ganz am Rand. Da sie
   nicht mehr im overflow:hidden-Slider liegen, werden sie nicht abgeschnitten.
   top:50% zentriert vertikal ueber die gesamte Wrapper-Hoehe. */
.per-slider-outer .swiper-button-prev,
.per-slider-outer .swiper-button-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	top: 50%;
	margin-top: 0;
	transform: translateY( -50% );
	color: var(--per-arrow);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	z-index: 10;
}

/* Pfeile am aeusseren Rand des Wrappers (im seitlichen Padding). */
.per-slider-outer .swiper-button-prev { left: 6px; right: auto; }
.per-slider-outer .swiper-button-next { right: 6px; left: auto; }

/* Pfeil-Symbole: Da die Buttons ausserhalb von .per-slider liegen, greift die
   Icon-Regel des (auf .per-slider gescopten) Bundles nicht. Wir definieren die
   Symbole hier selbst ueber die global verfuegbare Schrift "swiper-icons". */
.per-slider-outer .swiper-button-prev::after,
.per-slider-outer .swiper-button-next::after {
	font-family: swiper-icons;
	font-size: 20px;
	font-weight: 400;
	text-transform: none;
	line-height: 1;
	letter-spacing: 0;
}

.per-slider-outer .swiper-button-prev::after {
	content: 'prev';
}

.per-slider-outer .swiper-button-next::after {
	content: 'next';
}

.per-slider-outer .swiper-button-disabled {
	opacity: 0.3;
}

/* --- Pagination-Dots --- */
/* Liegt im aeusseren Wrapper unter dem Slider (normaler Fluss), zentriert.
   Dadurch nie ueber den Karten und unabhaengig vom overflow des Sliders. */
.per-slider-outer .swiper-pagination {
	position: static;
	text-align: center;
	line-height: 1;
}

.per-slider-outer .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: var(--per-dot);
	opacity: 1;
	margin: 0 5px !important;
}

.per-slider-outer .swiper-pagination-bullet-active {
	background: var(--per-dot-active);
}