.griff{position:absolute;inset:0;--x:52%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.griff-bild{position:absolute;inset:0;background-position:center center;background-size:cover;background-repeat:no-repeat;background-color:#0a0c0c}
.griff-links{clip-path:inset(0 calc(100% - var(--x)) 0 0)}

.griff-linie{position:absolute;z-index:3;top:0;left:var(--x);width:1px;height:calc(var(--griff-hoehe,47%) - 22px);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.8));transform:translateX(-.5px);pointer-events:none}

.griff-knopf{position:absolute;z-index:3;left:var(--x);top:var(--griff-hoehe,47%);width:44px;height:44px;margin:0;padding:0;
  border:1.5px solid rgba(255,255,255,.92);border-radius:50%;background:rgba(8,9,9,.35);color:#fff;
  transform:translate(-50%,-50%);display:grid;place-items:center;cursor:ew-resize;
  font:300 14px/1 "Source Serif 4",Georgia,serif;letter-spacing:.14em}
.griff-knopf:focus-visible{outline:1px solid rgba(255,255,255,.9);outline-offset:4px}
.griff-hinweis{position:absolute;z-index:7;left:4.5vw;bottom:12px;font:400 10px/1.3 Archivo,Arial,sans-serif;letter-spacing:.06em;
  color:rgba(238,233,223,.55);pointer-events:none}
@media (max-width:900px){
  .griff-knopf{width:38px;height:38px;font-size:12px}
  .griff-linie{height:calc(var(--griff-hoehe,47%) - 19px)}
  .griff-hinweis{left:16px;bottom:8px;font-size:9px}
}