/* Schieberegler gegen Spam (wie im Muenzlein-CMS) – includes/schieber.php, files/schieber.js */
.schieber { --knopf: 3.1rem; display: grid; gap: .6rem; margin: .4rem 0 1.4rem; }
.schieber-text { margin: 0; color: var(--text-2); font-weight: 600; font-size: .95rem; transition: color .3s; }
.schieber.im-ziel .schieber-text { color: var(--gruen); }
.schieber-bahn { position: relative; height: calc(var(--knopf) + .5rem); border-radius: 99px; background: rgba(0, 0, 0, .28); border: 1px solid var(--rand-2); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.schieber-ziel { position: absolute; top: .25rem; left: calc(.25rem + (100% - .5rem - var(--knopf)) * var(--ziel) / 100 - .3rem); width: calc(var(--knopf) + .6rem); height: var(--knopf); border: 2px dashed rgba(255, 198, 26, .65); border-radius: 99px; background: rgba(255, 198, 26, .08); animation: schieber-pulsieren 2.2s ease-in-out infinite; transition: left .45s var(--feder); }
@keyframes schieber-pulsieren { 50% { background: rgba(255, 198, 26, .18); } }
.schieber-knopf { --p: 0; position: absolute; top: .25rem; left: calc(.25rem + (100% - .5rem - var(--knopf)) * var(--p) / 100); display: grid; place-items: center; width: var(--knopf); height: var(--knopf); border-radius: 50%; background: var(--gelb); color: #111; font-size: 1.05rem; box-shadow: 0 8px 22px -6px rgba(255, 198, 26, .7), inset 0 -2px 0 rgba(0, 0, 0, .14); cursor: grab; touch-action: none; transition: transform .2s var(--feder), box-shadow .2s, background .3s; }
.schieber.zieht .schieber-knopf { cursor: grabbing; transform: scale(1.08); box-shadow: 0 12px 30px -6px rgba(255, 198, 26, .85); }
.schieber-knopf:focus-visible { outline: 3px solid rgba(255, 198, 26, .5); outline-offset: 3px; }
.schieber.im-ziel .schieber-ziel { border-style: solid; border-color: var(--gruen); background: rgba(52, 211, 153, .16); animation: none; }
.schieber.im-ziel .schieber-knopf { background: var(--gruen); box-shadow: 0 8px 24px -6px rgba(52, 211, 153, .8); }
.schieber.im-ziel .schieber-knopf i::before { content: '\f00c'; }
.schieber.freude .schieber-knopf { animation: schieber-hops .5s var(--feder); }
@keyframes schieber-hops { 40% { transform: scale(1.22); } }
.schieber.wackeln .schieber-bahn { animation: schieber-wackeln .45s ease; }
@keyframes schieber-wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .schieber-ziel, .schieber.freude .schieber-knopf, .schieber.wackeln .schieber-bahn { animation: none; } .schieber-ziel, .schieber-knopf { transition: none; } }