/* Banner-Slider (Shop + Richards Empfehlungen)
   Neue Banner: im HTML einen <li class="rs-slide">-Block kopieren und Bilder, Link, CTA und Code anpassen.
   Bedienung: Maus ziehen, Wischen, Trackpad seitlich, Pfeile im Bild, Punkte, Tastatur (←/→). */
.rs-slider { position: relative; max-width: 980px; margin: 0 auto; }
.rs-slider-viewport { position: relative; overflow: hidden; touch-action: pan-y; }
.rs-slider-track {
  list-style: none; display: flex; margin: 0; padding: 0;
  transition: transform .6s cubic-bezier(0.22,1,0.36,1); will-change: transform;
}
.rs-slider.is-dragging .rs-slider-track { transition: none; }
.rs-slider.is-ready .rs-slider-viewport { cursor: grab; }
.rs-slider.is-dragging .rs-slider-viewport { cursor: grabbing; }
.rs-slider.is-dragging .rs-slide a { pointer-events: none; }
.rs-slide { flex: 0 0 100%; min-width: 0; }
.rs-slide img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

.rs-slide-media {
  display: block; position: relative; color: inherit; border-radius: 20px; overflow: hidden; background: #0F0F0F;
  box-shadow: 0 24px 60px rgba(0,0,0,0.16);
}
.rs-slide-media:focus-visible { outline: 3px solid #F8D900; outline-offset: -3px; }
.rs-slide picture, .rs-slide img { display: block; width: 100%; height: auto; }

/* CTA-Bereich unter jedem Banner */
.rs-slide-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin-top: 22px; padding: 0 4px;
}
.rs-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 980px;
  background: #F8D900; color: var(--ink, #1A212A); font-size: 15px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 6px 24px rgba(248,217,0,0.35), 0 1px 3px rgba(0,0,0,0.12);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.rs-cta:hover { background: #ffe31a; transform: translateY(-1px); box-shadow: 0 10px 32px rgba(248,217,0,0.5), 0 2px 6px rgba(0,0,0,0.14); }
.rs-cta:focus-visible { outline: 3px solid var(--ink, #1A212A); outline-offset: 3px; }
.rs-cta svg { transition: transform .2s; }
.rs-cta:hover svg { transform: translateX(3px); }
.rs-code {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 18px; border-radius: 980px; cursor: pointer;
  background: var(--white, #fff); color: var(--ink, #1A212A);
  border: 1.5px dashed var(--ink2, #3D4551);
  font-family: inherit; font-size: 14px; line-height: 1.2;
  transition: border-color .2s, background .2s;
}
.rs-code:hover { background: var(--bg, #F7F5F1); border-style: solid; }
.rs-code:focus-visible { outline: 3px solid #F8D900; outline-offset: 2px; }
.rs-code strong { font-weight: 800; letter-spacing: .04em; }
.rs-code-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--ink, #1A212A);
  border-radius: 980px; padding: 6px 12px;
}
.rs-code.is-copied { border-color: #1f7a3f; border-style: solid; }
.rs-code.is-copied .rs-code-action { background: #1f7a3f; }

.rs-slide-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center;
  margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--muted, #6B7280); text-align: center;
}
.rs-slide-meta:empty { display: none; }
.rs-ad-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink, #1A212A); background: var(--bg2, #EEEAE3); border: 1px solid var(--border, #DDD9D1);
  border-radius: 980px; padding: 2px 10px;
}

/* Pfeile im Bild */
.rs-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: #fff; background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .2s, opacity .25s, transform .2s;
}
.rs-arrow:hover { background: rgba(0,0,0,0.65); }
.rs-arrow:focus-visible { outline: 3px solid #F8D900; outline-offset: 2px; }
.rs-arrow--prev { left: 16px; }
.rs-arrow--next { right: 16px; }
@media (hover: hover) and (pointer: fine) {
  .rs-arrow { opacity: 0; }
  .rs-slider:hover .rs-arrow, .rs-arrow:focus-visible { opacity: 1; }
}

/* Punkte mit Fortschritt + Pause */
.rs-slider-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.rs-slider-dots { display: flex; align-items: center; gap: 2px; }
.rs-slider-dot {
  height: 44px; min-width: 24px; border: 0; background: none; cursor: pointer; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rs-slider-dot span {
  position: relative; display: block; width: 10px; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--border, #DDD9D1); box-shadow: inset 0 0 0 1px rgba(26,33,42,0.25);
  transition: width .35s cubic-bezier(0.22,1,0.36,1), background .2s;
}
.rs-slider-dot[aria-current="true"] span { width: 36px; background: rgba(26,33,42,0.18); }
.rs-slider-dot[aria-current="true"] span::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ink, #1A212A);
  transform-origin: left; transform: scaleX(1);
}
.rs-slider.is-playing .rs-slider-dot[aria-current="true"] span::after { animation: rsProgress var(--rs-interval, 6s) linear forwards; }
.rs-slider.is-held .rs-slider-dot[aria-current="true"] span::after { animation-play-state: paused; }
@keyframes rsProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rs-slider-dot:focus-visible { outline: 3px solid #F8D900; outline-offset: -6px; border-radius: 999px; }
.rs-slider-pause {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--white, #fff); color: var(--ink, #1A212A); border: 1px solid var(--border, #DDD9D1); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rs-slider-pause:hover { background: var(--bg, #F7F5F1); border-color: var(--ink2, #3D4551); }
.rs-slider-pause:focus-visible { outline: 3px solid #F8D900; outline-offset: 2px; }

/* Ohne JS: Banner untereinander statt Slider */
.rs-slider:not(.is-ready) .rs-slider-track { flex-direction: column; gap: 40px; }

@media (prefers-reduced-motion: reduce) {
  .rs-slider-track, .rs-slider-dot span { transition: none; }
  .rs-slider.is-playing .rs-slider-dot[aria-current="true"] span::after { animation: none; }
}
@media (max-width: 768px) {
  .rs-slide-media { border-radius: 16px; }
  .rs-arrow { width: 42px; height: 42px; }
  .rs-arrow--prev { left: 10px; }
  .rs-arrow--next { right: 10px; }
  .rs-slide-cta { flex-direction: column; gap: 10px; }
  .rs-cta, .rs-code { width: 100%; max-width: 360px; justify-content: center; }
}