Feature: Offline-Banner, Online-Toast und API-Offline-Fehlerbehandlung

- #offline-banner in index.html (display:none, fixed oben) mit Inline-Script für window.online/offline Events
- Wieder-online Toast via UI.toast.success
- api.js fängt network-Fehler und SW-503-Offline-Antworten ab und zeigt UI.toast.warning
- SW-Cache auf by-v210 gebumpt (api.js + components.css geändert)

backend/static/css/components.css

@@ -5399,3 +5399,88 @@ svg.empty-state-icon {
 .empty-state-cta {
   margin-top: var(--space-2);
 }
+
+/* ============================================================
+   RATING STARS — Bewertungskomponente
+   ============================================================ */
+.rating-display {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: var(--space-3) 0;
+}
+.rating-stars-avg {
+  display: flex;
+  gap: 2px;
+}
+.rating-star {
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: default;
+  user-select: none;
+  position: relative;
+}
+.rating-star--filled { color: #f59e0b; }
+.rating-star--half {
+  color: #e5e7eb;
+}
+.rating-star--half::before {
+  content: '★';
+  color: #f59e0b;
+  position: absolute;
+  left: 0;
+  width: 50%;
+  overflow: hidden;
+  display: inline-block;
+}
+.rating-star--empty { color: #e5e7eb; }
+.rating-star--pick {
+  cursor: pointer;
+  font-size: 1.6rem;
+  transition: transform .1s;
+}
+.rating-star--pick:hover,
+.rating-star--pick:active { transform: scale(1.15); }
+.rating-avg-label {
+  font-size: var(--text-sm);
+  color: var(--c-text-secondary);
+}
+.rating-rate-btn {
+  color: var(--c-primary);
+  padding: var(--space-1) var(--space-2);
+}
+.rating-widget {
+  background: var(--c-surface-2);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  margin-top: var(--space-2);
+  border: 1px solid var(--c-border-light);
+}
+.rating-pick-stars {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.rating-kommentar {
+  font-size: var(--text-sm);
+}
+
+/* ------------------------------------------------------------
+   OFFLINE-BANNER
+   ------------------------------------------------------------ */
+#offline-banner {
+  display:         none;
+  position:        fixed;
+  top:             0;
+  left:            0;
+  right:           0;
+  z-index:         9999;
+  background:      var(--c-text-secondary, #6b7280);
+  color:           #fff;
+  font-size:       var(--text-sm);
+  text-align:      center;
+  padding:         var(--space-2) var(--space-4);
+  pointer-events:  none;
+  letter-spacing:  0.01em;
+}