/* Google-Rezensionen für janineiten.ch */

.gr-root {
  --gr-star: #f4bf3a;
  --gr-star-empty: #ddd;
  --gr-text: #004AAD;
  --gr-muted: #777;
  --gr-card-bg: #F2F6F9;
  --gr-badge-bg: rgba(255, 255, 255, 0.25);
  --gr-gap: 30px;
  font-family: inherit;
  color: var(--gr-text);
}

.gr-root a { text-decoration: none; }

/* ---------- Sterne ---------- */

.gr-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}
.gr-stars-empty,
.gr-stars-full { display: inline-flex; gap: 2px; }
.gr-stars-full {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.gr-stars svg { width: 1.3em; height: 1.3em; flex-shrink: 0; }
.gr-stars-empty svg { fill: var(--gr-star-empty); }
.gr-stars-full svg { fill: var(--gr-star); }

/* ---------- Badge ---------- */

/* Feste Pixelgrössen, damit das Badge nicht von der umgebenden Schrift (z. B. Hero) abhängt */
.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px 0 12px;
  box-sizing: border-box;
  border-radius: 25px;
  background: var(--gr-badge-bg);
  color: var(--gr-text) !important;
  font-size: 16px;
  line-height: 1;
  transition: background 0.2s ease;
}
.gr-badge:hover,
.gr-badge:focus-visible { background: rgba(255, 255, 255, 0.75); }

.gr-badge-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
}
.gr-badge-logo svg { width: 17px; height: 17px; }

.gr-badge-score { color: #ffffff !important; font-size: 18px; font-weight: 700; }
.gr-badge .gr-stars svg { width: 19px; height: 19px; }
.gr-badge .gr-stars-empty,
.gr-badge .gr-stars-full { gap: 0; }
.gr-badge-count { color: rgba(17, 17, 17, 0.5) !important; font-size: 13px; }

/* ---------- Raster ---------- */

.gr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gr-gap);
  text-align: left;
}

.gr-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  background: var(--gr-card-bg);
}

/* Zusammenfassung */
.gr-summary-head { display: flex; align-items: center; gap: 12px; }
.gr-summary-logo svg { display: block; width: 36px; height: 36px; }
.gr-summary-title { font-weight: 700; }

.gr-summary-score { display: flex; align-items: center; gap: 12px; }
.gr-summary-number { font-size: 3em; font-weight: 800; line-height: 1; }
.gr-summary-score .gr-stars svg { width: 1.5em; height: 1.5em; }

.gr-summary-count { margin: 0; color: var(--gr-muted); }

.gr-summary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.gr-button {
  display: inline-block;
  padding: 12px 28px;
  background: var(--gr-text);
  color: #fff !important;
  font-weight: 700;
  transition: opacity 0.2s ease;
}
.gr-button:hover { opacity: 0.85; }
.gr-link {
  color: var(--gr-text) !important;
  border-bottom: 1px solid currentColor;
}

/* Rezension */
.gr-author { display: flex; align-items: center; gap: 14px; }

.gr-avatar { position: relative; flex-shrink: 0; width: 48px; height: 48px; }
.gr-avatar img,
.gr-avatar-initial {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.gr-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e86a3a;
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
}
.gr-avatar-g {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
.gr-avatar-g svg { width: 100%; height: 100%; }

.gr-author-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.gr-author-name { color: var(--gr-text) !important; font-weight: 700; }
.gr-author-name[href]:hover { text-decoration: underline; }
.gr-time { color: var(--gr-muted); font-size: 0.8em; }

.gr-text {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  white-space: pre-line;
}
.gr-card.is-open .gr-text { display: block; -webkit-line-clamp: unset; }

/* Button-Stile der Website (Rahmen, Hintergrund, Schatten) bewusst überschreiben */
.gr-more,
.gr-more:hover,
.gr-more:focus,
.gr-more:active {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  outline: none;
  color: var(--gr-text) !important;
  font: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gr-more:hover { text-decoration: underline; }
.gr-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gr-more[hidden] { display: none; }

@media (max-width: 1024px) {
  .gr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .gr-grid { grid-template-columns: 1fr; --gr-gap: 16px; }
  .gr-card { padding: 24px; }
}