/* ==========================================================
   First-Party Google-Reviews-Widget (Sägewerk Diehl)
   Rendert Badge + Karten-Slider aus /reviews.json.
   Farben der Sektion werden in index.html (#google-reviews) überschrieben.
   ========================================================== */
.grw{
  display:grid; grid-template-columns:220px minmax(0,1fr);
  gap:40px; align-items:center; text-align:left;
}
.grw[hidden]{ display:none; }
.grw, .grw *, .grw *::before, .grw *::after{ box-sizing:border-box; }

/* ---- Badge ---- */
.grw__badge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.grw__logo{ display:inline-block; line-height:0; margin-bottom:4px; }
.grw__logo svg{ width:44px; height:44px; display:block; }
.grw__title{ font-weight:700; font-size:1.05rem; line-height:1.25; }
.grw__score{ display:flex; align-items:center; gap:8px; }
.grw__score-num{ font-size:2rem; font-weight:700; line-height:1; }
.grw__count{ font-size:.85rem; }
.grw__all{ margin-top:6px; font-size:.8rem; color:inherit; text-decoration:underline; }

/* ---- Sterne ---- */
.grw__stars{ display:inline-flex; gap:2px; line-height:0; }
.grw__stars svg{ width:17px; height:17px; fill:#fbbc04; }
.grw__stars svg.is-off{ fill:#d9d9d9; }

/* ---- Slider ---- */
.grw__slider{ position:relative; min-width:0; }
.grw__track{
  display:flex; gap:20px; padding:4px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scroll-padding-inline:4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.grw__track::-webkit-scrollbar{ display:none; }
.grw__track:focus-visible{ outline:2px solid #9d7f6c; outline-offset:4px; }

.grw__card{
  flex:0 0 calc((100% - 20px) / 2);
  min-width:0; overflow-wrap:anywhere; hyphens:auto;
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:10px;
  background:#fff; color:#1a1f24; text-align:left;
  border-radius:4px; padding:22px 20px 20px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.grw__head{ display:flex; align-items:center; gap:12px; }
.grw__avatar{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1rem; line-height:1;
}
.grw__name{ font-weight:700; font-size:.95rem; line-height:1.2; }
.grw__date{ font-size:.78rem; color:#6b7280; margin-top:2px; }
.grw__text{
  margin:0; font-size:.9rem; line-height:1.55; white-space:pre-line;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}
.grw__card.is-open .grw__text{ display:block; -webkit-line-clamp:unset; }
.grw__more{
  align-self:flex-start; margin-top:auto;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.8rem; color:#876a58; text-decoration:underline;
}
.grw__more[hidden]{ display:none; }

/* ---- Pfeile ---- */
.grw__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#333; border:1px solid #ccc; cursor:pointer; padding:0;
}
.grw__nav svg{ width:18px; height:18px; }
.grw__nav--prev{ left:-12px; }
.grw__nav--next{ right:-12px; }
.grw__nav:disabled{ opacity:.35; cursor:default; }

@media (max-width:991.98px){
  .grw{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:767.98px){
  .grw__card{ flex-basis:86%; }
  .grw__nav{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .grw__track{ scroll-behavior:auto; }
}