/* ==========================================================================
   Google-Reviews-Widget (First-Party)  -  reviews-widget.css
   Namensraum .grw  ->  konfliktfrei auf jeder Seite einsetzbar.
   Markenfarben: Magenta #c0187a, Gold #f5b301.
   ========================================================================== */

.grw {
  --grw-magenta:#c0187a;
  --grw-gold:#f5b301;
  --grw-ink:#1a1a1a;
  --grw-muted:#6b6b6b;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:36px;
}

/* ---- Badge (links) ------------------------------------------------------ */
.grw__badge { flex:0 0 auto; display:flex; flex-direction:column;
  align-items:center; gap:10px; text-align:center; }
.grw__title { margin:0; line-height:1; font-size:1.5rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--grw-ink); }
.grw__stars { position:relative; display:inline-block; line-height:0; }
.grw__stars-row { display:flex; gap:6px; }
.grw__stars-row svg { width:30px; height:30px; }
.grw__stars-fill { position:absolute; top:0; left:0; overflow:hidden;
  white-space:nowrap; width:calc(var(--grw-rating,5) / 5 * 100%); }
/* Goldene Reihe behaelt ihre volle Breite (5 Sterne) und wird vom
   .grw__stars-fill rechts abgeschnitten. Ohne dies wuerde die Flex-Reihe
   auf die gekuerzte Breite zusammenschrumpfen und Teilwerte falsch anzeigen. */
.grw__stars-fill .grw__stars-row { width:max-content; }
.grw__stars-fill .grw__stars-row svg { flex-shrink:0; }
.grw__count { margin:0; font-size:1rem; color:#3c3c3c; }
.grw__count strong { font-weight:700; color:var(--grw-ink); }
.grw__logo { display:block; margin-top:2px; line-height:0; }
.grw__logo img { display:block; height:28px; width:auto; }

/* ---- Karten-Slider (rechts) -------------------------------------------- */
.grw__slider { flex:1 1 480px; min-width:0; position:relative; }
.grw__track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 10px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.grw__track::-webkit-scrollbar { display:none; }

.grw__card {
  flex:0 0 300px; max-width:300px; scroll-snap-align:start;
  background:#f6f6f6; border-radius:12px; padding:20px 20px 18px;
  text-align:left; display:flex; flex-direction:column;
}
.grw__card-head { display:flex; align-items:center; gap:12px; position:relative; }
.grw__avatar {
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.1rem;
}
.grw__who { min-width:0; }
.grw__name { margin:0; font-weight:700; font-size:1rem; color:var(--grw-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.grw__when { margin:0; font-size:0.85rem; color:var(--grw-muted); }
.grw__gicon { position:absolute; top:0; right:0; width:20px; height:20px; }

.grw__card-stars { display:flex; align-items:center; gap:2px; margin:12px 0 10px; }
.grw__card-stars svg { width:18px; height:18px; }
.grw__verified { width:16px; height:16px; margin-left:4px; }

.grw__text { margin:0; font-size:0.95rem; line-height:1.6; color:#333;
  overflow:hidden; }
.grw__text.is-clamped {
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
}
.grw__more {
  align-self:flex-start; margin-top:10px; padding:0; background:none; border:0;
  color:var(--grw-muted); font:inherit; font-size:0.9rem; cursor:pointer;
}
.grw__more:hover, .grw__more:focus-visible { color:var(--grw-magenta);
  text-decoration:underline; }

/* ---- Pfeil-Buttons ------------------------------------------------------ */
.grw__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; border:1px solid #e2e2e2;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--grw-ink); transition:background .15s ease, box-shadow .15s ease;
}
.grw__nav:hover { background:#fafafa; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.grw__nav[hidden] { display:none; }
.grw__nav svg { width:18px; height:18px; }
.grw__nav--prev { left:-12px; }
.grw__nav--next { right:-12px; }

/* ---- Responsive: unter 768px gestapelt --------------------------------- */
@media (max-width:767.98px) {
  .grw { flex-direction:column; gap:24px; }
  .grw__slider { width:100%; flex-basis:auto; }
  .grw__nav { display:none; }               /* auf Touch reicht Wischen */
  .grw__card { flex-basis:82%; max-width:82%; }
}
@media (max-width:575.98px) {
  .grw__title { font-size:1.3rem; }
  .grw__stars-row svg { width:26px; height:26px; }
  .grw__stars-row { gap:5px; }
}