/* ============================
   Index Styles (vollständig)
   ============================ */

/* Fade-Effekte für Slider */
.fade { opacity: 1; transition: opacity .2s ease-in-out; }
.fade-out { opacity: 0; }

/* Toast */
.toast {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  font-weight: 700;
  z-index: 99999;
  color: #fff;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
.toast.show { display: block; opacity: 1; }
.toast--success { background: #22c55e; }
.toast--error   { background: #f87171; }

/* Barrierearme Animationen */
@media (prefers-reduced-motion: reduce) {
  .toast, .fade, .fade-out { transition: none !important; }
}

/* Reviews – Helferklassen */
.rating-card  {
  background:#0f172a; color:#fff; border-radius:14px; padding:16px;
  width:176px; min-width:176px; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.rating-score { font-size:15px; line-height:1; font-weight:800; }
.rating-stars { margin-top:6px; font-size:20px; line-height:1; }
/* Sterne (auch außerhalb der .rating-stars verwendbar) */
.star--on  { color:#f59e0b !important; }   /* amber-500 */
.star--off { color:#d1d5db !important; }   /* gray-300  */
.rating-stars .star { color:#f59e0b; }     /* falls .star verwendet wird */
.rating-note  { margin-top:6px; font-size:12px; color:#e2e8f0; }
.btn-all-reviews { background:#111827; color:#fff; display:inline-block; }

/* Reviews – Balkendiagramm */
.rating-bars .bar{
  height:8px; width:100%;
  background:#e5e7eb;           /* gray-200 */
  border-radius:9999px;
  overflow:hidden;
}
.rating-bars .bar__inner{
  height:8px; width:0;
  background:#fbbf24;           /* yellow-400 */
  border-radius:9999px;
  transition:width .4s ease;
}