/* Parallax-Trenner zwischen den Jahren + lebendigere Fotos */
#orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;will-change:transform;transition:background 1.2s}
#orbs i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:5vh;background:hsl(var(--h,260),90%,55%)}
#orbs i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:38vh;background:hsl(calc(var(--h,260) + 50),90%,58%)}
#orbs i:nth-child(3){width:30vw;height:30vw;left:30vw;top:70vh;background:hsl(calc(var(--h,260) + 110),85%,55%);opacity:.18}

.sep{position:relative;height:clamp(300px,62vh,540px);overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.sep-w{position:absolute;left:50%;white-space:nowrap;font-weight:800;line-height:1;letter-spacing:-.05em;will-change:transform;user-select:none}
.sep-w1{top:6%;font-size:clamp(7rem,30vw,26rem);color:transparent;-webkit-text-stroke:2px hsla(var(--h),90%,70%,.45)}
.sep-w2{bottom:8%;font-size:clamp(2.2rem,9vw,7.5rem);letter-spacing:-.03em;
  background:linear-gradient(90deg,hsl(var(--h),95%,72%),hsl(calc(var(--h) + 70),95%,68%));-webkit-background-clip:text;background-clip:text;color:transparent}
.sep-ring{position:absolute;left:50%;top:50%;width:min(60vw,520px);aspect-ratio:1;margin:calc(min(60vw,520px)/-2) 0 0 calc(min(60vw,520px)/-2);border-radius:50%;
  border:2px solid hsla(var(--h),90%,70%,.6);box-shadow:0 0 60px hsla(var(--h),90%,60%,.35),inset 0 0 60px hsla(var(--h),90%,60%,.2);will-change:transform,opacity}
.sep-ring.r2{border-style:dashed;border-color:hsla(calc(var(--h) + 60),90%,70%,.45);box-shadow:none}
.sp{position:absolute;display:block;will-change:transform;color:hsl(var(--h),95%,75%);text-shadow:0 0 18px currentColor;line-height:1}
.sp svg{width:1em;height:1em;fill:currentColor;display:block}

/* Fotos: Auftritt von verschiedenen Seiten, Bild laeuft im Rahmen mit (Parallax) */
.ph{opacity:0;filter:blur(8px);transform:translate3d(var(--fx,0px),var(--fy,60px),0) rotate(var(--fr,0deg)) scale(var(--fs,.9));
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease),box-shadow .35s;transition-delay:var(--d,0s)}
.ph.in{opacity:1;filter:none;transform:none}
.ph.done{transition:transform .22s ease-out,box-shadow .35s;transition-delay:0s}
.ph img{opacity:0;transform:translate3d(0,var(--py,0px),0) scale(1.18);scale:1;transition:opacity .7s,scale .6s var(--ease)}
.ph img.ld{opacity:1;transform:translate3d(0,var(--py,0px),0) scale(1.18)}
.ph:hover img.ld{transform:translate3d(0,var(--py,0px),0) scale(1.18);scale:1.08}
.ph.in:hover,.ph.done:hover{transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-6px) scale(1.025)}
.ph .shine{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 45%)}
.ph:hover .shine{opacity:1}
/* Lichtstreifen beim Auftauchen */
.ph::before{content:"";display:block;padding-top:calc(100%/var(--ar))}
.ph .sweep{position:absolute;top:0;bottom:0;left:-60%;width:50%;z-index:1;pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:0}
.ph.in .sweep{animation:sweep 1.4s .35s var(--ease) both}
@keyframes sweep{0%{left:-60%;opacity:.9}100%{left:130%;opacity:0}}

/* Kapitelkopf schwebt mit */
.quote,.rabe-note,.ch-tag{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .sep-w,.sp,.sep-ring,#orbs i{transform:none!important}
  .ph{filter:none;transform:none;opacity:1}
  .ph img{transform:scale(1.02)!important}
}

/* Kapitelueberschrift: Wisch-Auftritt, Buchstabenabstand zieht sich zusammen */
.big.reveal{opacity:1;filter:none;clip-path:inset(-8% 100% -8% -2%);letter-spacing:.14em;background-size:180% 100%;
  transition:clip-path 1.3s var(--ease),letter-spacing 1.5s var(--ease)}
.big.reveal.bg-in{clip-path:inset(-8% -6% -8% -2%);letter-spacing:-.06em}
.ch-tag .cnt{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums}
.ch-tag.pop{animation:tagpop .9s var(--ease)}
@keyframes tagpop{0%{transform:scale(.8);box-shadow:0 0 0 0 hsla(var(--h),90%,65%,.7)}50%{transform:scale(1.12)}100%{transform:scale(1);box-shadow:0 0 0 22px hsla(var(--h),90%,65%,0)}}
.sep{display:none}