/* ProntoSite – Google-Bewertungen-Widget (Bundle-CSS, W4). Nutzt die --ps-w-*-Variablen (beim
   Publish aus der Stil-Ernte befüllt, Fallbacks in inject.js). Light/Dark der Karten über
   [data-theme] (Widget-Option); Akzent/Radius/Schrift/Fokus aus den Tokens. Namensraum: .psgr-.

   Aufbau: Summary-Panel links, Karten rechts. EIN DOM, zwei CSS-Modi –
   Desktop (>=700px) = statisches 3er-Raster (Pfeile nur bei Karte 4–5),
   Smartphone (<700px) = horizontales Swipe-Carousel mit Punkte-Indikator. Kein Autoplay. */

.psgr {
  box-sizing: border-box; font-family: var(--ps-w-font, system-ui, sans-serif);
  max-width: 1100px; margin: 28px auto; padding: 0 16px; color: var(--psgr-text);
  --psgr-star: #fbbc04;                 /* Google-Gold, themeunabhängig */
  --psgr-link: var(--ps-w-primary, #4f46e5);
}
.psgr *, .psgr *::before, .psgr *::after { box-sizing: border-box; }
.psgr[data-theme="hell"] { --psgr-surface: var(--ps-w-surface, #fff); --psgr-text: var(--ps-w-text, #18181b); --psgr-muted: #64748b; --psgr-line: rgba(0,0,0,.10); --psgr-neutral: rgba(0,0,0,.75); --psgr-card-neutral: rgba(0,0,0,.15); --psgr-card-bg: rgba(0,0,0,.05); }
.psgr[data-theme="dunkel"] { --psgr-surface: #1e2430; --psgr-text: #f1f5f9; --psgr-muted: #94a3b8; --psgr-line: rgba(255,255,255,.14); --psgr-neutral: rgba(255,255,255,.75); --psgr-card-neutral: rgba(255,255,255,.15); --psgr-card-bg: rgba(255,255,255,.05); }

/* Zwei-Spalten-Rahmen: Summary links, Karten rechts */
.psgr-layout { display: flex; align-items: flex-start; gap: 28px; }

/* ---- Summary-Panel (links): Logo, Firmenname, Schnitt+Sterne, Anzahl, „Bewertung schreiben" ---- */
.psgr-summary-panel { flex: 0 0 240px; max-width: 240px; display: flex; flex-direction: column; gap: 12px;
  align-items: center; text-align: center; }
.psgr-logo { display: flex; align-items: center; justify-content: center; }
.psgr-logo img { max-width: 84px; max-height: 84px; width: auto; height: auto; object-fit: contain; border-radius: var(--ps-w-radius-surface, 12px); }
.psgr-logo .psgr-g { width: 40px; height: 40px; }
.psgr-name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.psgr-summary { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.psgr-avg { font-size: 1.15rem; font-weight: 700; }
.psgr-count { color: var(--psgr-neutral); font-size: .9rem; }
.psgr-write { display: inline-block; margin-top: 4px; font-size: .85rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; text-align: center; text-decoration: none; color: var(--psgr-link);
  background: transparent; border: 1.5px solid var(--psgr-link); padding: 12px 16px;
  border-radius: var(--ps-w-radius-control, 8px); white-space: normal; }
.psgr-write:hover { background: color-mix(in srgb, var(--psgr-link) 10%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) { .psgr-write:hover { filter: brightness(1.04); } }

/* Sterne */
.psgr-stars { display: inline-flex; gap: 1px; line-height: 1; vertical-align: middle; }
.psgr-stars svg { width: 1em; height: 1em; display: block; }
.psgr-stars .s-full, .psgr-stars .s-half .fg { fill: var(--psgr-star); }
.psgr-stars .s-empty, .psgr-stars .s-half .bg { fill: color-mix(in srgb, var(--psgr-star) 26%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) { .psgr-stars .s-empty, .psgr-stars .s-half .bg { fill: #e0e0e0; } }

/* ---- Karten-Bereich (rechts) ---- */
.psgr-cards-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.psgr-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.psgr-track::-webkit-scrollbar { height: 8px; }
.psgr-track::-webkit-scrollbar-thumb { background: var(--psgr-line); border-radius: 8px; }

/* Desktop: statisches 3er-Raster (drei Karten sichtbar; 4.–5. per Pfeil) */
.psgr-card { scroll-snap-align: start; flex: 0 0 calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3);
  background: var(--psgr-card-bg); border: 1px solid var(--psgr-card-neutral);
  border-radius: var(--ps-w-radius-surface, 12px); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.psgr[data-theme="dunkel"] .psgr-card { box-shadow: none; }

.psgr-crow { display: flex; align-items: center; gap: 10px; }
.psgr-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem;
  color: #fff; background: var(--psgr-link); }
.psgr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psgr-who { min-width: 0; }
.psgr-author { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psgr-when { color: var(--psgr-muted); font-size: .8rem; }
.psgr-cardg { margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; opacity: .9; }

/* Sterne-Zeile mit Verifiziert-Häkchen */
.psgr-raterow { display: flex; align-items: center; gap: 6px; }
.psgr-verified { width: 16px; height: 16px; flex: 0 0 auto; }

.psgr-text { margin: 0; font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.psgr-more { align-self: flex-start; margin-top: 2px; background: none; border: 0; padding: 0;
  color: var(--psgr-link); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.psgr-more:hover { text-decoration: underline; }

/* Pfeile (Desktop; JS blendet sie ohne Überlauf aus, CSS mobil) */
/* Pfeile: Symbol in der Akzentfarbe (currentColor → stroke), Fläche dezent neutral wie die Karten,
   neutraler Rahmen; Hover verstärkt den Akzent (Akzent-getönte Fläche + Akzent-Rahmen). */
.psgr-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--psgr-card-neutral);
  background: var(--psgr-card-bg); color: var(--ps-w-primary, #4f46e5); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.16);
  transition: background .15s, border-color .15s; }
.psgr-nav svg { width: 20px; height: 20px; fill: currentColor; }
.psgr-nav:hover { background: color-mix(in srgb, var(--ps-w-primary, #4f46e5) 20%, var(--psgr-card-bg));
  border-color: var(--ps-w-primary, #4f46e5); }
@supports not (color: color-mix(in srgb, red, blue)) { .psgr-nav:hover { border-color: var(--ps-w-primary, #4f46e5); filter: brightness(1.08); } }
.psgr-nav[disabled] { opacity: .35; cursor: default; }
.psgr-nav[hidden] { display: none; }
.psgr-prev { left: -14px; }
.psgr-next { right: -14px; }

/* Punkte-Indikator (nur Smartphone-Swipe) */
.psgr-dots { display: none; }
.psgr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--psgr-line); transition: background .2s; }
.psgr-dot.is-active { background: var(--psgr-link); }

/* Fuß: Attribution (Places-Terms) */
.psgr-attrib { margin: 12px 0 0; font-size: .8rem; color: var(--psgr-neutral); display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.psgr-attrib svg { width: 16px; height: 16px; }

/* Leerzustand (kein Ort verbunden / noch keine Daten) */
.psgr-empty { border: 1px dashed var(--psgr-line); border-radius: var(--ps-w-radius-surface, 12px);
  padding: 18px; text-align: center; color: var(--psgr-neutral); font-size: .92rem; background: var(--psgr-surface); }

.psgr :focus-visible { outline: var(--ps-w-focus, 2px solid #4f46e5); outline-offset: 2px; border-radius: 4px; }

/* ---- Smartphone-Modus: Panel oben, Karten als Swipe-Carousel mit Punkten ---- */
@media (max-width: 699px) {
  .psgr-layout { flex-direction: column; gap: 18px; }
  .psgr-summary-panel { flex-basis: auto; max-width: none; }
  .psgr-write { align-self: center; }
  /* Karten-Bereich fest auf die Spaltenbreite begrenzen, damit der Track INNEN scrollt
     (Swipe) statt die Seite quer zu schieben – im Column-Flex greift stretch dafür nicht. */
  .psgr-cards-wrap { width: 100%; max-width: 100%; min-width: 0; }
  .psgr-track { max-width: 100%; }
  .psgr-card { flex-basis: 82%; max-width: 82%; }
  .psgr-nav { display: none; }                 /* mobil per Swipe */
  .psgr-dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .psgr-track { scroll-behavior: auto; } }