/* ============================================================
   SIGNATUR-EFFEKT (Karsten-Spec 2026-07-10, BUILD-PFLICHT):
   ① Kachel klappt LANGSAM als PARALLELOGRAMM über die anderen (.5s)
   ② Diagonale löst sich → Seite GANZFLÄCHIG (.35s, delay .5s)
   ③ Header + Inhalt blenden ein (delay .85s)
   ⚠️ PRODUKTION: transform-/GPU-basiert umsetzen (dieses CSS animiert
   Layout = ruckelt bei großen Bildern — nur Mockup-Näherung!)
   ============================================================ */
.tile{transition:flex-grow 3.8s cubic-bezier(.6,0,.18,1),margin-left 3.8s cubic-bezier(.6,0,.18,1),clip-path 3.8s cubic-bezier(.6,0,.18,1),opacity .8s var(--ease) 1.6s,transform .3s var(--ease)}
.top{transition:opacity 1s var(--ease),max-height 1.8s cubic-bezier(.6,0,.18,1),padding 1.8s cubic-bezier(.6,0,.18,1)}
.tiles{transition:min-height 2.6s cubic-bezier(.6,0,.18,1)}
.fw{transition:inset .35s var(--ease) .5s,clip-path .35s var(--ease) .5s}
.fw .photo{transition:filter .5s,transform .6s var(--ease)}
.tile:hover .fw .photo{transform:scale(1.04);filter:brightness(.6)}
.tile.active .fw .photo{filter:brightness(.3) contrast(1.05)}
.shead{transition:opacity .4s} .tile.active .shead{transition-delay:.85s}
.content{transition:opacity .45s .85s}
.top{transition:opacity .4s,max-height .5s var(--ease)}
.menu{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.tile,.fw,.fw .photo,.top,.content,.shead{transition:none!important}}