.stories {
  display: flex;
  gap: 14px;
  padding: 6px 0;
  margin: 0;
  overflow-x: auto;
  font-family: inherit;
  
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.stories::-webkit-scrollbar {
  display: none;
}

@media (min-width: 992px) {
  .stories {
    justify-content: center;
    overflow-x: auto;   /* 👈 WICHTIG */
  }
}

.story {
 display: inline-flex;           /* 🔥 DAS hat gefehlt */
  flex-direction: column;
  align-items: center;

  width: 72px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;

  text-decoration: none;          /* Link-Optik aus */
  color: inherit;                 /* keine blaue Schrift */
  -webkit-tap-highlight-color: transparent;
}

.ring {
  position: relative;
  width: 66px;
  height: 66px;
  padding: 3.5px;   /* vorher 2.5px */
  border-radius: 50%;
  margin: 0 auto;
}


.ring-gradient {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #feda75,
    #fa7e1e,
    #d62976,
    #962fbf,
    #feda75
  );
  z-index: 1;
}



.inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
}


.inner img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

/* 🔥 Badge Basis */
.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 10px;
  color: #fff;
  z-index: 5;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.ring-gradient.animate-on-load {
  animation: ringIntro 1.5s ease-out 1;
  transform-origin: center center;
}






@keyframes ringIntro {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



/* Farben */
.badge.green  { background: #65D95B; }
.badge.red    { background: #ea5455; }
.badge.blue   { background: #56D3D1; }
.badge.purple { background: #9b59b6; }
.badge.dark   { background: #CB99C9; }
.badge.orange { background: #FFAB38; }
.badge.pink   { background: #FF4FB8; }