/* WHOLE STACK Scroll-UI: Goldfaden-Scrollbar (1a) und Icon-Ring (2b). Folgt html[data-theme]. */
html { scrollbar-width: thin; scrollbar-color: #BFAE86 transparent; }
html[data-theme='light'] { scrollbar-color: #A8956A transparent; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #BFAE86; border-radius: 3px; }
html[data-theme='light'] ::-webkit-scrollbar-thumb { background: #A8956A; }

.ws-sp { position: fixed; z-index: 880; right: clamp(16px, 2.2vw, 28px); bottom: clamp(16px, 2.2vw, 28px); width: 58px; height: 58px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20,17,13,0.42); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(243,238,228,0.12), 0 14px 30px -16px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(10px) scale(.94); pointer-events: none; transition: opacity 500ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1), box-shadow 400ms; -webkit-tap-highlight-color: transparent; }
html[data-theme='light'] .ws-sp { background: rgba(247,243,236,0.62); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(26,23,20,0.1), 0 14px 30px -18px rgba(60,44,20,0.45); }
.ws-sp.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ws-sp:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(191,174,134,0.55), 0 16px 34px -16px rgba(191,174,134,0.45); }
.ws-sp:focus-visible { outline: 2px solid #BFAE86; outline-offset: 3px; }
.ws-sp-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ws-sp-bg { fill: none; stroke: rgba(243,238,228,0.14); stroke-width: 3; }
.ws-sp-fg { fill: none; stroke: #BFAE86; stroke-width: 3.4; stroke-linecap: round; }
html[data-theme='light'] .ws-sp-bg { stroke: rgba(26,23,20,0.12); }
html[data-theme='light'] .ws-sp-fg { stroke: #A8956A; }
.ws-sp-ico { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 308.23 / 357.06; transform: translate(-50%, -50%); transition: transform 500ms cubic-bezier(.16,1,.3,1); }
/* Beim Überfahren weicht das Icon einem Pfeil nach oben, der sanft nach oben zieht */
.ws-sp-ico { opacity: 1; transition: transform 500ms cubic-bezier(.16,1,.3,1), opacity 300ms ease; }
.ws-sp-up { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -30%); opacity: 0; fill: none; stroke: #BFAE86; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  transition: opacity 300ms ease, transform 500ms cubic-bezier(.16,1,.3,1); }
html[data-theme='light'] .ws-sp-up { stroke: #8E7B52; }
.ws-sp:hover .ws-sp-ico, .ws-sp:focus-visible .ws-sp-ico { opacity: 0; transform: translate(-50%, -80%) scale(.85); }
.ws-sp:hover .ws-sp-up, .ws-sp:focus-visible .ws-sp-up { opacity: 1; transform: translate(-50%, -50%); animation: wsSpUp 1600ms cubic-bezier(.45,.05,.55,.95) 500ms infinite; }
@keyframes wsSpUp { 0%, 100% { transform: translate(-50%, -50%); } 45% { transform: translate(-50%, -66%); } 60% { transform: translate(-50%, -62%); } }
@media (prefers-reduced-motion: reduce) { .ws-sp:hover .ws-sp-up { animation: none; } }
.ws-sp-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.ws-sp-base { color: rgba(243,238,228,0.2); }
.ws-sp-fill { color: #BFAE86; }
html[data-theme='light'] .ws-sp-base { color: rgba(26,23,20,0.14); }
html[data-theme='light'] .ws-sp-fill { color: #A8956A; }
html.ws-rp-offen .ws-sp, html.ws-kt-offen .ws-sp, html.ws-mm-lock .ws-sp { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 640px) { .ws-sp { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .ws-sp, .ws-sp-ico { transition: none; } }

/* Schutzzone für den Fortschrittsring unten rechts: Inhalte in gepinnten Bühnen enden links davon */
:root { --ws-sp-zone: calc(58px + clamp(16px, 2.2vw, 28px) + 14px); }
@media (max-width: 640px) { :root { --ws-sp-zone: calc(50px + 16px + 12px); } }
.ws-bot { padding-right: max(6px, calc(var(--ws-sp-zone) - 30px)) !important; }
.ws-conv-panel { padding-right: max(clamp(24px, 3vw, 38px), calc(var(--ws-sp-zone) - 36px)) !important; }
.fqc-stage { padding-right: max(clamp(24px, 4vw, 40px), var(--ws-sp-zone)) !important; }
@media (max-width: 1100px) {
  /* Tablet: Gate-Tafel im Ablauf und Texttafel im Einwand reichen sonst bis unter den Ring */
  .rs-dp { padding-right: max(16px, calc(var(--ws-sp-zone) - 22px)) !important; }
  .eb-st, .eb-act { padding-right: max(0px, calc(var(--ws-sp-zone) - 66px)) !important; }
}
/* Scroll-Hinweis im Einwand sitzt unten rechts: links neben den Ring rücken */
#einwand .eb-cue { right: calc(var(--ws-sp-zone) + 4px) !important; }

/* Gezeichneter Schrägpfeil statt ↗ (iOS-Emoji) */
.ws-arr { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.12em; flex: none; }