/* Paket 88 · Projekte-Slider (Aykut 18.10.2026: „Man soll auf der Projekte-Seite schön animiert sliden können zwischen den Projekten“)
   Ohne JavaScript bleibt alles ein normales Raster. Mit JS: Scroll-Snap, Wischen, Ziehen mit der Maus, Pfeile, Punkte, Tastatur.
   Karten am Rand werden kleiner und blasser (Tiefe). Bei „Bewegung reduzieren“ / „Bewegung anhalten“ entfällt jede Bewegung. */
.pj88{--gap:clamp(14px,1.8vw,22px);--pv:1.14;position:relative}
@media (min-width:620px){.pj88{--pv:2.15}}
@media (min-width:1000px){.pj88{--pv:3.22}.pj88[data-n="3"]{--pv:3}}
.pj88-track{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.pj88-slide{display:flex;min-width:0}
.pj88-slide>.card{width:100%}
.pj88-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pj88.is-on .pj88-track{display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:14px 4px 34px;margin:-14px -4px -34px;scroll-padding-inline:4px;perspective:1600px;
  -webkit-overflow-scrolling:touch;outline:none;border-radius:var(--r-lg,20px)}
.pj88.is-on .pj88-track::-webkit-scrollbar{display:none}
.pj88.is-on .pj88-track:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--cobalt,#2563EB) 55%,transparent)}
.pj88.is-on .pj88-slide{flex:0 0 calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));scroll-snap-align:start;
  transform:perspective(1600px) rotateY(var(--ry,0deg)) scale(var(--sc,1));opacity:var(--op,1);transform-origin:var(--tx,50%) 60%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.pj88.is-on.can-l.can-r .pj88-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent)}
.pj88.is-on.can-r:not(.can-l) .pj88-track{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.pj88.is-on.can-l:not(.can-r) .pj88-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px);mask-image:linear-gradient(90deg,transparent 0,#000 34px)}
.pj88.is-drag .pj88-track{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.pj88.is-drag .pj88-slide{transition:none}
.pj88.is-on.can-l .pj88-track,.pj88.is-on.can-r .pj88-track{cursor:grab}
.pj88.is-on .pj88-slide img{-webkit-user-drag:none;user-select:none}

/* Einflug beim ersten Sichtbarwerden */
.pj88.is-pre .pj88-slide{translate:0 26px;opacity:0}
.pj88.is-in .pj88-slide{translate:0 0;transition-delay:calc(var(--i,0) * 70ms)}

/* Steuerung */
.pj88-ctl{display:none}
.pj88.is-on.has-more .pj88-ctl{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(18px,2vw,26px)}
.pj88-dots{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.pj88-dot{all:unset;box-sizing:border-box;cursor:pointer;min-width:24px;height:24px;padding:0 7px;border-radius:99px;display:grid;place-items:center;transition:min-width .4s cubic-bezier(.2,.8,.2,1)}
.pj88-dot:after{content:"";display:block;width:10px;height:10px;border-radius:99px;background:color-mix(in srgb,var(--text-3,#64748B) 40%,transparent);transition:width .4s cubic-bezier(.2,.8,.2,1),background .3s}
.pj88-dot:hover:after{background:color-mix(in srgb,var(--cobalt,#2563EB) 60%,transparent)}
.pj88-dot[aria-current=true]{min-width:44px}
.pj88-dot[aria-current=true]:after{width:30px;background:var(--cobalt,#2563EB)}
.pj88-dot:focus-visible{outline:2px solid var(--cobalt,#2563EB);outline-offset:1px}
.pj88-nav{display:flex;gap:8px;align-items:center}
.pj88-pos{font:600 .78rem/1 var(--font-body,inherit);color:var(--text-3,#64748B);font-variant-numeric:tabular-nums;margin-right:6px;min-width:3.4em;text-align:right}
.pj88-btn{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface,#fff);border:1px solid var(--line,#E2E8F0);color:var(--text,#0F172A);box-shadow:var(--sh-1,0 1px 2px rgba(15,23,42,.06));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,opacity .2s}
.pj88-btn svg{width:18px;height:18px}
.pj88-btn:hover:not([disabled]){transform:translateY(-2px);border-color:var(--cobalt,#2563EB);color:var(--cobalt-ink,#1D4ED8)}
.pj88-btn:active:not([disabled]){transform:scale(.94)}
.pj88-btn[disabled]{opacity:.35;cursor:default}
.pj88-btn:focus-visible{outline:2px solid var(--cobalt,#2563EB);outline-offset:3px}

/* kleine Karten: „in Arbeit“, „Ihr Projekt“, „Werkbank“ */
.pj88 .tile .thumb img.pj88-head{object-fit:cover;object-position:var(--op-x,60%) 50%}
.pj88-wip .thumb:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--cobalt,#2563EB) 16%,transparent) 50%,transparent 60%);
  background-size:260% 100%;animation:pj88-sheen 3.4s linear infinite}
@keyframes pj88-sheen{from{background-position:130% 0}to{background-position:-130% 0}}
.pj88-cta .thumb{background:linear-gradient(150deg,color-mix(in srgb,var(--cobalt,#2563EB) 14%,var(--surface-2,#F1F5F9)),var(--surface-3,#E2E8F0))}
.pj88-cta .tlink{color:var(--cobalt-ink,#1D4ED8)}
.pj88-plus{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt,#2563EB);color:#fff;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--cobalt,#2563EB) 80%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pj88-plus svg{width:20px;height:20px}
.pj88-cta:hover .pj88-plus{transform:rotate(90deg) scale(1.06)}
div.card.tile.pj88-wip:hover{transform:none}

@media (prefers-reduced-motion:reduce){
  .pj88.is-on .pj88-slide{transition:none;transform:none!important;opacity:1!important}
  .pj88.is-pre .pj88-slide{translate:none;opacity:1}
  .pj88-wip .thumb:after{animation:none}
  .pj88-dot,.pj88-btn,.pj88-plus{transition:none}
}
html.a2-still .pj88.is-on .pj88-slide{transition:none;transform:none!important;opacity:1!important;translate:none!important}
html.a2-still .pj88-wip .thumb:after{animation:none}