/* famidental.ch - Google-Bewertungen */
.gr {
  --gr-green: #35C567;
  --gr-green-dark: #006E63;
  --gr-ink: #101010;
  --gr-muted: #5f6b6a;
  --gr-line: rgba(0, 110, 99, .14);
  --gr-card: #ffffff;
  --gr-star: #F5B400;
  --gr-star-off: #dfe4e3;
  --gr-radius: 18px;
  --gr-bg: #e8f2eb;
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--gr-ink);
  background-color: var(--gr-bg);
}

/* ---------- Kopf ---------- */
.gr__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.gr__intro { max-width: 640px; }
.gr__eyebrow {
  margin: 0 0 14px;
  font-family: "Plantin MT Pro", Georgia, serif;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gr-green-dark);
}
.gr__title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
}

.gr__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
}
.gr__score {
  font-size: clamp(54px, 5.5vw, 72px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--gr-green-dark);
}
.gr__score-meta { display: flex; flex-direction: column; gap: 8px; }
.gr__count {
  font-size: 15px;
  color: var(--gr-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.gr__count:hover { color: var(--gr-green-dark) !important; }

.gr__btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border-radius: 30px;
  background: var(--gr-green);
  color: #fff !important;
  font-size: 16px;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.gr__btn:hover { background: var(--gr-green-dark); }

/* ---------- Sterne ---------- */
.gr__stars {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 20px;
  line-height: 0;
  flex: none;
}
.gr__stars--lg { width: 130px; height: 26px; }
.gr__star-row { width: 100%; height: 100%; fill: var(--gr-star-off); }
.gr__stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
}
.gr__stars-fill .gr__star-row {
  width: 100px;
  fill: var(--gr-star);
}
.gr__stars--lg .gr__stars-fill .gr__star-row { width: 130px; }

/* ---------- Slider ---------- */
.gr__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3);
  gap: 24px;
  /* Platz fuer den Schatten der Karten (overflow schneidet sonst ab) */
  margin: -16px -24px -28px;
  padding: 16px 24px 48px;
  scroll-padding-inline: 24px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gr__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gr__track { cursor: grab; }
}
.gr__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.gr__track.is-dragging .gr__card { pointer-events: none; }

/* Fortschrittsbalken */
.gr__progress {
  position: relative;
  height: 2px;
  margin: 4px 2px 22px;
  background: var(--gr-line);
  border-radius: 2px;
  overflow: hidden;
}
.gr__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: var(--gr-green-dark);
  border-radius: 2px;
  transition: transform .15s linear;
}
.gr__slider.is-static .gr__progress { display: none; }
.gr__track:focus-visible { outline: 2px solid var(--gr-green); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 991.98px) {
  .gr__track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 575.98px) {
  .gr__track {
    grid-auto-columns: 86%;
    gap: 14px;
    margin-inline: -12px;
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }
}

.gr__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 24px;
  background: var(--gr-card);
  border: 1px solid var(--gr-line);
  border-radius: var(--gr-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 12px 32px -18px rgba(0, 60, 54, .28);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .gr__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 20px 40px -20px rgba(0, 60, 54, .35);
  }
}
.gr__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gr__date { font-size: 13px; color: var(--gr-muted); white-space: nowrap; }

.gr__text {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gr-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.gr__text p { margin: 0; }
.gr__text.is-open { display: block; -webkit-line-clamp: unset; }

.gr__more {
  align-self: flex-start;
  margin-top: -6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--gr-green-dark);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.gr__reply { font-size: 14px; color: var(--gr-muted); }
.gr__reply summary { cursor: pointer; color: var(--gr-green-dark); }
.gr__reply p { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--gr-line); }

.gr__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--gr-line);
}
.gr__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e3f5ea;
  color: var(--gr-green-dark);
  font-size: 15px;
  font-weight: 600;
  flex: none;
}
.gr__author-text { display: flex; flex-direction: column; line-height: 1.3; }
.gr__author-text strong { font-weight: 600; font-size: 15px; }
.gr__author-text small { font-size: 13px; color: var(--gr-muted); }

/* ---------- Navigation ---------- */
.gr__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}
.gr__link {
  font-size: 15px;
  color: var(--gr-green-dark) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
}
.gr__arrows { display: flex; gap: 10px; }
.gr__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--gr-green-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--gr-green-dark);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.gr__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gr__arrow:hover:not(:disabled) { background: var(--gr-green-dark); color: #fff; }
.gr__arrow:disabled { opacity: .3; cursor: default; }
.gr__slider.is-static .gr__arrows { display: none; }

.gr__empty { font-size: 16px; color: var(--gr-muted); }
.gr__empty a { color: var(--gr-green-dark); }

@media (prefers-reduced-motion: reduce) {
  .gr__track { scroll-behavior: auto; }
  .gr__card { transition: none; }
}