Mindestbewertung-Filter: echte Lila-Babyblau-Verlaufsherzen statt System-Emoji

Im Filter "Mindestbewertung" wurden bisher schlichte 🩵-Emojis angezeigt. Grund:
das war ein natives <select>, und in der browsereigenen Auswahlliste lassen
sich weder Farbverlaeufe noch eigene Grafiken darstellen - der Browser rendert
dort nur das System-Emoji in seiner festen hellblauen Farbe.

Ersetzt durch dasselbe eigene Dropdown, das schon der Kategorie-Filter nutzt.
Dadurch erscheinen jetzt die echten HeartRating-Herzen mit dem Marken-Verlauf
von Lila (--c-purple-glow) nach Babyblau (--c-accent) - auch im geschlossenen
Knopf, sobald eine Bewertung gewaehlt ist. Der Verlauf bekam zusaetzlich einen
weichen Zwischenton, damit er im kleinen Herz-Format nicht hart umschlaegt,
sondern wirklich wie eine Mischung beider Farben wirkt.

Die Dropdown-Logik ist dabei fuer BEIDE Filter zu einem gemeinsamen Code
zusammengefasst worden (statt zweimal fast dasselbe): beide verhalten sich
identisch, oeffnen sich gegenseitig zu, schliessen bei Klick daneben und bei
Escape - nur noch eine Stelle zum Pflegen.

Im Browser funktional geprueft: 5 Optionen, oeffnet/schliesst korrekt, 10
Verlaufsherzen in der Liste, Auswahl setzt den Filterwert und uebernimmt die
Herzen in den Knopf, gegenseitiges Schliessen funktioniert. Gilt fuer alle 4
Sprachen.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/components/HeartRating.astro

@@ -28,8 +28,13 @@ const HERZ_PFAD =
 <span class="heart-rating" role="img" aria-label={`${bewertung.toFixed(1)} von 5 Herzen${anzahlLabel ? `, ${anzahlLabel}` : ""}`}>
   <svg width="0" height="0" style="position:absolute;" aria-hidden="true">
     <defs>
+      {/* Lila → Babyblau als echte Mischung beider Marken-Farben: oben links das Violett
+          (--c-purple-glow), unten rechts das Babyblau (--c-accent), dazwischen ein weicher
+          Zwischenton, damit der Verlauf im kleinen Herz-Format nicht hart umschlägt, sondern
+          wirklich wie eine Mischung wirkt. */}
       <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
         <stop offset="0%" stop-color="var(--c-purple-glow)"></stop>
+        <stop offset="55%" stop-color="#8aa8e6"></stop>
         <stop offset="100%" stop-color="var(--c-accent)"></stop>
       </linearGradient>
     </defs>