/* side panel */
#sidePanel {
  position: fixed;
  top: 50%;
  width: var(--panel-width);
  height: var(--panel-height);
  background: var(--bg-1);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.4);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 320ms ease;
  z-index: 1200;
  display: flex;
}
#sidePanel.right {
  right: var(--panel-offset);
  transform: translateX(24px) translateY(-50%);
}
#sidePanel.left {
  left: var(--panel-offset);
  transform: translateX(-24px) translateY(-50%);
}
#sidePanel.visible.right {
  transform: translateX(0) translateY(-50%);
  opacity: 1;
  pointer-events: auto;
}
#sidePanel.visible.left {
  transform: translateX(0) translateY(-50%);
  opacity: 1;
  pointer-events: auto;
}

#sidePanel.bottom {
  left: 50%;
  right: auto;
  top: auto;
  bottom: var(--panel-offset);
  width: calc(100% - 48px);
  max-width: var(--panel-width);
  border-radius: 12px;
  transform: translate(-50%, 24px) translateY(100%);
}
#sidePanel.visible.bottom {
  transform: translate(-50%, 0) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.panel-inner {
  padding: 18px;
  color: var(--text);
  font-size: 0.95rem;
  overflow: auto;
  height: calc(var(--panel-height) - 32px);
  box-sizing: border-box;
  transition: opacity 260ms ease, transform 260ms ease;
  opacity: 1;
}
.panel-inner.fade-out {
  opacity: 0;
  transform: translateY(8px);
}
.panel-inner.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.panel-inner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
}

/* scrollbar styling for panel-inner (keeps global scrollbar hidden) */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.panel-inner {
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 205, 225, 0.9) rgba(15, 25, 40, 0.35);
}
.panel-inner::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.panel-inner::-webkit-scrollbar-track {
  background: rgba(6, 12, 20, 0.35);
  border-radius: 10px;
  margin: 6px;
}
.panel-inner::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(180, 205, 225, 0.95),
    rgba(130, 160, 190, 0.95)
  );
  border-radius: 10px;
  border: 2px solid rgba(6, 12, 20, 0.35);
  min-height: 28px;
}
.panel-inner::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(220, 235, 255, 1),
    rgba(160, 190, 220, 1)
  );
}

/* ---------- Carousel (seamless) ---------- */
.carousel {
  width: 100%;
  overflow: hidden;
  margin-top: 1rem;
  pointer-events: none;
  user-select: none;
  border-radius: 8px;
  box-sizing: border-box;
}

.carousel-track {
  display: flex;
  gap: 1rem;               /* sichtbarer Abstand zwischen Bildern (wird in JS berücksichtigt) */
  align-items: center;
  will-change: transform;
  /* animation wird per JS gesetzt: animation: scroll <duration>s linear infinite; */
}

/* Track children (Bilder) */
.carousel-track img {
  width: 16rem;
  height: 9rem;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  pointer-events: none;
}

/* fallback smaller on tiny screens */
@media (max-width:480px){
  .carousel-track img { width: 10.6rem; height:6rem; }
}

/* keyframes use CSS variable --scroll-amt (set from JS) */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--scroll-amt)); }
}