/* ROK Scroll-Hinweis: Goldring mit Pfeil am unteren Rand eines bildschirmhohen Heros.
   Gesetzt wird er von hinweis.js; ohne JavaScript erscheint nichts.
   Bewegung nur auf transform und opacity. Fokusring kommt aus der Stilvorlage (Navy plus Weiß). */
.rok-sh{
  --rok-sh-gold:#C9952A;
  --rok-sh-navy:#2C3E50;
  --rok-sh-zeit:.35s;
  position:absolute;
  left:50%;
  top:var(--rok-sh-top,auto);
  bottom:var(--rok-sh-unten,auto);
  z-index:5;
  box-sizing:border-box;
  width:52px;
  height:52px;
  margin:0 0 0 -26px;
  padding:0;
  display:grid;
  place-items:center;
  border:1.5px solid var(--rok-sh-gold);
  border-radius:50%;
  /* Getönte Mitte: hält den weißen Pfeil auf hellem Foto über 3:1 */
  background:rgba(27,39,51,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:#fff;
  text-decoration:none;
  isolation:isolate;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:translateY(10px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--rok-sh-zeit) ease,transform var(--rok-sh-zeit) ease,visibility 0s linear var(--rok-sh-zeit);
}
.rok-sh.ist-da{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--rok-sh-zeit) ease,transform var(--rok-sh-zeit) ease,visibility 0s;
}
/* Goldfüllung bei Zeiger und Tastatur */
.rok-sh::before{
  content:"";
  position:absolute;
  inset:-1.5px;
  z-index:-1;
  border-radius:50%;
  background:var(--rok-sh-gold);
  opacity:0;
  transform:scale(.4);
  transition:transform .25s ease,opacity .25s ease;
}
.rok-sh:hover,.rok-sh:focus-visible{color:var(--rok-sh-navy)}
.rok-sh:hover::before,.rok-sh:focus-visible::before{opacity:1;transform:scale(1)}
.rok-sh:active::before{transform:scale(.94)}
.rok-sh svg{
  display:block;
  width:20px;
  height:20px;
  animation:rok-sh-atmen 2.8s ease-in-out infinite;
}
@keyframes rok-sh-atmen{
  0%,100%{transform:translateY(-3px);opacity:.7}
  50%{transform:translateY(3px);opacity:1}
}
/* Alter Customizer-Pfeil am selben Hero (::after, rok-bounce-chevron) weicht dem Ring */
.rok-sh-ersetzt.rok-sh-ersetzt::after{content:none!important;display:none!important;animation:none!important}
/* Sprungziel ist kein Bedienelement: kein Ring um den ganzen Abschnitt */
[data-rok-sh-ziel]:focus{outline:none}

@media (prefers-reduced-motion:reduce){
  .rok-sh,.rok-sh.ist-da{transition:opacity .01s linear,visibility 0s}
  .rok-sh{transform:none}
  .rok-sh::before{transition:none}
  .rok-sh svg{animation:none}
}
@media print{
  .rok-sh{display:none!important}
}