/* Minimal-Ergänzungen zum Original-Stylesheet (reviews-widget.css).
   Die Original-Optik bleibt unangetastet: linke Spalte 25 %, Karten je
   33,333 % (= 3 sichtbar). Ergänzt werden nur:
     1. horizontales Scrollen der Kartenleiste (statt Slider-JS)
     2. gleich hohe Karten
     3. "Weiterlesen" für lange Texte
   Alles greift ausschließlich innerhalb von .ti-widget.dj-scroll. */

/* 1. Kartenleiste scrollbar – Breiten kommen weiter aus dem Original-CSS */
.ti-widget.ti-goog.dj-scroll .ti-reviews-container-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  /* kein scroll-behavior:smooth per CSS – das macht das JS, sonst liest ein
     direkt folgendes scrollLeft noch den alten Wert */
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Scrollbalken ausblenden – navigiert wird über die Original-Pfeile */
.ti-widget.ti-goog.dj-scroll .ti-reviews-container-wrapper::-webkit-scrollbar {
  display: none;
}

/* 2. Karten: Original-Breite behalten, aber nicht schrumpfen und gleich hoch */
.ti-widget.ti-goog.dj-scroll .ti-review-item {
  flex-shrink: 0;
  display: flex;
  scroll-snap-align: start;
}
.ti-widget.ti-goog.dj-scroll .ti-review-item > .ti-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* 3. "Weiterlesen" klappt auf.

   Der zugeklappte Zustand kommt unveraendert aus dem Original-Stylesheet
   (vier Zeilen, 87 px). Wichtig ist die Art, wie das dort festgelegt ist:

       .ti-widget.ti-goog .ti-review-content { height: 87px !important;
                                               overflow: hidden !important; }

   Eine FESTE Hoehe, nicht max-height. Ein Aufklappen ueber max-height
   bleibt daher wirkungslos - die Hoehe steht bereits fest. Beide
   Angaben muessen ausdruecklich zurueckgenommen werden. */
.ti-widget.ti-goog.dj-scroll .ti-review-item.is-open .ti-review-text-container {
  display: block !important;
  height: auto !important;
  max-height: 260px !important;
  -webkit-line-clamp: unset;
  overflow-y: auto !important;
  overflow-x: hidden;
}
.ti-widget.ti-goog.dj-scroll .ti-read-more.dj-more {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 8px 0 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #5e5e5e;
  text-decoration: underline;
  cursor: pointer;
}
.ti-widget.ti-goog.dj-scroll .ti-read-more.dj-more:hover { opacity: .75; }

/* Original-Pfeile einblenden (ti-disable-nav entfällt) und am Ende ausgrauen */
.ti-widget.ti-goog.dj-scroll .ti-controls { display: block; }
.ti-widget.ti-goog.dj-scroll .ti-controls .ti-next.is-off,
.ti-widget.ti-goog.dj-scroll .ti-controls .ti-prev.is-off {
  opacity: 0;
  pointer-events: none;
}

/* 4. Mobil/Tablet: die Uebersicht links (Sterne, Anzahl, Google-Logo)
   und die Kartenleiste standen bisher nebeneinander in einer Zeile
   und ueberlappten sich, weil beide feste Breiten wollten. Die
   Uebersicht faellt hier weg - sie steht ohnehin bereits im
   Kopfbereich der Seite -, die Karten bekommen dafuer die volle
   Breite: zwei nebeneinander ab Tablet-Breite, eine auf dem Handy.
   Wischen per Finger funktioniert bereits (siehe Abschnitt 1 oben);
   die Pfeile werden hier zusaetzlich eingeblendet. */
@media (max-width: 1023px) {
  .ti-widget.ti-goog.dj-scroll .ti-footer.ti-footer-grid { display: none; }
  .ti-widget.ti-goog.dj-scroll .ti-widget-container .ti-reviews-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Die Pfeile sitzen mittig auf der Karte und verdecken den Text -
     auf Mobil/Tablet bleiben sie deshalb aus, Punkte darunter (siehe
     reviews.js, .dj-dots) zeigen stattdessen die Position. Wischen
     mit dem Finger geht unabhaengig davon bereits (Abschnitt 1). */
  .ti-widget.ti-goog.dj-scroll .ti-controls { display: none !important; }
  /* Abstand zur naechsten Sektion - stand bisher bei 0, weil die
     ursprüngliche Zeile auf Mobilgeraeten keinen unteren Innenabstand
     hatte. */
  .ti-widget.ti-goog.dj-scroll { margin-bottom: 30px; }
  /* 5px mehr Innenabstand unten in der Kartenleiste selbst (Original: 12px). */
  .ti-widget.ti-goog.dj-scroll .ti-reviews-container-wrapper { padding-bottom: 17px !important; }
}

.ti-widget.ti-goog.dj-scroll .dj-dots {
  display: none;
  justify-content: center;
  align-items: center;
  /* !important noetig: ".ti-widget-container *" im Original-Stylesheet
     setzt row-gap/column-gap ueberall zwangsweise auf "unset" -
     die Punkte klebten dadurch ohne Abstand aneinander. */
  gap: 8px !important;
  margin-top: 14px;
}
@media (max-width: 1023px) {
  .ti-widget.ti-goog.dj-scroll .dj-dots { display: flex; }
}
.ti-widget.ti-goog.dj-scroll .dj-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.ti-widget.ti-goog.dj-scroll .dj-dot.is-active {
  background: #283e75;
  transform: scale(1.25);
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ti-widget.ti-goog.dj-scroll .ti-review-item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 639px) {
  .ti-widget.ti-goog.dj-scroll .ti-review-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}