/* Kleine Spielereien im Film-Look, auf allen Seiten. Alles Bewegte hat eine ruhige Fassung für „weniger Bewegung“. */

/* Schnitt zwischen Seiten: Schwarzblende mit „CUT TO“ */
.cut{position:fixed;inset:0;z-index:998;background:#0A0A0A;pointer-events:none;transform:scaleY(0);transform-origin:50% 100%;display:flex;align-items:flex-end;padding:0 clamp(18px,3.4vw,52px) 30px;color:#8E8E8A;font:500 12px/1 "Chivo Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.cut.in{transform:scaleY(1);transition:transform .34s cubic-bezier(.77,0,.175,1)}
.cut.out{transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.77,0,.175,1)}
.cut span{opacity:0;transition:opacity .2s ease .12s}
.cut.in span{opacity:1}
html.cut-on body::after{content:"";position:fixed;inset:0;z-index:997;background:#0A0A0A}

/* Filmkorn, ganz leicht */
.grain{position:fixed;inset:-50%;z-index:996;pointer-events:none;opacity:.055;background-size:180px 180px;animation:grain .9s steps(6) infinite;transition:opacity .3s ease}
html.player-on .grain{opacity:0;animation-play-state:paused}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}

/* Timeline unter der Kopfzeile: wie weit man in der Seite ist */
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#F4F4F2;transform:scaleX(var(--p,0));transform-origin:0 50%;opacity:.55}

/* Wörter und Buchstaben (von spiel.js zerlegt) */
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.mega .w,.t-big .w{overflow:hidden;padding-top:.14em;margin-top:-.14em;vertical-align:top}
@media (hover:hover) and (pointer:fine){
  .t-big .ch{transition:transform .35s cubic-bezier(.23,1,.32,1),color .35s ease}
  .t-big .ch:hover{transform:translateY(-.07em);color:#8E8E8A}
}

/* Bildrahmen: Ecken ziehen sich wie beim Fokus-Lock zusammen und blinken einmal */
.frame .c{transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .3s ease}
.lockable .c{opacity:0}
.lockable .c1{transform:translate(-14px,-14px)}.lockable .c2{transform:translate(14px,-14px)}
.lockable .c3{transform:translate(-14px,14px)}.lockable .c4{transform:translate(14px,14px)}
.lockable.lock .c{opacity:1;transform:none;animation:lock .5s steps(2) .45s 2}
@keyframes lock{50%{opacity:.15}}

/* Projektkacheln: Bild bewegt sich beim Scrollen leicht im Rahmen */
.pcard .frame:not(.tri):not(.tall) > img{transform:translate3d(0,var(--py,0%),0) scale(var(--ps,1.1));transition:transform .9s cubic-bezier(.23,1,.32,1),filter .6s ease}
@media (hover:hover) and (pointer:fine){.pcard:hover .frame{--ps:1.16}}

/* Leistungsumfang als Shotlist: jeder Punkt wird beim Vorbeiscrollen abgehakt */
ol.inc li{grid-template-columns:52px 1fr 26px;align-items:start}
.inc .ck{width:20px;height:20px;margin-top:3px;border:1px solid rgba(244,244,242,.25);border-radius:4px;display:grid;place-items:center;transition:border-color .3s ease,background-color .3s ease}
.inc .ck svg{width:14px;height:14px;fill:none;stroke:#0A0A0A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .4s cubic-bezier(.23,1,.32,1) .1s}
.inc li.done .ck{background:#F4F4F2;border-color:#F4F4F2}
.inc li.done .ck svg{stroke-dashoffset:0}
.inc li::before{transition:color .3s ease}
.inc li.done::before{color:#F4F4F2}

/* Abschnitte im Artikel tragen eine Szenennummer */
.art .prose{counter-reset:szene}
.art .prose h2{counter-increment:szene}
.art .prose h2::before{content:"Szene " counter(szene,decimal-leading-zero);content:"Szene " counter(szene,decimal-leading-zero) / "";display:block;margin-bottom:12px;font:500 12px/1 "Chivo Mono",ui-monospace,monospace;letter-spacing:.12em;color:#8E8E8A}
.legal .prose h2::before{content:none}

/* Leistungszeilen: Linie zeichnet sich beim Hereinscrollen */
.svc > li{position:relative;border-top-color:transparent}
.svc > li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(244,244,242,.18);transform:scaleX(var(--l,1));transform-origin:0 50%;transition:transform 1s cubic-bezier(.23,1,.32,1)}
.svc.anim > li:not(.on){--l:0}

/* Nächstes Projekt: Schrift füllt sich beim Scrollen von der Kontur zur Fläche */
.next b{color:transparent;-webkit-text-stroke:1px rgba(244,244,242,.6);background:linear-gradient(#F4F4F2,#F4F4F2) 0 0/var(--fill,0%) 100% no-repeat;-webkit-background-clip:text;background-clip:text}

/* Knöpfe: Pfeil schiebt nach rechts, Knopf folgt ein Stück der Maus */
.btn,.t-btn,.chip{transition-property:transform,translate,background-color,color,box-shadow}
.btn svg,.t-btn svg{transition:translate .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.btn:hover svg,.t-btn:hover svg{translate:4px 0}}

/* Mail kopieren */
.copy{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:9px 14px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(244,244,242,.25);background:none;color:#F4F4F2;font:500 12px/1 "Chivo Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .16s ease,color .16s ease,transform .16s ease}
.copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.copy:active{transform:scale(.97)}
.copy.ok{background:#F4F4F2;color:#0A0A0A}
@media (hover:hover) and (pointer:fine){.copy:hover{box-shadow:inset 0 0 0 1.5px #F4F4F2}}

/* Zurückspulen im Fuß */
.t-rew{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.t-rew svg{width:16px;height:10px;fill:currentColor;transition:translate .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.t-rew:hover{color:#F4F4F2}.t-rew:hover svg{translate:-4px 0}}
.t-rew.go svg{animation:rew .35s linear infinite}
@keyframes rew{50%{translate:-5px 0}}

/* Galerie groß: Bild zieht kurz Schärfe */
.lb[open] img{animation:lbin .45s cubic-bezier(.23,1,.32,1)}
@keyframes lbin{from{opacity:0;transform:scale(.97);filter:blur(8px)}}

/* Cursor: normaler Mauszeiger, nur die Beschriftung kommt aus playhead.js/.css (22.10.2026) */

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .cut.in,.cut.out{transition:none}
  .lockable .c{opacity:1;transform:none}
  .lockable.lock .c{animation:none}
  .t-rew.go svg{animation:none}
  .lb[open] img{animation:none}
}
.ext svg{width:18px;height:18px;flex:none;transition:translate .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.ext:hover svg{translate:4px 0}}

/* Touch-Geräte: Hinweise wie „komm näher“ setzen eine Maus voraus → ausblenden (2026-10-20) */
@media (hover:none){.figread{visibility:hidden}}