/* Google-Bewertungen, lokal ausgeliefert.

   Frueher hat ein Skript von TrustIndex diesen Block gezeichnet. Es
   hat die Bewertungen allerdings nicht nachgeladen, sondern nur das
   HTML gerendert, das ohnehin schon in der Seite stand -- aktuell
   gehalten hat es das WordPress-Plugin, und das gibt es hier nicht
   mehr. Der externe Aufruf kostete also eine Einwilligung fuer externe
   Medien, ohne dafuer etwas zu liefern; wer sie nicht erteilte, sah
   gar nichts, und Suchmaschinen sahen ebenfalls nichts, weil die Texte
   in einem template-Element lagen.

   Jetzt steht der Inhalt direkt im Markup: sichtbar fuer jeden
   Besucher, auffindbar fuer Suchmaschinen, ohne Verbindung nach
   aussen. Gepflegt wird er ueber tools/bewertungen.json; das Markup
   erzeugt tools/bewertungen.py.

   Das Kartenbild folgt der Vorlage: weisse Karte mit feinem Rahmen und
   runden Ecken, oben der Name und rechts davon das Google-Symbol,
   darunter Sterne und Text. Die Sterne kommen als Hintergrundbild aus
   einer Data-URI weiter unten, nicht als wiederholtes SVG im Markup --
   das haelt die Seiten klein, denn der Block steht auf 14 Seiten. */

.ph-bewertungen {
	margin: 0 auto;
	max-width: 1100px;
}

/* Die Ueberschrift bringt ihre Schrift und Groesse aus Avadas
   Titel-Markup mit; hier steht nur der Abstand zu den Karten. */
.ph-bewertungen__titel {
	margin-bottom: 28px;
}

/* Die Karten teilen sich den Platz selbst auf: drei nebeneinander,
   wenn es reicht, sonst zwei, sonst eine. Ohne feste Haltepunkte,
   weil der Block in verschieden breiten Spalten steht.

   align-items:start laesst jede Karte so hoch werden, wie ihr Text
   es braucht. Im eingeklappten Zustand sind alle gleich hoch, weil
   alle auf dieselbe Zeilenzahl gekuerzt sind; ausgeklappt darf die
   einzelne Karte wachsen, ohne die Nachbarn mitzuziehen.

   Das min() in der Mindestbreite ist noetig, weil die Spalte sonst
   ihre 280px auch dann behaelt, wenn der Platz daneben schmaler ist
   -- auf kleinen Telefonen ragte die Karte damit ueber den Rand
   hinaus. So schrumpft sie stattdessen mit. */
.ph-bewertungen__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	align-items: start;
	gap: 20px;
}

.ph-bewertung {
	margin: 0;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Name links, Google-Symbol rechts. figcaption traegt beides, damit
   fuer Vorlesesoftware klar bleibt, von wem das Zitat stammt und wo
   es steht. */
.ph-bewertung__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ph-bewertung__name {
	font-weight: 600;
	color: var(--awb-color8);
}

.ph-bewertung__quelle {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Avada gestaltet jedes blockquote der Website: kursiv, mit gruenem
   Balken links, eigenem Hintergrund und eigenen Abstaenden. Die Regel
   dort lautet ".fusion-body blockquote" und ist damit spezifischer als
   eine einzelne Klasse -- deshalb steht hier die Klasse zweimal im
   Selektor, sonst greift nichts davon. Auf der Karte soll der Text
   schlicht stehen, das Zitat ist durch die Karte schon abgegrenzt. */
.ph-bewertungen .ph-bewertung__text {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	font-size: 1em;
}

/* Gekuerzte Darstellung.

   Die Bewertungen sind unterschiedlich lang; ungekuerzt wuerde der
   Block die halbe Seite fuellen. Das frueher hier eingesetzte Widget
   hat deshalb ebenfalls gekuerzt und "Weiterlesen" angeboten.

   line-clamp setzt die Auslassungspunkte selbst ans Ende der letzten
   sichtbaren Zeile. Die Eigenschaft braucht das alte -webkit-box-
   Layout; das ist kein Versehen, sondern die einzige Schreibweise, die
   alle Browser verstehen.

   Das -webkit-box zaehlt nur Zeilen eines zusammenhaengenden
   Textflusses. Deshalb steht der Bewertungstext ohne Absatz-Elemente
   im Zitat (siehe tools/bewertungen.py): Mehrere Absaetze wuerden zu
   eigenen Kaesten und als je eine Zeile gezaehlt, die Kuerzung bliebe
   aus -- auf manchen Seiten sichtbar, auf anderen nicht.

   Die max-height ist der Rueckfall, falls line-clamp einmal nicht
   greift: vier Zeilen zu 1,5 Zeilenhoehen. Dann fehlen zwar die
   Auslassungspunkte, der Text ist aber trotzdem gekuerzt und die
   Schaltflaeche passt weiterhin.

   Gekuerzt wird erst durch assets/js/bewertungen.js, und auch nur
   dort, wo der Text tatsaechlich zu lang ist. Ohne JavaScript steht
   die Bewertung vollstaendig da -- das ist der richtige Rueckfall,
   denn abgeschnittener Text ohne Schaltflaeche waere unbrauchbar.
   Fuer Suchmaschinen und Vorlesesoftware ist der Text ohnehin immer
   vollstaendig vorhanden, er ist nur optisch beschnitten. */
.ph-bewertung--gekuerzt .ph-bewertung__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	max-height: 6em;
	overflow: hidden;
}

.ph-bewertung__mehr {
	display: block;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9em;
	color: #9a9a9a;
	cursor: pointer;
}

.ph-bewertung__mehr:hover,
.ph-bewertung__mehr:focus-visible {
	color: var(--awb-color5);
}

/* Sterne.

   Ein einzelner Stern als Hintergrundbild, in der Breite so oft
   wiederholt, wie --ph-sterne angibt. Die Zahl steht als Variable da,
   damit eine Bewertung mit vier Sternen nur diese eine Angabe braucht
   und kein neues Bild.

   Das Gold ist Googles Sternfarbe und deshalb bewusst keine
   Theme-Variable: Die Sterne sollen als Google-Bewertung erkennbar
   bleiben. */
.ph-bewertung__sterne {
	--ph-sterne: 5;
	margin: 10px 0 0;
	width: calc(var(--ph-sterne) * 1.25em);
	height: 1.15em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fbbc04' d='M10 1.4l2.65 5.37 5.93.86-4.29 4.18 1.01 5.9L10 14.92l-5.3 2.79 1.01-5.9L1.42 7.63l5.93-.86z'/%3E%3C/svg%3E");
	background-size: 1.25em 1.15em;
	background-repeat: repeat-x;
}

/* Nur fuer Vorlesesoftware: Die Sterne sind ein Hintergrundbild und
   damit fuer sie nicht vorhanden. Der Text nennt die Wertung, bleibt
   aber unsichtbar, ohne das Element aus dem Zugaenglichkeitsbaum zu
   nehmen -- display:none wuerde genau das tun. */
.ph-bewertungen__vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}