/*
 * Lange Bewertungen kuerzen und auf Knopfdruck aufklappen.
 *
 * Wichtig: Gekuerzt wird NUR, wenn das JavaScript laeuft (die Klasse ld-bw--kurz
 * setzt das Skript). Ohne JavaScript steht der volle Text da, damit nichts
 * unlesbar wird und Suchmaschinen alles sehen.
 *
 * Farben kommen bewusst ueber currentColor, weil die Bewertungen auf mehreren
 * Hintergruenden stehen (Karussell auf der Startseite, Karten-Raster auf den
 * Unterseiten).
 */

.ld-bw--kurz {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Laengere Bewertungen bestehen aus mehreren Absaetzen. Das Widget wirft <p> aber
   raus und macht Zeilenumbrueche daraus, deshalb kommen die Absaetze als doppeltes
   <br>. Der Abstand muss also am Umbruch selbst haengen. */
.trx-addons-testimonials-text-wrapper br + br {
  display: block;
  content: "";
  margin-top: .55em;
}

/* Farben fest statt geerbt: Im Karussell erbt der Knopf sonst das Grau des
   Fliesstextes, und die allgemeinen Button-Regeln des Themes faerben ihn beim
   Ueberfahren hellblau mit weisser Schrift ein, was kaum noch lesbar ist.
   Deshalb hier alles ausdruecklich setzen. */
.ld-bw-mehr,
.trx-addons-testimonials-content-wrapper .ld-bw-mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 9px 20px;
  border: 1px solid #052f5f !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #052f5f !important;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.ld-bw-mehr:hover,
.ld-bw-mehr:focus-visible,
.trx-addons-testimonials-content-wrapper .ld-bw-mehr:hover,
.trx-addons-testimonials-content-wrapper .ld-bw-mehr:focus-visible {
  background: #052f5f !important;
  color: #fff !important;
  border-color: #052f5f !important;
  box-shadow: none !important;
  transform: none !important;
}

.ld-bw-mehr:focus-visible {
  outline: 2px solid #052f5f;
  outline-offset: 3px;
}

.ld-bw-mehr__pfeil {
  font-size: .8em;
  transition: transform .3s ease;
}

.ld-bw--offen .ld-bw-mehr__pfeil {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .ld-bw-mehr { font-size: 14px; padding: 8px 17px; }
}