/* seelig-core / rezensionen (modular, selbsttragend).
   Karten-Raster mit markenfarbigen Sternen. */
.rezensionen, .rezensionen-grid, .rezension { box-sizing: border-box; }

.rezensionen { margin: var(--gap-50, 50px) 0; }
.rezensionen-headline { text-align: center; margin: 0 0 var(--gap-25, 25px); }
.rezensionen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.rezension {
  margin: 0;
  padding: 24px;
  border-radius: 8px;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Sterne. Pro Stern liegen zwei deckungsgleiche Pfade uebereinander: die
   Kontur steht immer, die Fuellung wird von rechts beschnitten. `inset()` misst
   an der Pfad-Box, und die ist waagerecht exakt 0..24 breit (siehe
   snippets/sterne.php) - deshalb trifft der Schnitt genau den Anteil, den
   --stern-fuellung vorgibt, und nicht ungefaehr. */
.sterne {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  --stern-groesse: 20px;
  --stern-farbe: var(--brand, currentColor);
}
.stern {
  flex: 0 0 auto;
  width: var(--stern-groesse);
  height: var(--stern-groesse);
}
.stern-kontur {
  fill: none;
  stroke: var(--stern-farbe);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: .5;
}
.stern-voll {
  fill: var(--stern-farbe);
  clip-path: inset(0 calc(100% - var(--stern-fuellung, 100%)) 0 0);
}
/* Die Zahl neben den Sternen. Ohne sie ist 4,8 von 5,0 kaum zu unterscheiden. */
.sterne-wert {
  margin-left: 6px;
  font-size: .85em;
  font-weight: bold;
  color: var(--stern-farbe);
}
.rezension-text { margin: 0; font-style: italic; }
.rezension-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .9em; }
.rezension-name { font-weight: bold; }
.rezension-plattform { opacity: .6; }