/* Vorher/Nachher-Schieber: zwei Bilder übereinander, das Vorher wird per clip-path bis zur
   Position --p gezeigt. Der unsichtbare Range-Input liegt über allem und nimmt Maus, Finger
   und Tastatur (Pfeiltasten, wenn fokussiert). */
.schieber{ position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; --p:50% }
.schieber img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.schieber .s-vorher{ clip-path:inset(0 calc(100% - var(--p)) 0 0) }
.schieber .s-linie{ position:absolute; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none }
.schieber .s-linie::after{ content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; color:#1B3E4A; display:flex; align-items:center; justify-content:center; font:700 17px/1 "Plex","Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.04em; box-shadow:0 2px 12px rgba(0,0,0,.35) }
.schieber .s-label{ position:absolute; bottom:14px; font:600 11px/1 "Plex","Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#3A3A3A; background:rgba(255,255,255,.84); padding:6px 10px; border-radius:4px; pointer-events:none }
.schieber .s-links{ left:14px } .schieber .s-rechts{ right:14px }
.schieber .s-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent }
.schieber .s-range:focus-visible{ opacity:1; outline:3px solid #1B3E4A; outline-offset:-3px; background:transparent }
.schieber .s-range::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:100%; background:transparent }
.schieber .s-range::-moz-range-thumb{ width:44px; height:100%; background:transparent; border:0 }