diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 648b1b6..b75b4b4 100644
--- a/backend/static/css/components.css
+++ b/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;
+}
diff --git a/backend/static/index.html b/backend/static/index.html
index d92526e..f46531d 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -20,6 +20,16 @@
 
   <title>Ban Yaro</title>
 
+  <!-- Theme vor CSS setzen — verhindert Flash of unstyled content -->
+  <script>
+    (function() {
+      var t = localStorage.getItem('by_theme');
+      if (t === 'dark')  document.documentElement.setAttribute('data-theme', 'dark');
+      if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
+      // 'system' (oder kein Wert) → kein data-theme → @media prefers-color-scheme greift
+    })();
+  </script>
+
   <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
   <link rel="stylesheet" href="/css/design-system.css">
   <link rel="stylesheet" href="/css/layout.css?v=93">
@@ -27,6 +37,9 @@
 </head>
 <body>
 
+<!-- Offline-Banner -->
+<div id="offline-banner">Kein Internet — du bist offline</div>
+
 <!-- Backdrop + Sidebar direkt im body (kein Ancestor-Stacking-Context) -->
 <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
 
@@ -377,6 +390,36 @@
   </div>
 </div>
 
+<!-- Offline-Banner Logik -->
+<script>
+(function() {
+  var _wasOffline = false;
+  var banner = document.getElementById('offline-banner');
+
+  function setOffline() {
+    _wasOffline = true;
+    if (banner) banner.style.display = 'block';
+  }
+
+  function setOnline() {
+    if (banner) banner.style.display = 'none';
+    if (_wasOffline) {
+      _wasOffline = false;
+      // UI.toast ist verfügbar sobald ui.js geladen ist
+      if (window.UI && UI.toast) {
+        UI.toast.success('Wieder online');
+      }
+    }
+  }
+
+  window.addEventListener('offline', setOffline);
+  window.addEventListener('online',  setOnline);
+
+  // Initialzustand prüfen
+  if (!navigator.onLine) setOffline();
+})();
+</script>
+
 <!-- Service Worker -->
 <script>
   if ('serviceWorker' in navigator) {
diff --git a/backend/static/js/api.js b/backend/static/js/api.js
index a43b408..eba9ac4 100644
--- a/backend/static/js/api.js
+++ b/backend/static/js/api.js
@@ -33,7 +33,9 @@ const API = (() => {
     try {
       response = await fetch(`/api${path}`, config);
     } catch (err) {
-      throw new APIError('Keine Verbindung zum Server.', 0, 'network');
+      const offlineMsg = 'Kein Internet — du bist offline.';
+      if (window.UI && UI.toast) UI.toast.warning(offlineMsg, 4000);
+      throw new APIError(offlineMsg, 0, 'network');
     }
 
     // 204 No Content
@@ -48,7 +50,12 @@ const API = (() => {
 
     if (!response.ok) {
       const message = data?.detail || data?.message || `Fehler ${response.status}`;
-      throw new APIError(message, response.status, data?.code);
+      // SW gibt bei Offline-Anfragen 503 + 'Offline — keine Verbindung.' zurück
+      const isOffline = response.status === 503 && message.startsWith('Offline');
+      if (isOffline && window.UI && UI.toast) {
+        UI.toast.warning('Kein Internet — du bist offline.', 4000);
+      }
+      throw new APIError(message, response.status, isOffline ? 'network' : data?.code);
     }
 
     return data;
@@ -272,6 +279,21 @@ const API = (() => {
     updateRequest(id, status) { return patch(`/sitting/requests/${id}`, { status }); },
   };
 
+  // ----------------------------------------------------------
+  // RATINGS
+  // ----------------------------------------------------------
+  const ratings = {
+    rate(targetType, targetId, stars, kommentar = null) {
+      return post('/ratings', { target_type: targetType, target_id: targetId, stars, kommentar });
+    },
+    list(targetType, targetId) {
+      return get(`/ratings/${targetType}/${targetId}`);
+    },
+    mine(targetType, targetId) {
+      return get(`/ratings/me/${targetType}/${targetId}`);
+    },
+  };
+
   // ----------------------------------------------------------
   // FORUM
   // ----------------------------------------------------------
@@ -508,7 +530,7 @@ const API = (() => {
     get, post, put, patch, del, upload,
     auth, dogs, diary, health, tieraerzte, poison,
     places, routes, walks, events, sitting, forum, lost, knigge, weather, push,
-    friends, chat, webcal, importData, sharing, widget, notifications, services,
+    friends, chat, webcal, importData, sharing, widget, notifications, services, ratings,
     subscribeToPush, getLocation,
     APIError,
   };
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 160f469..6bee425 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v207';
+const CACHE_VERSION = 'by-v210';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 
