/* reviews-Modul — alle Farben aus globalen --color-* Variablen */

/* ===========================================================
   Sterne (Score)
   =========================================================== */
.reviews-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 1rem;
  line-height: 1;
  color: #fbbf24;
  letter-spacing: 0;
}
.reviews-stars .star { display: inline-block; }
.reviews-stars .star.is-empty { color: color-mix(in srgb, var(--color-text) 18%, transparent); }
.reviews-stars .star.is-half {
  background: linear-gradient(90deg, #fbbf24 50%, color-mix(in srgb, var(--color-text) 18%, transparent) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===========================================================
   Header-Badge: ★ 4.8 (123 Bewertungen)
   =========================================================== */
.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.reviews-badge__star {
  color: #fbbf24;
  font-size: 1rem;
  line-height: 1;
}
.reviews-badge__count {
  font-weight: 400;
  opacity: .75;
  font-size: .78rem;
}
@media (max-width: 600px) {
  .reviews-badge__count { display: none; }
}

/* ===========================================================
   Summary-Zeile (Sterne + Score + Anzahl in einer Reihe)
   =========================================================== */
.reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1rem;
  color: var(--color-text);
}
.reviews-summary strong { font-size: 1.15rem; }
.reviews-summary__count {
  color: var(--color-text);
  opacity: .7;
  font-size: .9rem;
}

/* ===========================================================
   Großer Reviews-Block (Hooks/Shortcode)
   =========================================================== */
.reviews-block {
  padding: 3rem 0;
}
.reviews-block.is-compact {
  background: var(--color-secondary);
  padding: 2rem 0;
}
.reviews-block__head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.reviews-block__head h2 {
  margin: 0 0 .75rem;
  color: var(--color-primary);
}
.reviews-block__summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.05rem;
  color: var(--color-text);
}
.reviews-block__summary strong {
  font-size: 1.4rem;
  color: var(--color-primary);
}
.reviews-block__summary span {
  opacity: .75;
  font-size: .9rem;
}

.reviews-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.reviews-block.is-compact .reviews-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.review-card {
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: .6rem;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.review-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.review-card__author {
  display: flex;
  gap: .75rem;
  align-items: center;
}
.review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.review-card__author strong {
  display: block;
  font-size: .95rem;
  color: var(--color-text);
}
.review-card__author small {
  color: var(--color-text);
  opacity: .55;
  font-size: .78rem;
}
.review-card__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--color-text);
  opacity: .92;
  /* Lange Reviews abschneiden mit Fade — Klassisch eleganter als Cut */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================================
   Google-Attribution (Pflicht laut TOS)
   =========================================================== */
.reviews-block__attribution {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .85rem;
}
.reviews-block__attribution a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.reviews-block__attribution a:hover { text-decoration: underline; }
.reviews-attribution-google {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-text);
  opacity: .7;
}
.reviews-google-logo {
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, #4285f4 0%, #ea4335 33%, #fbbc05 66%, #34a853 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sub-Bewertungen (Extra-Aspekte) in Review-Karten */
.review-card__extras {
  list-style: none; padding: 0; margin: .8rem 0 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1rem;
  font-size: .82rem;
  border-top: 1px dashed color-mix(in srgb, var(--color-text, #1f2937) 14%, transparent);
  padding-top: .6rem;
}
.review-card__extras li { display: flex; align-items: center; gap: .35rem; }
.review-card__extra-label { color: var(--color-text, #1f2937); opacity: .75; }
.review-card__extra-stars {
  display: inline-flex; gap: 1px;
  font-size: .85rem; line-height: 1;
}
.review-card__extra-stars .is-on  { color: #fbbf24; }
.review-card__extra-stars .is-off { color: #e5e7eb; }

/* ===========================================================
   Öffentliches Abgabe-Formular ([review-form])
   =========================================================== */
.reviews-form {
  max-width: 540px; margin: 1.5rem auto; padding: 1.4rem 1.5rem;
  border: 1px solid #e4e8ee; border-radius: 14px; background: #fff;
  display: flex; flex-direction: column; gap: .9rem;
  box-shadow: 0 4px 18px rgba(2, 6, 23, .06);
}
.reviews-form__title { margin: 0; font-size: 1.2rem; }
.reviews-form__field { display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
.reviews-form__field > span { font-weight: 600; }
.reviews-form input[type="text"],
.reviews-form textarea,
.reviews-form select {
  width: 100%; padding: .6rem .7rem; border: 1px solid #d4d8e0;
  border-radius: 8px; font: inherit; background: #fff;
}
.reviews-form textarea { resize: vertical; }
.reviews-form__field--aspect { flex-direction: row; align-items: center; justify-content: space-between; gap: .8rem; }
.reviews-form__field--aspect select { width: auto; flex: 0 0 auto; }

/* Sterne-Auswahl: Radios rückwärts (5→1) → CSS-Hover/Checked färbt vorhergehende */
.reviews-form__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 2rem; line-height: 1; }
.reviews-form__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.reviews-form__stars label { color: #d4d8e0; cursor: pointer; padding: 0 .05em; transition: color .12s, transform .12s; }
.reviews-form__stars label:hover,
.reviews-form__stars label:hover ~ label,
.reviews-form__stars input:checked ~ label { color: #fbbf24; }
.reviews-form__stars label:hover { transform: scale(1.15); }
.reviews-form__stars input:focus-visible + label { outline: 2px solid var(--color-primary, #2563eb); border-radius: 4px; }

.reviews-form__submit {
  align-self: flex-start; padding: .65rem 1.4rem; border: 0; border-radius: 9px;
  background: var(--color-primary, #2563eb); color: #fff; font-weight: 700;
  font-size: 1rem; cursor: pointer; transition: filter .12s;
}
.reviews-form__submit:hover { filter: brightness(1.08); }
.reviews-form__hint { margin: 0; font-size: .8rem; color: #8a93a4; }
.reviews-form__flash { margin: 0; padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; }
.reviews-form__flash--ok { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; }
.reviews-form__flash--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }