/********************************************************
 * 1) Bewertungsformular (Eingabe)
 *    - klickbare Sterne mit JS (selected/hover)
 *    - Masken-Optik optional; JS steuert Füllung
 ********************************************************/

/* Container + Basisgröße der Formular-Sterne */
.yoosite-stars{
  display:flex;
  gap:8px;
  font-size:32px;         /* Größe nur hier ändern */
  cursor:pointer;
}

/* Klicklogik (via JS): farbige Füllung an/aus */
.yoostar{ color:#ccc; transition:color .2s; }
.yoostar.hover,
.yoostar.selected{ color:#f39c12; }  /* falls alte "☆"-Variante genutzt wird */

/* Masken-Variante für Formular-Sterne */
.yoosite-stars .yoostar{ position:relative; width:1em; height:1em; }
.yoosite-stars .yoostar-static__bg,
.yoosite-stars .yoostar-static__fg{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431L24 9.748l-6 5.848 1.416 8.262L12 19.771 4.584 23.858 6 15.596 0 9.748l8.332-1.73L12 .587z"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431L24 9.748l-6 5.848 1.416 8.262L12 19.771 4.584 23.858 6 15.596 0 9.748l8.332-1.73L12 .587z"/></svg>') no-repeat center/contain;
}
.yoosite-stars .yoostar-static__bg{ background: var(--yoostar-gray,#dadce0); }
.yoosite-stars .yoostar-static__fg{ background: var(--yoostar-gold,#fbbc04); width:0%; overflow:hidden; transition: width .25s ease; }

/* Hier passiert das Orange werden im Formular (durch JS) */
.yoosite-stars .yoostar.selected .yoostar-static__fg,
.yoosite-stars .yoostar.hover .yoostar-static__fg{ width:100%; }


/********************************************************
 * 2) Summary-Zeile (Durchschnitt über den Karten)
 *    - halbe Sterne werden auf- oder abgerundet
 ********************************************************/
:root{
  --yoostar-gold:#fbbc04;
  --yoostar-gray:#dadce0;
}

.yoostar-row{display:flex;gap:4px;line-height:1;}
.yoostar-row--summary{font-size:28px;}
.yoostar-row--item{font-size:26px;}

.yoostar-static{
  display:inline-block;width:1em;height:1em;
  background:var(--yoostar-gray); /* Default: GRAU */
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431L24 9.748l-6 5.848 1.416 8.262L12 19.771 4.584 23.858 6 15.596 0 9.748l8.332-1.73L12 .587z"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431L24 9.748l-6 5.848 1.416 8.262L12 19.771 4.584 23.858 6 15.596 0 9.748l8.332-1.73L12 .587z"/></svg>') no-repeat center/contain;
}
.yoostar-static.is-filled{ background:var(--yoostar-gold); }

.yoostar-summary-text{
  margin-left:8px;font-size:22px;color:#666;line-height:1.4;
}



/********************************************************
 * 3) Karten/Einzelbewertungen (Avatar, Name, Sterne, Text)
 *    - gleiche Sternlogik wie Summary, nur eigene Größe
 ********************************************************/

/* Avatar & Name */
.yoosite-review-header{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.yoosite-review-avatar{
  width:48px; height:48px; border-radius:50%; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.yoosite-review-name{ font-weight:700; font-size:1.5rem; }

/* Stern-Größe in Karten separat steuerbar */
.yoostar-row--item{ font-size:16px; }        /* nur hier anpassen */
.uk-card .yoostar-row--item{ margin:4px 0 6px; }  /* etwas Luft in Karten */