/* ************************************************************************** */
/* ***                       Scroll-Arrows bei 70%                        *** */
/* ************************************************************************** */

.scrollable { max-height: 70%; overflow-y: auto; position: relative; }
@media screen and (max-width: 1150px) {.scrollable { max-height: 65%; overflow-y: auto; position: relative; }}

/*.scroll-arrow {
  position: absolute; right: 8px; bottom: 8px;
  width: 28px; height: 28px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.6);
  cursor: pointer; transform: rotate(0deg);
  opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 1000;
}
.scroll-arrow::before { content: "↓"; color: #fff; font-size: 16px; }
.scroll-arrow.is-visible { opacity: 1; pointer-events: auto; }
.scroll-arrow.is-bottom { transform: rotate(180deg); }*/

.scroll-arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 18px;
  color: #000000;
/*  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.45);*/
  border-radius: 999px;
  padding: 8px 8px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: rotate(0deg); /* zeigt standardmäßig nach unten */
  transition: opacity .18s ease, transform .25s ease;
/*  transition:
    opacity .25s ease,
    transform .35s ease,
    box-shadow .25s ease,
    background .25s ease;*/
  backdrop-filter: blur(4px);
}

.scroll-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-arrow.is-bottom {
  transform: rotate(180deg);  /* unten: nach oben zeigen */
}

.scroll-arrow:hover {
  background: rgba(0,0,0,.03);
  color: #000000;
  box-shadow: 0 0 8px rgba(255,255,255,.25);
}

/* ✨ Klick-Feedback */
.scroll-arrow.clicked {
  transform: scale(0.85) rotate(var(--rotation, 0deg));
  box-shadow: 0 0 12px rgba(255,255,255,.4);
}

/* sanft zurück */
.scroll-arrow.clicked.releasing {
  transform: scale(1) rotate(var(--rotation, 0deg));
}