/*
 * [lsz_bewertungen] -- Bewertungskarten auf 938/939.
 *
 * Hex-Werte statt CSS-Variablen, wie beim Sprungmenue und der Auslastung: die
 * Karten sollen auch dort stimmen, wo die Seite noch keine --lsz-*-Tokens
 * setzt (die Startseite tut es nicht).
 *
 * Schriftfamilie bewusst nicht gesetzt -- sie erbt vom Theme, damit die Karten
 * einem Font-Wechsel der Seite folgen statt ihn zu ueberstimmen.
 *
 * Farben gegen Weiss geprueft: Text #1B2A3A = 13,9:1, Attribution #4E6377 =
 * 6,2:1, Sterne #8A5200 = 6,4:1. Alle AA, die ersten beiden AAA. Die Sterne
 * tragen keine Information allein -- der Wert steht als Text daneben
 * (.lsz-bew-nur-sr), die Glyphen selbst sind aria-hidden.
 *
 * Divi-Reset: figure, blockquote und p bekommen von Divi eigene Abstaende und
 * bei blockquote eine linke Randlinie. Beides wird hier gezielt neu gesetzt,
 * ohne !important -- der bekannte Static-CSS-Cascade-Bug dieses Projekts trat
 * bisher nur bei den nativen et_pb_button-Modulen auf, nicht bei eigenem
 * Markup in einem et_pb_code-Modul (dort gewinnt die eigene Datei).
 */

.lsz-bew {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
	color: #1B2A3A;
	line-height: 1.55;
}

.lsz-bew-karte {
	margin: 0;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid #DCE5ED;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(20, 49, 79, .05), 0 10px 30px -14px rgba(20, 49, 79, .20);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Eigene Herkunfts-Regel als Author-CSS schlaegt IMMER die UA-Vorgabe fuer
 * [hidden], unabhaengig von der Spezifitaet (Cascade-Reihenfolge: normales
 * Author-CSS vor normalem UA-CSS). Ohne diese Zeile wuerde .lsz-bew-kartes
 * eigenes display:flex das [hidden]-Attribut derselben Karte wirkungslos
 * machen -- "Weitere anzeigen" zeigt sonst von Anfang an alles.
 */
.lsz-bew-karte[hidden] {
	display: none;
}

.lsz-bew-karte blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 1rem;
}

.lsz-bew-karte blockquote p {
	margin: 0 0 .7em;
}

.lsz-bew-karte blockquote p:last-child {
	margin-bottom: 0;
}

.lsz-bew-sterne {
	margin: 0;
	color: #8A5200;
	font-size: 1.15rem;
	letter-spacing: .09em;
	line-height: 1;
}

.lsz-bew-wer {
	margin: 0;
	margin-top: auto;
	padding-top: 4px;
	color: #4E6377;
	font-size: .9rem;
}

/*
 * Lange Rezensionen gekuerzt, per Klick aufklappbar (Karen-Feedback
 * 2026-09-17). line-clamp reicht -- kein Balken-Overlay noetig, weil der
 * Text danach ohnehin per JS komplett eingeblendet wird, kein Ausblenden
 * eines Teils "unter" einem Verlauf.
 */
.lsz-bew-karte blockquote.lsz-bew-gekuerzt {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lsz-bew-mehr {
	align-self: flex-start;
	margin: -4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #14314F;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.lsz-bew-mehr:hover,
.lsz-bew-mehr:focus-visible {
	color: #1F4E79;
}

.lsz-bew-mehr:focus-visible {
	outline: 2px solid #1F4E79;
	outline-offset: 2px;
}

/*
 * Die Hinweiszeile sitzt unter dem Raster, nicht in einer Karte -- sie gilt
 * fuer alle Bewertungen zusammen (§ 5b Abs. 3 UWG). Seit der "Weitere
 * anzeigen"-Funktion (2026-09-17) liegt sie als Geschwister nach .lsz-bew,
 * nicht mehr als Grid-Kind darin -- kein grid-column noetig.
 */
.lsz-bew-hinweis {
	margin: 6px 0 0;
	color: #4E6377;
	font-size: .85rem;
	line-height: 1.5;
	max-width: 820px;
}

/*
 * "Weitere anzeigen": alle Karten stehen von Anfang an im Markup (SEO, kein
 * AJAX-Nachladen), ueberzaehlige tragen nur [hidden]. Der Knopf blendet sie
 * per JS ein und verschwindet danach selbst (bewertungen.js).
 */
.lsz-bew-weitere {
	display: block;
	margin: 18px auto 0;
	padding: 12px 28px;
	border: 1px solid #1F4E79;
	border-radius: 8px;
	background: #fff;
	color: #1F4E79;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
}

.lsz-bew-weitere:hover,
.lsz-bew-weitere:focus-visible {
	background: #1F4E79;
	color: #fff;
}

.lsz-bew-weitere:focus-visible {
	outline: 2px solid #14314F;
	outline-offset: 2px;
}

.lsz-bew-nur-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.lsz-bew {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.lsz-bew-karte {
		padding: 20px 22px;
	}
}